基于微信小程序的食品购系统

1、基于微信小程序的食品购系统摘要随着互联网的迅猛发展，关于购物的各种网站、手机应用软件也变得越来越多姿多彩。 有些大型的购物网站和应用程序的功能太过复杂，界面过多，对于购物而言不够便利。而 随着微信的逐渐发展，使得微信小程序购物更加方便的一种途径。该系统使用微信开发者工具开发用户使用的小程序端页面，采用了 java开发技术和 MySQL数据库技术对系统的后台数据进行管理，实现了网上进行浏览商品，选择自己喜欢 的商品，实现网络形式的购物。管理员通过注册登录后可以对商品、用户、订单等信息进 行维护和管理，包括实现对商品等信息的增删改查等操作，从而促进了食品购系统的后台 维护和成功运行。该系统为实现人

2、们更便捷、更高效的购物行为创造了可能性。关键词：微信小程序；网上购物；java； mysqlABSTRACTWith the rapid development of the Internet, various websites and mobile application software about shopping have become more and more colorful. Some large shopping websites and applications have too complicated functions and too many interfaces,

3、which is not convenient for shopping. With the gradual development of WeChat, a way to make WeChat applet shopping more convenient.The system uses WeChat developer tools to develop small program pages used by users. It uses java development technology and MySQL database technology to manage the back

4、ground data of the system. shopping. After registering and logging in, the administrator can maintain and manage the information of commodities, users, orders, etc., including the operations of adding, deleting, modifying, and inspecting commodities and other information, thereby promoting the backg

5、round maintenance and successful operation of the food purchasing system.This system has created the possibility of realizing more convenient and efficient shopping behaviors.KEY WORDS:Wechat applet, online shopping, Java, MySQL目录 TOC o 1-5 h z HYPERLINK l bookmark7 o Current Document 1绪论 1 HYPERLIN

6、K l bookmark9 o Current Document 系统研究背景 1微信小程序的发展 1网上购物的发展 1网上购物系统的现状 2 HYPERLINK l bookmark11 o Current Document 系统研究意义 2 HYPERLINK l bookmark13 o Current Document 2系统需求分析3 HYPERLINK l bookmark15 o Current Document 系统需求概述 3 HYPERLINK l bookmark17 o Current Document 系统的方便性需求分析 3 HYPERLINK l bookmark

7、19 o Current Document 系统的可行性需求分析 3 HYPERLINK l bookmark21 o Current Document 系统的功能需求分析 3 HYPERLINK l bookmark23 o Current Document 3微信小程序介绍4 HYPERLINK l bookmark25 o Current Document 微信的简介 4 HYPERLINK l bookmark27 o Current Document 微信小程序的简介 4 HYPERLINK l bookmark29 o Current Document 微信小程序的基本功能介绍 5

8、 HYPERLINK l bookmark31 o Current Document 微信小程序开发技术的介绍 5微信小程序页面效果图展示 6 HYPERLINK l bookmark41 o Current Document MySQL12 HYPERLINK l bookmark43 o Current Document MySQL数据库的介绍12 HYPERLINK l bookmark45 o Current Document MySQL数据库技术介绍12 HYPERLINK l bookmark47 o Current Document MySQL数据库的表的实体对象12 HYPER

9、LINK l bookmark49 o Current Document Java后台管理系统 16 HYPERLINK l bookmark51 o Current Document 后台管理系统各模块页面效果图 16 HYPERLINK l bookmark53 o Current Document 后台管理系统的前端技术介绍 18后台管理系统的后台技术介绍 19 HYPERLINK l bookmark55 o Current Document 6食品购系统功能模块20 HYPERLINK l bookmark57 o Current Document 食品购系统的功能需求 20 HYP

10、ERLINK l bookmark59 o Current Document 食品购系统的功能描述 22面向用户的功能流程图 22面向管理员的功能流程图 22 HYPERLINK l bookmark61 o Current Document 7系统的测试与运行23 HYPERLINK l bookmark63 o Current Document 系统测试的意义 23 HYPERLINK l bookmark65 o Current Document 系统测试的结论 23 HYPERLINK l bookmark67 o Current Document 8结论 24 HYPERLINK l

