Vue-elementUI

登录

开发前git的相关配置

1. 在git创建一个新的分支（每开发一个新功能，最好新建一个分支，开发完了以后再合并到主分支上面）
2. 创建新的分支git checkout -b login，创建子分支login，并且切换到该分支上
3. 查看当前项目的所有分支git branch

创建登录组件并配置相关路由

1. 把login组件当作重定向的组件，即：

const routes = [
    {
    
    path:'/', redirect: '/login'},
    {
    
    path:'/login', component: Login}
  ]

2. 引入全局样式global.css，然后在入口文件main.js中引入全局样式import '路径'

//引入全局样式文件
import '@/assets/css/global.css'

3. 然后用绝对定位的方式在组件login的正中间布局一个盒子
4. 安装element-ui插件（安装完以后，别忘了在main.js中引入，否则报错）
5. 引入el-form、el-form-item组件，其中可以把两个按钮组件el-button也放在组件el-form-item中

如果把el-form的宽度设置为100%，然后在来个padding，把输入框挤进去，发现右边的输入框会超出，原因是form表单默认是content-box，解决办法：改为border-box即可。
在输入框中图标，用elementui中输入框的属性加图标，而不要用加标签<i>的方法。即可以通过 prefix-icon 和 suffix-icon 属性在input组件首部和尾部增加显示图标，也可以通过 slot来放置图标。

6. 使用阿里图标库

1. 把下载的font文件夹放入资源目录assets 下
2. 在入口文件main.js中导入字体图标 import '@/assets/fonts/iconfont.css'
3. 使用：先添加基类iconfont，然后添加想要的图标的类名

7. 设置请求拦截器，使得每次发送网络请求时都要在请求头中加入权限字段。

instance.interceptors.request.use(config =>{
    
    
        config.headers.Authorization = window.sessionStorage.getItem('token')
        return config
 })

8. 调用验证方法validate，校验输入框内容是否合法

this.$refs.loginFormRef.validate(回调函数)

9. 发送登录的网络请求，其中，
   将登录成功之后的token，保存到客户端的sessionStorage中；
   项目中除了登录之外的其他API接口，必须在登录之后才能访问；
   token只应在当前网站打开期间生效，所以将 token 保存在sessionStorage中

login(){
    
    
   this.$refs.loginFormRef.validate(async valid =>{
    
    
         if(!valid) return 
         const {
    
    data} = await requestLoginData({
    
    params:this.loginForm})
         if(data.meta.status === 200){
    
    
           this.$message.success('登录成功')
           window.sessionStorage.setItem('token',data.data.token)
           this.$router.push('/home')
         }else{
    
    
           this.$message.error('您输入的用户或者密码不正确')
         }
})

10. 设置路由导航守卫

router.beforeEach((to, from, to) =>{
    
    
	  if(to.path == '/login') return next();
	  const token = window.sessionStorage.getItem('token')
	  if(!token){
    
    
	    return next('/login')
	  }
	  next()
})

11. 重置按钮实现表单的重置。实现方法：调用element中自带的方法resetFields

preSet(){
    
    
     this.$refs.loginFormRef.resetFields()
 }

代码同步和上传

1. 查看代码状态：git status
2. 添加至缓存区：git add
3. 提交：git commit -m "完成了登录功能"
4. 查看分支状态：git branch
5. 合并到主分支
   1. 切换到主分支：git checkout master
   2. 基于主分支合并其他所有分支：git merge login
6. 把本地代码推送到云端：git push
7. 以上只是主分支master推送到云端，如果想把login分支也推送到云端，则需
   1. 切换到login分支
   2. 推送到云端：git push -u origin login

Home页面

1. 页面布局

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside>Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>

2. 头部中的退出功能实现
   主要任务：点击退出后，因为是基于token方式的登录，所以只需销毁本地token即可。这样，后续的请求就不会携带token，必须重新登录才能产生新的token，再访问页面。
   其中，销毁本地token的语法为：window.sessionStorage.clear()

3. 侧边栏区域的实现

   1. 点击合并的实现。给el-aside动态绑定宽度，而不是给el-menu动态绑定。
      <el-aside :width="isCollapse ? '64px' :' 200px'">
   2. 关于菜单左边多出来的一个边框像素，给el-meun、el-submenu添加overflow:hidden都可以。

Welcome组件

1. 利用重定向，在main中展示Welcome
   1. 新建Welcome组件
   2. 配置路由信息

{
    
    
   path:'/home',
   component: Home,
   redirect: '/welcome',
   children:[
     {
    
    
       path:'/welcome',
       component: Welcome
     }]
}

3. 在main中设置路由占位符<router-view/>
4. 利用path信息，配置main中的路由跳转。需要注意的是：路由中的path信息要和返回数据中的path要一致
5. 如何保证在刷新页面以后，菜单中的menu-item也处于激活状态？

在menu中有个属性：default-active，保存的就是当前激活菜单的index，也就是想要菜单中的某一项处于高亮激活状态，那就把那一项index的值赋值给default-active。
在点击某一个菜单后，就把当前菜单的index存储进sessionStorage中，刷新页面后，再把保存的值赋值给default-active
1. 给二级菜单都绑定一个单击事件
2. 注意一下是否要加'/'的问题
3. 通过传递参数的形式，把当前激活菜单的path存储进sessionStorage中
4. 在生命周期函数create中，获取sessionStorage中的激活路径并赋值
5. 最后再把再次点击菜单的激活路径进行更新赋值，实现高亮效果的切换

User组件

1. 导航面包屑区域
2. 作用域插槽的用法：

<template slot-scope="scope">           
</template>

3. 改变状态时，要发送网络请求，如果网络请求发送失败，则还需改会原来的状态。且改变状态时，可以调用el-switch自带的change事件
4. 头部输入框中的v-model值可以设置为：发送网络请求时，传递的参数query，然后可以给输入框添加clearable属性，紧接着就可以添加clear事件，且事件响应函数都是网络请求函数getUserData，这样就可以很快速的实现搜索和清除输入框的功能。
   重点：把当前输入框的v-model的值绑定为发送网络请求时的参数
5. 自定义校验规则的实现
   1. 在data中定义规则变量，注意是写在return的上面

// 验证邮箱的规则
    var checkEmail = (rule, value, cb) => {
    
    
      // 验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if (regEmail.test(value)) {
    
    
        // 合法的邮箱
        return cb()
      }
      cb(new Error('请输入合法的邮箱'))
    }
    // 验证手机号的规则
    var checkMobile = (rule, value, cb) => {
    
    
      // 验证手机号的正则表达式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if (regMobile.test(value)) {
    
    
        return cb()
      }
      cb(new Error('请输入合法的手机号'))
    }

