基于微信小程序的超市购物系统

基于微信小程序的超市购物系统Supermarketshoppingsystembasedonwechatapplet1绪论绪论1Introduction1.1课题背景和研究意义（BackgroundandSignificance）随着“新零售”观点的提出，网上购物早就不再局限于建立人和网络的联系，更在于建设线上线下的购物场景。微信小程序作为微信战略级别的产品，已经担任起了以社交为属性的电商角色，而它所提供的购物场景已经在全方位的辐射到我们的生活中，朋友之间的分享、二维码的铺设、公众号文章中的植入、优惠券各种活动的发起、社交立减金的使用……我们无时不刻都在通过微信这个巨大的流量入口接近微信小程序。因此，结合以上优势设计并实现基于微信小程序的商城系统，具有一定的研究意义和商业价值，符合我国互联网精准化营销和个性化服务的趋势。信息技术的发展、传统商务、电子商务在线上推广和用户购物体验等方面遇到了新的问题。利用微信的社交基因，微信小程序能覆盖的场景会越来越多，商家们终于不用每天焦虑怎么在淘宝上占据一个绝佳的位置，因为他完全可以开发一个自己的微信小程序，做自己的“专卖店”，而不必在淘宝这个“大商场”里和邻居“打架”。功能丰富，场景丰富的微信小程序是非常适合为人们生活中的需求服务，相对于原生态的APP无需下载,即走即用。微信小程序于2017年1月9日凌晨正式上线。，简称小程序，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。经过几年的发展，时至今日，微信小程序已经为越来越多的用户所认知，也在越来越多的领域发挥着作用。据2019年腾讯开发者大会上的数据显示，微信小程序的日活跃量已经达到3.8亿，交易额已经达到了8000多亿。本论文以便利店的购物方式为出发点，结合微信小程序技术，采用JAVA面向对象的开发方法，开发设计出方便快捷,无需下载安装,方便商户与消费者的微信小程序。1.2国内外研究状况(FeasibilityAnalysis)由于微信在国内十分火热，基本上包含各种年龄的人群，根据腾讯2018年一季报数据，微信及WeChat合并MAU达到10.4亿，超过2017年底我国7.53亿的手机网民规模，微信已实现对国内移动互联网用户的大面积覆盖。2017年微信登录人数已达9.02亿，较2016年增长17%，日均发送微信次数为380亿，微信已成为国内最大的移动流量平台之一。类似于基于微信小程序超市购物系统目前在国内的应用也很广泛，目前有很多类似的微信小程序超市购物系统，比如七天超市购物系统、网易优品超市购物系统等超市购物系统，因此这样的超市购物系统还是十分值得我们去推广并做进一步的研究，该超市购物系统应该具备商品浏览购买以及对后台对商品管理功能。1.3全文安排（Fulltextarrangement）本章主要对“基于微信小程序的超市购物系统”的课题的研究背景和国内外的研究状况进行分析。后面对整个程序设计和开发过程进行分析和讲述，主要包括从设计程序的开发技术和开发工具，当前的可行性分析和需求分析，系统总体和详细的分析，系统功能的测试和检验，结论，外文翻译，致谢。4系统详细设计4系统详细实现2开发技术与开发工具2Developmenttechnologyandtools2.1微信小程序（Wechatapplet）小程序”是一种无需安装，即可使用的手机“应用”。不需要像往常一样下载App，用户在微信中“用完即走”。它简单无需占用收集内存非常方便。小程序是基于微信平台的轻量级应用，它的开发是应用微信提供的小程序前端规范，结合企业自己开发的应用后端来制作。总体来说，也就是微信小程序在微信平台中只需要开发前端版本，而在后台等部分则由网站公司采用各种程序语言自行编写。微信小程序常见使用“MINA”框架，ApacheMinaServer是一个网络通信应用框架，也就是说，它主要是对基于TCP/IP、UDP/IP协议栈的通信框架，Mina可以帮助开发者快速开发高性能、高扩展性的网络通信应用，Mina提供了事件驱动、异步（Mina的异步IO默认使用的是JAVANIO作为底层支持）操作的编程模型。这个框架为微信小程序的运行提供了丰富的组件和API。微信小程序开发者要学会和掌握小程序的框架结构、数据绑定机制、模板、数据缓存、常用组件和API等相关知识。2.2java语言技术（Javalanguagetechnology） Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点。Java的开发环境主要是JDK。JDK全称是JavaDevelopmentToolKit，是Java语言的软件开发工具包，用于构建在Java平台上发布的应用程序、applet和组件的开发环境。“它是整个Java开发的核心部分，包含了大量的Java工具、基本类库（rt.jar）和运行环境（JavaRuntimeEnvironment）”。Java的众多特点使得它的应用范围也很广，比如：由于Java具有安全性，所以被广泛应用于金融行业，很多第三方交易系统、银行的前后台电子交易系统等都是用Java开发的；由于Java具有平台独立与可移植性让它可以被应用于嵌入式物联网领域。Java作为一种主流编程语言占到了很大份额。在嵌入式方面的发展更是迅速，现在流行的手机游戏，几乎都是应用Java语言开发的。可以说Java和人们的生活息息相关。2.3Maven工具（Maventools） Maven是Apache软件基金会组织维护的一款自动化构建工具，专注服务于Java平台的项目构建和依赖管理。Maven是一个用于项目构建的工具，通过它便捷的管理项目的生命周期。即项目的jar包依赖，开发，测试，发布打包，主要管理工作是:依赖管理,项目一键构建。使用maven构建的项目,整个项目的体积小。maven项目不需要手动导入jar包，通过在pom.xml中添加依赖，引用依赖会自动从maven仓库下载jar包，方便快捷。项目一键构建:使用maven可以快速地对项目进行编译--测试--运行--打包--安装。maven支持跨平台操作，可在window、linux、mac上使用。maven遵循规范开发有利于提高大型团队的开发效率，降低项目的维护成本，属于主流技术，一般公司都会使用maven来构建项目。2.4Spring+SpringMVC+MyBatis框架（Spring+springmvc+mybatisframework）2.4.1Spring简介 Spring是一个开源框架，Spring是于2003年兴起的一个轻量级的Java开发框架，由RodJohnson在其著作ExpertOne-On-OneJ2EEDevelopmentandDesign中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。Spring使用基本的JavaBean来完成以前只可能由EJB完成的事情。然而，Spring的用途不仅限于服务器端的开发。从简单性、可测试性和松耦合的角度而言，任何Java应用都可以从Spring中受益。简单来说，Spring是一个轻量级的控制反转（IoC）和面向切面（AOP）的容器框架。2.4.2SpringMVC简介 SpringMVC属于SpringFramework的后续产品，已经融合在SpringWebFlow里面，它原生支持的Spring特性，让开发变得非常简单规范。SpringMVC分离了控制器、模型对象、分派器以及处理程序对象的角色，这种分离让它们更容易进行定制。2.4.3Mybatis简介 MyBatis本是apache的一个开源项目iBatis,2010年这个项目由apachesoftwarefoundation迁移到了googlecode，并且改名为MyBatis。MyBatis是一个基于Java的持久层框架。iBATIS提供的持久层框架包括SQLMaps和DataAccessObjects（DAO）MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及结果集的检索。MyBatis使用简单的XML或注解用于配置和原始映射，将接口和Java的POJOs（PlainOldJavaObjects，普通的Java对象）映射成数据库中的记录。可以这么理解，MyBatis是一个用来帮你管理数据增删改查的框架。2.5开发工具介绍（IntroductionofJavatechnologydevelopmenttools）对于开发人员来说，选择一个既支持控件技术又适合自己的编译器是至关重要的，它在很大程度上能提高开发效率。2.5.1IDEA简介后端编译器为IntelliJIDEA。它可以自动感知错误代码并提出简单的修复建议，可以灵活的添加或删除插件的管理功能、代码自动提示与重构功能、各类版本工具（Git、SVN）、JUnit、CVS的整合功能以及多种形式的导航功能，直观简洁的GUI，灵巧的编辑功能，强大的集成功能以及XML的支持；此外，“它同样支持重定向技术”[12]。在业界被公认为最好的Java开发工具之一。2.5.2微信开发者工具简介本系统前端编译器为微信开发者工具。微信为开发者提供了微信开发者工具和其他的开发工具都差不多，集成了开发调试，代码编辑和程序发布等功能。代码编辑器支持四中文件的编辑，分别是wxml、wxss、js和json文件。调试工具部分顶部的菜单Console、Sources、Network、Storage、APPDate、Wxml。Console：控制台，可以直接在这里输入代码调试，另外可以显示小程序的错误输出，Sources：源文件调试，用来显示当前项目的脚本文件，Network：网络调试，用来显示各个元素请求信息和网络相关信息。Storage：数据存储，用来显示当前项目使用存储API借口的数据存储情况，以key、value显示。AppData：调试显示当前项目的应用具体数据。Wxml：帮助开发者调试Wxml转化后的界面。2.4.3Mysql简介MySQL是一个全球流行的数据库，也是一个可以处理数据库的管理系统（RDBMS）。phpMyAdmin是用于管理MySQL的软件，SQL是一种用于操作关系数据库的语言，也有是一种结构化查询语言，每个RDBMS都有许多不同的语法部分。MySQL支持当前的SQL标准，此外，MySQL以各种SQL模式运行，例如ANSI，STRICTTRANSTABLES，TRADITIONAL。值得注意的是，MySQL使用了几个扩展来增强SQLServer标准。MySQL可以把数据保存在不同的表中，而不是将数据放在一个大仓库中可以运行于多个系统上，并且支持多种编程语言，包括C、C++、Python、Java、Perl、PHP、Ruby等，可以搭配JAVA和Apachetomcat组成良好的开发环境。3可行性分析与需求分析3Feasibilityanalysisanddemandanalysis3.1可行性分析（FunctionalAnalysis）3.1.1经济可行性 相对于传统的商城APP，微信小程序无需下载，即用即走，用户基数大，随时随地都可以在附件的商店通过网络进行购物。商户可以节省实体店的装修费用和投资，只需在管理网站进行及时商品管理利用快递服务，便可以卖出商品，推动了自身发展和快递业经济，方便了用户。3.1.2技术可行性 本次毕业设计采用iDEA编辑器，Spring+SpringMVC+Mybatis框架技术，微信开发者工具，使用MySQL数据库，编程使用java语言，这些技术已经非常成熟。而微信小程序的开发已经成为当前一个热门的主流技术，微信开发者工具也同时不断发展和更新，java语言的安全性，可移植性也为本系统打下了基础，并且以上所提到的技术是免费。3.1.3操作可行性本系统以微信小程序为前端，用户即走即用，方便快捷，让用户的购买方法更加丰富，使用户的购物体验更加舒适。后台管理员界面使用jsp技术，页面简洁，操作简单方便，随时可以更新商品信息和查看修改订单和用户信息，使管理员的操作体验更加轻松。3.2需求分析（FunctionalAnalysis）为了更好理解和设计比较好的软件，我们需要对其进行详细和全面的需求分析，来呈现次成品的效果。以下从业务需求，用户需求和功能模块需求三个方面对本系统进行全面的需求分析。3.2.1业务需求 基于微信小程序的超市购物系统有不同的角色操作，并且将系统分为微信小程序的客户端和后台管理端，这样分开功能明确，方便快捷，管理性强。微信小程序超市购物系统的主要工作流程为：启动服务器并进入系统界面，用户可以浏览小程序，挑选自己喜欢的商品，管理员可以管理整个系统，对所售商品进行添加、修改和删除，还可以处理客户订单，以及对商品销量进行查看管理、查看留言。用户在该超市购物系统中的业务流程图如图3.2-1所示。表3.2-1业务流程图名称简述用户登录系统用户可以直接登录小程序,直接查看与购物商品浏览或搜索商品用户可以在搜索栏中直接搜索自己需要的商品,并且看到当前该商品的实际情况,或者通过当前页浏览推荐商品并查看详情添加购物车用户将自己需要购买的商品选中放进购物车中,可在购物车中看商品的价格与数量信息,也可以直接删除购物车中的商品用户反馈收集用户对该商品的反馈意见,及时记录并在管理后台中3.2.2用户需求基于微信小程序的超市购物系统的开发需求是以小程序超市购物系统为平台，将前台微信小程序用户模块和后台管理的管理员模块的以不同需求体现出来，且不同的角色拥有不同的贴合自身的功能。3.3功能模块需求分析根据相对应需求分析，将进行详尽的分析和设计，通过开发一个基于微信小程序的超市购物系统，方便便捷消费者日常购物的需求,用户只需在小程序中选择自己喜欢的商品下单,管理者通过后台系统的管理对商品及时的更新和用户订单信息及时的查看,有效地节约了人力物力。根据要求主要包括以下几个模块：(1)用户模块主要包括用户登陆该超市购物系统、注册个人信息，可以对自己的个人信息进行更新。(2)管理员模块主要包括登录后台管理系统，注册个人信息，管理普通管理员信息，商品管理，用户管理，订单管理和平用户反馈管理。(3)小程序超市购物首页模块用户进入小程序后，可以浏览商品列表，可以浏览商品的详细信息，可以直接查看在轮播图中的热销商品的信息或加入购物车，可以在搜索栏中直接搜索或查询自己喜欢的商品，只要在搜索栏中输入商品的名称或者是与商品相关的信息，便可以搜索出自己想要的商品，更加方便了用户购物体验。(4)购物车管理模块主要包括对对购物车里的商品进行查看它的数量和价格，也可以对商品的数量进行调整，删除自己不想买的或者添加的商品，显示出已选择商品的总价格，最终确认订单信息后进行下订单。(5)商品管理模块主要包括在后台管理中对商品的信息进行修改，如价格，图片，简介等信息，并可以将其设置热门商品，在页面中的轮播图模块进行展示。(6)订单管理模块主要包括用户对自己想要的商品进行购买并确认订单信息且下单，用户拿到商品后，可以确认订单信息并且对商品进行评价，当用户对此商品不满意或者商品质量本身出现问题时，可以随时商家进行反馈并可以对次商品提出退货。(7)收藏夹模块主要包括可以对自己喜欢的商品进行收藏，可以对收藏中的商品提交到购物车进行购买或者将其删除。(8)信息反馈管理模块主要包括管理员对用户对商品的做出的反馈和评价并且对其回复留言，管理员也可以对一些言论进行删除或修改。 如功能模块图如图3.1所示。前台页面主要功能包括：商品分类：当用户第一次访问该商城时，可以按照商品分类快速查找到自己所需商品是属于哪一类型；2.商品描述:当用户看到某一商品时,可以查看该商品情况的详细介绍。3.购物车：该功能也是一个购物网站必须的功能，用户不可能看中一件商品就去付一次款，用户可以先将看中的商品加入购物车中，等挑选结束后，再进行统一付款。4.查看订单：该功能主要是方便用户查看自己的订单，当用户下一次单时，商家可以受理此订单并进行发货，用户收到货后，可以确认收货并评价商品。后台管理页面的功能主要包括：系统参数：该功能可以使管理员看到该商城系统的版本号和作者及作者的邮箱，有需要改进的地方可以直接和作者联系。管理员维护：该功能可以让管理员对自己的密码进行修改。订单管理：当某一用户在前台下单后，管理员在后台可以查看订单明细，受理此订单或删除该订单，方便管理员对订单的管理。留言公告管理：管理员在后台可以查看或删除用户的留言，发布最新的公告或删除过期的公告。退出后台：该功能主要是方便管理员的退出，当管理员想退出后台管理页面时，点击此按钮，可以迅速返回到后台的登录页面。前台管理模块用例模型如图3-2-1所示：前台管理用例说明如表3-2-1所示：用例前台管理活动者管理员目的对用户信息进行查询,及时更新商品信息简述查询用户的信息,订单信息,反馈信息,及时添加或删除商品信息后台管理子模块用例模型如图3-2-2所示：图3-2-1后台管理子用例图后台管理用例说明如表3-2-2所示：用例后台管理活动者管理员目的对用户信息进行查询,及时更新商品信息简述查询用户的信息,订单信息,反馈信息,及时添加或删除商品信息4系统总体设计4Systemoveralldesign4.1数据库E-R图图4.1管理员与商品的E-R图图4-1管理员与商品的E-R图管理员实体的属性图图4-2管理员实体的E-R图商品的E-R图图4-3商品的E-R图商品订单的E-R图图4-4商品订单的E-R图用户登录E-R图图4-5用户登录的E-R图用户收藏E-R图图4-6用户登录的E-R图用户收货信息E-R图图4-6用户收货信息的E-R图4.2数据流图 顶层数据流图如图4-2所示：顶层数据流图4-24.3数据字典4.3.1系统功能设计（FunctionalModuleDesign）“功能设计就是按照系统定位的初步要求，在对需求及现有产品进行功能调查分析的基础上，对系统所应具备的目标功能系统进行概念性的构建活动”[16]。功能设计是功能创新和系统设计的早期工作，也是系统成熟与否的重要依据。4.3.2数据库设计（DatabaseDesign）“数据库设计是指对于一个给定的应用环境，构造（设计）优化的数据库逻辑模式和物理结构，并据此建立数据库及其应用系统，使之能够有效的存储和管理数据，以满足各种用户的应用需求”[16]。数据库的概念结构设计 概念结构设计是整个数据库设计的关键，它通过对用户需求进行综合，归纳与抽象，形成了一个独立于具体DBMS的概念模型。设计概念结构通常有四类方法：自顶向下。即首先定义全局概念结构的框架，再逐步细化。自底向上。即首先定义各局部应用的概念结构，然后再将他们集成起来，得到全局概念结构。逐步扩张。首先定义最重要的核心概念结构，然后向外扩张，以滚雪球的方式逐步生成其他的概念结构，直至总体概念结构。混合策略。即自顶向下和自底向上相结合数据库的逻辑结构设计根据相关的需求分析和系统设计,在数据库中设计相关数据类型和数据结构,数据库表中相对应的数据关系模型用户实体对应的关系模式用户（用户id，用户名，密码，电话）商品实体对应的关系模式商品（商品id，图片，价格，标题，反馈，分类，类型，状态）角色实体对应的关系模式角色（角色id，角色名）分类实体对应的关系模式分类（分类id，分类名）购物车实体对应的关系模式购物车（商品id，价格，用户序号，选择序号,购物车序号）数据库表的设计在分析完E-R图并转换成系统的关系模式后，下面应根据关系模式创建数据库和基本表。“在设计数据库表的时候需要满足系统中的实际需要，也就是某些模块中需要为其设计多张表，能够提高数据库的运行效率，更方便系统与数据库之间的交互”[18]。本系统数据库名称为wxshop。用户基本表表3-1用户基本表序号字段名称字段类型是否为主键是否为空描述1idvarchar（255）是否用户表主键2usernamevarchar（255）否否用户名3passwordvarchar（255）否否用户密码4addressvarchar（255）否否用户地址5Telvarchar（255）否是用户电话商品基本表表3-2商品基本表序号字段名称字段类型是否为主键是否为空描述1idvarchar（255）是否商品表主键2Namevarchar（255）否否商品价格3Pricedouble（255）否否商品摘要4titlevarchar（255）否否商品简介5url1varchar（255）否否图片路径16url2varchar（255)否否图片路径27url3varchar（255）否否图片路径38ppIdint（11）否否商品品牌编号角色基本表表3-3角色基本表序号字段名称字段类型是否为主键是否为空描述1idvarchar（255）是否角色表主键2namevarchar（255）否否角色名称分类基本表表3-4分类基本表序号字段名称字段类型是否为主键是否为空描述1idvarchar（255）是否分类表主键2isDeleteint(11)否否商品标签3namevarchar（255）否否角色名称地址基本表表3-5地址基本表序号字段名称字段类型是否为主键是否为空描述1idvarchar（255）是否单位表主键2namevarchar（255）否否角色名称3Phonevarchar（255）否否电话号码4ContentText（0）否否用户地址5AddtimeDatetime否否添加时间购物车基本表表3-6购物车基本表序号字段名称字段类型是否为主键是否为空描述1idint（11）是否编辑表主键2pricedoubler（0）否否商品价格3goodidint（11）否否商品序号4Useridint（11）否否用户id5Selectint（11）否否选择序号管理员基本表表3-7管理员基本表序号字段名称字段类型是否为主键是否为空描述1idvarchar（255）是否管理员表主键2usernamevarchar（255）否否用户名3passwordvarchar（255）否否密码4identityvarchar（255）否否身份id5系统功能实现5SystemFunctionRealization5.1包结构设计（PackageStructureDesign）在数据库设计完成后，下面应创建项目并设计目录结构。根据微信开发者工具中固定的包结构,本项目将图片资源放在images包中,将页面布局文件放在pages包中,并配置本项目的配置文件。5.1.1前端包结构设计前端包结构截图如图5-1-1所示，该截图充分展示了各页面组件的存放位置。系统页面内容：data包存放的是与后端进行交互的url接口，pages包存放的页面布局文件。Templates包放置的是能共用的组件：utils包存放的是工具包，images包存放的是页面布局图片资源。以及微信开发者工具本身自带的json文件和系统配置的文件。图5-1-1前端包结构5.1.2后端包结构设计后端包结构截图如图5-1-2所示。Po包放置的是后端所有实体类，mapper包存放的是数据库的交互逻辑，utils包存放的是工具类。，controller，service，dto三个包分别是是接受前端请求控制，管理书写控制代码，和在数据库中查找数据的包，mybatis包是存放mybais框架数据和控制管理数据查询更新的包，webroot是前后端分离的存放后台管理页面布局资源的包，以及springMVC框架的配置文件，和maven在项目中的配置文件。图4-2后端包结构5.2小程序超市购物页面模块用户登录小程序后,展示商品信息,轮播推荐商品,并显示搜索栏,分类,购物车,个人信息等功能按钮，用户可以选择自己喜欢的商品，点击某一商品即会弹出相对于的商品信息，用户可以查看商品价格和评价等信息，可以加入购物车进行购买。图5-1主页面实现效果图关键代码：

