文章目录

1.用户登录操作
- 1.1 关于token的说明
- 1.2 生成UUID
- 1.3 Session和Cookie
- - 1.3.1 Session介绍
  - 1.3.2 Cookie机制
  - 1.3.3 session和cookie区别
- 1.4 前端保存用户信息
- 1.5 实现系统首页跳转
2 权限校验-路由导航守卫
- 2.1 业务需求
- 2.2 路由导航守卫实现
- - 2.2.1 参数说明
  - 2.2.2 配置前端路由导航守卫
3. 左侧菜单列表实现
- 3.1 左侧菜单页面分析
- 3.2 编辑权限层级代码
- - 3.2.1 表设计分析
  - 3.2.2 编辑POJO
  - 3.2.3 搭建Rights层级代码
  - 3.2.4 业务接口说明
  - 3.2.5 编辑RightsController
  - 3.2.6 编辑RightsService
  - 3.2.7 页面效果展现
- 3.3 debug说明
4. 用户模块实现
- 4.1 实现用户页面跳转
- - 4.1.1 Home组件说明
  - 4.1.2 定义子级组件
  - 4.1.3 页面效果展现
5 ElementUI学习(了解)

1.用户登录操作

1.1 关于token的说明

1.由于服务器需要标识已经登录的用户,所以服务器动态生成一个独一无二的token,返回给用户.
2.用户将token保存到本地,方便下次访问时携带.

1.2 生成UUID