11、 bookmark69 o Current Document 参考文献25 HYPERLINK l bookmark71 o Current Document 致谢261绪论系统研究背景微信小程序的发展最近这几年以来，互联网的普及已经成为常态，微信也已经成为家喻户晓的应用软件， 微信小程序从2017年以来，在微信公开课上面正式上线，逐步兴起，经过将近两年的发 展，已经形成了微信小程序新型的开发环境以及开发者生态。微信小程序，是这个中国IT行业中的具有影响意义的创新成果，越来越多的开发者加 入到小程序开发这个行列，齐心协力地推动了小程序的发展，当微信小程序经历全面开放 申请后，公司企业、政府部门

12、、新闻媒体、其他组织或者个人都可以成为开发者，都可以 申请和注册小程序。小程序的应用数量已经突破了一百万，并且覆盖在许许多多不同的行业中，因为小程 序的使用是不需要下载、不需要安装应用软件的，只要用户有微信，通过扫描二维码或者 点击搜索小程序的名称的方式，进入小程序页面。在许多城市中，小程序可以实现客车地 铁等交通工具的网上购票，可以实现找厕所等公共服务，还可以实现外卖点餐的功能等等。 总而言之，微信小程序的不断发展，创造了更多就业机会，推动了社会的稳定进步。网上购物的发展当今世界互联网可以说是风生水起，各种各样的购物网站、手机购物类的应用软件也 已经蔚然成风。购物对于当代人而言，不仅仅是当有

13、时间的时候出门逛街，更是足不出户 通过电脑或者手机就能够完成的事情。购物形式的多姿多彩，丰富了人们的生活方式，网 上购物最大的好处就是方便，用户不用亲自到实体店买东西，通过上网就可以了解大量自 己想要的信息，从而满足自己的需求，使得网购已经成为了当今社会不可或缺的一种生活 方式。随着电子商务热潮的一度兴起和互联网的迅猛发展，以及越来越多的实践深入表明， 网上购物不仅能够集中致力于提供给用户产品展示的美好体验，让客户们通过上网就可以 自由地选择自己心仪的商品，而且可以通过网络的方式使得购物成为不只是逛街挑选，更 是空闲时候的一种休息娱乐方式。在1998年3月18日的时候，中国第一笔网上电子交易成

14、功地在北京诞生，易趣网站 是我国国内最早产生的网站。2003年，一场非典的爆发居然间接推动了网上购物的发展， 就在此时，阿里巴巴旗下的淘宝网成立，马云带领着自己的团队在互联网行业夺得一席之 地，本系统在编写之前，对网上大量的商城进行了需求分析，并且对许多购物网站，购物 APP以及商城小程序进行了调查，包括页面的商品布局、用户的购物操作流程、管理员的 管理操作等。1.1.3网上购物系统的现状在如今这个信息化水平飞速发展的时代，网络这个名次已经成为了人们日常生活、学 习、工作中必不可少的重要部分，通过网络，人们可以了解信息，享受便捷，因此网上购 物的市场前景十分的广阔，特别是十分受到青年人和中年人

15、的喜爱。网上购物系统也可以 称之为在线商城，对于普通消费者来说，网上购物的最大优点就是方便和便宜。随着人们对这种购物方式的喜爱，越来越多的网上购物系统随之出现，并且获得了人 们的普遍好评。因此，可以说网上购物系统的发展前景是非常乐观的，网上购物系统的场 景化和社会化的形成就可以说是得益于移动智能手机的普及了，我国移动市场保持着高速 发展的形式，光移动端的交易额就可以占据相当大的比例。用户在网上浏览商品，通过网 上支付，进行点击购买，商家通过邮寄快递的方式进行发货，这种发展方式得到了用户的 认可，从而推动着网上购物系统的不断发展。系统研究意义微信应用软件应用的日益广泛，使得微信小程序得到了迅速的

16、发展，通过这一点就可 以看出来基于微信小程序的食品购系统就有很大的发展前景。另一方面，对于当今信息科 技高速发展的时代而言，网上购物已经发展成为了经济社会和网络信息中相互结合的时代 产物，具有明显的信息性、网络性、社会性以及交易性等时代特点。再加上是基于小程序 的特点，使得用户只需要通过微信应用程序，不需要再次下载安装别的软件就可以进入到 小程序，方便用户的使用。2系统需求分析系统需求概述做好充分的系统需求分析对于系统的设计者来说是至关重要的一步，只有明确的系统 的需求，知道自己的系统需要什么，还缺少什么，针对所发现的问题应该怎样做，才可以 做好该系统。本系统的需求分析是通过对用户的关于不同种

