在vue项目中使用mock.js

vue-cli项目中使用mockjs模拟数据

vue-cli项目中如何使用

• 在项目中安装mockjs、axios（http请求库）
  cnpm install mockjs axios --save
• 在项目中新建一个mock.js文件，用于定义接口返回的数据
• 在main.js引入mock.js

mock.js

const Mock = requery('mockjs') // 获取mock对象
const Random = Mock.Random // 获取random对象,随机生成各种数据
const domain = 'http://mockjs.com/api' // 定义默认域名,可以随便写
const code = 200 // 返回的状态码
// 随机生成的数据
const postData = req => {
	console.log(req) // 请求体,用来获取参数
	let posts = [] // 用于存放文章数据的数组
	for (let i = 0;i < 10; i++) {
		let post = {
			title: Random.csentence(10,25), // 随机生成10-25字符长的标题
			icon: Random.dataImage('250*250','文章icon'), // 随机生成大小为250x250的图片链接
			author: Random.cname(), // 随机生成名字
			date: random.date() + '' + Random.time() // 随机生成年月日 + 时间
		}
		posts.push(post)
	}
	// 返回状态码和生成的数据posts
	return {
		code,
		posts
	}
}
// 定义请求链接,类型,还有返回的数据
Mock.mock(`${domain}/posts`,'get',postData)

main.js

import Mock from './mock' // 在main.js中引入刚刚写的mock.js文件
import axios from 'axios' 
asios.defaults.baseURL = 'http://mockjs.com/api' // 设置默认请求的url
Vue.prototype.$http = axios

组件中

this.$http.get('/posts').then(result => {
	console.log(result)
})

来自https://www.jianshu.com/p/aea89b5e6d33