/*** 思路:*      1.将密码进行加密处理*      2.根据username/password查询数据库*      3.有值:*          登录成功,返回秘钥*        没有值:*          登录失败,返回null* @param user* @return*/@Overridepublic String login(User user) {//1.获取明文String password = user.getPassword();//2.加密处理String md5 = DigestUtils.md5DigestAsHex(password.getBytes());user.setPassword(md5);System.out.println(md5);//3.查询数据库QueryWrapper<User> queryWrapper= new QueryWrapper<>(user);//4.获取数据库对象User userDB = userMapper.selectOne(queryWrapper);//5.判断登录是否正确if(userDB == null){return null;}//6.使用UUID动态生成TOKEN,根据当前时间毫秒数+随机数利用hash算法生成//  几乎可以保证不重复.String token = UUID.randomUUID().toString().replace("-","");return token;}

1.3 Session和Cookie

1.3.1 Session介绍

Session：在计算机中，尤其是在网络应用中，称为“会话控制”。Session对象存储特定用户会话所需的属性及配置信息。这样，当用户在应用程序的Web页之间跳转时，存储在Session对象中的变量将不会丢失，而是在整个用户会话中一直存在下去。当用户请求来自应用程序的 Web页时，如果该用户还没有会话，则Web服务器将自动创建一个 Session对象。当会话过期或被放弃后，服务器将终止该会话。Session 对象最常见的一个用法就是存储用户的首选项。例如，如果用户指明不喜欢查看图形，就可以将该信息存储在Session对象中。有关使用Session 对象的详细信息，请参阅“ASP应用程序”部分的“管理会话”。注意会话状态仅在支持cookie的浏览器中保留。

小结:
1.Session称之为 “会话机制”
2.在浏览器中打开网页就是一个会话.
3.用户的数据可以保存到会话中,但是有生命周期. 当会话关闭,则数据消失.

1.3.2 Cookie机制

Cookie，有时也用其复数形式 Cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息 [1] 。
说明:
1.cookie是一个小型的文本文件
2.cookie中存储的数据一般都是密文.
3.cookie中的数据的生命周期可控. 几天.几年!!!

1.3.3 session和cookie区别

1.session的数据是临时存储.cookie的数据可以永久保存. (生命周期不同)
2.sesion是浏览器中的一个内存对象!而cookie是一个实际的本地文件. (形式不同).
3.session一般存储是一些涉密数据.cookie一般存储相对公开的数据(免密登录). (安全性)

1.4 前端保存用户信息

login(){//获取表单对象之后进行数据校验//valid 表示校验的结果 true表示通过  false表示失败this.$refs.loginFormRef.validate(async valid => {//如果没有完成校验则直接返回if(!valid) return//如果校验成功,则发起ajax请求const {data: result} = await this.$http.post('/user/login',this.loginForm)if(result.status !== 200) return this.$message.error("用户登录失败")this.$message.success("用户登录成功")//获取用户token信息let token = result.datawindow.sessionStorage.setItem("token",token)//用户登录成功之后,跳转到home页面this.$router.push("/home")})}

1.5 实现系统首页跳转

编辑router/index.js 添加组件信息,实现首页跳转

2 权限校验-路由导航守卫

2.1 业务需求

前端页面跳转是通过路由进行控制. 规定: 如果用户没有登录,则只允许访问登录页面.只有登录之后才能访问其它页面.
难点: 如何实现用户请求的拦截.
拦截器作用: 拦截用户的请求.
结果1: 请求放行
结果2: 请求拦截,一般配合重定向使用!!

2.2 路由导航守卫实现

2.2.1 参数说明

2.2.2 配置前端路由导航守卫

const router = new VueRouter({routes
})/*** 定义路由导航守卫* 参数1. to    路由跳转的网址* 参数2. from  路由从哪里来* 参数3. next  是一个函数,表示放行或重定向*              next() 放行*              next("/login") 重定向* 业务实现:*    核心逻辑: 检查是否有token.*        如果访问login页面 直接放行.*        有token 表示已经登录,放行请求*        没有token 表示用户没有登录,重定向到登录页面*/
router.beforeEach((to,from,next) => {if(to.path === "/login"){return next()}//说明用户访问的页面不是login 请求需要校验//获取token数据.let token = window.sessionStorage.getItem("token")//if(token !==null && token.length>0)//下列if 解释为: 如果token不为nullif(token){return next()}next("/login")
})

3. 左侧菜单列表实现

3.1 左侧菜单页面分析

3.2 编辑权限层级代码

3.2.1 表设计分析

说明:
name: 权限名称
parent_id: 父级权限实现了父子级关系.
path: 一级菜单没有路径的, 二级/三级才有路径.

3.2.2 编辑POJO

说明:
1.当前对象中children属性不属于字段,所以使用@TableField(exist = false)进行标识.
2.权限列表中有父子级关系,所以通过children封装子级

3.2.3 搭建Rights层级代码

3.2.4 业务接口说明

只查询一级和二级的信息

请求路径 /rights/getRightsList
请求类型 GET
请求参数无
响应数据 SysResult对象

参数名称	参数说明	备注
status	状态信息	200表示服务器请求成功 201表示服务器异常
msg	服务器返回的提示信息	可以为null
data	服务器返回的业务数据	返回权限List集合

响应数据如图所示

3.2.5 编辑RightsController

3.2.6 编辑RightsService

  /*** 实现思路:*   1.先查询一级菜单信息 parent_id = 0*   2.将一级菜单循环遍历 一级菜单对象.*   3.根据一级菜单信息,查询当前菜单下的二级.*   4.将查询得到的二级菜单,封装到一级对象中* 实现思路二(扩展):*    利用左连接 实现关联查询 封装数据.* @return*/@Overridepublic List<Rights> getRightsList() {//1.查询一级列表信息QueryWrapper<Rights> queryWrapper = new QueryWrapper<>();queryWrapper.eq("parent_id",0);List<Rights> oneList = rightsMapper.selectList(queryWrapper);//2.遍历一级列表for (Rights oneRights : oneList){//根据一级查询二级queryWrapper.clear(); //清除之前的条件queryWrapper.eq("parent_id",oneRights.getId());List<Rights> twoList = rightsMapper.selectList(queryWrapper);//将查询的结果封装一级对象中oneRights.setChildren(twoList);}return oneList;}

3.2.7 页面效果展现

3.3 debug说明

说明: debug是编程中常用的代码的调试工具. 可以让代码一行一行执行.

4. 用户模块实现

4.1 实现用户页面跳转

4.1.1 Home组件说明

业务说明: URL:/user 要求跳转组件 User.vue组件,组件的跳转应该在Home组件内部跳转.
Home组件说明: 在main的区域中,设定作用 Home的子级标签将来组件在该区域展现.

4.1.2 定义子级组件

说明: 通过路由实现父子组件嵌套.

4.1.3 页面效果展现

5 ElementUI学习(了解)

在elementUI的组件中绘制项目

<template><div><!-- 标签使用原则:规则: 先定义,后使用语法: el-breadcrumb 找到名称为Breadcrumb组件进行展现定义elementUI的组件: 按需导入组件从elementUI中导入特定的组件1.import {Breadcrumb} from 'element-ui'2.Vue.use(Breadcrumb)  声明为全局组件.子组件可以直接调用--><!-- 1.添加面包屑导航 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item>活动管理</el-breadcrumb-item><el-breadcrumb-item>活动列表</el-breadcrumb-item><el-breadcrumb-item>活动详情</el-breadcrumb-item></el-breadcrumb><!-- 2.定义卡片视图  --><el-card class="box-card"><div class="text item"><!-- 4.栅格: 每行24格,可以动态的缩放 --><el-row :gutter="20"><el-col :span="8"><!-- 3.定义文本输入框--><el-input placeholder="请输入内容" v-model="input3" class="input-with-select"><el-button slot="append" icon="el-icon-search"></el-button></el-input></el-col><el-col :span="3"><el-button type="primary">主要按钮</el-button></el-col></el-row></div></el-card></div>
</template><script>//对外声明组件属性/方法等参数.要被根组件调用export default {data(){return {}}}
</script><style lang="less" scoped>
</style>

CGB2106-Day10相关推荐

必背单词_研究生满大街走？真实数据来啦真题必背单词Day10
研究生满大街走?真实数据来啦我国现在有多少研究生了?先上图: 从以上数据可以得知,1995年至2019年,我国的研究生入学人数共计约878万人. 这个数字看似很大,但不要忽视了我国的总人口.简单计算 ...
Java基础day10
Java基础day10 Java基础day10-继承&修饰符 1 继承 1.1 继承的实现 1.2 继承的好处和弊端 2. 继承中的成员访问特点 2.1 继承中变量的访问特点 2.2 supe ...
第二课运算符(day10)
第二课运算符(day10) 一.运算符结果是值算数运算 a = 10 * 10 赋值运算 a = a + 1 a+=1 结果是布尔值比较运算 a = 1 > 5 逻辑运算 a ...
Day10:html和css
Day10:html和css <html> <body> <h1>标题</h1> <p>段落</p> </body> ...
LeetCode算法入门- 3Sum Closest -day10
LeetCode算法入门- 3Sum Closest -day10 Given an array nums of n integers and an integer target, find thre ...
spss典型相关分析_R语言实战多元统计分析Day10— —典型相关分析
R语言实战多元统计分析Day10-- 典型相关分析 01 前言典型相关分析是用于分析两组随机变量之间的相关性程度的一种统计方法,它能够有效的揭示两组随机变量之间的相互线性依赖关系,这种方法是由Hot ...
句句真研—每日长难句打卡Day10
句句真研-每日长难句打卡Day10 参考译文:这段情节证明了具有讽刺意味的现象确实存在:尽管美国男性倾向于在公共场合比女性健谈,在家里却比妻子话少.
Python菜鸟入门：day10模块介绍
写在前面: 此博客仅用于记录个人学习进度,学识浅薄,若有错误观点欢迎评论区指出.欢迎各位前来交流.(部分材料来源网络,若有侵权,立即删除) 传送门: day01基础知识 day02知识分类 day03 ...
day10【过渡】分布式理论
day10[过渡]分布式理论划水课,参考老师的课件即可
21天Jmeter打卡Day10线程用户之setUp和tearDown
21天Jmeter打卡Day10线程用户之setUp和tearDown 其实学过unittest,就知道setup和teardown分别是测试类的初始准备工作和结束工作. 另外发现查看结果树,可以只添 ...

CGB2106-Day10