<swiper-item>

<scroll-view

scroll-y="true"

class="scroll-box">

<view

class="list-view"

>

<view

class="list-box"

wx:for="{{listgoods}}"

wx:for-item="list"

wx:key="index"

data-id="{{list.id}}"

bindtap="lookdetail">

<view

class="list-images"

><image

src="{{list.url1}}"

/></view>

<view

class="list-text">

<text

class="name">{{list.title}}</text>

<view

class="txt">

<text

class="price">￥{{list.price}}</text>

<text

class="type">{{list.type}}</text>

</view>

</view>

</view>

</view>

</scroll-view>

</swiper-item>5.1.1商品分类模块对商品信息进行分类，管理员方便管理商品，有利于用户更快的挑选自己需要的商品，该商城的商品主要分为以下五类，点击每一类，都可以查看这个类中的所有商品，如图5-2所示。图5-1-1商品分类实现效果图关键代码：<view

class="sidebar"

style="height:

{{sidebarHeight}}px;">

<text

wx:for="{{topCategories}}"

wx:key="objectId"

bindtap="tapTopCategory"

data-object-id="{{item.objectId}}"

data-index="{{index}}"

class="{{highlight[index]}}">{{item.title}}</text>

</view>

<!--

right

-->

<view

class="main">

<!--

