前后端分工协作是一个非常高效的做法,但是有时前后端分离不彻底会很痛苦。前后端应该是异步进行的,进度互不影响,但是在没有mock的时候,前端却严重依赖后端的接口,总会苦苦等待后端接口出来才能继续开发。为了解决这个问题,大神就造了一个轮子,供大家使用--mock.js
关于mock.js,官网描述:
1.前后端分离
2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据
3.数据类型丰富
4.通过随机数据,模拟各种场景
本文介绍在vue项目中如何使用mock.js
通过vue-cli搭建的项目(v2.9.3)
1. 安装
1cnpm install mockjs --save-dev
2. 配置
为了只在开发环境使用mock.js,而打包到生产环境时自动不使用mock.js,做以下配置:
config目录下dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
Mock: true
})
config目录下prod.env.js
'use strict'
module.exports = {
NODE_ENV: '"production"',
Mock: false
}
src目录下main.js
// 向main.js中添加如下代码
process.env.Mock && require('./mock.js')
3. 创建文件
在src目录下创建mock.js,内容如下
// 引入mockjs
const Mock = require('mockjs')
// 获取 mock.Random 对象
const Random = Mock.Random
// mock一组数据
const produceNewsData = function () {
let articles = []
for (let i = 0; i < 100; i++) {
let newArticleObject = {
title: Random.csentence(5, 30), // Random.csentence( min, max )
thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd;Random.time() 返回一个随机的时间字符串
}
articles.push(newArticleObject)
}
return {
data: articles
}
}
// 拦截ajax请求,配置mock的数据
Mock.mock('/api/articles', 'get', produceNewsData)
模板的功能非常强大,可以生成几乎所有类型的数据,具体参考:
官方文档:https://github.com/nuysoft/Mock/wiki
4. 页面使用
export default {
data () {
return {
articles: []
}
},
methods: {
requestData () {
this.$axios.get('/api/articles')
.then(e => {
let data = e.data
if (data.data && Array.isArray(data.data)) {
this.articles = data.data
}
console.log(this.articles)
})
.catch(err => {
console.log(err)
})
}
},
created () {
this.requestData()
}
}
返回数据:
参考文章:
如何在Vue项目中使用Mockjs,模拟接口返回的数据,实现前后端分离独立开发
个人博客:https://sxd.now.sh/