vue-cli中使用mockjs模拟数据

场景还原

在日常开发中是否遇到过这种情况：在进行前后端分离开发的项目时，我们前端的页面写好了，但是后端的接口还差一点，这个时候我们只能等后端把接口实现好或者我们自己模拟一些假数据，无论那种方法都会浪费大量时间。好在Mockjs很好的帮我们解决了这个烦恼。

使用Mockjs的好处

• 前后端分离
• 不需要修改代码，拦截Ajax请求，返回模拟的响应数据
• 数据类型丰富,可以随机生成文字、数字、布尔值、日期、邮箱、图片、链接等

使用Mockjs

安装Mockjs

npm install mockjs

新建mock.js

新建一个mock.js文件，在文件中编写mock数据，示例：

//引入mockjs
const Mock = require('mockjs');
//获取mock.Random对象
const Random = Mock.Random;
//mock一组数据
const newsData = function() {
    let news = [];
    for(let i = 0; i < 10; i++){
        let newObject = {
            title: Random.csentence(5, 30), //随机生成一个文字标题
            image: Random.dataImage('300x300', 'mock的图片'), // 生成一个300X300的服务器
            author: Random.cname(), // 随机生成一个常见的中文姓名
            datetime: Random.date() + ' ' + Random.time() // 指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
        }
        news.push(newObject)
    }
    return {
        news: news
    }
}
Mock.mock('/news/index', 'get', newsData);  //mock(url,post/get/put/delete,数据)

在项目的入口文件中引入mock.js

// 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'
// require('./mock.js')
import './mock.js'  //引入mock

Vue.config.productionTip = false

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

使用ajax请求模拟数据

<template>
  <div class="hello">
    <div v-for="(item, index) in newsListShow" :key="index">
      <div>{{item}}</div>
    </div>
  </div>
</template>

<script>
import api from '@/axios/api.js'
export default {
  name: 'HelloWorld',
  data () {
    return {
      newsListShow: []
    }
  },
  created() {
    this.setNewApi();
  },
  methods: {
    setNewApi() {
      api.get('/news/index').then(res => {
        console.log(res);
        this.newsListShow = res.news;
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

参考 Jason齐齐