17、类食物的喜好，对微信小程序 以及许多网上购物手机软件的需求进行了详细地搜索和调查，按照用户对于商品的需求确 定了本系统的主要功能，分析并确定了实体的基本属性，方便用户使用时可以单纯的选择 商品进行购买，使得用户在使用本系统的时候可以有一种很好的体验。系统的方便性需求分析许多网上购物系统的存在很大一部分原因是为了方便用户进行浏览商品实现购买的， 所以购物系统的设计应该以页面简洁、操作简单、实用性强大为目标。通过调查发现，购物系统的最终目的就是想要通过用户使用该系统来提高流量，进而 实现了流量的转化，从而在其中赚取利益。所以系统的各个页面不应该设置的太过于繁琐， 商品的图片应该以简洁醒目的为主，不

18、宜太花哨，还是应该以有利于用户的体验为主。另一方面，现如今存在的许多软件系统在运行的时候，可能会出现大量的插件等占据 内存的东西，而且用户下载的同时，很容易就可能会下载到一些自己根本不需要的软件。 而基于微信小程序的食品购系统是一个不需要单独下载软件，在用户拥有微信软件的前提 下，通过搜索小程序名称或者扫描小程序二维码的方式，就可以使用的一个应用。系统的可行性需求分析基于微信小程序的食品购系统是用于在网上进行浏览商品，选择自己喜欢的商品，通 过网上支付的形式进行购物的，使用了微信开发者工具开发用户使用的小程序端页面，采 用了 java开发技术和MySQL数据库技术对系统的后台数据进行管理，本系

19、统所需要的软 件和硬件环境有：高性能的计算机一台，安装微信开发者工具，安装Eclipse的java可视 化开发工具，安装MySQL的服务器，Navicat Premium等图形工具。本系统的主要输入设 备使用的是键盘操作，输出设备使用的是显示器输出。系统的功能需求分析基于微信小程序的食品购系统主要可以大体分为两个模块，第一个模块是面向用户使 用的模块，其功能主要包括：用户通过微信客户端进入小程序，获取头像等信息、进行注 册登录、浏览商品、查看不同类型的食物、进行购买商品等操作。第二个模块是面向管理 员使用的模块，其功能大致包括：管理员注册登录，对商品、分类、用户等实体进行管理， 包括添加、删除

20、、修改、查询操作。3微信小程序介绍微信的简介微信，英文是WeChat,是由腾讯公司研发推出的一个应用程序，该应用程序能够实现 给智能终端提供免费的即时通讯。微信的使用需要消耗少量的流量，因此它支持网络快速 发送消息，其中消息可以包括许多形式，有语音、文字、图片、视频等。微信同时还支持 跨操作系统平台，也支持跨通信运营商。而且随着微信应用程序的发展，像公众平台、朋 友圈、摇一摇等许多服务插件也随之出现。通过查阅相关资料可以得知，自2012年3月29日，微信应用程序的用户耗时433天 突破了一亿，而后又更迅速的发展，是国内用户数量最多的一个移动社交产品，是过去20 年网络通信和移动通信的集大成者，

21、成为了人们的一种生活方式。2020年3月，据统计微 信及WeChat的合并月活跃账户的数目达到了 11.65亿。微信的功能也越来越强大，第一，微信可以添加好友后和他人进行即时的免费通讯， 第二，微信用户还可以通过语音聊天室和许多人进行实时对讲机功能，还有微信小程序的 出现使得微信更加丰富多彩。第三，微信在出行方面推出了 “高速e行”即通过绑定车和 微信账户的方式，开通免密，在下高速时进行通过自动地识别车牌号码，就可以在微信账 户中自动扣钱。第四，微信可以绑定银行卡，在微信客户端进行安全高效的手机支付，还 有微信提现功能等等。微信的拦截系统也很强大，其拦截分为三大系统，有：技术拦截、 举报人工处

