npm install -S axios
npm install -D mockjs

// mock.js
// 引入mockjs
const Mock = require('mockjs')
// 獲取 mock.Random 對(duì)象
const Random = Mock.Random
// mock新聞數(shù)據(jù)，包括新聞標(biāo)題title、內(nèi)容content、創(chuàng)建時(shí)間createdTime
const produceNewsData = function () {
 let newsList = []
 for (let i = 0; i < 20; i++) {
 let newNewsObject = {
 title: Random.ctitle(), // Random.ctitle( min, max ) 隨機(jī)產(chǎn)生一個(gè)中文標(biāo)題，長(zhǎng)度默認(rèn)在3-7之間
 content: Random.cparagraph(), // Random.cparagraph(min, max) 隨機(jī)生成一個(gè)中文段落，段落里的句子個(gè)數(shù)默認(rèn)3-7個(gè)
 createdTime: Random.date() // Random.date()指示生成的日期字符串的格式,默認(rèn)為yyyy-MM-dd；
 }
 newsList.push(newNewsObject)
 }
 return newList
}
// 請(qǐng)求該url，就可以返回newsList
Mock.mock('/mock/news', produceNewsData) // 后面講這個(gè)api的使用細(xì)節(jié)

// main.js
import Vue from 'vue'
import App from './App'
import router from './router'
require(./mock.js)

// App.vue
<template>
 <div id="#app"></div>
</template>
<script>
import axios from 'axios' // 引入axios
export default {
 // 掛載的時(shí)候獲取新聞列表
 mounted() {
 axios.get('/mock/news').then(res => { // url即在mock.js中定義的
 console.log(res.data) // 打印一下響應(yīng)數(shù)據(jù)
 })
 }
}
</script>

Mock.mock( rurl, rtype, template|function( options ) )
rurl
可選。
表示需要攔截的 URL，可以是 URL 字符串或 URL 正則。例如 '/domian/list.json'。
rtype
可選。
表示需要攔截的 Ajax 請(qǐng)求類型。例如 GET、POST、PUT、DELETE 等。
template
可選。
表示數(shù)據(jù)模板，可以是對(duì)象或字符串。
數(shù)據(jù)模板中的每個(gè)屬性由 3 部分構(gòu)成：屬性名、生成規(guī)則、屬性值：
// 屬性名 name
// 生成規(guī)則 rule
// 屬性值 value
'name|rule': value
例如：'name|1-10':1 會(huì)產(chǎn)生一個(gè)1-10之間的整數(shù)，詳細(xì)規(guī)則參見(jiàn)官方文檔
function(options)
可選。
表示用于生成響應(yīng)數(shù)據(jù)的函數(shù)。
options
指向本次請(qǐng)求的 Ajax 選項(xiàng)集，含有 url、type 和 body 三個(gè)屬性

// App.vue
<template>
 <div id="app">
 <div>
 <input type="text" v-model="title">
 <button type="button" @click="submit">提交</button>
 <button type="button" @click="getProjects">獲取</button>
 </div>
 </div>
</template>
<script>
import axios from 'axios'
export default {
 data () {
 return {
 title: ''
 }
 },
 methods: {
 submit () {
 axios.post('/mock/addProject', { // 添加數(shù)據(jù)的接口,數(shù)據(jù)為一個(gè)對(duì)象，有個(gè)title屬性
 title: this.title
 })
 },
 getProjects () {
 axios.get('/mock/projects').then(res => { // 獲取數(shù)據(jù)
 console.log(res.data) 
 })
 }
 }
}
</script>

// mock.js
// 添加信息
let projectList = []
Mock.mock('/mock/addProject', ops => { // 攔截ajax請(qǐng)求，調(diào)用函數(shù)
 console.log(ops) // 先看一下這個(gè)ops是什么
 projectList.push(ops)
})
// 獲取信息
Mock.mock('/mock/projects', projectList)

// mock.js
// 添加信息
let projectList = []
Mock.mock('/mock/addProject', ops => { // 攔截ajax請(qǐng)求，調(diào)用函數(shù)
 // console.log(ops) // 先看一下這個(gè)ops是什么
 ops = JSON.parse(ops.body)
 projectList.push(ops)
})
// 獲取信息
Mock.mock('/mock/projects', projectList)