banner

-->

<image

class="banner"

src="{{banner}}"

mode="widthFix"

bindtap="showGoods"/>

<!--

GridView

-->

<view

class="gridview">

<dl

wx:for="{{subCategories}}"

wx:key="objectId">

<dt>

<image

src="{{item.avatar.attributes.url}}"

mode="scaleToFit"

bindtap="avatarTap"

data-object-id="{{item.objectId}}"

style="width:{{imageWidth}}px;

height:

{{imageWidth}}px;"/>

</dt>

<dd>

<text>{{item.title}}</text>

</dd>

</dl>

</view>

</view>5.1.2商品信息展示模块对商品价格,图片,商品简介等信息展示图5-1-2商品信息展示实现效果图关键代码：/***查询用户购物车列表*@paramcar*@parammodel*@paramrequest*@paramresponse*@return*/@RequestMapping(value="/userList",method=RequestMethod.POST,produces="text/html;charset=UTF-8")@ResponseBodypublicStringuserList(Carcar1,Modelmodel,HttpServletRequestrequest,HttpServletResponseresponse){JSONObjectjsonObject=newJSONObject();List<CarGoods>gg=newArrayList<CarGoods>();Carc=newCar();c.setUserId(car1.getUserId());List<Car>pagers=carService.listAllByEntity(c);if(!isEmpty(pagers)){for(Carcar:pagers){CarGoodsg=newCarGoods();g.setCarId(car.getId());g.setNum(car.getNum());if(car.getSelected()==0){g.setSelected(false);}if(car.getSelected()==1){g.setSelected(true);}g.setGoods(car.getGoods());gg.add(g);}}}5.1.3购物车信息管理模块显示用户加入购物车中的商品,并结算所选择的商品的总金额,增加或减少商品的数量图5-13购物车实现效果图关键代码：<view

