mock

最近經濟低迷，各類負面消息，各類裁人。幸運的是我還在本身的崗位上好好的工做。可是面對動盪的形式，總有一種感受：亂世出英雄。

做爲一個菜雞嗅不出絲毫的商機，因而我決定把本身的技術好好鞏固，在前端的方向上走的更遠一些，讓本身的見識更廣一些，本身的格局更高一些。

最近想把作過的項目用前端的框架和知識重構一下，作到儘量多的融入前端知識，因此此篇文章應運而生。我分別作了非框架和基於vue的mock數據的嘗試：

jq+html+css+nodejs mock數據：點這裏https://github.com/kimsaerono/mockDemo/tree/master

本項目基因而基於一個nodejs的項目，須要的依賴有express，mockjs。

示例代碼以下：

var express = require("express");
var app = express();
var mockData = require('./mock.js');

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
    console.log(123)
    });

app.get('/getText', function (req, res) {
    res.send(JSON.stringify(mockData.text));
});
 app.get('/getList', function (req, res) {
    res.send(JSON.stringify(mockData.list))
 });

var server = app.listen(8081, function () {
    var host = server.address().address
    var port = server.address().port
    console.log("應用實例，訪問地址爲 http://%s:%s", host, port)
});

敲黑板，重點標記：express框架搭建一個node服務，經過app.all設置請求頭res.header("Access-Control-Allow-Origin", "*");實現跨域。app.get請求的是node服務，調用的mock.js中的數據。創建mock.js:

var Mock = require("mockjs");
var data = {
    list : Mock.mock({
        'list|1-10': [{
            'id|+1': 1
        }]
    }),
    text : Mock.mock({
        'text|2-4' : "na"
    })
}

exports = module.exports = data

其中data是mock的語法，Mock.mock("name|rules" :value)；

調用app.get實現接口，res返回mockjs中的數據（這一步啓用一個node服務和設置跨域請求頭是頗有必要的，這樣模擬了前端調用後臺的流程而且保證了可以正常請求）

最後監聽8081端口。整個有關於服務和數據的配置完成。

而後在index.html中調用$.ajax:url如"http://localhost:8081/getText"形式，現實了node服務的搭建和mock數據的模擬與本地調用「遠程數據」。