Vue_08_Spa项目2开发之首页导航and左侧菜单

Mock.js介绍：

前后端分离开发开发过程当中，经常会遇到以下几个尴尬的场景：
       1. 老大，接口文档还没输出，我的好多活干不下去啊！
       2. 后端小哥，接口写好了没，我要测试啊！
前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockjs就可以做到这一点。

   Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。
   
众所周知Mock.js因为两个重要的特性风靡前端:
        数据类型丰富
        支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
        拦截Ajax请求
        不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。
          更多内容，可以云Mockjs官方查看“http://mockjs.com/”

           注1：easy-mock，一个在线模拟后台的数据平台

一、mock.js模拟响应ajax请求

首先要去cmd黑窗口运行：安装mockjs依赖

npm install mockjs -D

 

里面有：

index.js:

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

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

//引登陆的测试数据，并添加至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)

json文件下面有login-mock.js

// const loginInfo = {
// 	code: -1,
// 	message: '密码错误'
// }

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

继做天修改的还有：

config文件夹里面的

dev.env.js: 这里添加了MOCK: 'true'

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

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

})

prod.env.js: 这里相反MOCK: 'false'

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

以及main.js里面的： process.env.MOCK && require('@/mock')

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
process.env.MOCK && require('@/mock')
import 'element-ui/lib/theme-chalk/index.css' // 新添加 2 
import App from './App'
import router from './router'
import ElementUI from 'element-ui' // 新添加 1
import axios from '@/api/http'  //#vue项目对axios的全局配置
// import axios from 'axios'     
import VueAxios from 'vue-axios'

Vue.use(ElementUI)   // 新添加 3
Vue.use(VueAxios,axios)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

二、总线及组件通信

拷入AppMain、LeftNav、TopNav页面到components公共资源里面

AppMain.vue

<template>
	<el-container class="main-container&