22、理和辟谣工具。总而言之，微信产品的优势有许多，第一、省流量。大约1000条的文字消息，1000 秒的语音消息、1分钟的视频信息的发送仅仅需要1M流量，而且微信的后台运行仅仅需 要消耗大约2.4K每小时。第二，软件免费。微信应用程序里不需要下载别的软件就可以 使用QQ邮箱助手、通讯安全助手等。第三、多平台。微信支持iPhone、Android、Windows phone、塞班平台的手机之间进行相互的接收和发送消息。第四、交友方式丰富。用户可以 通过手机通讯录、QQ、微信扫描二维码、微信号查找等方式进行好友的添加。微信小程序的简介微信小程序，英文名是WeChat Mini Program，是连接普

23、通用户和服务的一种全新的方 式，是一种新的开放能力。于2017年1月9日正式上线，小程序可以在微信应用程序内 被很方便地获取、使用和传播，而且具有十分出色的用户使用体验。据了解，微信小程序 并不是一个凭空产生的新概念，当微信中的WebView渐渐地发展成为移动Web的一个非 常重要的入口的时候，微信从此便拥有了相关的JS API 了。微信小程序提供给用户更多的产品功能设计层面上的控制力。小程序的设置页中给用 户提供了一种数据权限开关，用户在使用小程序时需要开启开关，当用户授权后关闭了该权限，小程序再次获取用户信息的时候就需要用户再次重新进行授权。腾讯公司提倡着的 隐私保护理念是“科技向善，数据

24、有度”。微信小程序的基本功能介绍第一、精美的微信小程序页面。一个小程序即使它的功能再齐全，使用到的技术再强大，但是它的页面不美观或者过 于花哨都会给用户带来不好的用户体验，不仅不会吸引用户前来使用，可能会导致用户的 第一印象太差，从而使得小程序逐渐被遗忘，甚至最终被淘汰。因此，拥有一个美观的小 程序页面，是设计者设计小程序需要注意的事项之一。第二、准确的导航栏。对于一个功能比较多的小程序而言，拥有准确的导航栏是尤为重要的。就像食品购小 程序的底部导航栏，分别是首页、分类、购物车、我的这四个导航，明确地为用户显示了 该小程序是主要页面。还有其分类页面中的左侧有不同的分类，每个分类都可以展示相对

25、应的不同商品，从而明确地告诉用户各种商品的信息。第三、商品收藏功能。对于购物的小程序而言，商品收藏的功能类似于一个非常方便的容器，如果用户不需 要购买该商品，但是又不想错过，此时就可以选择该商品添加进收藏功能里面。第四、商品搜索功能。用户通过在搜索框中输入自己想要购买的商品名称，就可以准确地找到商品，从而节 省了时间，避免了浏览到其他自己不需要的商品。微信小程序开发技术的介绍微信小程序的开发使用的是微信开发者工具，开发者通过使用小程序进行调试，可以 完成API和页面的开发调试，而且使用开发者工具可以进行代码的查看和编辑以及小程序 的预览等功能。开发者在微信开发者工具的登录页，能够通过使用微信应

26、用程序扫描二维 码的方式进行登录，开发者工具可以获取到该开发者的微信账户信息，从而进行开发和测 试小程序，新建项目时需要申请小程序的AppID。微信小程序整体的包的大小有限制，基本都要在4M之内，所以如果小程序里边需要 实现展示大量图片的话，图片需要存放在服务器上。在微信小程序中有个配置文件project.config.json，开发者通过该文件可以在不同的设 备中进行开发。目前开发者工具提供了五种文件的编辑，分别是：wxml、wxss、js、json、 wxs。每个页面都有wxml、wxss、js、json，但是不是必须具有的。小程序与网页的相类似， 网页可以用html，css和js来完成，

27、而小程序则用wxml、wxss、js来实现。wxml文件是用于描述和构建页面结构的，在wxml中可以进行动态数据的绑定。小程 序提供的插值语法，即使用Mustache语法，双大括号的形式。通过wx:for进行列表的渲 染。wxss文件用来描述页面的各个样式，有尺寸单位和样式导入的特性，其中在iPhone6 中，固定屏幕宽度为750rpx,有1rpx=0.5px的换算关系。js文件是用来添加逻辑信息的， 定义app用于调用getApp()，页面的初始数据在data里进行设置，关于生命周期函数的监 听页面，其加载在onLoad中设置、初次渲染完成使用onReady，页面上拉触底的事件处理 函数用o

