[JavaScript知识库]CGB2105-Day-12笔记

1、用户登录实现

1.1 用户数据储存

1.1.1 业务说明

根据登录需求,后台服务器返回SysResult对象,其中data表示 token的记录.
规则: 服务器返回的响应的数据应该采用一种特殊的方式进行保存.否则用户的数据将会丢失.

{status: 200, msg: "服务器处理成功", data: "4edf7d1fbe2f4b14bc7227c85b4998b3"}

1.1.2 Session

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

1. Session是会话控制
2. Session可以储存用户数据
3. Session生命周期整个会话 在会话期间数据有效, 如果会话窗口关闭 则数据清除.
4. Session数据存储在浏览器的内存中(前端的)

1.1.3 Cookie

Cookie，有时也用其复数形式 Cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息 。
总结：

1. Cookie 是一个文本文件
2. Cookie 存储的是用户信息 (加密数据 更加安全)
3. Cookie 保存到用户的计算机终端中 可以临时/永久的存储信息.

1.1.4 关于Session和Cookie的总结

1. 储存数据要求安全性高的使用 Session
2. 需要用户七天内自动登录或储存的数据事件较长的使用 Cookie
3. 登录信息重要的使用 Session
   总结: 如果对于数据安全性要求较高 则使用Session. 如果存储一些大量查询的数据(不重要的)一般采用Cookie进行保存.

1.1.5 项目中的使用

说明: 用户登录之后 将用户信息保存到Session中.
编辑JS代码

浏览器中的Session 控制:
当会话关闭时,Session数据将会被清空

2、系统页面跳转

2.1 系统页面跳转说明

1. JS实现页面跳转
   
2. 编辑路由规则
   
3. 展现效果
   

2.2 路由导航守卫

2.2.1

需求: 如果用户没有登录,则不允许访问其他的页面,只允许访问login登录页面.
实现：
1. 前端实现: VUE中提供了路由导航守卫!
2. 单点登录策略

2.2.2 路由导航守卫

/**
 *  配置路由导航守卫 控制权限
 *  参数说明：
 *          1、to 要访问的路径
 *          2、from 从哪个路径跳转来的
 *          3、next 是一个函数 next() 表示放行 next('/login')表示强制跳转
 */
router.beforeEach((to,from,next) => {
  // 1、当用户访问登录页面，则直接放行，如果不需要执行后续操作 执行return
  if(to.path === '/login') return next()
  // 2、当用户访问其他页面时 需要校验是否有token
  const token = window.sessionStorage.getItem('token')
  // 3、如果数据为null 则访问登录页面
  if(!token) return next('/login')
  // 4、如果数据不为null 则放行
  next()
})

3、左侧菜单获取

3.1 项目介绍

3.1.1 表设计说明

说明: 如果查询所有的一级菜单 则parent_id = 0
如果查询二级菜单信息 则parent_id = 1级菜单的ID
如果查询三级菜单信息 则parent_id= 2级菜单的ID

3.1.2 编辑RightsPOJO

3.1.3 搭建层级代码结构

1. 编辑Mapper----Service-----Controller 层级代码 方便后续业务调用
   
2. 测试项目（DEMO）
   
3. 测试结果
   

3.1.4 关于端口号说明

8000端口: VUE UI vue客户端管理器所有占用的端口.
8080端口: jtadmin 脚手架项目启动时占用的端口号
8091端口: 后台SpringBoot业务系统的端口号

3.2 实现左侧菜单

3.2.1 编辑页面JS

说明:当页面访问时,根据生命周期函数,调用getMenuList()方法.从后台的服务器获取菜单列表信息. JS如下.

3.2.2 业务接口文档

说明: 左侧菜单需要获取2级菜单信息.
二级菜单封装到一级菜单的children属性中.

3.2.3 左侧菜单获取

1. 请求路径/rights/getRightsList
2. 请求类型：GET
3. 请求参数：无
4. 响应数据 Sysresult对象
   

3.2.3 RightsController

package com.jt.controller;

import com.jt.pojo.Rights;
import com.jt.service.RightsService;
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("/rights")
public class RightsController
{
    @Autowired
    private RightsService rightsService;

    // 测试
    @GetMapping("/getAll")
    public List<Rights> getAll()
    {
        return rightsService.getAll();
    }

    /**
     *  查询2级菜单结构,并封装为List集合
     *  请求类型：GET
     *  URL：/rights/getRightsList
     *  返回值：SysResult(List集合)
     */
    @GetMapping("/getRightsList")
    public SysResult getRightsList()
    {
        List<Rights> rightsList = rightsService.getRightsList();
        return SysResult.souccess(rightsList);
    }
}