class="container

carts-list">

<view

wx:for="{{carts}}"

class="carts-container"

wx:key="index"

bindtap="showGoods"

data-object-id="{{item.goods.id}}">

<view

class="carts-item"

style="left:

{{itemLefts[index]}}px;"

data-index="{{index}}"

bindtouchstart="touchStart"

bindtouchmove="touchMove"

bindtouchend="touchEnd">

<!--

复选框图标

-->

<icon

type="{{item.selected

?

'success_circle'

:

'circle'}}"

size="20"

catchtap="bindCheckbox"

data-index="{{index}}"/>

<view>

<!--

缩略图

-->

<image

class="carts-image"

src="{{item.goods.url1}}"

mode="aspectFill"/>

</view>

<view

class="carts-text">

<!--

商品标题

-->

<text

class="carts-title">{{item.goods.title}}</text>

<view

class="carts-subtitle">

<!--

价格

-->

<text

class="carts-price">{{item.goods.price}}</text>

<!--

数量加减

-->

<view>

<view

class="stepper">

<!--

减号

-->

<text

class="{{minusStatuses[index]}}"

data-index="{{index}}"

catchtap="bindMinus">-</text>

<!--

数值

-->

<input

type="number"

data-index="{{index}}"

catchchange="bindManual"

catchtap="bindManualTapped"

