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

mock.js那點事(下)

mock

第二種

相關文章