基于VUE和SpringBoot的微信小程序商城的设计与实现

摘 要
伴随大数据时代的到来，计算机已成为人们步入个数化生活的必须品。由于计算机技术的成熟，互联网的强大功能也正在被人们以最大限度的开发。通过网络，人们能够足不出户完成微信小程序商城商品查阅，这在方便学生的同时也解决了在传统的微信小程序商城商品管理状态中，由于没有规范的微信小程序商城商品管理交易平台，一切繁琐的工作必须由人工去完成的问题。微信小程序商城商品管理的工作很杂，一般包含微信小程序商城商品个数的采集，微信小程序商城商品查阅个数的清点，另外还需要对微信小程序商城商品用户个数的增加、删除、查阅已经修改等[1]。这种纯人工的管理方式着实存在着许多缺点，如：在进行个数查找的时候效率十分低下，在进行订单核对的时候容易产生失误……为此，微信小程序商城商品馆方面需要不断进行复查，以至于浪费大量的人力资源与经济基础。本交易平台选取微信小程序作为开发环境，将MySQL作为后台数据存储， 从而对数据的增加、修改、删除和查询的功能进行开发设计。我们的业务人员可以通过浏览器看到整个交易平台的前台的页面相关信息，然后通过一个点击事件完成与后台服务器之间完成相应的交互逻辑，这样进行一系列的微信小程序商城商品查看步骤[2]。
[关键词]：信息化；交易；微信小程序；

Abstract
With the advent of the era of big data, computer has become a must for people to enter into a numerical life. Due to the maturity of computer technology, the powerful functions of the Internet are also being exploited to the maximum extent. Through the network, people can stay at home to complete the campus idle items, which is convenient for students at the same time to solve the traditional campus idle items management state, because there is no standardized campus idle items management system, all the tedious work must be completed by manual. The management of idle items on campus is very complicated, generally including the collection of the number of idle items on campus, the count of the number of idle items on campus, and the increase, deletion, and modification of the number of idle items on campus. This kind of pure artificial management method really has many shortcomings, such as: in the number of time to find the efficiency is very low, in order to check when easy to produce mistakes...... For this reason, the idle items on campus need to be constantly reviewed, resulting in a waste of human resources and economic foundation. This system selects wechat small program as the development environment, MySQL as the background data storage, so as to develop and design the function of data increase, modify, delete and query. Our business personnel can see the page related information of the front desk of the whole system through the browser, and then complete the corresponding interaction logic with the background server through a click event, so as to carry out a series of online campus idle items viewing steps.
Key words：Informatization ;Wechat applets； transaction
目  录    
1现状概述和理论基础    
1.1课题的研究背景与内容    
1.2课题的研究意义    
2开发技术介绍    
2.1小程序（微信）    
2.2开发技术    
2.3 MySQL数据库    
2.4客户机/服务器数据库系统概述    
3可行性研究与需求分析    
3.1技术可行性    
3.2经济可行性    
3.3操作可行性    
3.4社会可行性
4系统需求分析    
4.1 登陆/退出与用户权限管理    
4.2 商品管理    
4. 3 上架下架管理    
4. 4 商品分类管理    
4. 5 用户管理    
4. 6订单管理    
4. 7 数据导入/导出    
5 系统设计    
5.1系统总体设计    
5.2功能模块设计    
5.3系统用例图及时序图    
5.4数据库设计    
5.4.1 数据库E-R图    
5.4.2 数据库表    
6 系统实现    
6.1小程序端的实现    
6.1.1小程序端首页    
6.1.2小程序端分类    
6.1.3小程序端购物车    
6.1.4小程序端个人界面    
6.2后台管理端的实现    
6.2.1后台管理端首页    
6.2.2后台管理端商品分类管理页    
6.2.3后台管理端商品管理页    
6.2.4后台管理端订单管理页
6.2.5后台管理端用户管理页    
6.2.6后台管理端日志管理页    
7 系统测试    
7.1测试的目的与方法    
7.2测试内容    
总 结    
参考文献    
致谢    

 
1现状概述和理论基础
当下，计算机的发展与互联网的普及极大地提高了我们的生活水平和生活质量，各行各业的发展也都离不开信息化技术的支持。而随着互联网的普及与发展，传统商品业也逐渐走上了电商化的道路。这十几年来，我们见证了淘宝，天猫，京东，拼多多，唯品会等电商平台的崛起，在方便我们日常购物的同时，它们的出现与崛起也向我们展示了电商这一行业强大的活力。
但是，传统的电子商城平台，不仅开发周期长，开发成本昂贵，而且它的运营成本会随着业务量的不断增长而增大，需要有强大的资金支持。此外，传统电子商城平台的信息保护和数据安全维护成本也十分高昂。最重要的是，在目前电商巨头雄踞的情况下，再来开发一款传统电商平台显然不切实际。而在2017年，随着微信小程序的正式上线，事情发生了转变[2]。
微信小程序，它是一款不需要下载便可以使用的应用，基于微信平台开发出来的微信小程序，具有开发成本较低，流量获取便捷，用户体验良好，微信生态强大等优势。它是一项真正的创新，从2017年正式上线以来，经过几年的发展，微信小程序已经形成了全新的开发环境和开发者生态。而基于微信小程序开发的“微信小程序电子商城”，与传统电子商城平台相比，不仅具有开发周期短，开发成本低，用户体验出色等优势，而且背靠海量的微信用户，流量获取迅速快捷。微信强大的生态体系，也能为“微信小程序电子商城”实现营销与推广，节省推广的成本。基于以上种种因素以及目前疫情防控形式的日益严峻，小型和微型企业通过小程序向互联网谋求转型已经成为主流趋势。
1.1课题的研究背景与内容
目前，普通用户通过互联网来查阅，浏览商品并进行购买已经成为一种日常，这就要求我们在设计电商平台的时候应该尽可能的考虑到用户的体验。通过对当前国内电商交易管理平台的研究，我们发现了传统电商交易平台存在的一些缺陷，并针对这些发现的问题结合当下热门的微信小程序开发，实现了基于微信小城序的电子商城交易平台。[3]
本文会以“微信小程序电子商城”为研究对象，通过对电商平台管理的深入了解与分析，并通过参考目前已有的传统电商平台以及已有的基于微信小程序开发的电商平台，来确认该“微信小程序电子商城”的业务及需求功能。系统主要实现的功能有对商品上架下架的管理，对具体商品信息的管理，对商品订单的管理，对后台管理人员的管理，及对相应数据的导入与导出。其中对商品的管理包括了对商品的查询，对具体商品信息的修改。在商品订单的管理中可以通过订单ID以及订单中商品名称来查询订单信息，并可以通过发货来修改订单状态。对后台管理人员的管理包括了对人员信息以及人员权限的管理。

