mock.js那点事(下)

时间 2019-11-24

原文原文链接

这篇针对无论看没看过mock.js那点事(上),你都会有收获 javascript

前几天讲了一下mock.js那点事(上)，有心的哥们估计看完了个人那篇mock.js那点事(上)，估计看得太过瘾了，而后又去官网也把全部demo也刷了一遍了，可能有些朋友花了半个小时刷完了全部demo以后，发现这东西怎么结合项目来使用啊，尤为是如今大火的vue.js呢？好吧，我专门结合了平时的实际，总结了几种配合vue.js脚手架工具模拟数据的方法。
其实主要就分两大类。vue

一类是使用mock.js同类的库来拦截ajax请求
另外一类就是使用vue脚手架自带的express服务器路由功能来渲染数据

我我的用过不少种方式模拟数据，包括利用json-server库，那种是须要跨域的，对于新手来讲并不友好，麻烦的要命，因此我直接讲最好用的一种，就是利用脚手架自带的express路由功能，不须要跨域的方案java

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.vueios

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
            })
        }复制代码

搞定以后，出现的效果就是这样的了，效果和数据都随你定
源码参考地址
git

第二种

要是看到，你仍是一脸蒙蔽的话，又或者说，我还不了解mock.js这个强大的库，我只想模拟一些文字，那我只能放大招了，github

准备好一个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)复制代码

第二个源码参考地址ajax

这样，无论你会不会mock.js你都能脱离后端进行开发了，终于写完了这两篇文章了，这篇算是对上一篇文章的一个实战应用吧，也是本身平时学习的积累，后续还会有其余的一些教程，我必定会用短小精悍的文字，带来满满的干货,最后，以为有用的话，点个赞呗，各位看官！express