# 喜果GO后台管理系统

**Repository Path**: Emma_diko/final

## Basic Information

- **Project Name**: 喜果GO后台管理系统
- **Description**: No description available
- **Primary Language**: Java
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2020-12-17
- **Last Updated**: 2024-10-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## <p align = "center"> **东莞理工学院网络空间安全学院**  </p>
#####  **课程名称** ：企业级开发框架专题</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;**学期：2020秋季**   

`实验名称`：基于微信小程序的新零售移动电商系统设计与实现
`姓名`：黎俊芩 &nbsp;&nbsp;&nbsp;&nbsp;`学号`：201841413311&nbsp;&nbsp;&nbsp;`班级`：18网工3班  
`实验地址`：宿舍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`实验日期`：2021-1-8&nbsp;&nbsp;&nbsp;&nbsp;`指导老师`：黎志雄  
`教师评语`：XXX&nbsp;&nbsp;&nbsp;&nbsp;`实验成绩`：XXX&nbsp;&nbsp;&nbsp;&nbsp;`百分制`：XXX  
`同组同学`：莫明娇 201841413126 网络工程1班

# 实验四   基于微信小程序的新零售移动电商系统设计与实现



#### 一、项目简介

​	受2020年的疫情影响，消费者闭门不出，线下门店纷纷关闭，实体经济受到重大冲击。除了疫情的挑战，传统零售与传统电商，一直被效率、场景、管控等问题困扰。

​	新零售，赋能传统零售转型升级。线上商城与线下门店的交易无缝融合，通过技术改变消费者的购物习惯，结合高效的物流配送，极大提升消费者的购物体验。基于微信的生态圈用户流量，让平台更快的传播获客，吸引海量用户资源。

​	基于上述的背景，本实验项目作为课程的期末大作业，要求学生团队研发基于微信小程序的新零售移动电商系统，专为新零售而生的电商系统解决方案。

#### 二、需求分析

​	本实验项目要求学生团队设计实现的基于微信小程序的新零售移动电商系统可以解决如下需求:

1、本项目可以分为两个客户端:

a)用户端

​	i)使用微信小程序构建;

​	ii)使用微信账号登录客户端;获取住户的微信账号openid，保存在数据库，
​		以关联相关订单信息;

​	iii)要求界面美观，主题统一;

​	iv)微信小程序界面，可参考“喜菜GO”，如下图:

 <p align=center ></p>
<div align=center>
    <img width = '50%' height ='50%' src ="https://images.gitee.com/uploads/images/2021/0107/223824_634b0237_7968815.png "/>
</div>
<p align=center ></p>
<div align=center>
    <img width = '50%' height ='50%' src ="https://images.gitee.com/uploads/images/2021/0107/223844_a25f648c_7968815.png "/>
</div>



b)后台管理端

​	i)可以使用vue或其它前端框架构建。

​	ii)实现管理后台各个功能界面。要求界面简洁精美，主题统一;

​	iii)后台登录逻辑需接入腾讯防水墙，https://007.qq.com/;

​	iv)后台界面例子如下图:

<p align=center ></p>
<div align=center>
    <img width = '50%' height ='50%' src ="https://images.gitee.com/uploads/images/2021/0107/223912_46df44c4_7968815.png "/>
</div>
<p align=center ></p>
<div align=center>
    <img width = '50%' height ='50%' src ="https://images.gitee.com/uploads/images/2021/0107/223935_4d1da896_7968815.png "/>
</div>



2、后台管理端功能模块: 

a)管理员账号管理模块(CURD) ;

b)胪管理模块(查询用户的详细信息、可以锁定用户不能登录或不能交
易。);

c)使用Spring Security安全框架实现认证、访问控制;

d)微信小程序界面定制模块(可定制展示在小程序广告图片、可定制小程序的菜
单等) ;

e)商品管理模块(CURD) ;

f) 订单数据统计模块，包含各种数据图、表展示。注意,金额的数据类型使用
decimal类型; ;

g)所有列表可以进行综合查询，特别是时间字段,诃以排序; 

h)所有列表可以导出excel文件或pdf文件。



3、可选可以与智通硬件对接，实现更高效的无接触交互体验。 (加30分)

#### 三、实验任务

1.用户端：

a)登录

<p align=center >未登录</p>													
<div align=center>
    <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/1-1.png"/>
</div>

b)登陆成功，获取openId

​<p align=center >点击登录弹出验证框</p>						

<div align=center>
   <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/1-2.png"/>
</div>

<p align=center >登陆成功显示头像以及昵称</p>	
			 	
<div align=center>
    <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/1-3.png"/>
</div>

<p align=center >获得openId</p>									

<div align=center>
    <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/1-4.png"/>
</div>





c)前端将openId保存在storage中，用于关联订单时取出并一起保存在数据库

<p align=center ></p>
<div align=center>
    <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-1.png"/>
</div>
<p align=center >小程序前端代码</p>
<div align=center>
    <img width = '50%' height ='50%' src ="https://images.gitee.com/uploads/images/2021/0107/225552_d109b6db_7968815.png"/>
