创建项目

使用命令创建一个项目。

vue create 项目名
比如 
vue create vue-cms

如果前一天，已经存了预设，直接使用那个预设。

没有存预设，按照下面的步骤安装：

1. Manually select features
   • (*) Choose Vue version
   • (*) Babel
   • ( ) TypeScript
   • ( ) Progressive Web App (PWA) Support
   • (*) Router
   • (*) Vuex
   • (*) CSS Pre-processors
   • (*) Linter / Formatter
   • ( ) Unit Testing
   • ( ) E2E Testing
2. Choose a version of Vue.js that you want to start the project with (Use arrow keys)
   • 2.x
   • 3.x
3. Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
   • n
4. Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
   • Sass/SCSS (with dart-sass)
   • Sass/SCSS (with node-sass)
   • Less
   • Stylus
5. Pick a linter / formatter config: (Use arrow keys)
   • ESLint + Airbnb config
   • ESLint + Standard config
   • ESLint + Prettier
6. Pick additional lint features: (Press to select, to toggle all, to invert selection)
   • (*) Lint on save
   • ( ) Lint and fix on commit
7. Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
   • In dedicated config files
   • In package.json
8. Save this as a preset for future projects? (y/N)
   • N

推送到远程仓库

• 创建远程仓库

• （本地已经有一次提交了）

• 添加远程仓库地址

  git remote add origin 仓库地址

• 首次推送

  git push -u origin master

ESLint配置

找到项目中的 .eslintrc.js ，在 rules 中加入如下的配置项

// 修正函数名和小括号之间的空格问题
// 参考文档：https://eslint.bootcss.com/docs/rules/space-before-function-paren
'space-before-function-paren': [
    'error',
    {
    anonymous: 'always', // 匿名函数小括号前，需要空格。比如 setTimeout(function () {})
    named: 'never', // 有名字的方法，不需要空格。比如 abc() {}
    asyncArrow: 'always' // 箭头函数，需要空格
    }
]

清空初始的项目

App.vue，只留下基础的模板即可

<template>
  <div id="app">大事件项目</div>
</template>

删除views里面的两个组件（Home.vue 和 About.vue ）

删除 components 里面的 HelloWorld.vue 组件

重置路由（router/index.js）

import Vue from 'vue'
import VueRouter from 'vue-router'
// 去掉加载 Home 这行

Vue.use(VueRouter)

const routes = []  // 清空这个数组

const router = new VueRouter({
  routes
})

export default router

项目的目录结构：

node_modules       --- 我们下载的第三方包（不能动）
public             --- 存放项目的首页（不能动）
src                --- 我们编码的位置
  - assets         --- 存储项目的资源（图片等等）
  - components     --- 存储组件的（不受路由控制，一般放一下通用的、封装好的组件）
  - views          --- 存储组件的（受路由控制的组件，放到这里）
  - router         --- 配置文件的文件
  - store          --- vuex的配置
  - App.vue        --- 项目的根组件（其他所有组件都是它的孩子）
  - main.js        --- 它是打包的入口文件（main.js是最先执行的文件）
.eslintrc.js       --- ESLint的配置文件
.gitignore         --- git的忽略文件（已经写好，不需要处理了）
babel.config.js    --- babel是对JS进行降价处理的（目前的项目不需要处理的）
package-lock.json  --- 锁定第三方包的版本的文件（不需要动）
package.json       --- 项目的配置文件

将assets资料包放到项目中

将 发的资料里面的 asset 文件夹里面的全部内容，复制到项目的 assets 文件夹中。

准备登录注册组件并配置好路由

• 组件应该放到哪里？

  • components文件夹，不受路由控制的
  • views文件夹，存放的组件是受路由控制的

• 在views里面创建 Login.vue （登录组件） 和 Reg.vue （注册组件）

• 配置路由（router/index.js）

  import Login from '@/views/Login.vue'
  
  Vue.use(VueRouter)  // 这行是原有的
  
  const routes = [
    // 直接写到这个最大的数组中的路由，对应的组件，应该显示在App.vue的占位符位置
    // 比如下面的 登录组件，应该显示在App.vue的占位符位置
    // { path: '路由地址', component: '组件' }
    { path: '/login', component: Login }, // 使用组件应该先导入
    { path: '/reg', component: () => import('@/views/Reg.vue') }
  ]

• App.vue 设置 <router-view></router-view> 占位符

  <template>
    <router-view></router-view>
  </template>
  

  一定要去掉原有的 <div id="app"></div>

• 测试

  • 浏览器访问 http://localhost:8080/#/login 看一下，能否看到登录页
  • 浏览器访问 http://localhost:8080/#/reg 看一下，能否看到注册页

安装element-ui

参考：https://element.eleme.cn/#/zh-CN/component/quickstart

安装：npm i element-ui

在main.js 中加入代码：

import Vue from 'vue';
+ import ElementUI from 'element-ui';
+ import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

+ Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

测试：

复制一个按钮到 Login.vue 中

<template>
  <div>
    <el-button type="primary">主要按钮</el-button>
  </div>
</template>

