《基于微信小程序的商城App的设计与实现.docx》由会员分享，可在线阅读，更多相关《基于微信小程序的商城App的设计与实现.docx（41页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、本科毕业设计（论文）基于微信小程序的商城App的设计与实现Design and implementation of mall app based on wechat applet院（系）计算机学院专业软件工程班级软件工程 6 班学号16210120603学生姓名黄子豪指导教师 麦日升提交日期 2020 年 04 月 14 日摘要2020年由于新冠状病毒疫情，举国上下宅家避难，线下商铺苦不堪言，无数线下商铺遭受打击，而电子商务、网购成为了热门。我们中的很大一部分人为了解决不出门添乱还有生命安全这些因素都相应的选择了在网上购物，一些生活的必需品都已经在网上购买。基于微信小程序的商城App系统易懂易
2、操作，结合了大数据的分析，很多人都可以买到自己所需要的东西，也可以快速的找到自己想要的东西。线上随时随地浏览，不用出门也能实现物品快递到家，也是我们网上购物的魅力所在。同时本系统也解决了多数线下商铺无线上销售的难点，提供便捷的线上销售平台。1基于微信小程序的商城App系统是以解决线下商铺进行线上销售为目的的论文。通过微信小程序自带的开发语言以及开发工具实现前台的各个页面展示，用ssm框架、java语言、数据库搭建后台存储数据。关键词：微信小程序 网上 浏览 Java MysqlAbstractIn 2020, as a result of the new coronavirus epidemi
3、c, the whole country took refuge at home and abroad, and the offline shops suffered a lot, countless offline shops were hit, and e-commerce and online shopping became popular. A large part of us choose to shop online in order to solve the problems of not going out, adding chaos and life safety. Some
4、 necessities of life have been purchased online. The mall app system based on wechat applet is easy to understand and operate. Combined with the analysis of big data, many people can buy what they need and quickly find what they want. Browsing online anytime, anywhere, without going out, we can expr
5、ess the goods to home, which is also the charm of our online shopping. At the same time, the system also solves the difficulties of wireless sales of most offline stores, and provides a convenient online sales platform .The app system of the mall based on wechat applet is a paper aiming to solve the
6、 problem of online sales of offline shops. Through the development language and development tools of wechat applet, we can realize the display of each page in the foreground, and use the SSM framework, Java language and database to build the background to store data. Key words：WeChat applet Online B
7、rowse Java Mysql目录第一章 绪论11.1 开发背景11.2 课题意义11.3 网上购物发展前景21.4 小程序设计思想3第二章 系统分析42.1 可行性分析42.1.1 技术可行性42.1.2 操作可行性62.1.3 法律可行性62.2 系统需求分析62.2.1 UML用例分析7第三章 系统设计133.1 系统总体设计133.2 系统功能模块设计143.2.1 前端功能模块设计143.2.2 后端功能模块设计143.3 数据库设计143.3.1 数据库概念结构设计143.2.2 数据库的逻辑结构设计173.4 界面设计20第四章 系统实现244.1 用户登录模块244.2 主页
8、界面模块244.3 分类功能模块254.4 购物车功能模块264.5 订单功能模块274.6 我的页面模块29第五章 系统测试315.1 测试过程315.2 测试环境描述315.3 测试用例315.4 测试设计评估及改进32总结34参考文献35致谢36广东东软学院本科毕业设计（论文）第一章 绪论1.1 开发背景2020年是我国全面建设小康社会的决胜年，但今年的疫情情况却严重影响着人们的日常生活，经济大受影响，但俗话说有“危”就有“机”，在全民待家避难的情况下，紧接而来的是医药业和互联网相关行业的崛起，而网购就是这得益者之一。早在多年之前，网上购物的购物模式已经进入人们的生活，现在的人们总在想方
9、设法的让人类活的更加舒适和方便，不断开发便捷人类生活的产品。也就是因为时代的变化，人们的购物理念也在发生变化。前十年还在热闹的街市购物、吃喝玩乐，到现在更多的人选择不出门便能购物商品到家的网购模式。一切源于电商新零售模式的冲击，传统实体店因需顾客亲临身处而导致很多不能避免的因素，例如某些商品只在某个地区售卖，快递水平也暂未跟上，消费者与商家之间的信任度还很低，这些种种因素都催生了互联网网购平台的诞生。现在很多人都已经是低头族了，不管在干什么都是拿着手机，根据不完全调查显示，百分之八十的女性都是用手机来框逛淘宝等商品app，男生用手机来打游戏看直播这些，可见，手机不仅仅是从前般仅用来打电话发短信
10、，还可以开展更多的娱乐、生活服务，而它的广泛性甚至已经延续到了比较偏僻地方的乡村道路之间，所以我们要了解这种趋势和运用这种趋势，用网就要学会如何去买卖东西，传播到更大的平台。网上购物的模式带来的方便之处无不在于它的便捷，加之如今的信任度完善体系的不断加强，顾客不再小心翼翼，而是更加放宽心的去购物，根据每一个产品的销售数量或者是每个产品的详情、用户评价等信息判断产品的真实性，更有店铺的评星等级作为可信度的另一种凭信。以至于现在的人们，热爱于货比三家但不出门，在家通过大数据信息的集合进行商品真实性和质量的判断。而网购平台的优化和活动力度也在逐年增加，例如淘宝的双十一节日，极大程度在近几年促进了电商
11、贸易的发展，刺激老百姓的消费，也让老百姓买到货真价实和优惠力度大的产品。也因有了购物平台的鹏发发展，快递行业也相应茁壮成长，快递不再是拿到手可能要十天半个月，不再是产品经过货运变得瑕疵众多，其速度和服务质量的大幅度提升也让网购更加深入人心。使现在的人们放心网上购物，促进网上购物的消费力度。1.2 课题意义在这样的信息时代背景下，带来的是相关便捷的软件开发。例如手机上各种类型的APP应用软件，商城、游戏、书籍、交通、健康相关的APP快速被开发在我们的视野当中。而基于微信的小程序的出现更是极大的便捷了用户使用互联网。微信已经融入绝大多数中国人的生活，从以前的QQ转到方便交谈和分享生活状态的微信，据
12、相关统计微信活跃用户量已超12亿人次，可见小程序的开发以及小程序的潜在客户量的庞大。基于微信小程序的商城App系统本着解决线下商铺线上销售问题而开发设计，想要设计出一款能够解决当下新冠状病毒疫情还在不能营业的线下商铺危机，提供一款简单易操作的线上商城小程序，方便商家上架线下商铺商品，进行线上线下双线新零售的模式，帮助商家提高销售额设计引流方案。基于微信小程序的商城App系统采用的是微信小程序开发工具作为小程序前端界面和交互的设计，利用ssm框架、java语言设计系统后台管理商品等信息2，工具提供了简洁的微信小程序样式以及相关的封装组件，使得小程序开发更为方便快捷。网上购物，虚拟销售，和传统的实
13、体店不一样，不需要大量资金成本的投入和日常店铺的维护，省下来的钱都反馈到买家和卖家身上，物美价廉、种类繁多，会更受消费者的青睐。1.3 网上购物发展前景在信息高速发展之下，微信已经成为人们形影不离的日常工具了，小程序购物已经是司空见惯了，比如淘宝、美团小程序等等。小程序网上购物商城比传统手机应用更加容易操作和开发，不需要下载和更新，而且没有实体店重资产的经营，不仅可以做到价格实惠，而且可以物流快捷直接送到家门。2020年受疫情的影响，人们都没法出门群聚，由于人们对疫情的恐慌，造成人们不敢出街，很多购物都是在互联网完成，尤其是最近因为疫情爆火的新零售新电商。超市都开发了属于自己的超市小程序商城，
14、也有医药店开发小程序，进行药品下单，三十分钟总到家。通过这一行情，互联网微信小程序商城已经被广大群众所接受，基本人们都熟悉小程序商城了，所以推广起来丝毫不费力气。微信用户粘度很高，几乎人人手机都会打开着微信，方便我们的日常沟通和生活，所以微信商城也是超级便利的，不用另外打开APP就可以下单买商品，线上购物线下配送完美结合。而且微信小程序开发越来越完善，功能和接口也不断地增加，已经几乎可以和APP手机应用抗衡了。当小程序的出现和流行起来时，几乎所有大公司都新开发了自己的小程序App，包括淘宝、美团、京东等等一系列产品，逐渐成为一个生态圈了。微信小程序商城还可以和这些商户进行流量共享，实现非常好的
15、经济收益。以上得出网上购物的发展前景十分良好。1.4 小程序设计思想在如今发展迅猛的市场上面，有很多现成的产品出现，例如淘宝、京东等，何以我们自己设计一个商城App小程序了？我主要是由三个方向考虑而设计此项目：第一，基于互联网的快速发展，许多的线下商铺需要个便捷的小程序App上架商品，也就是买卖物品的存在，我想做一个简单一点很多人都会用，实用性强的小程序App。第二，主要是通过做这个软件，可以学到一些新的技术，从中感受到代码的魅力，程序员的锻炼，为以后的工作做好基础。第三，整体逻辑思维的加强，不管从哪方面考虑，都是值得去做这个小程序App的。此商城小程序设计的思想是：首先使用小程序开发工具自带
16、的语言写前端的页面，前端的美化以简洁的风格排列，使用户能够清楚明了并且易懂可进行操作的功能展示。而后台我打算使用最近学习的ssm框架，连接数据库与微信小程序前端，用这个框架比较熟悉，以此来检验学习效果。第二章 系统分析2.1 可行性分析我们每个人的消费水平在不断提高是导致人们改变消费观念的基础，消费主要是在精神方面有更大的消费，最明显的体现在享受这个词语之中去。网上商城最好合作伙伴就是快递，现在的快递不管是速度还是远度还是服务质量都更上一层楼，即使是遥远跨国的商品，也能在几日内高效送到。享受就是比以前多了，能享受以前吃不到的用不上的好东西，而且还不费吹灰之力，在家里等快递员送上门就好了。放近处
17、来看，隔壁超市的商品全部都可以在小程序上展示，分类好随你挑，都不用出门，直接微信支付下单稍后就会有人送到门口了。客户可以非常便捷地货比三家，根据评论的优劣进行选择，同时也让交易更加的透明，那些劣质的产品在差评中也无法存活下来，优胜劣汰唯有好的服务好的商品才能持久地经营下去，这就是互联网微信商城透明化带来的好处。基于微信小程序的商城App系统对人们而言是有利无一害的，当人们体验到小程序购物的优质体验后，就会深深被它吸引。当人们把微信逛商场成为日常的一种娱乐方式时候，将会是最大地改变了人们的生活方式。因为微信除了沟通和工作，原来还可以便捷地购物。最大的担忧莫过于第三方支付了，但是随着近年来逐年地完
18、善相关法律和网络安全防护措施，第三方支付已经是非常地安全，几乎没有听说过因此丢失财务的事情出现，而且银行业逐渐上线互联网开通第三方支付，手机微信在线支付更是技术成熟，安全性极高。3以目前的小程序发展情况，加之人们的消费观念的转变和疫情的突袭，开发一款线上销售为目的小程序是可行的。2.1.1 技术可行性本系统采用的是MySOL数据库和ssm框架以及微信小程序开发工具等技术，由于它的特性轻量级和兼容性高，使用起来开发本系统是可行的。对于网上购物网站页面采用微信小程序自带的语言以及框架编写，该框架提供了简洁的样式和封装组件，对于小程序后台数据也是采用了目前比较流行的MySQL数据库，安全、快捷又准确
19、，处理数据量大效率高。4采用J2EE企业开发规范标准，分为Logical 层，data层，user界面层。此技术我主要运用在开发的各个场合之中去，我快速的可以开发出自己的系统，现在主流的开发模式就是mvc模式，这样开发的好处就是便于以后的维护，因为我开发出的系统这些，都是长期的使用，不可能现在做出的系统以后都不需要改动，这也是不现实的。因为随着业务的增加，还有技术的不断成熟，都会有更好的东西有可能去取代，技术这些也是在不断的更新和发展之中，我能做得就是在应有的场景之下，随着现在的开发模式这些，严格的要求自己，不管是技术还是编码的规格这些，都需要严格的要求自己，不能随便的添加和修改这些。整体的流
20、程这些还是我之前传统开发模式的那样，并没有新颖的技术出现，一般都是前端html，css，js这些作为前端的开发模式，我并没有引用很先进的前端技术框架，像vue，angularjs这些。我都是用那些基本的属性写出我自己的网站代码。后端采用的是ssh框架，这样交互起来在后端比较方面，因为这个ssh框架已经非常的成熟，起码对于我刚刚写代码的人来说已经完全够用了，所以不需要考虑其他性能等方面的问题，中间前后端交互的主要技术就是ajax，异步刷新技术非常好用，当然还有很多不错的用法，当务之急拿来交互，确实是不错的一个选择。以上就是这个系统的根本代码所在。本系统主要运用Eclipse、微信开发者工具等开发
21、工具与MySOL数据库相结合的技术手段，使用微信小程序方便用户便捷使用。开发工具如下表2.1.1软件基本信息表所示表2.1.1 软件基本信息表编号工具名称工具版本备注1Windows 10旗舰版操作系统2Mysql5.6.24数据库3Jdk1.7开发环境4Tomcat7.0服务器5Eclipse4.5.1Java后台开发工具6SQLYOG11.2Mysql数据库可视化7微信开发者工具1.02微信小程序的开发工具系统相关软件与技术介绍：1）EclipseEclipse是非常友好的一个软件，可扩展性很强，可以安装很多插件而且适应很多语音的开发的环境支持。外接很多框架都可以兼容，对开发者很友好，使用
22、起来非常方便。2）JavaJava编程是面向对象的，因为java语言很简易，初学者易上手，也容易操作使用，并且很安全，还有很多特点。例如：可跨平台多线程运行，可以在各种系统上使用，具有扩展性。是很多软件开发者起步的语言。3）SSMssm主要是三层思想，把前端视图、数据库、业务处理三层连接在一块。数据库是JDBC框架来管理数据库，讲业务实体层与数据层连接在一块。SpringMvc接受、分发、处理。4）Mysql当初我在写项目的时候，就已经接触到mysql数据库，在选用java编写代码的时候，自然而然的选择了mysql，因为这个是轻量级的，特别是和java兼容这些都是非常的好的。MySQL的服务器
23、支持关键任务、重负载生产系统的各种使用，也可以将它嵌入到一个比较大配置(mass-deployed)的软件中去。562.1.2 操作可行性基于微信小程序的商城App系统在设计开发使用过程中都要涉及到很多计算机软件，硬件、所有这些都能符合主流国际、国家和行业的标准。7 2.1.3 法律可行性基于微信小程序的商城App系统管理系统的开发由于是本人亲自撰写论文和设计开发系统，文献的引用都符合国际标准，所以并不会出现侵权状况，法律上开发本系统是可以的。2.2 系统需求分析基于微信小程序的商城App系统主要是要做一个线下商铺的线上购物平台，因为目前在市场还存在很多线下商铺未开展线上销售，加上目前新冠状病
24、毒疫情的全球蔓延还处于严峻状态，即使我国逐渐复工复产，也对线下店铺带来巨大的冲击。而微信小程序的出现，即简单打开浏览又方便下单购物等。基于此，线下商铺需要一个不同于传统的商场销售的商品购物方式，这就是网上购物平台，而目前手机上的APP软件下载繁杂又经常更新，也使得用户在体验上逐渐没有好感，产生一定的意见。所以能够设计和实现一个小程序商城app系统即方便线下商铺老板可以即时转型新零售也可以提升顾客的体验度。基于以上阐述，小程序需做到简易与功能齐全，操作方便等要求。通过分析目前火热的电商App某宝和某京后，得出基础的功能要有商品的优化成列和分类、活动的引流、支持添加购物车功能、支付功能、修改信息等
25、功能。有了最终的目标是设计的起点，接下来就是相应的设计分析。2.2.1 UML用例分析基于微信小程序的商城App系统主要有两大用户模式，分别是顾客与管理员，顾客的用例分析如下图2.2.1顾客权限图所示，还有各个功能的详细介绍如下所示： 图2.2.1 用户权限图用例名称：顾客登录简要说明：顾客打开小程序的第一步流程。基本事件流：1顾客点击小程序；2自动跳出登录信息，默认微信头像等信息；3. 顾客登录；4. 进入小程序主页面；5. 用例终止。用例名称：个人设置功能简要说明： 顾客进入小程序后可点击“我的”页面进行个人信息修改。基本事件流：1顾客点击小程序；2登录成功；3. 点击“我的”页面；4.
26、点击“填写信息”；5. 填写基本信息；6. 点击完成；7. 用例终止。用例名称：购物车功能简要说明：顾客进入购物车页面后，可以看到已经选中待支付的商品、商品的详情以及修改购物车商品的信息。 基本事件流：1顾客点击小程序；2登录成功； 3. 点击“购物车页面”； 4. 查询购物车内商品信息； 5. 可进行修改商品数量等信息； 6. 用例终止；用例名称：订单功能简要说明：顾客进入“我的”页面后，可以看到已经下单的订单信息。基本事件流：1顾客点击小程序； 2登录成功；3. 点击“我的页面”；4. 点击“我的订单”；5. 查看、修改、提交订单；6. 用例终止。用例名称：支付功能简要说明：顾客进入订单提
27、交页面后，可以进行商品支付。基本事件流：1顾客点击小程序； 2登录成功；3. 点击“我的页面”或“购物车页面”；4. 点击“我的订单”或“购物商品信息”；5. 提交订单；6. 显示商品价格并进行支付；7. 用例终止。管理员的用例分析如下图2.2.2管理员权限图所示，还有各个功能的详细介绍如下所示：图2.2.2 管理员权限图用例名称：管理员后台登录简要说明：管理员登录后台。基本事件流：1管理员打开后台；2弹出登录信息；3. 管理员登录；4. 进入后台管理页面；5. 用例终止。用例名称：用户信息管理简要说明： 管理员进入后台后可点击用户信息管理页面进行用户信息修改。基本事件流：1打开后台；2登录成
28、功；3. 点击“用户信息管理”页面；4. 修改信息，增删查改用户信息；5. 用例终止。用例名称：商品分类管理简要说明： 管理员进入后台后可点击商品分类管理页面进行商品的归类。基本事件流：1打开后台；2登录成功；3. 点击“商品分类”页面；4. 修改商品的分类信息；5. 用例终止。用例名称：分类信息管理简要说明： 进入后台后可点击分类管理页面进行商品分类信息修改。基本事件流：1打开后台；2登录成功；3. 点击“分类管理”页面；4. 修改商品的分类信息；5. 用例终止。用例名称：商品管理简要说明： 管理员进入后台后可点击商品管理页面进行商品基础信息修改。基本事件流：1打开后台；2登录成功；3. 点
29、击“商品管理”页面；4. 修改商品的基础信息，如增、删、查、改商品等信息，及时反映在小程序上；5. 用例终止。第三章 系统设计3.1 系统总体设计基于微信小程序的商城App系统主要分为两个模式，详细介绍如下：1）用户模式该用户需在进入小程序前进行登录操作，操作成功后方可进入小程序。用户可以进行浏览小程序，点击对应活动跳转商品页面，查看商品详情，添加商品至购物车，购物车信息的查看和修改，支付下单商品，提交和查看订单信息，修改个人信息设置等功能。2）管理员模式管理员登录后台，可进行个人信息、用户信息、商品信息、分类管理等功能。系统用户模式分析图如下图3.1所示：图3.1 系统用户模式图3.2 系统
30、功能模块设计3.2.1 前端功能模块设计1）用户功能：用户通过登录之后进入小程序，进行浏览小程序和查看商品，显示的商城主界面主要有轮播图，商品分类，热门商品，最近新品，可进行商品跳转。2）商品功能：商品的分类和商品的查询，商品的分类主要分了六个，分别是果味，蔬菜，炒货，点心，粗茶，淡饭这六个分类。点击商品可查阅商品的名称、商品详情以及商品价格。3）购物车功能：用户可添加心仪商品至购物车、查询已有商品、删除已有商品、修改商品数量。提交订单后可以跳转至付款页进行付款操作。4）订单功能：提交、删除、查询订单。在商品提交购物车后，可以提交订单，点击后可以将商品添加至订单，可在“我的”页面查看。前提是用
31、户需登录成功。5）支付功能：进行订单的付款，弹出相应价格和支付页面。由于小程序的支付有很多限制，该功能只做演示。6）个人设置功能：用户可点击“我的”个人设置页，进行个人设置，头像、电话、地址等详细信息的填写。 3.2.2 后端功能模块设计1）个人信息中心：个人中心主要是管理一些人员信息的流动，都他们进行一些增删改查信息的操作。2）用户信息管理：对用户信息的管理。3）分类管理：这个的主要用途就是对商品的归纳。4）商品管理：这个的功能是对最新或者以前的商品进行相应的修改，库存的处理，及时反映在小程序上等操作。3.3 数据库设计基于微信小程序的商城App系统主要采用当前流行的MySql数据库来对数据
32、进行增删查改等操作，并充当本系统后台，进行基础数据的设置存储。后续修改数据数据库管理员也可以进入数据库及时修改，及时更新至小程序中。3.3.1 数据库概念结构设计1）用户E-R图图3.3.1.1 用户E-R图2）管理员E-R图图3.3.1.2 管理员E-R图3）商品E-R图图3.3.1.3 商品信息E-R图4）商品类型E-R图图3.3.1.4 商品类型E-R图5）购物车信息E-R图图3.3.3.5 购物车信息E-R图6）订单信息E-R图图3.3.3.6 订单信息E-R图3.2.2 数据库的逻辑结构设计基于微信小程序的商城app系统的数据库主要作用是提供用户在小程序前端操作的数据的传输修改和原有
33、商品数据的修改，根据微信小程序的商城app设计与实现的功能需求总结出如下数据项：1）管理员：管理员包括管理员的id和用户名。管理员会提前录入设置信息，无需再注册。2）用户：用户包括用户id、用户姓名、用户头像、用户电话、用户地址通过微信自动弹出验证。用户包括管理员与顾客。3）商品：商品信息包括商品的id、名称、价格、库存、图片以及详情信息。4）商品类型：商品类型包括商品类型id和名称。商品类型由管理者在数据库进行增添商品类型和删除商品类型。5）购物车：购物车包括购物车id、用户id、商品id、商品信息、商品购买数量。6）订单：订单信息包括订单编号、订单金额、商品id、商品信息、购买状态、用户i
34、d。基于微信小程序的商城App系统数据库主要的有四个数据表。第一个表是address表，用于存储系统的用户地址等；第二个表是cart表，用于存储系统的商品信息；第三个表是goods表，用于存储系统的商品信息；第四个表是order表，用于存储系统的订单信息等。具体数据库表物理结构如下： 1） 系统地址表（address）的设计如下图3.2.2.1所示与表3.2.2.1所示：说明：用于存储系统的用户姓名、电话、地址、编号等信息。图3.2.2.1 系统地址表表3.2.2.1 系统地址表信息字段含义类型长度是否为空address_name用户姓名varchar22yesaddress_number用户
35、电话varchar22yesaddress_detail用户地址信息varchar22yesaddress_userId用户idvarchar22yes2）购物车表（cart）的设计如下图3.2.2.2所示与表3.2.2.2所示：说明：用于存储系统选择商品加入购物车的表，包括商品id、商品数量、商品是否被选择、用户id信息。图3.2.2.2 购物车表表3.2.2.2 购物车表信息字段含义类型长度是否为空goods_id商品idint20nogoods_num商品数量int22yesgoods_selected商品是否被选择varchar22yesgoods_userId用户idvarchar2
36、2yes3） 商品信息表（goods）的设计如下图3.2.2.3所示与表3.2.2.3所示：说明：存储系统的商品详情信息，包括商品id、图片、名称、价格、是否有货、详情、是否支持退货、单价、分类信息等信息。图3.2.2.3 商品信息表表3.2.2.3 商品信息表信息字段含义类型长度是否为空id商品idint20noimage商品图片varchar32yestitle商品名称varchar32yesprice商品价格varchar32yesstock商品库存varchar32yesdetail商品详情varchar255yesparmeter商品单价varchar32yesservice商品是否
37、支持退货varchar32yescategory商品分类信息varchar32yes4） 订单表（orders）的设计如下图3.2.2.4所示：说明：存储系统订单的表，包括订单id、订单数量、用户id等信息。图3.2.2.4 订单表字段含义类型长度是否为空order_id订单idint22noorder_number订单数量int22yesorder_id用户idvarchar22yesid订单编号int22o对于商品的信息管理、分类管理、订单信息管理、用户信息管理都可以在数据库后台进行修改和存储。3.4 界面设计基于微信小程序的商城App的界面设计主要有四大界面，分别为：主页、分类、购物车、
38、我的，以及各个跳转页面，例如：商品跳转页面、支付页面、订单页面、个人设置信息页面等。以下为部分页面的简略设计图，如下图3.4.1-3.4.4所示： 图3.4.1 主页设计页面主要内容是：1）轮播图：展示热卖产品、活动等信息；2）新品首发、水果世界：是商品的分类，集合了新的商品和部分分类商品的信息；3）其他商品信息：陈列些热卖产品在下面，提供用户浏览；4）底部导航栏：四大主页间的切换。图3.4.2 分类设计页面主要内容是：展示分类页面的商品归纳，果味、蔬菜、炒货、点心、粗茶、淡饭的商品分类，更加方便用户搜寻浏览产品。图3.4.3 购物车设计页面主要内容是：购物车的页面主要内容是展示已添加至购物车
39、的商品详情，例如商品图片、数量、价格等基础信息。用户可在购物车页面进行商品的增添操作。图3.4.4 我的设计页面主要内容是：登录后展示用户头像与名称信息，提供用户设置地址信息，将地址信息展示以及购物车支付后的订单信息的查询，用户进行查询、修改订单操作。第四章 系统实现4.1 用户登录模块此模块是用到微信小程序的获取用户信息的功能，方便便捷，因小程序在微信App中打开，所以对于用户的信息获取方便，点击头像昵称即可登录，登录后的个人头像和姓名会在“我的”页面保存和显示。如下图图4.1所示：图4.1 登录页面信息图4.2 主页界面模块该界面是小程序的主页。用户登录成功后再进入该小程序看到的第一个界面
40、，可以开始自由的浏览展示商品。点击主页中的轮播图或下方分类特色商品处可以进行热门商品的跳转，如下图图4.2主页与热门商品跳转图所示：图4.2 主页以及热门商品跳转图4.3 分类功能模块该页面是商品的分类页面，商品有序归纳方便用户进行浏览以及搜寻。分别是果味、蔬菜、炒货、点心、粗茶、淡饭类目，更加便捷用户进行下单购买。如下图图4.3分类页面所示：图4.3 分类页面图4.4 购物车功能模块购物车功能是方便用户遇见喜欢的商品即时进行加入购物车，等全部商品浏览添加至购物车时可方便一起结算。用户点击商品后可打开商品的详情页面，展示商品图片、价格、信息介绍，如下图4.4.1商品详情图所示：图4.4.1 商
41、品详情图可以在此页面进行商品的详情浏览以及添加商品至购物车的功能，点击购物车标志，添加后的商品会出现在购物车页面，如下图4.4.2购物车页面所示：图4.4.2 购物车页面在购物车页面可进行商品的数量添加或商品删除等操作，如下图4.4.3添加商品数量图-4.4.4删除商品图所示：图4.4.3 添加商品数量图图4.4.4 删除商品图4.5 订单功能模块订单功能是用户将加入购物车的商品进行下单时，会跳转到订单界面，会显示所需要的支付总额。如下图4.5.1订单页面图所示：图4.5.1 订单页面图填写地址信息确认后，按提交可进行付款（因微信小程序的付款功能涉及多方因素不易实现只做演示），如下图4.5.2
42、 商品付款图所示：图4.5.2 商品付款图4.6 我的页面模块我的页面模块主要是进行个人信息的填写与修改以及我的订单查询处，显示个人头像以及名称，地址信息，订单信息。如下图4.6.1我的页面图所示：图4.6.1 我的页面图进行地址管理的填写，需要填写完整信息否则弹出提示，填写完毕保存后会及时更新至我的页面以及订单页面，如下图4.6.2地址信息填写图以及图4.6.3信息填写完整提示图所示：图4.6.2 地址信息填写图图4.6.3 信息填写完整提示图用户将购物车内的商品支付成功后，会提交订单至我的页面处展示，用户可进行订单的查询与修改。如下图4.6.4我的订单查询图所示：图4.6.4 我的订单查询
43、图第五章 系统测试5.1 测试过程1）对本系统进行分析，确定要测试的内容和制定测试计划。主要的模块有用户功能、商品功能、购物车功能、订单功能四大模块。检测四大模块中的各个功能是否能实现；2）完善测试环境配置，开始测试用例，并记下bug与不足之处；3）将bug与不足之处提交并写出解决方案；4）完成系统测试。5.2 测试环境描述1）环境部署：Tomcat 7.0.92、jdk 7.02）CPU：i5-6300HQ 2.30GHz3）系统：Windows 104）数据库：MySql 5.6.245）后台：eclipse6）前端：微信开发者工具7）数据库可视化：SQLyog5.3 测试用例表5-3 测
44、试用例执行情况 需求功能名称测试用例名称执行说明执行情况是否通过启动小程序启动小程序测试测试开发环境是否有问题；测试小程序是否能正常运行。良好是用户登录登录测试测试用户打开小程序时能否进行用户登录，是否跳转主页面流畅；是否登录成功。良好是浏览商品浏览小程序测试测试在多个手机端扫二维码是否能够打开小程序；测试登录后跳转主页是否流畅。良好是轮播图功能轮播图功能测试测试轮播图是否能正常跳转；是否能点击轮播图跳转对应的商品或者活动的页面。良好是查看商品详情查看商品详情测试测试点击商品或点击活动是否能流畅跳转至对应的商品详情；测试是否能在商品详情中进行操作。良好是购物车功能购物车功能测试测试商品是否能添加进购物车；测试在购物车界面是否能查看到商品；测试在购物车界面是否能进行商品的增添数量与删除商品。良好是订单功能订单功能测试测试在购物车页面提交后能否跳转至订单页面；测试订单页面能否显示商品价格；测试能否进行支付；测试支付后能否在我的页面中出现已支付的订单信息；测试能否查询和删除订单信息。良好是个人信息设置功能个人信息设置功能测试测试用户是否能在我的页面中填写地址管理信息；测试没有填写完成信息是否跳出提示框。良好是用户信息功能用户信息功能管理测试测试管理员能否增删查改用户地址管理信息；测试管理员是否能看到订单信息。良好是商品管理功能商品管理功能测试测试管理员是否能增