value="{{item.num}}"

/>

<!--

加号

-->

<text

class="normal"

data-index="{{index}}"

catchtap="bindPlus">+</text>

</view>

</view>

</view>

</view>

</view>

<button

type="warn"

class="delete-button"

catchtap="delete"

data-object-id="{{item.carId}}">删除</button>

</view></view>5.1.3个人信息管理模块展示用户当前购买商品的状态,包含代发货,已发货,已收货,已退款等,用户可以修改自己的收货地址,以及查看用户反馈等信息图5-13个人信息实现效果图 关键代码：<view

class="order-area">

<view

bindtap="navigateToOrder"

class="order"

data-status="0">

<image

src="../../../images/icon_order.png"

/>

<text>待发货</text>

</view>

<view

bindtap="navigateToOrder"

class="order"

data-status="1">

<image

src="../../../images/icon_order.png"

/>

<text>已发货</text>

</view>

<view

bindtap="navigateToOrder"

class="order"

data-status="2">

<image

src="../../../images/icon_order.png"

/>

<text>退款中</text>

</view>

<view

bindtap="navigateToOrder"

class="order"

data-status="3">

<image

src="../../../images/icon_order.png"

/>

<text>已退款</text>

</view>

<view

bindtap="navigateToOrder"

class="order"

data-status="4">

