基于vue+ssm前台点餐系统小练习

1.项目选题：

项目地址
前端：https://gitee.com/spades2333/java-web-course-design.git
后端：https://gitee.com/spades2333/java-web-course-design-backend.git
技术栈：

Vue + VueRouter + VueX + ElementUI + Axios

springMVC + spring + mybatis

2.选题背景：

随着生活水平的提高，越来越多的人喜欢喝上奶茶等饮品，享受奶茶所带来身体上的享受。然而，传统的奶茶店往往面临着订单管理、库存管理、客户服务等方面的挑战，需要提高自身的信息化水平和竞争力。为了解决这些问题，本课题旨在基于vue+ssm框架开发一个奶茶点餐系统，实现前后端分离的设计模式，提高系统的性能和用户体验。本系统主要包括以下功能模块：用户注册登录、商品浏览、购物车、订单管理、后台管理等。采用vue作为前端开发框架，利用axios实现与后端的数据交互；采用springMVC+spring+mybatis作为后端开发框架，实现业务逻辑的处理和数据库的访问。本系统旨在为奶茶店提供一个高效、便捷、安全的点餐平台，为用户提供一个优质、舒适、个性化的点餐体验。

3.功能模块设计

1.登录模块

​ 登录模块采用JWT验证方式，前端向后台接口发送一个json，包含账号和md5加密后的密码，后台通过相对应请求找到对应方法并搜索数据库中对应账号及密码，若前端发送来的账号密码在数据库中有一条相对应，即认为验证成功，随即后台向前端发送 账号相对应的Token和账号身份信息，前端讲Token保存在浏览器的localStorage中，利用身份信息来跳转到相对应的页面。

​ 前台利用localStorage中是否存在Token在判断用户是否登录，若不存在Token，则自动跳转到登陆页面

2.点餐模块

①商品列表

头部信息通过向后台发送携带Token的get请求，来获取用户信息

在点餐模块创建之初通过axios获取商品数据，并通过vue渲染出来

②商品详细信息

通过鼠标点击事件来获取商品的pid，同时向后台发送携带pid的get请求来获取商品的详细信息

③添加购物车

购物车数据持久化通过localStorage实现，在商品详情页面点击加入购物车，随后获取商品的规格和总价并通过setItem来存入购物车中

④购物车结算模块

将购物车中数据通过axios中post方法发送到后台，后台通过token获取操作员id，添加进数据库中后返回一个订单信息给前端，前端展现出订单页面

⑤修改密码模块

为了防止网络传输中密码泄露，前端先将密码进行md5加密后，封装成json数据发送到后台，后台通过用户id来查询原密码并对用户输入原密码进行比对，若匹配则将新密码发送到数据库中进行更新数据

⑥退出登录模块

前端删除localStorage中token数据，并利用vuerouter跳转到登陆模块

2.后台管理模块

①首页

后台自动获取今日日期，与数据库中今日订单进行匹配，向前端返回订单数据，并进行数据处理

②商品管理页面

商品状态通过change事件来向后台发送实时数据，修改商品属性中的rule来改变状态

Ⅰ编辑模块

点击编辑，利用vue的双向数据绑定将商品的信息放入表单中，点击完成编辑时，对表单进行验证来避免空字符串和非数字价格，与改变商品状态相同，通过updateProduct方法来更新信息；

Ⅱ新增商品模块

创建一个空表单，点击提交进行表单验证，通过addPro方法发送数据，后台返回成功信息，随后刷新表单

③员工管理模块

员工管理模块展现出所有员工信息，为数据安全着想，后台返回的员工列表不含有用户密码

Ⅰ新增员工模块

内部软件，只提供简单的员工信息，输入姓名和选择用户组后，后台通过日期和时间戳生成唯一用户账号，设置初始密码为123456

点击重置密码，将用户密码重新设置为123456

④订单模块

前端通过向后端发送get请求，获取数据后渲染列表，删除功能通过axios中delete方法向后端发送包含订单编号的请求进行删除