打开页面(http://localhost:8080/#/login)，看一下是否能够正常显示按钮。

开发Login页面

设置背景图片

• public/index.html ，加入样式，设置html，body高100%

  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
  </style>

• Login.vue 里面，设置最大的盒子的样式

  <template>
    <div class="login-container"></div>
  </template>
  
  <style lang="less">
  .login-container {
    height: 100%;
    background: url(../assets/images/login_bg.jpg) no-repeat;
    background-size: cover;
  }
  </style>
  

登录盒子和登录标题

• 将element-ui里面的卡片，复制一个，放到 <div class="login-container"></div> 里面

  • 卡片参考链接：https://element.eleme.cn/#/zh-CN/component/card

  <template>
    <div class="login-container">
      <!-- 下面使用element的卡片，做中间的那个盒子 -->
      <el-card shadow="hover">
        这是一个卡片
      </el-card>
    </div>
  </template>

• 设置卡片的样式（居中、高、宽）

  .el-card {
    height: 355px; // 高度随便加一个，最后完成后，去掉，让高度自动撑开
    width: 400px;
    position: absolute;
    left: 50%; // 针对父级元素的50%
    top: 50%;
    transform: translate(-50%, -50%); // 向回平移自身的50%
  }

• <el-card> 里面加入登录标题 <div class="login-title"></div>

  <template>
    <div class="login-container">
      <!-- 下面使用element的卡片，做中间的那个盒子 -->
      <el-card shadow="hover">
        <!-- 登录标题 -->
        <div class="login-title"></div>
      </el-card>
    </div>
  </template>

• 设置标题样式

  .login-title {
    height: 60px;
    background: url(../assets/images/login_title.png) 50% no-repeat;
  }

做表单

• element-ui的表单参考：https://element.eleme.cn/#/zh-CN/component/form

• 复制 <el-form></el-form> 到 标题div后面

• 复制 三个表单项 （<el-form-item>......</el-form-item>） 到 <el-form></el-form> 中

  <!-- 登录标题 -->
  <div class="login-title"></div>
  
  <!-- 表单盒子 -->
  <el-form ref="form">
    <!-- 用户名 -->
    <el-form-item>
      <el-input></el-input>
    </el-form-item>
    <!-- 密码 -->
    <el-form-item>
      <el-input></el-input>
    </el-form-item>
    <!-- 按钮 -->
    <el-form-item>
      <el-input></el-input>
    </el-form-item>
  </el-form>

复制之后，去掉和数据相关的部分，否则报错

• 去掉 <el-form> 的 :model 属性
• 去掉 <el-input> 的 v-model 属性

去掉 label 和 label-width（输入框前面的文字去掉）

处理按钮和超链接

• 将最后一个输入框换成按钮，设置宽度 100%

  <!-- 按钮 -->
  <el-form-item>
    <el-button type="primary">登录</el-button>
  </el-form-item>

• 表单后面加入超链接，参考：https://element.eleme.cn/#/zh-CN/component/link

  <!-- 表单后面，放一个超链接 -->
  <el-link :underline="false">还没有账号，去注册</el-link>

将 .el-card 的高度去掉，让内容自动撑开

使用图标美化输入框

• 参考文档：https://element.eleme.cn/#/zh-CN/component/input

• 可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标

  <!-- 用户名 -->
  <el-form-item>
    <el-input placeholder="请输入用户名" prefix-icon="el-icon-user"></el-input>
  </el-form-item>
  <!-- 密码 -->
  <el-form-item>
    <el-input placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input>
  </el-form-item>

• 图标的文档：https://element.eleme.cn/#/zh-CN/component/icon

密码框切换显示隐藏

参考文档：https://element.eleme.cn/#/zh-CN/component/input

• 给密码框加 type="password" show-password

<!-- 密码 -->
<el-form-item>
  <el-input type="password" show-password placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input>
</el-form-item>

开发Reg页面

• 复制 登录页 （Login.vue）里面的全部代码，到 Reg.vue 里面
• 多加一个密码框
• 把按钮 和 超链接里面的文字修改一下即可
  • 把“登录”改为“注册”
  • 把“还没有账号，去注册”改为“已有账号，去登录”

自愿修改类名等等，把login改为reg

测试

• 浏览器访问 http://localhost:8080/#/login 看一下，能否看到登录页
• 浏览器访问 http://localhost:8080/#/reg 看一下，能否看到注册页

切换登录和注册页面

现在，是手动修改地址栏，显示登录注册。

下面通过 编程式导航（@click="$router.push('hash地址')"），实现两个页面之间的跳转。

Reg.vue

<!-- 表单后面，放一个超链接 -->
<el-link :underline="false" @click="$router.push('/login')">已有账号，去登录</el-link>

<!-- <el-link :underline="false" href="/#/login">已有账号，去登录</el-link> -->
<!-- <router-link to="/login">已有账号，去登录</router-link> -->

Login.vue

<!-- 表单后面，放一个超链接 -->
<el-link :underline="false" @click="$router.push('/reg')">还没有账号，去注册</el-link>

<!-- <el-link :underline="false" href="/#/reg">还没有账号，去注册</el-link> -->
<!-- <router-link to="/reg">还没有账号，去注册</router-link> -->

注册页-做双向数据绑定

Reg.vue 的 JS中，设置一份数据

export default {
  data() {
    return {
      // 1. 做双向数据绑定（data中放数据，v-model和input建立双向绑定关系）
      userInfo: {
        username: '',
        password: '',
        repassword: ''
      }
    }
  }

  // 2. 表单验证（减少一下不必要的请求）
  // 3. 表单提交，完成注册功能
}

通过v-model 和三个输入进行双向绑定

<!-- 用户名 -->
<el-form-item>
  <el-input 
    v-model="userInfo.username"    <!-- 这里加入v-model -->
    placeholder="请输入用户名" 
    prefix-icon="el-icon-user"
  ></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item>
  <el-input
    v-model="userInfo.password"   <!-- 这里加入v-model -->
    type="password"
    show-password
    placeholder="请输入密码"
    prefix-icon="el-icon-lock"
  ></el-input>
</el-form-item>
<!-- 确认密码 -->
<el-form-item>
  <el-input
    v-model="userInfo.repassword"   <!-- 这里加入v-model -->
    type="password"
    show-password
    placeholder="请再次输入密码"
    prefix-icon="el-icon-lock"
  ></el-input>
</el-form-item>

注册页-做表单验证

参考文档：https://element.eleme.cn/#/zh-CN/component/form

三个对应关系。

• <el-form> 中的 :model 和数据项对应； :rules 和验证规则对应

  <!-- :model和数据项对应 -->
  <!-- :rules和验证规则对应 -->
  <el-form 
    ref="form" 
    :model="userInfo" 
    :rules="rules"
  >

• <el-form-item> 中的 prop 和验证规则中的数据项对应

  • <el-form-item prop="username">
  • <el-form-item prop="password">
  • <el-form-item prop="repassword">

JS中，定义数据项（已经定义了userInfo）

JS中，定义验证规则（rules）

data() {
  return {
    // 1. 做双向数据绑定（data中放数据，v-model和input建立双向绑定关系）
    userInfo: {
      username: '',
      password: '',
      repassword: ''
    },
    // 2. 表单验证（减少一下不必要的请求）
    rules: {
      username: [
        // required表示必填，message验证不通过时的提示，trigger，表示什么时候触发验证
        { required: true, message: '请输入用户名', trigger: 'blur' },
        // { min: 1, max: 10, message: '用户名长度1~10位', trigger: 'blur' }
        {
          pattern: /^[a-zA-Z0-9]{1,10}$/,
          message: '用户名必须是长度1-10位的字母数字',
          trigger: 'blur'
        }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 15, message: '密码长度6~15位', trigger: 'blur' }
      ],
      repassword: [
        { required: true, message: '请输入确认密码', trigger: 'blur' },
        { min: 6, max: 15, message: '确认密码长度6~15位', trigger: 'blur' }
      ]
    }
  }
}

图示对应关系：

注册页-验证两次密码

参考文档：https://element.eleme.cn/#/zh-CN/component/form

• 在 data 函数中，return 之前，自定义函数验证确认密码。

  var validatePass2 = (rule, value, callback) => {
    // rule 没什么用。
    // value 表示使用这个规则的输入框。案例中，确认密码使用这个验证规则，所以value表示我们输入的确认密码值
    // callback 表示是否通过验证
  
    // 和密码进行比较
    if (value !== this.userInfo.password) { // 这里的this.userInfo.password表示我们的密码
      callback(new Error('两次输入密码不一致!')) // 验证不通过，传入错误对象
    } else {
      callback()  // 验证通过，直接callback()
    }
  }

• 在确认密码验证时，加入 validator，值就是上面的自定义函数

  repassword: [
    { required: true, message: '请输入确认密码', trigger: 'blur' },
    { min: 6, max: 15, message: '确认密码长度6~15位', trigger: 'blur' },
    { validator: validatePass2, trigger: 'blur' }
  ]

注册页-表单提交前的完整验证

• 找到提交按钮，注册单击事件

  <el-button type="primary" @click="reg">注册</el-button>

