第三阶段-day10

文章目录

• 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
     */
    @Override
    public 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.data
        window.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不为null
    if(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
     */
    @Override
    public 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>
           

文章目录

• 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
     */
    @Override
    public 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.data
        window.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不为null
    if(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
     */
    @Override
    public 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>