vue中，使用mock流程

vue中，使用mock流程

开发流程

1、安装mock包

npm install mockjs

附：

# 使用axios发送ajax
cnpm install axios --save
# 使用mockjs产生随机数据
cnpm install mockjs --save-dev
# 使用json5解决json文件,无法添加注释问题
cnpm install json5 --save-dev

2、配置mock

2.1、在src文件夹下新建mock文件夹，在mock文件夹下新建index.js文件引入mock

src/mock/index.js

/*
 * @Descripttion:
 * @version:
 * @Author: 
 * @email: 
 * @Date: 
 * @LastEditors: 
 * @LastEditTime: 
 */
// 首先引入Mock
const Mock = require('mockjs');

// 设置拦截ajax请求的相应时间
Mock.setup({
    timeout: '200-600'
});

let configArray = [];

// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
    if (key === './index.js') return;
    configArray = configArray.concat(files(key).default);
});

// 注册所有的mock服务
configArray.forEach((item) => {
    for (let [path, target] of Object.entries(item)) {
        let protocol = path.split('|');
        Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
    }
});

2.2、在mock文件夹下新建demoDataList.js

src/mock/demoDataList.js

/*
 * @Descripttion:
 * @version:
 * @Author:
 * @email: 
 * @Date: 
 * @LastEditors: 
 * @LastEditTime:
 */
let demoList = {
  status: 200,
  message: 'success',
  data: [{
      id: 1,
      name: '李世民',
      age: '23',
      job: '前端工程师'
  }, {
      id: 2,
      name: '朱元璋',
      age: '27',
      job: '后端工程师'
  }]
};
let demoList2 = [{
  id: 1,
  name: '铁木真',
  age: '26',
  job: '测试工程师'
}, {
  id: 2,
  name: '刘邦',
  age: '32',
  job: '产品经理'
}];
export default {
  'get|/parameter/query': demoList,
  // 也可以这样写
  // 官方解释为：记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
  'get|/parameter/query': (option) => {
      // 可以在这个地方对demoList2进行一系列操作，例如增删改
      // option 指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性
      return {
          status: 200,
          message: 'success',
          data: demoList2
      };
  }
}

3、在main.js中引入mock

src/main.js

import Vue from 'vue'
import App from './App.vue'

import ELEMENTUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import '@/styles/index.less'


import router from '@/router'

import axios from 'axios';
Vue.prototype.axios = axios;

require('@/mock');

import myPlugin from '@/components'
Vue.use(myPlugin)


Vue.use(ELEMENTUI)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

或

/*
 * @Descripttion: 
 * @version: 
 * @Author:
 * @email: 
 * @Date: 
 * @LastEditors: 
 * @LastEditTime: 
 */
// 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'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'

require('./mock/index.js');

Vue.use(ElementUI)

//引入axios
import axios from 'axios';
Vue.prototype.axios = axios;

Vue.config.productionTip = false

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

4、页面中使用mock数据

在页面中调用在demoList.js创建的数据

src/views/demo.vue

<!--
 * @Descripttion: 
 * @version: 
 * @Author:
 * @email: 
 * @Date: 
 * @LastEditors: 
 * @LastEditTime: 
--> 
<template>
  <div class="hello">
    <el-button @click="getDemoList">获取数据</el-button>
      <!-- 显示年龄  23 -->
    {{age}}
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      age:''
    };
  },
  methods: {
    /**
     * @name:获取Mock.js中数据
     * @test: test font
     * @msg:
     * @param {type}
     * @return:
     */
    getDemoList() {
      this.axios({
        method: "get",
        url: "/parameter/query"
      })
        .then(res => {
          console.log('返回数据',res);
          this.age = res.data.data[0].age
        })
        .catch(resp => {
          console.log("请求失败：" + resp.status + "," + resp.statusText);
        });
    }
  }
};
</script>

<style scoped>
</style>

打印返回数据，显示