28、nReachBottom。在 json文件中使用usingComponents: 可以进行其他组件的使用。 app.json配置文件是用于对小程序进行全局配置的，页面之间的跳转的URL中的地址必须 先在app.json中声明，其决定着页面设置的文件路径、窗口表现、可以设置网络超时时间 的信息、可以设置多个tabBar等。配置小程序以及其页面是否允许被微信索引的时候，需要配置好其sitemap.json，这样 在控制台上就可以显示其索引的调试信息。sitemap.json默认的情况下是所有的页面都会被 索引。其配置可以如下所示：rules: action: allow, page: *使用开发者

29、工具开发小程序最主要的开发语言便是JavaScript，是ECMAScript的一种 实现，开发者通过使用JavaScript来进行业务逻辑的开发以及调用API来实现业务的需求。 3.4微信小程序页面效果图展示基于微信小程序的食品购系统的小程序端是提供页面给用户使用的，大体分为四个主 页面，它们分别是：首页、分类、购物车、我的。用户通过微信小程序后可以浏览商品， 查看不同种类的商品，查看各个商品的详细信息，用户登录后可以完善自己的信息，还可 以选择心仪的商品添加进收藏，或者添加到购物车里面。首页中有搜索框、轮播图、和部分展示的商品。页面最上面的搜索框用来搜索商品名 称的，首页中的搜索框需要设置

30、bindtap和bindinput节流，bindtap绑定点击事件，该小 程序中设置了 bindtap=mysearch，通过使用wx.navigateTo方法跳转到指定的商品详情的 页面，这种方法仅仅是非tabBar页面，在tabBar页面中跳转页面则需要使用的方法是： wx.switchTab方法。Bindinput监听input输入框的输入和节流，本小程序通过在wxml中设 置了 bindinput=spinput，在js文件中实现监听输入框的关键词放入到data中。轮播图通 过swiper和swiper-item实现，通过block中的wx:for= 遍历js中的图片。下面的展 示商品

31、是使用的scroll-view可滚动视图区域。其首页的效果图如图3-1所示：LlfeChaTFT6:2Si 灯 一，拿第*谓轴A商品名称感恩生活- sJ+Rri- XL AC I I b- IILM4 ini 4ft图3-1基于微信小程序的食品购系统的小程序端首页分类页面设置了几种不同种类的商品，分别展示了热门推荐、水果、零食、牛奶、蛋 糕、巧克力、饼干等许多种类的食品。用户在点击每个不同的分类时，分别有对应种类的 商品在右侧展示，用户也可以进一步点击商品，查看商品的详情页面。在分类页面中用到了 wx：for循环数组和wx:for-item给列表赋别名，是用来定义在循环 中的每一个元素的变量。

32、对于展示商品的模块中，用到了三元运算符，其语法为“条件表 达式?表达式1:表达式2，即当条件表达式的值为true时调用表达式1,否则调用表达式2。 其分类页面效果图如图3-2所示，商品详情页面的效果图如图3-3所示。请他人商品名秣 on120rr巧克 力肝1G： 25苹果.年再图3-2 基于微信小程序的食品购系统的小程序端分类页面分类页面中数组绑定事件的部分js代码如下：tapfl:fUnction(e)var that = this;var index = e.currentTarget.dataset.index;for (var i = 0; i that.data.fllist.len

33、gth; i+) that.data.fllistiflactive = 1; that.data.fllistindexflactive = 2;that.setData(fllist: that.data.fllist,gtype:that.data.fllistindex.id)setTimeout(function() that.loadInitData();,300)5:3G1M W苹果2玩的斤三具.含有较寝的狎，能可人体过剩的油盐燃合，使 N1E出体外，当人体爆入钠盐过多囿，Qfe些革果， 有利于平面体内由解质.聿吴中含芍的喷和钱等元 变.易阖筋壁明收，台补葩养血、宁冲安目酢冏;L