• 补充 methods 方法（methods和data平级），处理单击事件

  • 按照element的文档，对表单进行完整的验证
  • 验证不通过，return
  • 验证通过，提交数据

  // 3. 表单提交，先进行完整的表单验证，验证通过再完成注册功能
  methods: {
    reg() {
      // this.$refs.form 找到表单
      // 调用 validate方法，进行表单完整的验证
      this.$refs.form.validate(valid => {
        // console.log(valid) // 布尔值，验证通过是true；验证不通过是false
        if (!valid) return
        console.log('验证通过，可以提交数据了')
      })
    }
  }

使用axios的步骤

• 为什么要封装一个 request.js
  • 通过创建 axios 实例，可以全局配置 axios
  • 可以通过创建多个axios的实例，来向不同的服务器发送请求（适合大项目）
• 为什么需要 reg.js 等
  • 为了提高复用性
  • 比如项目中，很多组件都需要 商品列表的请求，统一封装起来，其他组件可以随意调用

完成注册

• 下载安装 axios

  • npm i axios

• 封装并导出 axios 的实例

  • 在src中，创建 utils 的文件夹，里面创建 request.js

    import axios from 'axios'
    
    // 创建axios的实例。 这个实例中，可以对axios进行全局的配置
    // 得到的 request 也是axios。只不过名字不能再叫axios，因为重名了
    const request = axios.create({
      baseURL: 'http://www.liulongbin.top:3008'
    })
    
    // const request2 = axios.create({
    //   baseURL: 'http://www.itcbc.com'
    // })
    
    export default request

• 封装注册请求的方法

  • 在src中，创建 api 的文件夹，里面创建 reg.js

    // 这里导入 axios的实例对象
    import request from '@/utils/request'
    
    // 按需导出封装后的方法
    export const regAPI = data => {
      return request.post('/api/reg', data)
    }
    

• Reg.vue 组件中，使用

  • 按需导入 regAPI 方法

    // 按需导入 API 方法
    import { regAPI } from '@/api/reg.js'

  • 当注册验证通过后，调用 regAPI 方法，完成注册功能

    • regAPI 方法返回的是 Promise 对象
    • 调用的时候，前面加上 await 关键字
    • 离 await 最近的函数，加上 async

    // 3. 表单提交，先进行完整的表单验证，验证通过再完成注册功能
    methods: {
      reg() {
        // this.$refs.form 找到表单
        // 调用 validate方法，进行表单完整的验证
        // 下面的 form 是 <el-form> 的 ref 属性。作用是找到表单
        this.$refs.form.validate(async valid => {
          // console.log(valid) // 布尔值，验证通过是true；验证不通过是false
          if (!valid) return
          // console.log('验证通过，可以提交数据了')
          const { data: res } = await regAPI(this.userInfo)
          // console.log(res) // { code: 0, message: '提示消息' }
          if (res.code === 0) {
            alert(res.message)
          } else {
            alert(res.message)
          }
        })
      }
    }

注册成功要做的事情

• 使用 element-ui 的提示
• 清空输入框（重置表单）
• 跳转到登录页

if (res.code === 0) {
  // alert(res.message)
  // this.$message({ type: 'success', message: res.message })
  this.$message.success(res.message)
  // 清空输入框（重置表单） // form 是表单的 ref="form" 值
  this.$refs.form.resetFields()
  // 跳转到登录页
  this.$router.push('/login')
} else {
  this.$message({ type: 'error', message: res.message })
}

快速完成登录

因为注册和登录绝大多数代码相同。

所以可以复制注册页的全部代码，到登录页。

修改不同的地方即可：

• 登录两个输入框，所以删除确认密码框
• 无需进行确认密码验证（删除确认密码验证）
• 注册按钮改为登录
• 修改 “还没有账号，去注册”超链接
• 注册的接口和登录的接口不一样，所以在 reg.js 中，封装一个登录方法
• 登录成功后，要做的事情不一样

登录功能

双向数据绑定

• 设置data中的 userInfo 数据

  export default {
    data() {
      return {
        // 1. 设置数据，和表单input进行双向绑定
        userInfo: {
          username: '',
          password: ''
        }
      }
    }
  
    // 2. 表单验证
    // 3. 通过验证，表单提交，完成登录
  }

• 使用 v-model="xxxx" 进行双向数据绑定

  <!-- 用户名 -->
  <el-form-item>
    <el-input
      v-model="userInfo.username"
      placeholder="请输入用户名"
      prefix-icon="el-icon-user"
    ></el-input>
  </el-form-item>
  <!-- 密码 -->
  <el-form-item>
    <el-input
      type="password"
      v-model="userInfo.password"
      show-password
      placeholder="请输入密码"
      prefix-icon="el-icon-lock"
    ></el-input>
  </el-form-item>

表单验证

• 建议参考注册时的图示，找好三个对应关系即可
  • 数据项 userInfo 和 <el-form> 的 :model="userInfo" 对应
  • 验证规则 rules 和 <el-form> 的 :rules="rules" 对应
  • 每一个验证字段 和 <el-form-item> 的 prop="xxx" 对应

具体代码，见 Login.vue

表单提交进行完整的验证

参考文档：https://element.eleme.cn/#/zh-CN/component/form 里面的表单验证

• 给 按钮，添加单击事件

  <el-button type="primary" @click="login">登录</el-button>

• methods中 login方法，进行完整的验证

  // 3. 通过验证，表单提交，完成登录
  methods: {
    login() {
      this.$refs.form.validate(valid => {
        if (!valid) return // 表单验证未通过，直接 return
        // 表单验证通过，发送请求，完成登录
        console.log('通过验证')
      })
    }
  }

完成登录功能

• reg.js 中封装并导出 loginAPI

  // 按需导出 登录方法
  // export const loginAPI = data => {
  //   return request.post('/api/login', data)
  // }
  
  export const loginAPI = data => request.post('/api/login', data)
  

