vue3：登录/退出功能

3.1 登录概述

如果不存在跨域问题，就用cookie和session维持登录状态
如果存在，就用token方式。

3.2 登录 —token原理分析

3.3 梳理项目结构

main.js是整个项目的入口文件

App.vue文件的结构

创建Login.vue，写好UI，行为，css
然后再路由里面配置好路径。
最后去App.vue里面使用路由占位符。

在assets下新建css文件夹，新建global.css当做全局css文件

在main.js下要导入这个全局css

如何让一个盒子居中？

<template>
  <div class="login_container">
    <div class="login_box"></div>
  </div>
</template>
<style lang="less" scoped>
.login_container {
  background-color: #2b4b6b;
  height: 100%;
}
.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>

让头像放在盒子的中上方，怎么放？

<template>
  <div class="login_container">
    <div class="login_box">
      <div class="avatar_box">
        <img src="../assets/logo.png" alt="" />
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
// 省略上面盒子的代码
  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
</style>

总结：调位置都是通过 position:absolution(left，right，top，bottom) transform: translate 来调的

Element UI

element ui 是按需导入，所以用到Form，FormItem的时候要手动导入。

plugins 已经在main.js里导入了，所以这个需要导入有关element的内容，直接在这里导入就可以了。

添加前后图标

1. 赋值fonts文件夹到assets下
2. 在main.js里导入这个模块
3. 使用基类 图标名字来引用图标

数据绑定、表单验证

1. v-bind:value=”test”
2. :model
3. v-model

vue一般自己new一个实例，然后通过el标签和前面html元素绑定。接下来就可以使用vue里的data数据。

重置功能

表单验证函数（如果通过了发送请求）

配置ajax请求

在main.js 把axios挂载到vue实例上

实现登录（await是为了简化返回结果。 data:res也是为了解构await简化后的结果（相当于又简化一次））

导入element-ui的 弹框提示组件

这个和前面的略微有些不同，这个组件需要挂载到vue原型上

存储token，并且通过路由跳转页面

挂载路由守卫，实现没有token返回登录页面

两层for循环，渲染出侧边菜单栏

设置一二级菜单的图标

侧边收起

用户侧边栏连接改造

用index，并开启路由模式

设置卡片的长度和组件的间隙距离（el-row :gutter负责间隙）

把状态渲染成开关

分析添加用户、编辑用户、删除用户，数据验证逻辑

先说添加：

1. 给模板区按钮 添加点击事件，实现显示添加面板。 是否显示添加面板数据在data区

行为区分成：data()数据区、生命周期函数created()、methods()方法。

1. 当 是否显示属性 改变后，会双向绑定到视图端。视图端的添加用户面板通过：visiable感知到变化，然后显示或隐藏自己

: visible指的是属性绑定，表示弹框的显示隐藏，当:visible的值为ture的时候，弹框显示，当为false的时候，弹框隐藏 后面的.sync是什么意思呢，指的就是同步动态双向的来表示visible的值，当我们关闭窗口的时候，这个弹框隐藏了，visible的值发生了变化，但是关闭窗口这个动作，我们没法用确定的动作去判断这个值，所以用到了vue中的双向绑定的原则，在vue中统一加上了.sync来表示同步的修改了visible的值。

1. 添加面板里： @close=”关闭函数”、 :model、v-model和data()区里的对象属性双向绑定、 : rules用来绑定验证规则、ref这个面板对象的名字（以后可以用这个名字来指代这个面板）

关闭函数在method()里，关闭的时候重置 文本框里的值

addForm在data()区

addUser()在method()区

表单验证规则对象在 数据区，而且这里面又调用了数据区里的具体的验证规则。

为什么在项目中data需要使用return返回数据呢？

分页逻辑

当 size改变、或者当前页改变的时候 调用methods()区里的函数。
其他调用 数据区里的数据即可。
很简单，不说了

渲染一二三四级权限

打包