34、*J 收藏图3-3 基于微信小程序的食品购系统的小程序端商品详情页面当用户登录成功后，可以对商品进行添加进购物车，可以实现购买，或者加入收藏。 在购物车页面低端，对删除和立即购买设置其绑定事件。对于删除事件的进行判断语句如 下所示：if(wx.getStorageSync(uid)for (var i = 0; i that.data.list.length; i+) if (that.data.listi.checked = checked) ids += that.data.listi.id + ,;购物车页面如图3-4所示。1卸上WHh图3-4 基于微信小程序的食品购系统的小程序端购物车

35、页面在我的页面，用户可以编辑自己的个人资料信息，包括真实姓名、联系电话、省市地 区以及用户的详细地址。用户可以在我的页面查看自己的订单和收藏的商品。我的页面中的登录按钮需要使用button的open-type=getUserInfo来引导用户主动进 行权限的授予。在js中对页面数据初始化时设置buttonshow: 1,当用户填写个人资料，查 看我的订单时都需要判断用户是否已经是登录状态，只有登录的前提下，才能通过设置 wx.navigateTo跳转到相应的模块。在个人信息中，使用了 picker组件，是一个从底部弹起 的滚动选择器，选择器的类型通过mode属性来设置，设置省市区的时候可用re

36、gion，设 置其bindchange触发事件。bindGetUserInfo: function (e) var that = this;if (e.detail.userInfo) ,因为小程序执行更新操作时，不能直接获取用户的信息，所以在写其登录按钮的时候， 要设置button触发bindgetuserinfo事件如下：button open-type=getUserInfo bindgetuserinfo=bindGetUserInfo登录/button我的页面如图3-5所示。 06:3个人费科我的订单aonLdJ图3-5 基于微信小程序的食品购系统的小程序端我的页面MySQLMySQ

37、L数据库的介绍MySQL是一种关系型的数据库管理系统，是开放源代码的，即任何人在许可下可以 进行下载和修改个性化需要，因此广受人们的使用。MySQL通常使用结构化查询语言SQL 对数据库进行管理，使得数据库的存储和更新操作变得更好实现。MySQL具有速度快、 可靠性好、适应性强的特点，可以在不需要事务化处理的前提下使用。关系数据库的特点就是把数据保存在不同的表里面，然后再把这些表保存在不同的数 据库里面，这种分开存放的设计提高了 MySQL的读取速度，具有很强的灵活性和可管理 性。MySQL数据库技术介绍JPA是一个标准接口，是Sping Boot访问关系型数据库的，全称是Java Persi

38、stence API， 如果想要在JPA中使用MySQL数据库，只需要对其进行建模，在java的实体类中定义好 属性，成功编译后，就可以在图形化界面Navicat Premium中看到自动生成的表。在Spring Boot的配置文件中，如果spring使用了 JPA这个标准接口，并且类型定义为 LocalContainerEntityManagerFactoryBean 的话，那么组件注册在该配置文件中出现即可， 其他的配置文件可以忽略掉。用注解的方式自动注册bean。还需要定义实体管理器工厂， 指定JPA持久化，hibernate.hbm2ddl.auto设置为update，可以实现表结构的

39、即时更新功能。 而且在 java 文件中需要对数据库进行增加、修改、查询、删除的操作时需要导入 org.springframework.data.jpa.repository.JpaRepository 和 Query 两个包。MySQL数据库的表的实体对象在设计之前和设计的过程中，通过多次修改，最终确定了本系统的数据库表结构。有 用户表、商品表、商品类别表、轮播图表、订单表、购物车表、收藏表，一共七个表。其 系统的实体对象的各个属性如图4-1至图4-7所示。usernameswordlogintimecountryhead inn gctimenickname)real nameadmin

40、但户图4-1用户实体属性图在用户这个实体中，有两种角色，第一种是在小程序端购物的用户，第二种是在java 端管理平台的web前端的管理员。其中属于管理员的属性有：用户id、用户名、密码、注 册时间和登录时间。购物的用户属性有：id、真实姓名、昵称、密码、头像、电话、注册 时间、登陆时间、省、市、区、具体地址。ctimeremark图4-2商品实体属性图good向品)图4-3商品类别实体属性图在商品这个实体中，给它设置了七个属性，有商品id、商品名称、商品价格、商品的 所属类型、商品的上架时间、图片和商品本身具体的内容。在商品类别的实体中，定义了 id、种类名称和序列位置三个属性。图4-4轮播图