• Login.vue 组件中，导入 loginAPI，调用它，发送ajax请求

  methods: {
    login() {
      this.$refs.form.validate(async valid => {
        if (!valid) return // 表单验证未通过，直接 return
        // 表单验证通过，发送请求，完成登录
        // console.log('通过验证')
        const { data: res } = await loginAPI(this.userInfo)
        if (res.code === 0) {
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }

登录成功的处理

• 提示
• 存储token（因为要在其他很多组件中使用token，所以需要把token存到vuex当中）
• 跳转 （this.$router.push('/')）

存储token

• 在store文件夹，新建 user.js

  export default {
    namespaced: true,
    state() {
      return {
        token: ''
      }
    },
    mutations: {
      // 修改token，只能通过下面的方法修改
      updateToken(state, token) {
        state.token = token
      }
    },
    actions: {},
    getters: {}
  }
  

• 在store文件夹的 index.js 中，导入 user.js 并注册成模块

  import Vue from 'vue'
  import Vuex from 'vuex'
  +import userModule from './user.js'
  
  Vue.use(Vuex)
  
  export default new Vuex.Store({
  +  strict: true,
    modules: {
  +    // 模块名：导入进来的值
  +    user: userModule
    }
  })
  

• Login.vue 组件中，登录成功后，调用 mutations中的方法，对token进行更新

  if (res.code === 0) {
    this.$message.success(res.message)
    // 存储token（调用mutations中的updateToken方法）
    // this.$store.commit('模块名/方法名', '其他参数')
    this.$store.commit('user/updateToken', res.token)
    // 跳转到后台首页
    this.$router.push('/')
  } else {
    this.$message.error(res.message)
  }

• 测试

  • 打开登录页，正常登录
  • 登录后，使用 dev-tools 工具，查看vuex 中是否把token更新了

token的持久化存储

目前，token存储到vuex当中，即内存中。

页面只要一刷新，就会重置token为空。

所以需要 vuex-persistedstate 插件，该插件可以

• 将vuex中的数据存到本地存储中
• 也可以将本地存储中的数据恢复到vuex当中

插件的参考网站：https://www.npmjs.com/package/vuex-persistedstate

具体使用：

• npm i vuex-persistedstate@3.2.1

• store/index.js中，导入并注册为插件

  import Vue from 'vue'
  import Vuex from 'vuex'
  +import createPersistedState from 'vuex-persistedstate'
  import userModule from './user.js'
  
  Vue.use(Vuex)
  
  export default new Vuex.Store({
    strict: true,
  +  plugins: [createPersistedState()],
    modules: {
      // 模块名：导入进来的值
      user: userModule
    }
  })

后台首页布局

配置后台首页路由

router/index.js 中，增加 / 路由规则，指定显示 Main.vue组件

const routes = [
  // 直接写到这个最大的数组中的路由，对应的组件，应该显示在App.vue的占位符位置
  // 比如下面的 登录组件，应该显示在App.vue的占位符位置
  // { path: '路由地址', component: '组件' }
  { path: '/login', component: Login }, // 使用组件应该先导入
  { path: '/reg', component: () => import('@/views/Reg.vue') },
  // 使用 / 当前后台首页
+  { path: '/', component: () => import('@/views/Main.vue') }
]

在views文件夹，创建对应的组件 Main.vue

分四个区域

参考文档：https://element.eleme.cn/#/zh-CN/component/container

• 找到倒数第三个示例，复制到Main.vue中
• 设置最外层的盒子，高度100%
• 其他几个区域，自己设置背景颜色即可

<template>
  <el-container class="main-container">
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<style lang="less">
.main-container {
  height: 100%;
}
.el-header,
.el-aside {
  background-color: #23262e;
}
.el-main {
  background-color: #f2f2f2;
}
.el-footer {
  background-color: #eee;
}
</style>

头部区和侧边栏布局

element菜单的使用

• 一个菜单就是一个 <el-menu>.....</el-menu>

• 如果只是一级菜单，没有下拉菜单，则使用 <el-menu-item index="1">一个菜单</el-menu-item>

• 如果有下拉菜单，则使用

  <el-submenu index="2">
    <template slot="title">顶级菜单</template>
    <el-menu-item index="2-1">子菜单1</el-menu-item>
    <el-menu-item index="2-2">子菜单2</el-menu-item>
    <el-menu-item index="2-3">子菜单3</el-menu-item>
  </el-submenu>

• 菜单属性（<el-menu> 标签的属性）

  • mode 表示菜单的模式（水平菜单还是垂直菜单，默认垂直菜单）
    • horizontal 水平菜单
    • vertical 垂直菜单（默认值）
  • background-color="#23262e" 菜单的背景色
  • text-color="#fff" 菜单的字体颜色
  • active-text-color="#409eff" 激活时的字体颜色
  • default-active="菜单的index值" 表示默认让这项激活
  • unique-opened 表示手风琴效果（一个菜单展开，其他全部折叠）
  • router 布尔值，如果是true。则表示使用 index 属性当前路由跳转地址

• 子菜单的属性（<el-submenu> 和 <el-menu-item> 的属性）

  • index 表示菜单的唯一标识（很有用）

• 完整的HTML

  <template>
    <el-container class="main-container">
      <el-header>
        <img src="../assets/images/logo.png" alt="" />
        <!-- 头部 右侧的菜单 -->
        <el-menu
          mode="horizontal"
          background-color="#23262e"
          text-color="#fff"
          active-text-color="#409eff"
        >
          <!-- 下面的菜单没有下拉菜单，则使用 el-menu-item 标签 -->
          <!-- <el-menu-item>处理中心</el-menu-item> -->
          <!-- 下面的菜单有下拉菜单，则使用 el-submenu 标签 -->
          <el-submenu index="1">
            <template slot="title">
              <img class="avatar" src="../assets/logo.png" alt="" />
              个人中心
            </template>
            <el-menu-item index="1-1"><i class="el-icon-edit"></i>用户资料</el-menu-item>
            <el-menu-item index="1-2"><i class="el-icon-edit"></i>重置密码</el-menu-item>
            <el-menu-item index="1-3"><i class="el-icon-edit"></i>更换头像</el-menu-item>
          </el-submenu>
          <el-menu-item index="2"><i class="el-icon-switch-button"></i>退出</el-menu-item>
        </el-menu>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <div class="user-info">
            <img class="avatar" src="../assets/logo.png" alt="" />
            <span>欢迎你 xxx</span>
          </div>
          <!-- 侧边栏的菜单 -->
          <el-menu
            background-color="#23262e"
            text-color="#fff"
            active-text-color="#409eff"
            default-active="aaa"
            unique-opened
            class="aside-menu"
          >
            <el-menu-item index="aaa"><i class="el-icon-edit"></i>首页</el-menu-item>
            <el-submenu index="abc">
              <template slot="title"><i class="el-icon-edit"></i>文章管理</template>
              <el-menu-item index="bbb"><i class="el-icon-edit"></i>文章分类</el-menu-item>
              <el-menu-item index="ccc"><i class="el-icon-edit"></i>文章列表</el-menu-item>
            </el-submenu>
            <el-submenu index="bcd">
              <template slot="title"><i class="el-icon-edit"></i>个人中心</template>
              <el-menu-item index="ddd"><i class="el-icon-edit"></i>基本资料</el-menu-item>
              <el-menu-item index="eee"><i class="el-icon-edit"></i>重置密码</el-menu-item>
              <el-menu-item index="fff"><i class="el-icon-edit"></i>更换头像</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </template>

• 首页四个区域的样式

  .main-container {
    height: 100%;
  }
  .el-header,
  .el-aside {
    background-color: #23262e;
  }
  .el-main {
    background-color: #f2f2f2;
  }
  .el-footer {
    background-color: #eee;
  }

• 调整头部区，使用flex布局，让logo图片和菜单左右分散对齐

  .el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

• 侧边栏的样式

  .aside-menu {
    width: 200px;
  }
  .avatar {
    width: 35px;
    height: 35px;
    background-color: #fff;
    border-radius: 50%;
    margin-right: 15px;
    // object-fit: cover 和 background-size基本一个意思
    // 表示让图片按照原始的比例完整的显示出来
    object-fit: cover;
  }
  .user-info {
    height: 70px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
  }

  自愿 在 main.js 中导入 assets 里面的 global.less 。

  如果导入，需要将 global.less 中 “重置卡片的基础样式” 中的 font-size: 13px 去掉

获取用户信息

• 获取用户信息，就需要向 /my/userinfo 发送请求
• 向 /my/userinfo 发送请求，就需要设置请求头 Authorization: token字符串
• 假设能够得到数据，放哪里存储
  • 因为用户数据会在很多组件中使用，所以需要把数据放到 vuex 中
  • 所以就得在 vuex 中的 actions 中封装方法，获取用户数据
  • 所以，还需要设置 mutations 中的方法，来更新 state 中的数据
• 上述方法都写完，也不会自动调用
  • 所以在Main.vue组件中，使用 created 生命周期函数，来调用 actions 中的方法
  • 这样，页面刷新，就会自动获取用户数据了
• 数据存到state之后，组件中就可以把数据取出，用到页面当中了（处理头像和欢迎语）

设置请求头

具体的代码

utils/request.js 代码如下：（注意，拦截器要加给 request 对象）

import axios from 'axios'

// 导入 store/index.js ，因为要使用这里的state中的token
import store from '@/store'

// 创建axios的实例。 这个实例中，可以对axios进行全局的配置
// 得到的 request 也是axios。只不过名字不能再叫axios，因为重名了
const request = axios.create({
  baseURL: 'http://www.liulongbin.top:3008'
})

// 通过请求拦截器来设置请求头
// 添加请求拦截器
request.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    // config就是请求的配置对象
    /**
     * config = {
     *    url: '/user',
     *    method: 'get',
     *    baseURL: 'https://some-domain.com/api/',
     *    headers: {'X-Requested-With': 'XMLHttpRequest'},
     *    ......
     * }
     */
    // 添加请求头，判断一下，如果请求的url地址，是以 /my 开头的，则添加请求头
    if (config.url.startsWith('/my/')) {
      // config.headers.Authorization = 'tokenxxxxxx'
      // 组件中的this.$store ==== 上面导入的store
      config.headers.Authorization = store.state.user.token
    }
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)
// const request2 = axios.create({
//   baseURL: 'http://www.itcbc.com'
// })

export default request

注意，拦截器要加给 request 对象

api中封装发送请求的方法

由于前面已经给 request 加好了拦截器。所以下面直接发送请求即可

api/reg.js中代码

// .....其他代码略

// 导出获取用户信息的方法
export const getUserAPI = () => request.get('/my/userinfo')

调用 getUserAPI 获取用户数据

具体代码

store/user.js

// 导入获取用户信息的方法
import { getUserAPI } from '@/api/reg'
export default {
  namespaced: true,
  state() {
    return {
      token: '',
      user: {} // 准备存储用户数据
    }
  },
  mutations: {
    // 修改token，只能通过下面的方法修改
    updateToken(state, token) {
      state.token = token
    },
    // 更新user数据
    updateUser(state, user) {
      state.user = user
    }
  },
  actions: {
    async getUser(ctx) {
      const { data: res } = await getUserAPI()
      // console.log(res)
      if (res.code === 0) {
        ctx.commit('updateUser', res.data)
      }
    }
  },
  getters: {}
}

上述方法并不会自动执行，所以在组件的生命周期函数中，调用 actions中的 getUser 方法。

Main.vue中，调用

export default {
  created() {
    // 调用vuex中的 actions 中的 getUser 方法
    // this.$store.dispatch('模块名/方法名')
    this.$store.dispatch('user/getUser')
  }
}

经过上述步骤，数据在登录后，即可存储到 vuex 当中。

组件中使用数据

Main.vue中，调用

import { mapState } from 'vuex'
export default {
  created() {
    // 调用vuex中的 actions 中的 getUser 方法
    // this.$store.dispatch('模块名/方法名')
    this.$store.dispatch('user/getUser')
  },
  computed: {
    // ...mapState('模块名', ['xxx', 'xxxx'])
    ...mapState('user', ['user'])
  }
}

页面中：

<div class="user-info">
  <img class="avatar" :src="user.user_pic" alt="" v-if="user.user_pic" />
  <img class="avatar" src="../assets/logo.png" alt="" v-else />
  <!-- 有昵称nickname，则使用昵称，没有昵称，只能使用账号username -->
  <span>欢迎你 {{ user.nickname || user.username }}</span>
</div>

身份认证

导航守卫判断token有无

前提，先手动清除本地存储的vuex，刷新页面，检测vuex中的token是否为空

如果vuex中的token为空，则不允许访问后台首页 （/）。此时可以使用全局前置导航守卫进行控制

• 判断访问的是否是登录或注册，如果是，则放行
• 如果访问的不是登录注册，则继续判断vuex中的token是否为空

// 必须加载store，因为下面的判断使用了vuex中的数据
import store from '@/store'

// 全局前置导航守卫（判断token是否为空，如果token为空，则跳转到登录页，不允许访问其他页面（路由））
router.beforeEach((to, from, next) => {
  // 判断访问的是否是登录或注册，如果是，则不需要判断token，直接放行
  // console.log(to) // to.path 表示即将访问的那个路由
  if (to.path === '/login' || to.path === '/reg') {
    next()
  } else {
    if (store.state.user.token) {
      next() // 表示允许访问（放行）
    } else {
      next('/login') // 表示跳转到指定的路由
    }
  }
})

响应拦截器判断token的真假

前面的导航守卫只能判断token有没有，但是浏览器端无法判断token的真假，无法判断token是否过期 只能使用服务端响应结果来判断token的真假

具体做法

• 在 utils/request.js 中，加入响应拦截器 （把 axios 改为 request）
• 在响应拦截器的第2个函数中（响应状态码大于200），进行判断
• 如果响应结果 code===1 并且 message==='身份认证失败！' ，则清空token和user，跳转到登录页

代码中，使用了 store 和 router，所以一定要检测代码中是否加载的 '@/store' 和 '@/router'

// 添加响应拦截器，判断token的真假
request.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么（响应状态码如果是2xx，则执行这个函数）
    return response
  },
  function (error) {
    // 对响应错误做点什么（响应状态码超过 2xx的范围，则执行这个函数）
    // console.dir(error) // 使用 dir 的目的是能够展开错误对象，能够看到对象内部的结构
    if (error.response) {
      if (error.response.data.code === 1 && error.response.data.message === '身份认证失败！') {
        // 说明浏览器端的token是假的或者是过期的
        // 加个提示
        // 清除假token
        store.commit('user/updateToken', '')
        // 清除用户数据
        store.commit('user/updateUser', {})
        // 跳转到登录页
        router.push('/login')
      }
    }
    return Promise.reject(error)
  }
)

退出功能

• 找到退出按钮，注册单击事件 @click="logout"
• methods中，添加 logout 方法
• 提示是否要删除 （https://element.eleme.cn/#/zh-CN/component/message-box）
• 确定删除，清除token，清除user，跳转到登录页

methods: {
  logout() {
    // 询问是否要退出
    this.$confirm('确定要退出吗？', '提示')
      .then(() => {
        // 点击了确定
        // console.log(111)
        // 确定退出，清除token、清除user
        this.$store.commit('user/updateToken', '')
        this.$store.commit('user/updateUser', {})
        // 跳转到登录页
        this.$router.push('/login')
      })
      .catch(() => {
        // 点击了取消
        // console.log(22)
      })
  }
}

左侧菜单数据处理

获取数据存到data中

• 创建 api/menu.js。里面导入 request.js，并封装获取菜单的方法 getMenuAPI
• 组件中，created中，调用 getMenuAPI 方法，将得到的结果存储到data中

menu.js 代码

// 菜单相关的请求
import request from '@/utils/request'

export const getMenuAPI = () => request.get('/my/menus')

Main.vue 代码

export default {
  data() {
    return {
      menus: []
    }
  },
  async created() {
    // 调用vuex中的 actions 中的 getUser 方法
    // this.$store.dispatch('模块名/方法名')
    this.$store.dispatch('user/getUser')
    // 调用 getMenuAPI 方法，马上获取菜单数据
    const { data: res } = await getMenuAPI()
    // console.log(res)
    if (res.code === 0) {
      // 获取菜单成功，把数据存储到哪里？
      this.menus = res.data
    }
  },
  ...............
}

循环一级菜单

• 我们需要循环的是菜单项（菜单项有 el-menu-item 标签 和 el-submenu 标签），循环谁呢？
• 所以外层包裹一个 <template> 标签，v-for 加个它
• 循环里面，通过 v-if="item.children === null" 来控制，到达使用el-menu-item 标签 还是 el-submenu 标签
• :key="item.indexPath" 不能加给虚拟的 template 标签
• 注意，index、class改为动态属性后，别忘记前面加 :

<template v-for="item in menus">
  <el-menu-item
    :index="item.indexPath"
    v-if="item.children === null"
    :key="item.indexPath"
  >
    <i :class="item.icon"></i>{{ item.title }}
  </el-menu-item>
  <el-submenu :index="item.indexPath" v-else :key="item.indexPath">
    <template slot="title"><i :class="item.icon"></i>{{ item.title }}</template>
    <el-menu-item index="bbb"><i class="el-icon-edit"></i>文章分类</el-menu-item>
    <el-menu-item index="ccc"><i class="el-icon-edit"></i>文章列表</el-menu-item>
  </el-submenu>
</template>

循环二级菜单

• 对于有children的菜单，就是有二级菜单，还需要循环它
• 循环的时候，item这个变量就不要用了，因为item已经表示一级菜单了

<el-submenu :index="item.indexPath" v-else :key="item.indexPath">
  <template slot="title"><i :class="item.icon"></i>{{ item.title }}</template>
  <el-menu-item
    :index="subItem.indexPath"
    v-for="subItem in item.children"
    :key="subItem.indexPath"
  >
    <i :class="subItem.icon"></i>{{ subItem.title }}
  </el-menu-item>
</el-submenu>

后台首页的echarts图表页

创建组件和路由配置

• 创建Home.vue组件

  <template>
    <div>这是首页 --- 这里放echarts图表</div>
  </template>
• router/index.js 进行路由的配置

  {
    path: '/',
    redirect: '/home',
    component: () => import('@/views/Main.vue'),
    children: [
      { path: 'art-cate', component: () => import('@/views/ArtCate.vue') },
      { path: 'home', component: () => import('@/views/Home.vue') }
    ]
  }
• Main.vue 内容主体区，放好占位符 <router-view></router-view>

绘制Home组件中的echarts

• npm i echarts 下载安装echarts
• 复制文档中的代码即可
• 如果希望回顾一下echarts图表是如何使用的，查看vue基础第4天的资料。

<template>
  <div>
    <div class="container-fluid">
      <el-row class="spannel_list" :gutter="10">
        <el-col :sm="6" :xs="12">
          <div class="spannel">
            <em>10015</em><span>篇</span>
            <b>总文章数</b>
          </div>
        </el-col>
        <el-col :sm="6" :xs="12">
          <div class="spannel scolor01">
            <em>123</em><span>篇</span>
            <b>日新增文章数</b>
          </div>
        </el-col>
        <el-col :sm="6" :xs="12">
          <div class="spannel scolor02">
            <em>35</em><span>条</span>
            <b>评论总数</b>
          </div>
        </el-col>
        <el-col :sm="6" :xs="12">
          <div class="spannel scolor03">
            <em>123</em><span>条</span>
            <b>日新增评论数</b>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="container-fluid">
      <el-row class="curve-pie" :gutter="10">
        <el-col :sm="16" :xs="16">
          <div class="gragh_pannel" id="curve_show"></div>
        </el-col>
        <el-col :sm="8" :xs="8">
          <div class="gragh_pannel" id="pie_show"></div>
        </el-col>
      </el-row>
    </div>

    <div class="container-fluid">
      <div class="column_pannel" id="column_show"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'Home',
  mounted() {
    var oChart = echarts.init(document.getElementById('curve_show'))
    var aListAll = [
      { count: 36, date: '2019-04-13' },
      { count: 52, date: '2019-04-14' },
      { count: 78, date: '2019-04-15' },
      { count: 85, date: '2019-04-16' },
      { count: 65, date: '2019-04-17' },
      { count: 72, date: '2019-04-18' },
      { count: 88, date: '2019-04-19' },
      { count: 64, date: '2019-04-20' },
      { count: 72, date: '2019-04-21' },
      { count: 90, date: '2019-04-22' },
      { count: 96, date: '2019-04-23' },
      { count: 100, date: '2019-04-24' },
      { count: 102, date: '2019-04-25' },
      { count: 110, date: '2019-04-26' },
      { count: 123, date: '2019-04-27' },
      { count: 100, date: '2019-04-28' },
      { count: 132, date: '2019-04-29' },
      { count: 146, date: '2019-04-30' },
      { count: 200, date: '2019-05-01' },
      { count: 180, date: '2019-05-02' },
      { count: 163, date: '2019-05-03' },
      { count: 110, date: '2019-05-04' },
      { count: 80, date: '2019-05-05' },
      { count: 82, date: '2019-05-06' },
      { count: 70, date: '2019-05-07' },
      { count: 65, date: '2019-05-08' },
      { count: 54, date: '2019-05-09' },
      { count: 40, date: '2019-05-10' },
      { count: 45, date: '2019-05-11' },
      { count: 38, date: '2019-05-12' }
    ]

    const aCount = []
    const aDate = []

    for (var i = 0; i < aListAll.length; i++) {
      aCount.push(aListAll[i].count)
      aDate.push(aListAll[i].date)
    }

    var chartopt = {
      title: {
        text: '月新增文章数',
        left: 'center',
        top: '10'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['新增文章'],
        top: '40'
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: true,
      xAxis: [
        {
          name: '日',
          type: 'category',
          boundaryGap: false,
          data: aDate
        }
      ],
      yAxis: [
        {
          name: '月新增文章数',
          type: 'value'
        }
      ],
      series: [
        {
          name: '新增文章',
          type: 'line',
          smooth: true,
          areaStyle: { type: 'default' },
          itemStyle: { color: '#f80', lineStyle: { color: '#f80' } },
          data: aCount
        }
      ],
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(255,136,0,0.39)'
            },
            {
              offset: 0.34,
              color: 'rgba(255,180,0,0.25)'
            },
            {
              offset: 1,
              color: 'rgba(255,222,0,0.00)'
            }
          ])
        }
      },
      grid: {
        show: true,
        x: 50,
        x2: 50,
        y: 80,
        height: 220
      }
    }

    oChart.setOption(chartopt)

    var oPie = echarts.init(document.getElementById('pie_show'))
    var oPieopt = {
      title: {
        top: 10,
        text: '分类文章数量比',
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565'],
      legend: {
        x: 'center',
        top: 65,
        data: ['奇趣事', '会生活', '爱旅行', '趣美味']
      },
      toolbox: {
        show: true,
        x: 'center',
        top: 35,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: {
            show: true,
            type: ['pie', 'funnel'],
            option: {
              funnel: {
                x: '25%',
                width: '50%',
                funnelAlign: 'left',
                max: 1548
              }
            }
          },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: true,
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: ['45%', '60%'],
          center: ['50%', '65%'],
          data: [
            { value: 300, name: '奇趣事' },
            { value: 100, name: '会生活' },
            { value: 260, name: '爱旅行' },
            { value: 180, name: '趣美味' }
          ]
        }
      ]
    }
    oPie.setOption(oPieopt)

    var oColumn = echarts.init(document.getElementById('column_show'))
    var oColumnopt = {
      title: {
        text: '文章访问量',
        left: 'center',
        top: '10'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['奇趣事', '会生活', '爱旅行', '趣美味'],
        top: '40'
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月']
        }
      ],
      yAxis: [
        {
          name: '访问量',
          type: 'value'
        }
      ],
      series: [
        {
          name: '奇趣事',
          type: 'bar',
          barWidth: 20,
          areaStyle: { type: 'default' },
          itemStyle: {
            color: '#fd956a'
          },
          data: [800, 708, 920, 1090, 1200]
        },
        {
          name: '会生活',
          type: 'bar',
          barWidth: 20,
          areaStyle: { type: 'default' },
          itemStyle: {
            color: '#2bb6db'
          },
          data: [400, 468, 520, 690, 800]
        },
        {
          name: '爱旅行',
          type: 'bar',
          barWidth: 20,
          areaStyle: { type: 'default' },
          itemStyle: {
            color: '#13cfd5'
          },
          data: [500, 668, 520, 790, 900]
        },
        {
          name: '趣美味',
          type: 'bar',
          barWidth: 20,
          areaStyle: { type: 'default' },
          itemStyle: {
            color: '#00ce68'
          },
          data: [600, 508, 720, 890, 1000]
        }
      ],
      grid: {
        show: true,
        x: 50,
        x2: 30,
        y: 80,
        height: 260
      },
      dataZoom: [
        // 给x轴设置滚动条
        {
          start: 0, // 默认为0
          end: 100 - 1000 / 31, // 默认为100
          type: 'slider',
          show: true,
          xAxisIndex: [0],
          handleSize: 0, // 滑动条的 左右2个滑动条的大小
          height: 8, // 组件高度
          left: 45, // 左边的距离
          right: 50, // 右边的距离
          bottom: 26, // 右边的距离
          handleColor: '#ddd', // h滑动图标的颜色
          handleStyle: {
            borderColor: '#cacaca',
            borderWidth: '1',
            shadowBlur: 2,
            background: '#ddd',
            shadowColor: '#ddd'
          }
        }
      ]
    }
    oColumn.setOption(oColumnopt)
  }
}
</script>