1.2课题的研究意义
在基于上述对传统电商平台以及微信小程序电商平台的深入研究与了解后，我们可以认识到，在目前如果开发一款传统电商平台的话，具有以下劣势：（1）开发成本高昂，且开发周期长；（2）电商平台的运营成本会随着业务量的增长而增大，需要有强大的资金支持；（3）代码维护，信息保护与数据安全维护成本非常高[4]。而对比研究下，我们可以了解到微信小程序电商平台的优势：（1）用户可以便捷的获取服务，无需安装卸载，即用即走，用户体验良好；（2）背靠海量的微信用户，流量获取迅速快捷；（3）开发周期短，开发成本低，可将更多的资源投入商品运营环节；（4）强大的微信生态体系可以实现多渠道的营销推广；（5）购物流程快捷简单，与传统电商平台购物体验一致。
传统电商平台适合于大型企业，如淘宝，京东，苏宁等，需要有较强的经济实力。而从疫情发生以来，疫情防控形式日益严峻，小型微型企业如果要向互联网谋求转型，基于微信开发的小程序商城其轻量化，成本低的特点正好能小型微型企业的需求[5]。
2开发技术介绍
2.1小程序（微信）
用户可以通过扫描与小程序代码相关的二维码或者通过微信搜索小程序名称来获得applet应用程序。由于小程序的整个文件只需要非常小的内存空间，所以用户进入小程序会非常快捷和方便。本系统的开发基于微信小程序，前端使用Vue框架完成了整个系统的页面设计过程，后台管理使用SpringBoot技术进行开发，使用MySQL数据库来进行数据的存储与管理，基于B/S架构，简化了系统的开发，使用和维护。接下来对所涉及的关键开发技术进行一定的说明。