<image

src="../../../images/icon_order.png"

/>

<text>已收货</text>

</view>

<!--

订单状态

0

已支付待发货

1

已发货

2.申请退款

3

已退款

4

已收货

5

已评价

--></view><view

bindtap="navigateToAddress"

class="tableviewcell">

<image

src="../../../images/icon_address.png"

/>

<text>收货地址</text></view><view

bindtap="navigateToMessage"

class="tableviewcell

tableviewcell2">

<image

src="../../../images/fk.png"

/>

<text>用户反馈</text></view><view

bindtap="navigateToSC"

class="tableviewcell

tableviewcell2">

<image

src="../../../images/wdsc.png"

/>

<text>我的收藏</text></view>5.3管理员后台管理页面模块管理员登录页面图5-2管理员登录实现效果图关键代码：/***管理员登陆*@parammanage*@paramrequest*@paramresponse*@return*/@RequestMapping("/toLogin")@ResponseBodypublicStringtoLogin(Managemanage,HttpServletRequestrequest,HttpServletResponseresponse){ManagebyEntity=manageService.getByEntity(manage);JSONObjectjsonObject=newJSONObject();if(byEntity==null){jsonObject.put("res",0);}else{request.getSession().setAttribute("role",byEntity.getType());request.getSession().setAttribute("mid",byEntity.getId());request.getSession().setAttribute("xm",byEntity.getRealName());jsonObject.put("res",1);}returnjsonObject.toString();}5.3.1后台商品管理页面模块管理员可以修改或删除商品的属性,如价格,图片商品描述等,也可以增加新的商品,并可以设置小程序的中推荐的热门商品,并在可以在轮播图中展示。用户可以直接查看并加入购物车中。图5-2-1后台商品管理实现效果图关键代码：/***管理员登陆*@parammanage*@paramrequest*@paramresponse*@return*/@RequestMapping("/toLogin")@ResponseBodypublicStringtoLogin(Managemanage,HttpServletRequestrequest,HttpServletResponseresponse){ManagebyEntity=manageService.getByEntity(manage);JSONObjectjsonObject=newJSONObject();if(byEntity==null){jsonObject.put("res",0);}else{request.getSession().setAttribute("role",byEntity.getType());request.getSession().setAttribute("mid",byEntity.getId());request.getSession().setAttribute("xm",byEntity.getRealName());jsonObject.put("res",1);}returnjsonObject.toString();}5.3.2后台商品订单管理页面模块管理员可以直接通过搜索栏查询订单,并显示当前商品的状态图5-2-2后台商品订单管理实现效果图 关键代码:/***查询用户订单*@paramdd*@parammodel*@paramrequest*@paramresponse*@return*/@RequestMapping(value="/userList",method=RequestMethod.POST,produces="text/html;charset=UTF-8")@ResponseBodypublicStringuserList(Dddd,Modelmodel,HttpServletRequestrequest,HttpServletResponseresponse){JSONObjectjsonObject=newJSONObject();Stringpath=request.getContextPath();path="";StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"";List<DdDto>dds=newArrayList<DdDto>();Map<String,Object>alias=newHashMap<String,Object>();StringBuffersb=newStringBuffer();Ddin=newDd();if(dd.getStatus()!=-1){//sb=sb.append("fromDdwhere1=1anduser.id="+userId+"andstatus="+dd.getStatus());in.setUserId(dd.getUserId());in.setStatus(dd.getStatus());}else{in.setUserId(dd.getUserId());//sb=sb.append("fromDdwhere1=1anduser.id="+userId);}List<Dd>pagers=ddService.listAllByEntity(in);if(!isEmpty(pagers)){for(Ddd:pagers){DdDtodo2=newDdDto();Stringstring=basePath+d.getGoods().getUrl1();StringreplaceAll;try{replaceAll=string.replaceAll("\\\\","/").replaceAll("shop","");do2.setPpUrl(replaceAll);do2.setCode(d.getCode());do2.setDdId(d.getId());do2.setDj(String.valueOf(d.getGoods().getPrice()));do2.setPrice(String.valueOf(d.getPrice()));do2.setTitle(d.getGoods().getTitle());do2.setAddress(d.getAddress());do2.setName(d.getName());do2.setPhone(d.getPhone());do2.setNum(d.getNum());do2.setStatus(d.getStatus());do2.setId(d.getId());do2.setSpId(d.getGoods().getId());5.3.3后台商品订单管理页面模块管理员可以对商品进行分类，可以添加商品分类，更改分类名称，或者删除分类名称关键代码：/***跳至添加页面*@return*/@RequestMapping(value="/add")publicStringadd(){return"manage/add";}/***添加执行*@return*/@RequestMapping(value="/exAdd")publicStringexAdd(Managemanage,Modelmodel,HttpServletRequestrequest,HttpServletResponseresponse){manage.setType(2);manageService.insert(manage);return"redirect:/manage/findBySql";}/***跳至修改页面*@return*/@RequestMapping(value="/update")publicStringupdate(Integerid,Modelmodel){Manageobj=manageService.load(id);model.addAttribute("obj",obj);return"manage/update";}/***添加修改*@return*/@RequestMapping(value="/exUpdate")publicStringexUpdate(Managemanage,Modelmodel,HttpServletRequestrequest,HttpServletResponseresponse){manageService.updateById(manage);return"redirect:/manage/findBySql";}/***删除通过主键*@return*/@RequestMapping(value="/delete")publicStringdelete(Integerid,Modelmodel,HttpServletRequestrequest,HttpServletResponseresponse){manageService.deleteById(id);return"redirect:/manage/findBySql";}6系统测试6SystemTest6.1程序调试（Programdebugging） 程序调试是指在程序调试阶段依照逐个模块的功能进行依次调试，直到当前程序模块的功能已经成功实现，然后再进行下一个模块的调试。这个方法因为关注的重点仅限于本模块，输入输出数量不多，相对来说比较简单，查找问题和修改也比较轻松，解决问题一般也会比较轻松。例如，有一个程序模块实现了数值计算功能，那么我们在调试的时候就只测试这个数值计算功能，看看给定输入的时候程序是否能够输出正常，正常表示成功，不正常就继续修改它直到成功。有些时候调试的输出结果可能没法直接给调试人员呈现出来，这个时候可以简单另外增加几行代码或者利用其他输出显示的器件将结果显示出来，用以方便调试。假如有依赖于其他程序模块，也可以几个模块一起进行联合调试，但是不建议引入太多的模块，因为这会给修改造成麻烦。模块化编程调试的方法，类似于盖高楼大厦的过程，先把底层的楼盖好后再盖上层，这样才能一层楼一层楼地把大楼建起来，软件的一个一个小模块的小目标逐个成功地实现，会让开发者更加有获得感，感觉自己的努力是没有白费的，工作起来也就越来越有劲。模块化调试因为是依次成功的过程，前面的模块已经成功，后端的其他模块也无关紧要，只关注与模块的本身以及周围相关的部分，输入输出比较简单，这就简化了查找和消除程序BUG的过程，程序调试也会比较简单。6.2测试方法（Thetestmethod）软件测试是为了保证软件的可靠性而存在的，保证软件的开发符合预期的目标。软件测试是软件开发全过程的重要组成部分，即在软件开发过程中，为了发现软件程序中的bug而执行的重要环节。根据软件开发每个阶段每个环节的规范严谨和程序完整的内部结构，精心设计一批测试用例运用在程序的调试当中，查找程序bug的过程。通常有两种测试方法，分别的黑盒测试和白盒测试。白盒测试：又称结构测试或者逻辑驱动测试。白盒测试是把测试对象看作一个打开的盒子。利用白盒测试法进行动态测试时，需要测试软件产品的内部结构和处理过程，不需测试软件产品的功能。白盒测试法的覆盖标准有逻辑覆盖、循环覆盖和基本路径测试。其中逻辑覆盖包括语句覆盖、判定覆盖、条件覆盖、判定/条件覆盖、条件组合覆盖和路径覆盖。白盒测试是知道产品内部工作过程，可通过测试来检测产品内部动作是否按照规格说明书的规定正常进行，按照程序内部的结构测试程序，检验程序中的每条通路是否都有能按预定要求正确工作，而不顾它的功能，白盒测试的主要方法有逻辑驱动、基路测试等，主要用于软件验证。黑盒测试:又称功能测试或者数据驱动测试。黑盒测试是根据软件的规格对软件进行的测试，这类测试不考虑软件内部的运作原理，因此软件对用户来说就像一个黑盒子。软件测试人员以用户的角度，通过各种输入和观察软件的各种输出结果来发现软件存在的缺陷，而不关心程序具体如何实现的一种软件测试方法。黑盒测试主要有以下几种方法:等价划分、边界值分析,猜错了,因果图方法。该系统的测试综合了白盒测试和黑盒测试两种方法，但主要使用的还是黑盒测试方法。之后的测试“尽可能早和测试”,“保证测试用例的完整性和有效性”原则。通过测试达到以下测试目的：确定问题：根据性能分析的结果