ElementUI -- Mock.js介绍和使用与首页导航栏左侧菜单搭建

1.1 mockjs介绍

Mock.js是一个用于生成随机数据和模拟接口请求的JavaScript库。它可以帮助开发人员在前端开发过程中模拟后端接口的返回数据，以便进行前端页面的开发和测试。

Mock.js有两个重要的特性风靡前端:

数据类型丰富

Mock.js提供了一套简单易用的API，可以用于生成各种类型的随机数据，如字符串、数字、布尔值、日期等。开发人员可以使用Mock.js定义接口的返回数据结构，并生成符合该结构的随机数据。

拦截Ajax请求

通过拦截Ajax请求，Mock.js可以截获前端发送的请求，并根据预先定义的规则返回模拟的数据。延时响应功能可以模拟网络延迟，以便测试页面在不同网络条件下的表现。动态数据生成功能可以根据请求参数生成符合条件的随机数据。不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。

1.2 mock.js安装与配置

1.2.1 安装mock.js

npm i mockjs -D

我这里已经安装过了，忘记截图了，还是老样子，进入项目的根目录cmd 然后执行命令就行

-S选项用于启动开发服务器
-D选项用于在启动开发服务器后自动打开浏览器
-G选项用于生成代码或文件。它们分别用于不同的开发场景和需求，具体使用取决于你的目标和任务。

1.2.2 引入mock.js

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

dev.env.js ：生产环境


'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
 
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  // 生产环境下使用mock
      MOCK:'true'
})

prod.env.js：开发环境


'use strict'
module.exports = {
  NODE_ENV: '"production"',
  // 打包环境下不使用mock
  MOCK:'false'
}

main.js
```
//开发环境下才会引入mockjs
process.env.MOCK && require('@/mock') 
```
在做完这一步的时候，我们的程序是会报错的，告诉我们没有在src下找到我们的mock模块，不用急，下面会定义

1.3 mock.js的使用

1.3.1 准备模拟数据

为每个*.vue定义单独的xxx-mock.js文件，并在其中添加自定义的json数据，还可以通过mockjs的模块生成随机数据信息，动态测试ajax请求效果。

创建src/mock/json目录，定义登录测试数据文件login-mock.js：


//在没有使用mock.js前，定义数据的方式（死数据）
/* const loginInfo = {
  code: -1,
  message: '密码错误'
} */
 
//使用mockjs的模板生成随机数据
const loginInfo = {
  //1表示50%概率
  "success|1": true,
  //1-2指重复1到2次
  "msg|1-2": 'msg'
}
 
//将当前模块导出，导出后index.js才可以导入
export default loginInfo;

1.3.2 定义拦截路由

在src目录下创建mock目录，定义mock主文件index.js，并在该文件中定义拦截路由配置，/src/mock/index.js。


import Mock from 'mockjs' //引入mockjs，npm已安装
import action from '@/api/action' //引入请求地址
 
//全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时
Mock.setup({
	// timeout: 400  //延时400s请求到数据
	timeout: 200 - 400 //延时200-400s请求到数据
})
 
//获取请求的url
let url = action.getFullPath('SYSTEM_USER_DOLOGIN');
//引登陆的测试数据，并添加至mockjs
import loginInfo from '@/mock/json/login-mock.js'
Mock.mock(url, "get", loginInfo)
 
//如果请求既可以是get又可以是post的请求方式可以使用如下方式：
// Mock.mock(s1, /post|get/i, loginInfo)

1.3.3 测试

编辑Login.vue文件，根据不同响应，给出不同提示。


 
<script>
  export default {
    name: 'Login',
    data() {
      return {
        username: '',
        password: ''
      }
    },
    methods: {
      gotoRegister() {
        this.$router.push("/Register");
      },
      doSubmit() {
        //定义后台登录方法连接地址
        let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
        //获取数据
        let params = {
          username: this.username,
          password: this.password
        };
        /* get请求进行参数传递 */
        this.axios.get(url, {
          params: params
        }).then(r => {
          console.log(r);
 
          //提示成功和失败，主要演示获取响应数据的方法
          if (r.data.success) {
            //可以到element-ui官网查看用法
            this.$message({
              message: '登录成功',
              type: 'success'
            });
          }else{
            this.$message({
              message: '登录失败',
              type: 'error'
            });
          }
        }).catch(e => {
          //异常信息
        });
 
      }
    }
  }
script>
 
<style scoped>
  .login-wrap {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 10%;
    background-image: url('/static/imgs/books2.jpg');
    /* background-color: #3b7cf5; */
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 100%;
  }
 
  .login-container {
    border-radius: 10px;
    margin: 0px auto;
    width: 350px;
    padding: 30px 35px 15px 35px;
    border: 1px solid #eaeaea;
    text-align: left;
    background-color: rgba(229, 229, 229, 0.8);
  }
 
  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #0b0b0b;
  }
style>

这里我原本是拦截不了的，但是后来去网上找了，说是引入mock的顺序问题，后面将顺序一改就行了

二、总线首页导航栏左侧菜单搭建

2.1、首先定义总线


new Vue({
  el: '#app',
  data(){
    return{
      Bus:new Vue()
    }
  },
  router,
  components: { App },
  template: ''
})

2.2 自定义界面组件 (完整代码)

1. AppMain.vue 界面总容器


 
<script>
	// 导入组件
	import TopNav from '@/components/TopNav.vue'
	import LeftNav from '@/components/LeftNav.vue'
 
	// 导出模块
	export default {
		components: {
      TopNav,LeftNav
    },data() {
      return {
        asideClass: "main-aside"
      }
    },
	created() {
      this.$root.Bus.$on("xxx", (v) => {
        this.asideClass = v ? 'main-aside-collapsed' : 'main-aside';
      });
    }
 
 
	};
script>
<style scoped>
	.main-container {
		height: 100%;
		width: 100%;
		box-sizing: border-box;
	}
 
	.main-aside-collapsed {
		/* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
		width: 64px !important;
		height: 100%;
		background-color: #334157;
		margin: 0px;
	}
 
	.main-aside {
		width: 240px !important;
		height: 100%;
		background-color: #334157;
		margin: 0px;
	}
 
	.main-header,
	.main-center {
		padding: 0px;
		border-left: 2px solid #333;
	}
style>

2. LegtNav.vue 左侧菜单