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你都能脫離後端進行開發了，終於寫完了這兩篇文章了，這篇算是對上一篇文章的一個實戰應用吧，也是本身平時學習的積累，後續還會有其餘的一些教程，我必定會用短小精悍的文字，帶來滿滿的乾貨,最後，以爲有用的話，點個讚唄，各位看官！