3.2.4 编辑RightsServiceImpl

package com.jt.service;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.jt.mapper.RightsMapper;
import com.jt.pojo.Rights;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class RightsServiceImpl  implements RightsService
{
    @Autowired
    private RightsMapper rightsMapper;

    @Override
    public List<Rights> getAll()
    {
        return rightsMapper.selectList(null);
    }

    /**
     * 需求: 查询2级菜单信息.
     * 步骤:
     *      1.查询一级菜单信息 parent_id = 0
     *      2.查询二级菜单信息 parent_id = 一级菜单ID
     *      3.将二级菜单封装到一级菜单中.
     *  查询方式:
     *          1.利用java循环实现2级封装.
     *          2.利用Mybatis的封装的方式实现查询 resultMap 自己练习
     * @return
     */
    @Override
    public List<Rights> getRightsList()
    {
        QueryWrapper<Rights> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("parent_id",0);
        List<Rights> oneLiset = rightsMapper.selectList(queryWrapper);
        //分析: 1级和2级有各自的对应的关系. 拿到当前的一级查询自己的二级菜单.
        for (Rights oneRights :oneLiset)
        {
            //应该先清空原有条件
            queryWrapper.clear();
            //根据一级id查询二级信息.
            queryWrapper.eq("parent_id", oneRights.getId());
            List<Rights> twoList = rightsMapper.selectList(queryWrapper);
            //实现父子关系的封装
            oneRights.setChildren(twoList);
        }
        return oneLiset;
    }
}

3.2.5 关于层级表设计的说明

想法2: 定义一张表(id-----parent_id)
要求: 每个ID都应该有自己的parent_id
总结: 如果有父子关系,则一遍采用parent_id的方式进行封装. 自关联的方式

3.3 左侧菜单的跳转说明

3.3.1 关于左侧菜单路径说明

说明: 用户点击2级菜单时,跳转的路径 是由数据表中的path字段进行控制.

3.2.3 左侧菜单路由机制

1. 定义路由占位符 在Home组件中 在中间定义了路由占位符.
   
2. 编辑路由机制
   根据路由嵌套的规则,通过children属性 实现组件嵌套.最终实现课堂页面效果.
   

3.3.3 左侧菜单路由全部实现

需求: 当用户默认跳转到home时,应该默认展现 Welcome的组件 关键语法:重定向机制
效果:

3.3.4 左侧菜单效果

4、ElementUI 基本用法

<template>
  <div>
    <h1>elementUI 入门案例 方便大家后续学习</h1>

    <!-- 1.面包屑导航
       elementUI 提供的组件 Breadcrumb
                           BreadcrumbItem
         2.引入组件         element.js  import  Vue.use
     -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/elementUI' }">UI页面</el-breadcrumb-item>
      <el-breadcrumb-item>ElementUI工具API</el-breadcrumb-item>
      <el-breadcrumb-item>入门案例</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 2. 定义卡片视图 -->
    <el-card class="box-card hwCard">

        <!-- 4. 栅格: 将一行固定划分为24块 可以调整每块所占的大小   -->
        <el-row gutter="15">
          <el-col :span="8">
              <!-- 3.引入input框 -->
              <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="4">
              <el-button type="primary" round @click="showDialog" >点击按钮</el-button>
          </el-col>
        </el-row>

        <!-- 5.弹出框操作
          title="弹出框的标题元素"
          :visible.sync="dialogVisible"  控制弹出框是否展现 true/false
        -->
        <el-dialog
          title="弹出框效果展现"
          :visible.sync="dialogVisible"
          width="70%">

          <!-- 6.表单提交  ref="为表单定义一个ID"
            model 是elementUI中特定的属性   负责绑定数据
          -->
          <el-form ref="form" :model="addUser" label-width="80px">
            <el-form-item label="用户名">
              <el-input v-model="addUser.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="addUser.password" type="password"></el-input>
            </el-form-item>
          </el-form>



          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
    </el-card>




  </div>
</template>

<script>
//对外声明 当前组件的属性export default 将组件交给VUE对象管理
export default {
  data(){
    return {
      dialogVisible: false,
      //form表单中的数据有多个所以采用对象
      addUser: {
          username: '',
          password: ''
      }
    }
  },
  methods: {
    //添加点击事件
    showDialog(){
       //点击展现弹出框???
       this.dialogVisible = true
    }
  }
}
</script>

<style lang="less" scoped>

  .hwCard {
    width: 100%;
    height: 500px;
  }
</style>