<style lang="less" scoped>
.spannel_list {
  margin-top: 20px;
}

.spannel {
  height: 100px;
  overflow: hidden;
  text-align: center;
  position: relative;
  background-color: #fff;
  border: 1px solid #e7e7e9;
  margin-bottom: 20px;
}

.spannel em {
  font-style: normal;
  font-size: 50px;
  line-height: 50px;
  display: inline-block;
  margin: 10px 0 0 20px;
  font-family: 'Arial';
  color: #83a2ed;
}

.spannel span {
  font-size: 14px;
  display: inline-block;
  color: #83a2ed;
  margin-left: 10px;
}

.spannel b {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  line-height: 24px;
  background: #e5e5e5;
  color: #333;
  font-size: 14px;
  font-weight: normal;
}

.scolor01 em,
.scolor01 span {
  color: #6ac6e2;
}

.scolor02 em,
.scolor02 span {
  color: #5fd9de;
}

.scolor03 em,
.scolor03 span {
  color: #58d88e;
}

.gragh_pannel {
  height: 350px;
  border: 1px solid #e7e7e9;
  background-color: #fff !important;
  margin-bottom: 20px;
}

.column_pannel {
  margin-bottom: 20px;
  height: 400px;
  border: 1px solid #e7e7e9;
  background-color: #fff !important;
}
</style>

