mock.js那点事(下)

这篇针对不管看没看过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你都能脱离后端进行开发了，终于写完了这两篇文章了，这篇算是对上一篇文章的一个实战应用吧，也是自己平时学习的积累，后续还会有其他的一些教程，我一定会用短小精悍的文字，带来满满的干货,最后，觉得有用的话，点个赞呗，各位看官！