博主介绍：擅长Java、微信小程序、Python、Android等，专注于Java技术领域和毕业项目实战✌
文末获取源码联系
精彩专栏推荐订阅不然下次找不到哟
Java项目精品实战案例（300套）
Java+小程序项目实战（200套）
目录
一、效果演示
二、前言介绍
三、主要技术
3.1、MINA 框架
3.2、B/S结构
3.3、mysql 数据库
四、系统设计（部分）
4.1、系统结构设计
4.2、系统开发流程设计
五、运行截图
5.1、系统主界面
5.2、分类展示界面
5.3、购物下单界面
5.4、订单管理界面
5.5、后台管理界面
六、代码实现
七、结论
八、源码获取
一、效果演示
基于微信小程序的的购物商城系统——小程序端
基于微信小程序的的购物商城系统——后台管理系统
二、前言介绍
而随着互联网技术的不断发展，互联网已经渗入到我们生活中的各个方面。移动设备的普及使我们的生活发生了翻天覆地的变化，这种变化也深刻影响着我们的日常生活。微信是腾讯公司在 2011年所发布的一款实时通讯软件，随着互联网技术的不断发展，微信的功能也不断得到扩充。微信目前已经成为了一个“航母级别的软件”，也是每个智能手机上必备的软件之一。直到 2017 年“微信小程序”的发布，也成为了业界的一股热潮。微信小程序的使用无需安装，使用时只需要扫一扫或者搜一搜，用完即走。微信小程序针对于用户来说，无需在手机上下载软件，只要是有微信这个软件即可使用。针对于小程序开发者来说，微信小程序开发时可直接调用自带的 API接口，开发时较为简单，节省时间人力与物力。与此同时，小程序也可以实现与原生 app 一样的流畅体验。
三、主要技术
3.1、MINA 框架
为了使开发更加快捷，微信小程序采用的框架为 MINA 应用框架。MINA 框架主要为一个负责数据交互的系统。其构成主要包括用来显示页面的视图层结构与负责实现数据交互的逻辑层系统。其中，视图层负责发出事件请求，逻辑层负责接受数据，处理数据。当逻辑层接收到数据后，视图层再根据逻辑层的数据改变，从而做出相应的更新，MINA 框架使逻辑层和视图层内的数据变化达到同步。
3.2、B/S结构
B/S结构主要有三层，分别为数据层、控制逻辑层和视图层。用户通过视图层，让控制层调用数据层的数据，从而达到整个访问过程。三层相互独立，维护方便，使用安全，三层有互相调用，提高效率。
3.3、mysql 数据库
mysql 数据库它有很多的优点，例如它在操作上能够让人通俗易懂、功能强大、信息储存量高等优点。所以被人们广泛应用，对于mysql数据库来说它一般主要是对数据进行编码和查询，而且在很多的设计当中都应用到了该数据库，在此过程当中我们可以对常规的数据进行查询和组合，所以我们在进行使用mysql数据库的时候只要对编写一小段的数据就能实现相应的功能。数据库，就是数据存储的储藏室，只不过数据是存储在计算机上的，而不是现实中的储藏室，数据的存放是按固定格式，而不是无序的，则定义就是 ：长期有固定格式，可以共享的存储在计算机存储器上。数据库管理主要包括数据表的建立，数据存储、修改和增加数据，为了使数据库系统能够正常运行，相关人员进行的管理工作。数据表的建立，可以对数据表中的数据进行调整，数据的重新组合及重新构造，保证数据的安全性。
四、系统设计（部分）
4.1、系统结构设计
4.2、系统开发流程设计
五、运行截图
5.1、系统主界面
用户进入小程序后，便可看到程序的主界面，具体如图5-1所示。页面被分为三大块，顶端是商品搜索界面和商品推广展示栏。中间部分是大类商品的选择，设置了家电、零食、美食、水果、衣服等五个基本模块。在下方是推荐商品的展示。最下方是各个模块的标签。
图5-1 展示主界面
5.2、分类展示界面
在分类展示界面中，当用户点击分类标签页即进入该页签，如图5-2所示。页面中左侧为各个分类，右侧为具体商品。
图5-2分类展示界面
5.3、购物下单界面
在购物下单界面中，用户可以选择自己喜欢的商品，加入购物车统一购买，如图5-3所示。
图5-3购物下单界面
5.4、订单管理界面
在订单管理界面中将展示用户的各类订单，如图5-4所示。用户可以对不同的订单进行支付、确认收货和评价。
图5-4订单管理界面
5.5、后台管理界面
在后台管理界面中用户可以对人员信息进行管理，也可以对商城的商品分类、上架物品、主页轮播图、订单及评论进行管理，如图5-5所示。
图5-4后台管理界面
六、代码实现
/* 用户 */const userInfo = {status: 1,data: {id: 1,mobile: 18888888888,nickname: 'Leo yo',portrait: 'http://img.61ef.cn/news/201409/28/2014092805595807.jpg'},msg: '提示'}/* 首页轮播图 */const carouselList = [{src: "/static/temp/banner3.jpg",background: "rgb(203, 87, 60)",},{src: "/static/temp/banner2.jpg",background: "rgb(205, 215, 218)",},{src: "/static/temp/banner4.jpg",background: "rgb(183, 73, 69)",}]/* 商品列表 */const goodsList = [{image: "https://timgsa.baidu.com/timg" />package com.ruoyi.web.controller.common;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.http.MediaType;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;import com.ruoyi.common.config.RuoYiConfig;import com.ruoyi.common.config.ServerConfig;import com.ruoyi.common.constant.Constants;import com.ruoyi.common.core.domain.AjaxResult;import com.ruoyi.common.utils.StringUtils;import com.ruoyi.common.utils.file.FileUploadUtils;import com.ruoyi.common.utils.file.FileUtils;/** * 通用请求处理 ** @author ruoyi */@Controllerpublic class CommonController{private static final Logger log = LoggerFactory.getLogger(CommonController.class);@Autowiredprivate ServerConfig serverConfig;/** * 通用下载请求 ** @param fileName 文件名称 * @param delete 是否删除 */@GetMapping("common/download")public void fileDownload(String fileName, Boolean delete, HttpServletResponse response, HttpServletRequest request){try{if (!FileUtils.checkAllowDownload(fileName)){throw new Exception(StringUtils.format("文件名称({})非法，不允许下载。 ", fileName));}String realFileName = System.currentTimeMillis() + fileName.substring(fileName.indexOf("_") + 1);String filePath = RuoYiConfig.getDownloadPath() + fileName;response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE);FileUtils.setAttachmentResponseHeader(response, realFileName);FileUtils.writeBytes(filePath, response.getOutputStream());if (delete){FileUtils.deleteFile(filePath);}}catch (Exception e){log.error("下载文件失败", e);}}/** * 通用上传请求 */@PostMapping("/common/upload")@ResponseBodypublic AjaxResult uploadFile(MultipartFile file) throws Exception{try{// 上传文件路径String filePath = RuoYiConfig.getUploadPath();// 上传并返回新文件名称String fileName = FileUploadUtils.upload(filePath, file);String url = serverConfig.getUrl() + fileName;AjaxResult ajax = AjaxResult.success();ajax.put("fileName", fileName);ajax.put("url", url);return ajax;}catch (Exception e){return AjaxResult.error(e.getMessage());}}/** * 本地资源通用下载 */@GetMapping("/common/download/resource")public void resourceDownload(String resource, HttpServletRequest request, HttpServletResponse response)throws Exception{try{if (!FileUtils.checkAllowDownload(resource)){throw new Exception(StringUtils.format("资源文件({})非法，不允许下载。 ", resource));}// 本地资源路径String localPath = RuoYiConfig.getProfile();// 数据库资源地址String downloadPath = localPath + StringUtils.substringAfter(resource, Constants.RESOURCE_PREFIX);// 下载名称String downloadName = StringUtils.substringAfterLast(downloadPath, "/");response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE);FileUtils.setAttachmentResponseHeader(response, downloadName);FileUtils.writeBytes(downloadPath, response.getOutputStream());}catch (Exception e){log.error("下载文件失败", e);}}}七、结论
本系统通过对微信小程序开发框架简介，从硬件和软件两反面说明了基于微信小程序的项目设计应用的可行性，本文结论及研究成果如下：实现了java与微信小程序相结合构建的应用，该小程序可以响应式展示。通过本次基于微信小程序的应用的研究与实现，我感到学海无涯，学习是没有终点的，而且实践出真知，只有多动手才能尽快掌握它，经验对系统的开发非常重要，经验不足，就难免会有许多考虑不周之处。比如要有美观的界面，更完善的功能，才能吸引更多的用户。
八、源码获取
大家点赞、收藏、关注、评论啦 、查看获取联系方式
精彩专栏推荐订阅：在下方专栏
Java项目精品实战案例（300套）
Java+小程序项目实战（200套）