用户资料

组件的存储思路

随时项目的开发，组件会越来越多。如果把组件全部放到 views 中，会非常乱，不好找 正确的做法是，将组件分门别类的存储在子文件夹中。 比如我们的项目，菜单：

菜单（Menu）
  - 首页（Home）
    - Home.vue
  - 文章管理（Article）
    - 文章分类 XXX.vue
    - 文章列表 XXX.vue
  - 个人中心（User）
    - 用户资料 UserInfo.vue
    - 重置密码 Xxxxx.vue
    - 更换头像 Xxxx.vue

目前，我们开发到用户资料这个阶段，所以在 /views/Menu/User 中 创建 UserInfo.vue 并且把Home.vue的位置修改一下。 最后，路由的配置：

{
  path: '/',
  redirect: '/home',
  component: () => import('@/views/Main.vue'),
  children: [
    { path: 'home', component: () => import('@/views/Menu/Home/Home.vue') },
    { path: 'user-info', component: () => import('@/views/Menu/User/UserInfo.vue') }
  ]
}

绘制用户资料页面

elementUI的卡片和表单

<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>基本资料</span>
    </div>
    <div class="text item">
      <el-form ref="form" label-width="80px">
        <!-- 第一项：登录账号 -->
        <el-form-item label="登录账号">
          <el-input disabled></el-input>
        </el-form-item>
        <!-- 第二项：用户昵称 -->
        <el-form-item label="用户昵称">
          <el-input></el-input>
        </el-form-item>
        <!-- 第三项：用户邮箱 -->
        <el-form-item label="用户邮箱">
          <el-input></el-input>
        </el-form-item>
        <!-- 第四项：按钮 -->
        <el-form-item>
          <el-button type="primary">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<style lang="less" scoped>
