express+mockjs实现模拟后台数据发送

前言：

　　大多数时候，前端会和后端同时进行开发，即在咱们开发完页面的时候，极可能还不能立马进入联调阶段，这个时候，为了保证咱们接口的有效性和代码的功能完整，咱们可能须要模拟数据。

模拟数据方法

1.经过js变量模拟后台数据

　　优势：不须要服务器

　　缺点：须要造不少变量，同时还要将变量在咱们的有效代码中使用，最后还得删除

2.经过ajax请求json文件

　　优势：只须要配置路径，就能够访问，进入联调阶段不用修改大量的js代码

　　缺点：ajax存在跨域问题，一般没法请求本地文件，即便火狐也存在不能访问不一样文件目录下的json文件，一般须要经过ide或者本身手动启动服务

3.用nodejs本身写一个专门用来发送请求的服务，不包含业务逻辑

　　优势：前端的代码进入联调阶段只须要修改一个basePath，全部的接口名字均可以和约定好的路径保持一致，能够测试post请求，模拟网络环境

　　缺点：本身要写一个后台

 

一、2两种模拟数据的方式适合用来作demo，可是若是作得是上线项目，咱们仍是推荐使用本身搭建一个node后台

 

1.准备node环境、npm/cnpm

2.安装express、mockjs

3.建立服务端文件server.js，引入相关模块

let express = require('express');    //引入express模块
let Mock = require('mockjs');        //引入mock模块

let app = express();                //实例化express

4.配置接口路由，设置监听端口

/**
 * 配置test.action路由
 * @param  {[type]} req  [客户端发过来的请求所带数据]
 * @param  {[type]} res  [服务端的相应对象，可以使用res.send返回数据，res.json返回json数据，res.down返回下载文件]
 */
app.all('/test.action', function(req, res) {
    res.send('hello world');
});
/**
 * 监听8090端口
 */
app.listen('8090');

　　此时咱们直接访问http://localhost:8090/test.action，就能够直接在界面看到'hello world'文字

5.使用mockjs返回格式化json数据

app.all('/test.action', function(req, res) {
    /**
     * mockjs中属性名‘|’符号后面的属性为随机属性，数组对象后面的随机属性为随机数组数量，正则表达式表示随机规则，+1表明自增
     */
    res.json(Mock.mock({
        "status": 200,
        "data|1-9": [{
            "name|5-8": /[a-zA-Z]/,
            "id|+1": 1,
            "value|0-500": 20
        }]
    }));
});

　　此时咱们再访问页面数据，咱们就能够获得一份随机的json数据

6.建立模拟数据文件夹testData，建立模拟数据json文件（注意：json文件中不能使用正则，且对象属性必须为双引号字符串）

7.遍历模拟数据文件，生成对应路由

/*readdir读取目录下全部文件*/
fs.readdir('./testData', function(err, files) {
    if(err) {
        console.log(err);
    } else {
        /*成功读取文件，取得文件名，拼接生成对应action，监听对应接口并返回对应文件数据*/
        files.forEach(function(v, i) {
            app.all(`/${v.replace(/json/, 'action')}`, function(req, res) {
                fs.readFile(`./testData/${v}`, 'utf-8', function(err, data) {
                    if(err) {
                        console.log(err);
                    } else {
                        res.json(Mock.mock(JSON.parse(data)));
                    }
                })
            })
        })
    }
})

至此，咱们的node服务器已经搭建成功，使用node server.js运行服务器，咱们就能够直接在前端访问接口，可是若是只是单纯的生成后台，前端页面不经过后台进行访问的话，存在跨域问题，若是须要解决，能够在后台添加跨域请求

/*为app添加中间件处理跨域请求*/
app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
});

ps:若是mock须要使用正则，请单独配置路由进行处理，express和mockjs更多指令，请查阅官网api

 

vscode sync key:c79a803f693ef8296f6c4c7f395c1b7a