41、实体属性图图4-5用户订单实体属性图在轮播图实体中，设置了其id和图片地址两个属性。对于订单实体，设置了六个属性， 分别是订单编号、用户id、用户的下单时间、订单的状态、订单数据和总额信息。图4-7用户收藏实体属性图对于购物车实体而言，有id、商品编号、用户id和数量四个属性。在收藏实体中，有 id、用户id和商品编号三个属性。Java后台管理系统后台管理系统各模块页面效果图后台管理的角色是管理员，通过注册登录进入食品购管理平台，其管理操作有用户管 理、商品管理、类别管理、订单管理、轮播管理，页面左侧为各个导航。如下图5-1至图 5-5所示。图5-1食品购管理平台的用户管理jfttbiftna

42、w撮作里用 tTSR*禽国FK七*ran丁制e*tETnay*3占好；两砧丽=w哥m间二密如间.*ms-事新卷的H三军加，扯睢白际网si*里wafliiB城:础呵IlSKJSBth期咽处年ffV水is刘砂胡鹏M郎如*餐式礼忸S骞曹493Mo:刀 彩川泗4 怔曰将用的$I? IfrJI5限前a删K552O3S43.23 SftiftHd安黑翠更例H加厘他1出破似Y7片航tBtT刘四回耳口可叮4 * 方亚史明干252ft2fl43ZJ2ft3fli：SQ聂即阴理的的和耻眸舞ITMO图5-2食品购管理平台的商品管理图5-3食品购管理平台的类别管理图5-4食品购管理平台的订单管理图5-5食品购管理平台

43、的轮播管理5.2后台管理系统的前端技术介绍EasyUI框架：在java后台管理的web端的页面展示中，用到了 EasyUI框架，EasyUI 是一种用户界面插件集合，给Web的技术开发人员提供了非常简单并且易使用的组件，能 够快速地在jQuery和html5之上轻松地创建web页面，使用EasyUI不需要写太多的代码， 仅仅只是需要编写一些HTML简单的标记便可以成功地定义用户的界面。通过查阅资料得 知，其中声明UI组件的办法有两种，第一种在html或者jsp中声明组件的形式是在标签 的class里设置为：class=easyui-dialog”。为网页创建边框布局的时候可以设置 calss=

44、easyui-layout，确定好布局容器，定义好区域。本系统使用的是jquery-easyui-1.7.0 的版本，使用easyUI的优点有很多，不仅操作简洁，而且可以节省开发网页的时间。EL表达式使用起来可以让jsp书写起来简单，得到更加简洁的代码。通常情况下，在 jsp页面中，访问对象就是通过使用EL表达式来进行表达的，其格式是用$符加一对大括 号来表示的，如果EL表达式中的变量没有设定好范围的话，就默认在page内进行查找， 然后再依照次序在request、session和application的范围内查找。JavaScript是一种web的编程语言，是用来进行编辑网页行为的，对于设计