</div>
<p align=center >添加商品到购物车</p>
<div align=center>
    <img width = '50%' height ='50%' src ="https://images.gitee.com/uploads/images/2021/0107/225120_8cabf8b0_7968815.png"/>
</div>

<p align=center >结算并支付，将openId和订单情况一并存入数据库中</p>
<div align=center>
    <img width = '50%' height ='50%' src ="https://images.gitee.com/uploads/images/2021/0107/225244_7a9e28ed_7968815.png"/>
</div>

<p align=center >操作成功</p>
<div align=center>
    <img width = '50%' height ='50%' src ="https://images.gitee.com/uploads/images/2021/0107/225337_635a88b8_7968815.png"/>
</div>
<p align=center >数据库显示</p>
<div align=center>
    <img width = '50%' height ='50%' src ="https://images.gitee.com/uploads/images/2021/0107/225718_91414922_7968815.png"/>
</div>

2.后台管理端：

a)使用vue框架，接入腾讯防水墙

<p align=center ></p>
<div align=center>
    <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-2.png"/>
</div>
<p align=center ></p>
<div align=center>
    <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-3.png"/>
</div>
<p align=center ></p>
<div align=center>
    <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-4.png"/>
</div>


b)首页显示订单情况（订单数+交易总额）

<p align=center ></p>
<div align=center>
    <img width = '50%' height ='50%' src ="https://images.gitee.com/uploads/images/2021/0107/225002_21f2f9c2_7968815.png"/>
</div>

c)管理员账号管理模块(CURD)，用户管理模块（查询用户的详细信息，可以锁定用户不能登录或不能交易）

​	(1)角色管理

 指定用户的权限（admin超级管理员或common普通管理员）

<p align=center ></p>
<div align=center>
    <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-c1.png"/>
</div>



​	(2)用户管理(CURD)

<p align=center >对登录用户进行管理，并设置其权限</p>
<div align=center>
     <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-c2.png"/>
    <p align=center >添加用户</p>
    <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-c3.png"/>
    <p align=center >修改用户</p>
<img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-c4.png"/>
    <p align=center >删除用户</p>
<img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-c5.png"/>
    <p align=center >删除成功</p>
<img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-c6.png"/>
</div>

对用户进行权限管理：

<p align=center >停用某用户，使该用户不能正常登录</p>
<div align=center>
     <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-c7.png"/>
    <p align=center >该用户不能正常登录</p>
    <img width = '50%' height ='50%' src ="https://images.gitee.com/uploads/images/2021/0107/223314_db568c69_7968815.png"/>
    <p align=center >修改普通角色的权限</p>
<img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-c9.png"/>
     <p align=center >修改普通角色的权限</p>
<img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-c10.png"/>
    </div>

​    



d)使用Spring Security安全框架实现认证，访问控制

<p align=center >在configure方法内添加要开放的方法</p>
<div align=center>
     <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-d1.png"/>
    <p align=center ></p>
    <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-d2.png"/>
    <p align=center >每个接口前都设置一个权限</p>
<img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-d3.png"/>
     <p align=center >后台添加模块时为每个模块添加访问权限</p>
<img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-d4.png"/>
    </div>



e)微信小程序界面定制模块

​	(1)定制展示在小程序上的广告图片

<p align=center ></p>
<div align=center>
     <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-d5.png"/>
    <p align=center ></p>
    <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-d6.png"/>
    <p align=center >修改图片</p>
<img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-d7.png"/>
     <p align=center >删除图片</p>
<img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-d8.png"/>
    <p align=center >小程序首页显示添加的广告图片</p>
<img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-d9.png"/>
    <p align=center >小程序菜单页面显示添加的广告图片</p>
<img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-d10.png"/>
     <p align=center >广告图片的修改与删除功能</p>
<img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-d11.png"/>
    </div>

​	(2)定制小程序的菜单栏

<p align=center >添加菜单栏文字及图片</p>
<div align=center>
     <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-d12.png"/>
    <p align=center >小程序菜单栏显示</p>
    <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-d13.png"/>
    </div>

f)商品管理模块(CURD)

与菜单栏之间有二级联动关系，一级表中加入二级表的对象

<div align=center>
    <p align=center >类中的二级联动</p>
    <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-f2.png"/>
    <p align=center >二级联动方法</p>
    <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-f3.png"/>
    <p align=center ></p>
    <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-f4.png"/>
 <p align=center >添加商品时菜单栏序号要与菜单栏管理中的序号关联</p>
    <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-f5.png"/>
<p align=center >后台显示</p>
 <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-f1.png"/>
</div>

​    

g)所有列表进行综合查询，时间字段可以排序

<p align=center >按名字查询</p>
<div align=center>
     <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-g1.png"/>
    <p align=center >查询成功</p>
    <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-g2.png"/>
    <p align=center >按序号查询</p>
    <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-g3.png"/>
    <p align=center >查询成功</p>
    <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-g4.png"/>
    </div>

h)所有列表可以导出Excel文件

<p align=center >导出列表excel文件</p>
<div align=center>
     <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-g5.png"/>
    <p align=center >导出成功，打开excel显示正确</p>
    <img width = '50%' height ='50%' src ="https://gitee.com/Emma_diko/final/raw/master/images/2-g6.png"/>
    </div>