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

1.安装mock.js依赖

npm install mockjs -D

 2.配置开发环境及生产环境

为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在env中做一个配置

开发环境dev.env.js

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

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

生产环境：

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

开发环境下才会引入mockjs：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'
//开发环境下才会引入mock.js
//开发环境：true&&require('@/mock')会执行后面代码，也就是说mock.js会被导入到当前环境中
//生产环境:false && require('@/mock')不执行后面代码，也就是说mock.js是不会引导到当前环境中
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/>'
})

引入mock文件：

 login-mock.js        可产生多种接口，造数据

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

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

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)

总结mock.js的使用：

        ①、定义接口调用返回的json格式

        ②、返回的json格式与对应的接口请求地址进行绑定index.js

s1指地址：http://localhost:8080/t_216/userAction_login.action

let s1 = action.getFullPath('SYSTEM_USER_DOLOGIN')
Mock.mock(s1, "post", loginInfo)