2. 使用校验规则

email:[
     {
    
     required: true, message: '请输入用户名', trigger: 'blur' },
     {
    
     min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' },
     {
    
    validator: checkEmail, trigger: 'blur'}
   ],
mobile:[
     {
    
     required: true, message: '请输入用户名', trigger: 'blur' },
     {
    
     min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' },
     {
    
    validator: checkMobile, trigger: 'blur'}
   ]

6. 关闭Dialog对话框后，输入框中的数据要重置
   • 为Dialog添加自带的close事件函数
   • 通过对Form表单设置的ref，在调用resetFields方法，实现表单的重置
7. 给点击Dialog对话框里面的确定按钮添加预校验，然后在发送网络请求，添加用户

this.$refs.userDialogRef.validate(valid =>{
    
    
	//首先判断是否校验通过
	//如果通过了，才发送网络
})

8. 编辑用户信息的Dialog对话框在关闭后，也要进行重置表单方法的调用，这个时候的重置，不是重置表单信息，而是重置验证规则，它和添加用户信息的Dialog里面的表单重置不一样。
9. 删除按钮的实现，要用elementUI中的弹框提示组件Message Box，或者与其说是个弹框组件，不如说是个方法的调用

Roles组件

1. 通过<el-table-column type="expand" > 的expand属性，就可以实现在表格中新建一个展开列
2. 在展开列中，数据的布局方式是通过Layout布局实现的，并没有使用现成的组件，因为没有组件可用
3. 在展开列中

1. 先用作用域插槽获取当前行的数据（template）
2. 然后就是一个行标签el-row，并在此标签上通过v-for循环，渲染一级权限数据
3. 行标签el-row中有两列
4. 第一个列标签el-col中渲染出具体的数据
5. 第二个列标签el-col中，里面又嵌套了一个行标签el-row
6. 第二个行标签el-row中又有两个列标签，通过在第二个行标签el-row中通过v-for的形式渲染数据
7. 第一个列标签el-col中渲染出具体的数据，即二级权限的数据
8. 第二个列标签el-col中，放的是el-tag标签，并且直接在改标签上通过v-for的形式渲染出三级权限的数据

4. 为每一个el-tag标签添加属性closable，这样就能实现el-tag标签的删除图标
5. 在单击了el-tag标签的删除图标后，弹出MessageBox弹框，并用于显示是否确认删除该权限
6. 再给每行的el-tag标签添加上边框线、下边框线的过程中，使用了动态绑定类名、类名数组以及三元表达式判断是否添加类名
7. 让一级权限和二级权限的el-tag标签居中，也是通过动态绑定类名实现的。