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数据的模拟与本地调用“远程数据”。