1. 安装前端脚手架
1.1 安装node.js
- 安装node.js
- 检查node.js 和 npm 的版本
- 切换淘宝镜像
- 安装vue客户端工具 npm install -g @vue/cli --force
- 检查安装的成果 vue ui
1.2 配置前端脚手架
-
解压文件
-
利用客户端工具, 打开文件
-
编译项目
-
前端项目运行效果
2. 后端项目搭建
2.1 创建项目
2.2 编辑pom.xml文件
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
<!--引入插件lombok 自动的set/get/构造方法插件 -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
<!--mybatis依赖包-->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.2.0</version>
</dependency>
<!--jdbc依赖包-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
</dependencies>
2.3 编辑层级代码
3. 关于脚手架的说明
3.1 目录结构
3.2 关于main.js的说明
概念: VUE 引入组件的概念
组件好处: 封装CSS样式/封装JS样式/HTML代码片段. xxxx.vue命名.
父子组件参数传递: 需要使用 Vue.prototype. h t t p = a x i o s 以 后 使 用 http = axios 以后使用 http=axios以后使用http.xxx 发起Ajax请求.
3.3 关于路由说明
const routes = [
{
path: '/', redirect: '/login'},
{
path: '/login', component: Login},
{
path: '/elementUI', component: ElementUI}
]
4. 用户登录业务实现
4.1 页面JS分析
4.2 用户登录JS
4.3 用户业务接口文档说明
- 请求路径: /user/login
- 请求方式: POST
- 请求参数
| 参数名称 | 参数说明 | 备注 |
|---|---|---|
| username | 用户名 | 不能为空 |
| password | 密码 | 不能为空 |
- 响应数据,SysResult对象
| 参数名称 | 参数说明 | 备注 |
|---|---|---|
| status | 状态信息 | 200表示服务器启动成功,201表示服务器异常 |
| msg | 服务器返回的提示信息 | 可以为null |
| data | 服务器返回的业务数据 | 返回秘钥token信息 |
返回值格式如下:
{
"status":200,"msg":"服务器调用成功!","data":"1e893a97634847b3a8b499b173bea620"}
4.4 编辑SysResult对象
package com.jt.controller;
import com.jt.pojo.User;
import com.jt.service.UserService;
import com.jt.vo.SysResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
@CrossOrigin
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
@GetMapping("/findAll")
public List<User> findAll(){
return userService.findAll();
}
public SysResult aa(){
return new SysResult(201,"xxxx",null);
}
}
4.5 用户登录模块实现
4.5.1 加密算法MD5
规则说明: MD5加密算法,只能由明文转化为密文. 不可以反向编译.
破解MD5加密算法:
4.5.2 编辑UserController
/**
* URL地址: /user/login
* 请求类型: post
* 参数: JSON串 username/password
* 返回值: SysResult对象
*/
@PostMapping("/login")
public SysResult login(@RequestBody User user){
//返回值一个字符串 token
String token = userService.login(user);
if(token == null){
return SysResult.fail(); //201
}
return SysResult.success(token); //200
}
4.5.3 编辑UserService
/**
* 业务需求:
* 1.将密码进行加密处理
* 2.根据username/password 查询数据库获取数据.
* 3. 有数据 用户名密码正确
* 无数据 用户名和密码错误
* @param user
* @return
*/
@Override
public String login(User user) {
//1.将密码加密处理
String password = user.getPassword();
//2.利用md5加密算法 进行加密
String md5Pass = DigestUtils.md5DigestAsHex(password.getBytes());
user.setPassword(md5Pass);
//3.查询数据库数据
User userDB = userMapper.findUserByUP(user);
if(userDB == null){
//说明: 用户名和密码错误
return null;
}
//说明: 用户名和密码正确
return "秘钥";
}
4.5.4 编辑UserMapper
public interface UserMapper {
@Select("select * from user")
List<User> findAll();
@Select("select * from user where username=#{username} and password=#{password}")
User findUserByUP(User user);
}
4.5.5 关于秘钥说明
说明: 当用户登录之后,可以跳转到系统的首页. 到了系统首页之后,用户可以进行其它的业务操作. 系统如何判断正在操作业务的用户 已经登录?
业务说明:
一般在登录认证系统中,都会返回秘钥信息.来作为用户登录的凭证.
秘钥特点: 最好独一无二.
动态生成秘钥: UUID
/**
* 业务需求:
* 1.将密码进行加密处理
* 2.根据username/password 查询数据库获取数据.
* 3. 有数据 用户名密码正确
* 无数据 用户名和密码错误
* @param user
* @return
*/
@Override
public String login(User user) {
//1.将密码加密处理
String password = user.getPassword();
//2.利用md5加密算法 进行加密
String md5Pass = DigestUtils.md5DigestAsHex(password.getBytes());
user.setPassword(md5Pass);
//3.查询数据库数据
User userDB = userMapper.findUserByUP(user);
if(userDB == null){
//说明: 用户名和密码错误
return null;
}
//说明: 用户名和密码正确,返回秘钥
String uuid = UUID.randomUUID().toString()
.replace("-","");
return uuid;
}
4.6 关于Session和Cookie说明
4.6.1 业务需求说明
用户的请求是一次请求,一次响应. 当响应结束时,服务器返回的数据 也会销毁. 问题: 如果销毁了token 则认为用户没有登录.需要重复登录.
如何解决该问题: 应该持久化token信息.
4.6.2 Session
Session：在计算机中，尤其是在网络应用中，称为“会话控制”。Session对象存储特定用户会话所需的属性及配置信息。这样，当用户在应用程序的Web页之间跳转时，存储在Session对象中的变量将不会丢失，而是在整个用户会话中一直存在下去。当用户请求来自应用程序的 Web页时，如果该用户还没有会话，则Web服务器将自动创建一个 Session对象。当会话过期或被放弃后，服务器将终止该会话。Session 对象最常见的一个用法就是存储用户的首选项。例如，如果用户指明不喜欢查看图形，就可以将该信息存储在Session对象中。有关使用Session 对象的详细信息，请参阅“ASP应用程序”部分的“管理会话”。注意会话状态仅在支持cookie的浏览器中保留。
特点: Session总结
- Session 称之为 会话控制 技术
- Session生命周期, 会话结束 对象销毁.
- Session的数据存储在内存中.
- Session只可以临时存储数据.不能永久存储.
4.6.2 Cookie总结
Cookie，有时也用其复数形式 Cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息 [1] 。
特点:
- 类型: 小型文本文件.
- 文件通常是加密的.
- cookie 可以临时或者永久存储.
4.6.3 关于Cookie和Session说明
- 手机银行的登录信息? Session存储. 数据安全性高
- 腾讯视频会员登录信息? Cookie存储 1个月免密登录.
- 公司的财务系统登录信息? Session存储
- 购物系统的登录信息? Cookie存储.
4.6.4 用户登录信息存储
//获取用户token信息
let token = result.data
window.sessionStorage.setItem("token",token)