.el-card {
  font-size: 13px;
}

.el-form {
  width: 500px;
}
</style>

将vuex中的数据拿到组件并双向绑定

做修改之前，必须进行数据回填（把当前用户的数据，回填到输入框中）

怎样数据回填？

• 用户数据在 vuex 中
• 把数据转存到组件中一份
• 使用 v-model 进行双向数据绑定

export default {
  data() {
    return {
      userInfo: {
        username: this.$store.state.user.user.username,
        nickname: this.$store.state.user.user.nickname,
        email: this.$store.state.user.user.email
      }
    }
  }
}

每个 input 框，加好 v-model

如果数据回填后，发现昵称和邮箱是空的，不一定是错的。新注册的账号，就是没有昵称和邮箱的

表单验证

• 表单加入两个属性
  • :model="数据项"
  • :rules="验证规则对象"
• 表单项（<el-form-item prop="字段">）
• 编写验证规则
  • data里面定义验证规则 formRules: { 字段: [{required: true}, {...}], 字段: [] }
  • 验证邮箱格式，可以 { type: 'email', message: '邮箱格式不正确', trigger: ['change', 'blur'] }
• 表单提交的时候，进行完整的验证
  • this.$refs.表单的ref值.validate(valid => { /* 根据valid进行判断 */ })

