mock（模擬后端數據）

目錄

• mock的使用准備工作
• 寫模擬接口
  • 模擬get請求
  • 模擬帶參數的post請求

語法規范：
https://github.com/nuysoft/Mock/wiki/Syntax-Specification

mock的使用准備工作

1.npm install mockjs
npm install axios(用axios調用接口)
2.新建js文件，使用mock方法寫入接口
mian中導入接口js文件，導入axios

import './api/mock.js'
import axios from 'axios'
Vue.prototype.$axios = axios

3.生成隨機模擬數據
@函數名 即可調用函數（只在mock函數里有效）

寫模擬接口

模擬get請求

Mock.mock('/board','get',{
	status:200,
	message:'獲取公告列表成功',
	'data|5-10':[{
		id:'@increment(1)',
		//'id|+1':0,//這也是在模擬一個自增長的ID值
		companyid:'@increment(1)',
		boardTitle:'@csentence(1,20)',
		boardInfo:'@cparagraph(1,6)'
	}]
})

模擬帶參數的post請求

Mock.mock('/test','post',function(option){
	// option是請求相關的參數
	console.log(option)
	
	// 請求成功，后台返回的參數
	return{
		status:200,
		message:'商品添加成功！'
		
	}
})

注：一般都會把option參數打印出來

Mock.mock('/test','post',function(option){
	// option是請求相關的參數
	console.log(option)
	
	// 請求成功，后台返回的參數
	return Mock.mock({
		status:200,
		message:'@cword(2,5)'
	})
})

雙層嵌套，上面做路由攔截，下面做假數據

調用post請求

async post() {
				const {data:res} = await this.$axios.post('/test',{name:'菠蘿'})
				console.log(res)
				
			}