45、方面和概 念方面来说与java是一种完全不相同的语言。在使用时JS代码必须在 标签之间存放。AJAX不是编程语言，但是使用AJAX，在不刷新页面的情况下就可以使 得页面得到更新，当页面加载后，会从服务器请求和接收数据，允许通过与web服务器通 过交换数据来进行异步更新网页，因此，不需要再次加载整个页面，就可以实现更新网页 的需求。JSON是通过JS对象标记法来书写文本的。jQuery属于一个JavaScript的类，简 化了 JavaScript的编程。在商品管理页面中使用AJAX进行更新的部分代码如下：$.ajax(url：ctx + /goodsController/gtypeList,t

46、ype：post, data:,dataType:json, success:function(res) $(#type).empty(); $(#type).append( 全部 ); for(var i=0;i++) ！ )5.3后台管理系统的后台技术介绍Springboot,是继承了 spring框架原来特有的性质的全新的一种开源框架，它致力于快 速开发，通过集成大量的框架解决了依赖包的版本冲突问题和引用不稳定问题，是用来对 新spring的初始搭建和开发过程进行简化的，在使用时需要对web.xml进行配置，配置 spring事务，添加注解，配置日志文件等。总

47、而言之，springboot的使用给项目节省了搭建 的时间，而且不需要关注各个不同框架是否兼容是否相适应的问题。MyBatis，是一种持久层框架，支持定制化的SQL，存储过程和高级映射，避免了 JDBC 代码，自行设置参数和获取结果集，可以通过配置和原生map来使用注解或者是XML。 MyBatis有三层功能架构：API接口层、基础支撑层以及数据处理层。其教程简单易学， 不依赖第三方，而且不会对相应的程序或者数据库的设计强加影响。6食品购系统功能模块6.1食品购系统的功能需求基于微信小程序的食品购系统主要分为两个部分，第一个部分是面向用户的小程序端 页面，第二个部分是面向管理员的web端页面，

48、其功能块划分如下图6-1所示：图6-1基于微信小程序的食品购系统功能块划分效果图ER 图是描述用于实体、属性以及联系的关系的数据模型，这种实体联系模型提供了 描述实体联系的图形符号，可以作为用户和系统分析员之间进行交流沟通的有效工具，化 抽象为形象，接近于人的思维习惯。矩形框代表实体，椭圆形代表实体的各个属性，菱形 框表示实体之间的某种关系。ER图的联系有三种类型，分别是一对一联系、一对多联系 和多对多联系。本小程序使用的数据库实体大致分为七种，具体细分的话可以按角色的不 同分为用户和管理员。该数据库对应的ER图如6-2所示：注将时”豆江H 收下史：M图6-2基于微信小程序的食品购系统的ER图

49、6.2食品购系统的功能描述6.2.1面向用户的功能流程图6.2.2面向管理员的功能流程图健改商品百面用户信总Hd邺I* I*订单管理的除商品I轮幽容理的随笆播典湖:用理7系统的测试与运行7.1系统测试的意义系统测试对于设计者本身而言就有很大的意义，这不仅仅是在检测系统的安全性，也 是对系统的可靠性进行检测，这两个特性对一个系统是非常重要的。系统检测还有利于查看设计的功能是否能够顺利的运行，是否真的有良好的用户体验。7.2系统测试的结论基于微信小程序的食品购系统在进行系统测试的时候，无论是在java端还是小程序端 都可以顺利运行，两种角色的用户也可以实现其中的功能。只是系统还不够完善，例如： 小

50、程序在运行时页面刷新的速度较慢，用户关于购买的功能不是很齐全等问题。8结论微信小程序是用来连接用户和服务的前所未有的一种全新的方式，小程序提供了非常 简单的开发框架，并且还有很高效的组件和API,用户可以直接在微信应用程序中非常便 捷地被获取和传播，有利于用户有很好的使用体验。基于小程序来设计系统具有很多优点， 其设计指南以尊重用户知情权和操作权为基础，做到建立友好高效的用户体验。小程序所必须的页面组成有具有页面逻辑作用的js文件和具有页面结构作用的wxml 文件，前者在逻辑层工作，后者在渲染层工作。基于微信小程序的食品购系统的设计与实现的过程中，加深了我对于开发完整的系统 的整体认识，使得自

51、己对java方面的知识有了更深的理解，同时也学习了微信小程序通过 开发者工具的使用和编译。本系统中采用了 easyUI、springboot、springjpa等技术来进行开 发设计。基于微信小程序的食品购系统致力于给用户提供简洁美观的商品展示页面，该系 统是的主要功能包括用户通过微信进入小程序，浏览商品，通过登录完善信息来进行购买 自己喜欢的食品，以及java后台管理功能，包括对用户、商品、分类，轮播图等的增删改 查等管理操作。在设计的过程中也遇到了许多问题，比如说，由于类的属性设置不合理， 导致多次重新设计数据库的表，在多表查询的过程中也遇到了一些问题，还有注解的使用， 脚本语言的使用方法等都需要通过百度等途径进一步学习。通过实现该系统，使得我对多个功能模块的融合有了新的感受，这不仅仅是需要实现 每个功能，还需要有一定的逻辑思维，让各个模块有顺序的相结合。参考文献Suher J , Szu、hi Huang, Lee L . Planning for Multiple Shopping Goals in the MarketplaceJ. Journal of Consumer Psychology, 2019, 29(4).Yao C , Lee Y C . An Empiri