对象的浅拷贝

let obj1 = { name: 'zs', age: 20 };
// let obj2 = obj1;

// 浅拷贝和深拷贝
// 浅拷贝，把一个对象的属性和值，拷贝一份，加入到另一个空对象中
// 深拷贝，把一个对象的属性和值，拷贝一份，加入到另一个对象。（如果对象的某个属性值是引用类型的，则需要递归拷贝），拷贝后，两个对象是完全独立的两个对象

// 浅拷贝的方案（for循环、Object.assign、转成JSON再转成JS对象、...展开运算符）
let obj2 = {};

// for (let k in obj1) {
//   obj2[k] = obj1[k]
// }

// obj2 = Object.assign({}, obj1)

// obj2 = JSON.parse(JSON.stringify(obj1))

obj2 = { ...obj1 }

项目中，可以通过浅拷贝来简化代码：

UserInfo.vue 中：

data() {
  return {
    userInfo: { ...this.$store.state.user.user }
  }
}

表单提交，完成资料修改

• 找到提交按钮，注册单击事件

  <el-button type="primary" @click="updateUser">确认修改</el-button>
• 组件中，添加 updateUser 方法

  methods: {
    async updateUser() {
      // console.log(this.userInfo)
      const { data: res } = await updateUserAPI(this.userInfo)
      // console.log(res)
      if (res.code === 0) {
        this.$message.success(res.message)
        // 调用 vuex 中的 actions 中的 getUser 方法，获取并更新最新的用户数据
        // this.$store.dispatch('模块名/方法名')
        this.$store.dispatch('user/getUser')
      } else {
        this.$message.error(res.message)
      }
    }
  }
• api/reg.js 中，封装发送请求的 updateUserAPI 方法

  // 更新用户信息
  export const updateUserAPI = data => request.put('/my/userinfo', data)

重置表单

• 修改 按钮 为 重置两个字

• 加入单击事件 <el-button @click="reset">重置</el-button>

• 补充 reset 方法

  reset() {
    // 下面的代码作用是重置表单（恢复输入框的值为打开页面时的初始值；清除掉表单验证红色的提示）
    this.$refs.userInfoRef.resetFields()
    // 从vuex中更新一份数据到当前组件的 userInfo中
    this.userInfo = Object.assign({}, this.$store.state.user.user)
  }

重置密码

页面布局

• 因为页面和用户资料页面一样。所以复制“用户资料”页面的结构

  • 修改文字
  • 去掉第一个输入框的 disabled

• 配置路由 （router/index.js）

  {
    path: '/',
    redirect: '/home',
    component: () => import('@/views/Main.vue'),
    children: [
      { path: 'home', component: () => import('@/views/Menu/Home/Home.vue') },
      { path: 'user-info', component: () => import('@/views/Menu/User/UserInfo.vue') },
  +    { path: 'user-pwd', component: () => import('@/views/Menu/User/RePwd.vue') }
    ]
  }

表单验证

• <el-form :model="数据项" :rules="验证规则">

  • 对应数据项定义一下；
  • 对应的规则定义一下

• 每个 <el-form-item> 加入 prop 属性

• 每个 <el-input> 加入 v-model 双向数据绑定

• 定义具体的规则

  • 必填
  • 6~15位的非空字符

• 自定义验证规则（验证新密码不能和原密码一致；验证两次新密码必须一致）

  • 在 data 中，return之前，声明函数

    const xxx = (rule, value, callback) => {
      // rule 表示验证规则对象，没有什么用
      // value 表示当前输入框的值 （比如新密码使用了这个规则，则value表示输入的新密码）
      // callback() --- 表示通过验证
      // callbakc(new Error('不通过的提示')) --- 表示验证不通过
    }

  • 验证规则中，加入这个自定义的规则

    new_pwd: [
       { required: true, message: '原密码必填', trigger: 'blur' },
       { pattern: /^\S{6,15}$/, message: '6~15位的非空字符', trigger: 'blur' },
    +  { validator: xxx, trigger: 'blur' }
    ]

提交表单，完成更新密码

• 提交密码，需要发送请求，所以需要一个API方法 （api/reg.js）

  // 重置密码
  export const updatePwdAPI = data => request.patch('/my/updatepwd', data)

• 表单提交，注册按钮的单击事件

  <el-button type="primary" @click="updatePwd">确认修改</el-button>

• 事件处理方法中，找到表单进行一次完整的验证

• 验证通过，则调用 API 方法，发送请求

• 更新成功，提示，重置表单

  import { updatePwdAPI } from '@/api/reg.js'
  
  methods: {
    updatePwd() {
      this.$refs.passRef.validate(async valid => {
        if (valid) {
          // 表示验证通过
          const { data: res } = await updatePwdAPI(this.pass)
          if (res.code === 0) {
            this.$message.success(res.message) // 提示
            this.$refs.passRef.resetFields() // 重置表单
          } else {
            this.$message.error(res.message)
          }
        }
      })
    }
  }

重置表单

<el-button @click="$refs.passRef.resetFields()">重置</el-button>

更换头像

页面布局

• 创建组件，并复制页面结构

  <template>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>更换头像</span>
      </div>
      <div>
        <!-- 图片，用来展示用户选择的头像 -->
        <img src="../../../assets/images/avatar.jpg" alt="" class="preview" />
  
        <!-- 按钮区域 -->
        <div class="btn-box">
          <el-button type="primary" icon="el-icon-plus">选择图片</el-button>
          <el-button type="success" icon="el-icon-upload" disabled>上传头像</el-button>
        </div>
      </div>
    </el-card>
  </template>
  
  <script>
  export default {
    name: 'UserAvatar'
  }
  </script>
  
  <style lang="less" scoped>
  .btn-box {
    margin-top: 10px;
  }
  .preview {
    object-fit: cover;
    width: 350px;
    height: 350px;
  }
  </style>

• 配置路由

  {
    path: '/',
    redirect: '/home',
    component: () => import('@/views/Main.vue'),
    children: [
      { path: 'home', component: () => import('@/views/Menu/Home/Home.vue') },
      { path: 'user-info', component: () => import('@/views/Menu/User/UserInfo.vue') },
      { path: 'user-pwd', component: () => import('@/views/Menu/User/RePwd.vue') },
  +    { path: 'user-avatar', component: () => import('@/views/Menu/User/Avatar.vue') }
    ]
  }