ElementUI之首页导航+左侧菜单

一、Mock.js

1.1.什么是Mock.js

前后端分离开发开发过程当中，经常会遇到以下几个尴尬的场景：

• 老大，接口文档还没输出，我的好多活干不下去啊！
• 后端小哥，接口写好了没，我要测试啊！

前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockjs就可以做到这一点。

Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。

众所周知Mock.js因为两个重要的特性风靡前端:

• 数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
• 拦截Ajax请求：不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。

1.2.安装与配置

npm i mockjs -D 

为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在config目录中的dev.env.js和prod.env.js做一个配置，如下：

• dev.env.js

 module.exports = merge(prodEnv, {
   
  NODE_ENV: '"development"',
	MOCK: 'true'
})

• prod.env.js

 module.exports = {
   
  NODE_ENV: '"production"',
	MOCK: 'false'
}

• main.js

 //开发环境下才会引入mockjs
process.env.MOCK && require('@/mock') 

1.3使用

创建mock目录,mock下创建index.js以及json文件夹,在JSON文件夹中创建login-mock.js

• index.js 将mock与url绑定

import Mock from 'mockjs' //引入mockjs，npm已安装
import action from '@/api/action' //引入请求地址


//全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时
Mock.setup({
   
	// timeout: 400  //延时400ms请求到数据
	timeout: 200 - 400 //延时200-400ms请求到数据
})

//引登陆的测试数据，并添加至mockjs
import loginInfo from '@/mock/json/login-mock.js'
let s1 = action.getFullPath('SYSTEM_USER_DOLOGIN')
Mock.mock(s1, "post", loginInfo)
// Mock.mock(s1, /post|get/i, loginInfo)

• login-lock.js code随机0或-1，msg随机3-10个’msg’

//使用mockjs的模板生成随机数据
const loginInfo = {
   
	'code|-1-0': 0,
	'message|3-10': 'msg'
}
export default loginInfo;

• 修改Login.vue中的doSubmit()的内容

doSubmit: function () {
   
    let params = {
   
        username: this.username,
        password: this.password
    };
    console.log(params);
    let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
    this.axios.post(url, params).then(response => {
   
        console.log(response);
        if (response.data.code == 0) {
   
            this.$message({
   
                message: response.data.message,
                type: 'success'
            })
        } else {
   
            this.$message({
   
                message: response.data.message,
                type: 'error'
            })
        }
    }).catch(error => {
   
        console.log(error);
    });
}

二、登录注册跳转

使用this.$router.push({})

2.1.在views中添加Register.vue

<template>
  <div class="login-wrap">
    <el-form class="login-container">
      <h1 class="title">用户注册</h1>
      <el-form-item label="">
        <el-input type="text" v-model="username" placeholder="登录账号" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input type="password" v-model="password" placeholder=