这篇针对不管看没看过mock.js那点事(上),你都会有收获
前几天讲了一下mock.js那点事(上),有心的哥们估计看完了我的那篇mock.js那点事(上),估计看得太过瘾了,然后又去官网也把所有demo也刷了一遍了,可能有些朋友花了半个小时刷完了所有demo之后,发现这东西怎么结合项目来使用啊,尤其是现在大火的vue.js呢?好吧,我专门结合了平时的实际,总结了几种配合vue.js脚手架工具模拟数据的方法。
其实主要就分两大类。
- 一类是使用mock.js同类的库来拦截ajax请求
- 另一类就是使用vue脚手架自带的express服务器路由功能来渲染数据
我个人用过很多种方式模拟数据,包括利用json-server库,那种是需要跨域的,对于新手来说并不友好, 麻烦的要命,所以我直接讲最好用的一种,就是利用脚手架自带的express路由功能,不需要跨域的方案
mock
npm install axios mockjs --save
在main.js里面加上 Vue.prototype.$http = axios
打开build/dev-server.js,添加如下代码复制代码
//定义状态码 这个随意定义
var isOk = 1
var Mock = require('mockjs')
var aipRouter = express.Router()
//获取news数据
aipRouter.get('/news', function (req, resp) {
var data = Mock.mock({
'categorys|1-3': [{
'id|10': 1,
"url": "@url",
"domain": "@domain",
"email": "@email",
"paragraph": "@paragraph",
"sentence": "@sentence"
}]
})
var net = JSON.stringify(data, null, 4)
resp.json({
ok: isOk,
data: net
})
})
//获取dailies数据
aipRouter.get('/dailies', function (req, resp) {
var data = Mock.mock({
'categorys|1-3': [{
'id|10': 1,
"url": "@url",
"domain": "@domain",
"email": "@email",
"paragraph": "@paragraph",
"sentence": "@sentence"
}]
})
var net = JSON.stringify(data, null, 4)
resp.json({
ok: isOk,
data: net
})
})
//获取zalent数据
aipRouter.get('/zalent', function (req, resp) {
var data = Mock.mock({
'categorys|1-3': [{
'id|10': 1,
"url": "@url",
"domain": "@domain",
"email": "@email",
"paragraph": "@paragraph",
"sentence": "@sentence"
}]
})
var net = JSON.stringify(data, null, 4)
resp.json({
ok: isOk,
data: net
})
})
//写入express 这里可以使用app 因为express 存放在app变量
//这里有两个参数 这里是使用了一个斜杠 具体要看你路由配置
app.use('/api', aipRouter)复制代码
进入components创建三个组件 zalent.vue、 dailies.vue、news.vue
mounted() {
this.$http.get('/api/news').then((res) => {
var arr = JSON.parse(res.data.data)
this.Data = arr.categorys
})
}复制代码
mounted() {
this.$http.get('/api/news').then((res) => {
var arr = JSON.parse(res.data.data)
this.Data = arr.categorys
})
}复制代码
mounted() {
this.$http.get('/api/news').then((res) => {
var arr = JSON.parse(res.data.data)
this.Data = arr.categorys
})
}复制代码
搞定之后,出现的效果就是这样的了,效果和数据都随你定
源码参考地址
第二种
要是看到,你还是一脸蒙蔽的话,又或者说,我还不了解mock.js这个强大的库,我只想模拟一些文字,那我只能放大招了,
准备好一个data.json文件,里面是你随便假设的数据放到/static/下
打开build/dev-server.js,添加如下代码复制代码
//定义状态码 这个随意定义
var isOk = 1
/**
* data.json 存放的路径
*/
var jsondata = require('../static/data.json')
// data.joson的三个不同数据
var data = {
dailies: jsondata.dailies,
news: jsondata.news,
zalent: jsondata.zalent
}
// 获取路由
var aipRouter = express.Router()
//获取news数据
aipRouter.get('/news', function (req, resp) {
resp.json({
ok: isOk,
data: data.news
})
})
//获取dailies数据
aipRouter.get('/dailies', function (req, resp) {
resp.json({
ok: isOk,
data: data.dailies
})
})
//获取zalent数据
aipRouter.get('/zalent', function (req, resp) {
resp.json({
ok: isOk,
data: data.zalent
})
})
//写入express 这里可以使用app 因为express 存放在app变量
//这里有两个参数 这里是使用了一个斜杠 具体要看你路由配置
app.use('/api', aipRouter)复制代码
这样,不管你会不会mock.js你都能脱离后端进行开发了,终于写完了这两篇文章了,这篇算是对上一篇文章的一个实战应用吧,也是自己平时学习的积累,后续还会有其他的一些教程,我一定会用短小精悍的文字,带来满满的干货,最后,觉得有用的话,点个赞呗,各位看官!