2.2开发技术
SpringBoot技术： Spring是Java EE开发中最重要的设计层框架之一，开源、能够很好地处理业务逻辑层和其余层之间的松散耦合关系。Spring Boot框架基于Spring，是Pivotal团队提供的全新的Java框架，它继承了Spring的优良特性，简化Spring应用的开发及搭建过程，实现了自动配置，使程序员全身心地投入到业务逻辑代码的编写中去，还能更快捷的部署和监控系统，是后端开发的优势工具，很大程度的提高开发效率。本系统利用Spring Boot的优势进行后台管理系统的设计[6]。
本系统的前端框架选择目前较流行的Vue框架。它是一个轻量级的渐进式框架，基于数据驱动和组件化的思想构建前端页面，它的核心库只关注视图层，有很多简单、易于理解的API供用户使用，运行效率高、语言简洁、占用空间小、上手容易等特点，深受开发者喜爱，是目前前端首选框架。
MyBatis是持久层框架技术，支持定制化SQL、存储过程以及高级映射。MyBatis使用简单的XML或注解用于配置和原始映射，把接口和Java的POJOs(Plain Ordinary Java Objects）映射成数据库中的记录。Mybatis的功能架构分成3层：API接口层、数据处理层、基础支撑层。API接口层负责外部使用的接口，程序员只要通过这些API就可以操纵数据库；数据处理层负责SQL的具体操作，根据API调用的请求完成数据库的操作；基础支撑层主要负责基础功能处理，如连接管理、事务管理、配置加载和缓存处理等操作，为上层数据处理提供支撑。
2.3 MySQL数据库
MySQL数据库是一个完美支持SQL语言的关系型数据库。MySQL数据库由于其开放源代码，运行速度较快，运行过程稳定，磁盘空间占用低，有专门的口令和超级用户系统来保障数据安全性并且可以在多种操作系统上运行等优点，得到了十分广泛的应用，特别是中小型Web网站的后台应用往往会选择MySQL数据库。广泛被使用MySQL数据库经历了众多软件的考验，其提供的强大，稳定和免费的服务非常适合我们的微信小程序电子商城的开发和业务需求。

2.4客户机/服务器数据库系统概述
客户机/应用服务器系统结构的主要功能实质性和意义也就在于通过应用服务器和网络功能的合理密集分布,实现网络系统间的分工协作。每一个应用服务器都为整个所有移动客户网络系统用户之间提供自己所有急需或极其擅长的移动网络服务,由所有的每个移动客户机之间进行相互分享;每个移动客户机的每个功能表示应用程序也都可以通过借助于每个应用服务器的应用服务器和每个功能表示应用程序来自动集成实现复杂的移动网络系统应用。在这种系统结构中,数据处理层和控制系统表示层在整个应用服务器上,业务端的数据处理控制表示层和移动用户操作界面表示层的功能表示层在整个移动客户机上[7]。

3可行性研究与需求分析
3.1技术可行性
微信小程序商品交易平台采用小程序（微信）开发工具，搭配Vue和SpringBoot开发技术，该结构在目前计算机开发技术中已经基本成熟，能够有效避免一些常见的错误，简化开发，提高开发效率。普通用户可以通过微信授权来访问本微信小程序电商平台，在该平台中普通用户可以实现浏览商品，修改个人信息，购买商品，查看订单等功能。微信小程序商城前端使用Vue开发技术，页面简洁明了，可以让普通用户轻松上手使用。微信小程商城后端使用SpringBoot技术，并且与MySQL连接，可以轻松获取到数据库中的数据，也方便对新产生的数据进行修改和删除。其次，相关软件的运行对计算机的要求并不高，不会对正常计算机造成太大的运行压力，因此在技术的角度上可行性很高[8]。
3.2经济可行性
该微信小程序电商平台的经济可行性体现在它的开发和应用成本相对较低。目前，各种成熟的开源框架技术，数据库等都是免费的，再加上少量的租赁云服务器费用，并不需要庞大的启动资金，对需要向互联网转型的小型微型企业十分友好。系统上线后，可以基于微信强大的生态体系以及庞大的用户数量来进行推广运营，产生一定的经济效益。从经济可行性发面来说，微信小程序电商平台可以为小型微型企业节省开发成本和维护成本，如此一来这些小型微型企业便可将节省下来的开发和维护费用用在产品和运营上，从而实现盈利，所以该微信小程序电子商城的开发实现在经济上是可行的。

3.3操作可行性
该系统小程序端页面简洁，使用菜单式显示布局，利用小程序下方菜单栏可以对功能进行切换，各项操作便捷清晰，功能简洁明了，与传统商城的购物体验几乎一致。而且当前是信息化的时代，几乎人人都是手机的使用者，对该微信小程序商城使用的上手难度极低。在后台管理端也是采用菜单式显示布局，后台管理人员可以利用系统左方菜单栏对后台管理各项功能进行切换，而且该系统后台操作的时候并没有复杂的参数或者说条件设置，当系统完成服务器部署正式上线后，相关的后台管理人员只需要通过简单地说明或者演示即可上手，不需要进行长时间的培训和学习，能后较为快速投入到后台管理工作中。因此，不管从普通用户端还是后台管理端，该微信小程序商品在操作可行性上也是可行的[9]。

3.4社会可行性
社会可行性分析其实就是只该微信小程序商城在开发完成正式部署上线后，对可能产生的社会妨碍进行分析。该微信小程序商城开发完成后，与传统的人工管理方式相比有以下几点好处：第一，能搞提高管理人员的工作效率，也降低了管理人员犯错误的概率，节省了一定的人力和物力资源；第二，该小程序商城基于微信成熟强大的生态环境，用户可以随时通过微信访问该小程序，对商品进行浏览以及购买，十分简便。在运营成功以及产品质量过关的情况下，可以迅速在微信用户中积攒起口碑，为商家或者企业带来更多的流量以及商机[10]。因此总的来看，并没有太多的社会妨碍会对该系统造成较大影响，故而社会可行性也通过。

4系统需求分析
本章节根据对微信小程序商城相关业务的了解与讨论，以及对当前常见电商平台的研究，确认了微信小程序商城的运作流程以及操作过程，并且根据本系统的要求将用户分为两级。
在微信小程序商城的业务中，主要有两类人员，第一类是微信用户，他们通过微信小程序端入口可以进入微信小程序商城进行购物。在商城中，他们可以接收到平台的推送信息，也可以自己按照商品分类来搜索商品，进而浏览商品的详细信息。在选购完商品后，微信用户可以在购物车中查看自己所选购的商品和订单总金额，并且可以提交订单。订单中的收货地址默认为微信用户地址，用户也可以通过小程序端来修改自己的个人信息，如收件人名称，收件人手机号码，收件人地址等。第二类人员是微信小程序商城的后台管理人员，他们可以通过后台系统来维护商品的各种信息，包括商品名称，商品价格，商品库存，商品上下架状态等，还可以根据大众喜好修改小程序端的首页推送。在微型用户提交订单后，后台系统可以通过订单管理查看到各类订单的信息。订单信息包括订单编号，订单详情以及订单状态等，后台管理员可以在微型用户付款后完成发货操作来修改订单的状态。后台管理员也可以通过导出所有订单信息来统计以及分析微信用户的购物喜好来调整整个商城的商品部署。

4.1 登陆/退出与用户权限管理
根据微信小程序电子商城的相关业务规范，将用户划分为普通用户和后天管理员用户，两类用户有不同的功能与权限。普通用户无需注册账号再进行登录，可以通过微信绑定个人微信信息进入小程序，然后就可以进行浏览商品，购物，修改信息，查看订单等功能；退出操作只需要退出小程序即可；后台管理员需要通过IP地址访问管理系统，需要通过后台注册的管理员账号密码来进行登录。进入系统后，管理员可以对当前的账户密码进行修改，操作完成后，可以通过注销来安全退出账户[11]。
4.2 商品管理    
商品管理是微信小程序商城后台系统的重要功能，它包含了商品查询，商品具体信息修改等功能。对于商品查询功能，为了方便后台管理员的查询，需要提供多种查询方式，不仅可以通过商品名称来进行模糊查询，也可以通过商品类别来显示出该类别下的所有商品，还可以通过商品编码来进行查询。查询操作将返回商品相关的具体信息，包括商品名称，商品销售价格，商品类名，商品库存等，系统支持对查询结果进行分页展示。
4. 3 上架下架管理
商品上架下架功能同样是微信小程序商城的重要功能，严格来讲隶属于商品管理功能。依照微信小程序商城的业务管理，当某类商品的库存为零时，需要后台管理员及时下架，以免给用户造成不好的购物体验。在特定电商节日时，为了能够满足可能出现的大批量购物需求，需要提前录入大量商品信息并保存，在具体时间选择上架。系统支持对所选中的商品进行批量上架和批量下架。
4. 4 商品分类管理
在微信小程序商城中，商品上录入以及上架需要有一个明确的商品分类，即每个商品需要通过分类来确定自己出现在小程序前端哪一模块当中。后台管理员可以可以通过新增按钮来新增新的商品分类，也可以通过编辑按钮来修改已有商品分类的具体信息。后台管理员还可以通过调整排序权重来调整该分类在小程序前端的显示位置，后台会维护每次操作的最后更新时间[12]。
4. 5 用户管理
用户管理功能即对后台管理人员的管理。系统初始会注册一个顶级管理员账号，通过该顶级管理员账号可以创建多个子级管理员账号。对后台管理员的管理包括信息查询，编辑修改信息，删除信息，修改权限，停用账号等。可以通过名称，手机号码，状态等来进行查询，查询的结果以表格形式显示，系统支持分页显示。点击编辑按钮可以修改提供修改功能，确实后提示编辑成功。删除信息可以通过对查询结果中的用户进行删除，支持批量删除，删除后会提示删除成功。
4. 6订单管理
在微信小程序商城中，用户在提交订单后会自动生成对应的订单信息，后台管理员通过后台的订单管理可以查询商品订单的各种信息并进行操作。订单的查询支持多种方式，可以通过订单编号，订单日期，订单状态等信息来查询。在对用户已经付款的订单中，后台管理员可以通过发货按钮来填写发货的具体快递公司名称以及快递编号，方便用户查询所购买商品的物流信息[13]。
4. 7 数据导入/导出
微信小程序商城的后台管理系统中，支持对各种管理信息数据的导入与导出，包括商品信息，订单信息，用户信息等，方便后台管理人员的工作。后台管理人员可以通过对订单数据的导出来分析用户的购物喜好以及购物趋势，将这些分析的结果整合反馈给运营部门来指定相关的销售策略来实现盈利[14]。

5 系统设计
5.1系统总体设计
系统后台采用Springboot设计，将后台系统分为了三次结构，通过分层来使得后台系统的各部分的职责清晰明了，提高了系统的可扩展性和可维护性，具体表现在：由控制层接收前端的请求，以业务逻辑层负责业务的处理，通过持久层与数据库进行连接。小程序端的界面使用Vue框架编写，基于组件化的思想和数据驱动来实现小程序前端页面，核心库只关心视图层，且有多重简单易用且功能强大的API可使用。 
5.2功能模块设计
本系统大致可以分为四个大模块，分别为用户管理模块，商品管理模块，订单管理模块和系统维护模块。在这四个大模块之下，各个模块分别又包含多个子模块。其中，用户管理模块包括了普通用户管理和后台用户管理两个子模块；商品管理模块包括了商品分类管理，商品信息管理，商品上下架管理三个子模块；
订单管理模块包括订单信息管理和订单状态管理两个子模块；系统维护模块包括登录日志管理和系统日志管理两个子模块。
普通用户只需要通过微信授权小程序便可以同步微信账号信息直接登录，无需注册。普通用户进入小程序后，首先看到的是商城主页，商城主页会展示部分商品信息。小程序下方是四个菜单栏，分别为首页，分类，购物车以及我的。点击分类可以根据商品分类来选购商品。点击购物车可以查看当前购物车中的商品并选择付款。点击我的可以修改自己的收货地址，以及查看所有订单的信息。
后台管理员在进入小程序后台管理系统时，首先看到的是登录界面。在登录界面中需要用户正确输入管理员账号，管理员密码以及验证码才能正常使用本管理系统的功能。在小程序管理中，管理员用户可以查看普通用户的信息并导出数据。在商品分类管理中，后台管理员可以新增，修改删除部分商品分类，还能通过调整排序权重来调整不同分类在小程序前端的显示顺序。在商品信息管理中，后台管理员可以对商品信息进行编辑，包括商品的查询，增加，修改，删除以及上下架。在订单管理中，管理员可以查看目前小程序商城的所有订单，还可以根据订单状态的不同来筛选订单。当发货完成后，管理员可以将通过输入具体快递公司名称以及快递单号来就修改订单的状态。在用户管理中，可以看到当前所有管理员的信息并允许进行编辑以及授权。在系统维护模块，可以通过登录日志来查看后台系统的登录情况，还可以通过系统日志来查看后台系统的所有操作情况。
系统的功能模块图如图5.1所示。
 
图5.1  系统功能模块图
5.3系统用例图及时序图
根据小程序商城的业务需求及功能设计产生出系统的用例图，将为后续的系统开发以及系统测试提供一定的帮助，系统用例图如图5.2所示。
 
图5.2  系统用例图
根据系统结构，系统时序图如图5.3所示。View即为系统的页面，Controller通过调用Service层控制业务流程，Service层则负责业务的具体逻辑处理，Dao层为最接近数据的部分，通过发送SQL语句实现数据操作。
 
图5.3  系统时序图
5.4数据库设计
5.4.1 数据库E-R图
根据小程序商城的需求分析以及相关的设计，对分析结果进行抽象化处理，得到了相应的概念模型，该模型可以用软件设计过程中的E-R图来体现。因为E-R图在软件设计中能体现出系统中实体与实体之间的关系以及实体所含有的各种属性，所以它是我们在概念结构设计中的常用表示方法之一。小程序商城的E-R图如图5.4所示。接下来将对系统中各个实体以及其所含有的属性进行相关介绍[10]。
微信用户实体，具体指的的微信小程序商城的买家，它具有用户编号，用户名称，用户联系方式，用户地址等属性。其中，用户编号，用户联系方式，用户地址等是微信用户在商城购买商品形成订单时所需要使用到的重要信息，后台管理员需要依靠这些用户信息来完成订单的发货操作。
商品实体，具体指的是微信小程序商城中的商品信息，它包括商品编号，商品名称，商品价格，商品库存，商品分类，商品状态等信息。其中，商品分类可以将具体商品区分出来以方便用户搜索，后台管理员也可以通过后台系统调整商品分类的排序权重来修改不同商品分类在小程序端的显示顺序。而且在后台管理系统中，由于多种原因，部分商品的信息虽然存储在后台管理系统中，但是并未上架，微信用户在小程序端并不能浏览这些商品，所以需要通过一个商品状态来记录商品的上下架信息，只有当商品上架时，微信用户才能在小程序端中浏览到该商品以及它的详细信息[11]。
订单实体，具体指的是微信用户在小程序端购买商品成功提交订单后后台管理系统自动形成的订单信息，它包括订单编号，商品编号，用户编号，收件人信息等属性。订单编号具有唯一性，方便后台管理员的管理。一个订单中可能包括多个商品，多个商品的信息可以通过商品编号从数据库中查询。用户编号为提交该订单的微信用户的用户编号，由于提交订单的微信买家不一定是商品的收件人，所以还需要一个通过一个收件人信息属性来记录收件人的各种信息，方便后台管理员的发货操作。
后台管理员实体，具体指的是微信小程序后台管理系统的用户，它包含了用户编号，用户账号，用户密码，用户状态等属性。后台管理员需要在登录页面输入正确的用户账号和用户密码才能进入后台管理系统。进入后台管理系统后，即可以对商品信息以及订单信息进行管理。后台管理员还可以创建其他管理员用户，也可以通过状态按钮来修改其他管理员的状态，禁用状态下的管理员即使在登录页面输入正确的账号密码也不能成功登录后台管理系统[12]。