瑞吉外卖项目开发

一、开发环境搭建

一）启动Navicat

启动Navicat，创建mysql连接

二）创建数据库

创建项目需要的数据库 - reggie，字符集采用utf8mb4

打开Reggie数据库 

三）导入数据库脚本

 四）查看数据库中的表

二、Maven项目搭建

（一）创建Maven项目

单击【Finish】按钮

 

（二）检查检查项目编码、maven仓库配置以及jdk配置

 

配置Maven的环境变量

 检验maven环境变量是否配置成功

在maven配置文件添加阿里镜像源

 

检查IntelliJ IDEA里maven仓库的配置 

检查jdk配置情况

 

（三）添加项目相关依赖和插件

在pom.xml文件里添加相关依赖和构建插件

 

（四）创建应用属性文件

在resources目录下创建应用属性文件 - application.ym

（五）安装lombok插件

在设置对话框里找到plugins，搜索lombok，单击绿色的Install按钮

（六）创建启动主类

创建net.pyy包，然后在包里创建ReggieTakeOutApplication类,运行程序，查看效果.

（七）拷贝静态资源和模板页面

启动应用，在浏览器里访问http://localhost:8080/backend/index.html 

（八）创建MVC配置类，做静态资源映射

继承WebMvcConfigurationSupport类

 

添加方法，做静态资源映射

在方法里，添加两个资源映射：映射到前端和后端的静态资源

 

测试能否访问后端的首页 - /backend/index.html

 

测试能否访问前端的图片资源 - /frontend/images/demo1.png

 

二、后台登录功能开发

（一）页面原型展示

点开登录.html页面

 

Vue对象通过el属性绑定了id属性为login-app的div元素

 

Vue对象通过data()方法绑定JSON数据loginForm，通过computed绑定校验规则loginRules

 

Vue对象通过methods绑定对登录表单数据进行处理的异步方法handleLogin

（二）登录页面展示

页面位置：项目/resources/backend/page/login/login.html

（三）数据模型 - 雇员表

创建entity子包，在net.pyy.entity包里创建雇员实体类 - Employee
 

将页面提交的密码password进行MD5加密处理

 

如果没有查询到则返回登录失败结果

 

密码比对，如果不一致则返回登录失败结果

 

查看员工状态，如果为已禁用状态，则返回员工已禁用结果

 

登录成功，将员工id存入Session并返回登录成功结果

 

三-1、功能测试

在resources/backend/js/request.js文件里设置超时为1000000毫秒，便于后面做断点调试

（二）设置断点

在EmployeeController里设置断点

（三）采用调试模式启动应用

 

（四）测试登录 - [成功]

浏览器访问http://localhost:8080/backend/page/login/login.html

按F12键，打开开发者工具

 

利用目前正确的用户登录信息（admin：123456）来登录，单击【登录】按钮
 

（二）Java里实现MD5、SHA256、SHA512、SHA1和SHA224加密

（一）页面原型展示

1、采用md5加密算法

(1) 采用DigestUtils类，运行程序，查看结果

 

(2）采用MessageDigest类

在net.pyy.common包里创建EncryptMD5类，运行程序，查看结果

 

2、采用sha256加密算法

在net.pyy.common包里创建EncryptSHA256类，运行程序，查看结果。

 

 

五、后台退出功能开发

一、需求分析

员工登录成功后，页面跳转到后台系统首页面，此时会显示当前登录用户的姓名：

 

如果员工需要退出系统，直接点击登录用户名右侧的按钮，即可退出系统，退出系统后页面跳转回登录页面

 

二、代码开发

（一）代码分析

退出按钮绑定的单击事件处理函数logout（）
 

在脚本文件/backend/api/login.js里查看logoutApi()函数

 

（二）编写代码

打开雇员控制器EmployeeController

创建logout()方法，清除会话里的雇员信息，返回成功结果