关键字：小程序商城系统（含前端源码、后端源码、微信小程序源码）

 （一）系统介绍

    1.1 系统介绍

    小程序商城系统（含前端源码、后端源码、小程序源码）

    一款基于JAVA、Vue和微信小程序技术栈的小程序商城系统，含前端源码、后端源码、微信小程序源码。比较适合毕业设计、学习等使用。不建议商用使用。Weshop是基于Spring Cloud(Greenwich)开发的小程序商城系统，提供整套公共微服务服务模块，包含用户中心、商品中心、订单中心、支付中心四大基础服务模块，微信端、管理平台两大聚合服务模块，支持服务治理、监控和追踪等功能。

    核心功能描述以及主要功能列表：

    项目核心架构：前后端分离，清晰解耦。项目采用经典的前后端分离架构，这也是目前开发中的主流架构模式，能很好地实现开发效率提升和职责拆分。本项目前后端分离，前端基于Vue参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。后端采取了MVC模式，根据前端需要的数据分模块设计了相应的接口、控制层、数据持久层。后端技术栈：后端主要负责业务逻辑处理、数据持久化、接口提供等核心功能，为前端提供稳定、高效的API支持。前端技术栈：前端分为两个端：手机端（用户使用）和后台管理端（管理员使用），各自独立开发部署，通过调用后端API实现数据交互。

   微信小程序功能模块：

   小程序项目包含4个tabBar：首页、发现页（即商品展示页）、购物车、我的。另有商品详情页、我的收藏、订单结算页面、我的订单。实现了商品的展示、商品分类查询、关键字搜索商品、商品详细信息展示、用户购物车、订单结算、用户订单、用户收藏列表。

   后台管理端功能模块：

   用户管理、重置密码、授权角色、在线用户、角色管理、授权菜单、菜单管理、部门管理、岗位管理、数据字典、参数配置、登录日志、系统日志、系统通知。

   登录：页面使用了element-ui的Dialog实现弹出蒙版对话框的效果，登录按钮设置在App.vue根组件，通过vuex中的showLogin状态控制登录框是否显示。这样设计是为了既可以通过点击页面中的按钮登录，也可以是用户访问需要登录验证的页面或后端返回需要验证登录的提示后自动弹出登录框，减少了页面的跳转，简化用户操作。用户输入的数据往往是不可靠的，所以本项目前后端都对登录信息进行了校验，前端基于element-ui的表单校验方式，自定义了校验规则进行校验。

   注册：页面同样使用了element-ui的Dialog实现弹出蒙版对话框的效果，注册按钮设置在App.vue根组件，通过父子组件传值控制注册框是否显示。用户输入的数据往往是不可靠的，所以本项目前后端同样都对注册信息进行了校验，前端基于element-ui的表单校验方式，自定义了校验规则进行校验。

   首页：首页主要是对商品的展示，有轮播图展示推荐的商品，分类别对热门商品进行展示。

   全部商品：全部商品页面集成了全部商品展示、商品分类查询，以及根据关键字搜索商品结果展示。

   商品详情页：商品详情页主要是对某个商品的详细信息进行展示，用户可以在这里把喜欢的商品加入购物车或收藏列表。

   我的购物车：购物车采用vuex实现，页面效果参考了小米商城的购物车。详细实现过程请看：基于Vuex实现小米商城购物车

   订单结算：用户在购物车选择了准备购买的商品后，点击“去结算”按钮，会来到该页面。 用户在这里选择收货地址，确认订单的相关信息，然后确认购买。

   我的收藏：用户在商品的详情页，可以通过点击加入 喜欢 按钮，把喜欢的商品加入到收藏列表。

   我的订单：对用户的所有订单进行展示。

    前端管理端功能模块：

   前端包含了11个页面：首页、登录、注册、全部商品、商品详情页、关于我们、我的收藏、购物车、订单结算页面、我的订单以及错误处理页面。实现了商品的展示、商品分类查询、关键字搜索商品、商品详细信息展示、登录、注册、用户购物车、订单结算、用户订单、用户收藏列表以及错误处理功能。

  （二）系统开发环境及开发工具

   系统开发中使用到的技术列表如下：

    2.1前端技术框架

 2.3小程序技术框架

 2.4程序部署和配置

（一）前端架构设计

UniApp框架实现跨平台开发、前端基于Vue+Vue-router+Vuex+Element-ui+Axios参考小米商城实现。

（二）后端接口设计

前端：微信原生小程序 + Vue.js

后端：Java

数据库：MySQL+ Redis

部署：阿里云 / 腾讯云

 (三) 部署使用方法

1. 克隆项目

2. 配置数据库

   创建数据库并导入脚本，修改数据库配置

3. 编译项目

4. 启动服务

 后端启动服务

1. 通过下载源码

2. 创建数据库weshop，数据库编码为UTF-8

3. 执行文件，初始化数据

4. 修改配置中心文件，更新MySQL账号和密码，更新RabbitMQ配置，更新zipkinServer配置

5. 运行Maven命令mvn install

6. 安装weshop-admin-ui模块，运行mvn install和mvn build命令，运行命令前需要安装nodeJs

7. 运行weshop-eureka-server、weshop-config-server、weshop-api-gateway这几个基础服务

8. 运行weshop-user、weshop-goods、weshop-order、weshop-pay这几个api服务

9. 运行weshop-wechat、wechat-admin这几个endpoint

10. http://localhost:8027/index.html访问后台管理，http://localhost:8020/weshop/swagger-ui.html访问Swagger页面

11. 打开微信开发者工具，导入weshop-wechat-ui模块,点击编译即可，此时可以预览商城效果

    （四）源码下载说明以及项目说明

    【免责声明】本公众号不是广告商，也没有为其他三方网站或者个人做广告宣传。文章发布源代码和文章均来源于各类开源网站社区或者是小编在项目中、学习中整理的一些实例项目。主要目的是将开源代码分享给喜欢编程、有梦想的程序员，希望能帮助到你们与他们共同成长。其中用户产生的一些自愿下载、打赏或者付费行为，原则与平台没有直接关系。如果涉及开源程序侵犯到原作者相关权益，可联系小编进行相关处理。

    
    

    【备注】建议使用前先遵守查看相关项目的协议。开发使用请联系原作者授权使用。

    关注公众号，在消息中回复：小程序商城
    

    即可获取下载链接，直接下载就可以了