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