前端模拟后端接口返回数据的方法

使用node搭建简单服务器接收请求返回数据

1、首先安装node

官网下载稳定版本：https://nodejs.org/en/download/

检查版本

是否有安装 node 和 npm包管理工具，打开cmd命令行工具，输入：

node -v

npm -v

使用nrm：参考我的另一篇文章：

2、安装express应用程序生成器

安装：全局安装express-generator

npm install -g express-generator

创建：在想要的文件夹位置运行命令，创建一个名为 myapp 的 express 应用程序

express --view=pug myapp

成功后会自动在目标位置创建一个名为 shujumoni 的项目并生成很多文件，命令行显示效果如下：

执行命令：在命令行最下面有提示：

1、进入项目文件夹：cd shujumoni

2、安装依赖：npm install

扫描二维码关注公众号，回复： 6183678 查看本文章

3、启动：npm start

查看：在浏览器输入localhost:3000，会打开一个页面显示Welcome to Express，说明已经成功启动服务了。

配置

打开 sujumoni 项目，目录结构：

.
├── app.js
├── bin
│   └── www
├── node_modules //安装的依赖
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.pug
    ├── index.pug
    └── layout.pug

这个时候，浏览器打开localhost:3000/users,可以看到页面显示respond with a resource

打开routes 文件夹下的users看到以下代码：

// routes/users.js文件

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;

可以看到页面显示的内容就是users.js文件中返回的内容，我们定义自己想要返回的内容；

/ routes/users.js文件

var express = require('express');
var router = express.Router();
var data = {
    'code':'000',
    'message':'message消息',
    'lists':[
        {
          'naem':'小马',
            'age': '12',
            'sex':'男'
        },{
          'naem':'小韦',
            'age': '12',
            'sex':'女'
        }
    ]

}

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send(data);
});

module.exports = router;

改了之后再请求没有改变，查看命令行信息，304发现我们的请求给我们缓存了；

GET /users 304 2.543 ms - -

重新启动一下试试，刷新就可以了

{
  'code':'000',
  'message':'message消息',
  'lists':[
    {
      'naem':'小马',
      'age': '12',
      'sex':'男'
    },{
      'naem':'小韦',
      'age': '12',
      'sex':'女'
    }
  ]
}

这样虽然可以请求，但是有缓存问题，而且接口多的话每次都得配置一个路径，太复杂，所以要封装一下，重复使用，每次请求重新请求不加载缓存。

在项目下新建一个config文件夹并新建一个api.js，配置一下：

// config/api.js

var fs = require('fs');

/**
 * 检查请求的路径是否存在
 * @param apiName 请求路径
 * @param method  请求方式
 * @param params   请求参数
 * @param res 返回请求
 */
function getDataFromPath(apiName, method, params, res) {
    if (apiName) {
        fs.access(
            // 提取请求路径中的js文件
            apiName.substring(1) + '.js',
            // 回调函数，检查请求的路径是否有效失败返回一个错误参数
            function (err) {
                if (!err) {
                    // 每次请求都清除模块缓存重新请求
                    delete require.cache[require.resolve('..' + apiName)];
                    try {
                        addApiResult(res, require('..' + apiName).getData(method, params));
                    } catch (e) {
                        console.error(e.stack);
                        res.status(500).send(apiName + ' has an error,please check the code.');
                    }
                } else {
                    addApiResult(res);
                }
            }
        );
    } else {
        addApiResult(res);
    }
};

/**
 *  响应头
 * @param res
 */
function addApiHead(res) {
    res.setHeader('Content-Type', 'application/json;charset=utf-8');
    // 跨域
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    // 控制http缓存
    res.header("Cache-Control", "no-cache, no-store, must-revalidate");
    res.header("Pragma", "no-cache");
    res.header("Expires", 0);
}

/**
 * 返回参数，如无返回参数返回404
 * @param res
 * @param result
 */
function addApiResult(res, result) {
    if (result) {
        res.send(result);
    } else {
        res.status(404).send();
    }
}

/*请求方式*/
// get
exports.get = function (req, res) {
    addApiHead(res);
    getDataFromPath(req.path, 'GET', req.query, res);
};

// post
exports.post = function (req, res) {
    addApiHead(res);
    getDataFromPath(req.path, 'POST', req.body, res);
};

打开根目录下app.js，在上面引入刚刚新建的文件api.js；

// 引入API
var api = require('./config/api');

替换请求配置

/*配置请求*/
app.get('/', function(req, res){
    res.send('hello world');
});
app.get('/api/*', api.get);
app.post('/api/*', api.post);

app.js最终代码

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// 引入API
var api = require('./config/api');

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({extended: false}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));


/*配置请求*/
app.get('/', function (req, res) {
    res.send('hello world');
});
app.get('/api/*', api.get);
app.post('/api/*', api.post);

app.options('/api/*', function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    res.sendStatus(200); /*让options请求快速返回*/
});

module.exports = app;

根目录新建api文件夹，新建demo.js；

// api/demo.js

var dataDemo = {
    'code': '0',
    'message': 'message消息',
    'lists': [
        {
            'naem': '小马',
            'age': '12',
            'sex': '男'
        }, {
            'naem': '小韦',
            'age': '12',
            'sex': '女'
        }
    ]
}
exports.getData = function (method, data) {
    var backData = {
        "code": '0',
        "msg": "demo1",
        "data": dataDemo
    }
    if (method == 'DELETE') {
        backData = {
            "code": '999',
            "msg": "不支持DELETE方法"
        }
    }
    return JSON.stringify(backData);
}

重新运行npm start 之后，浏览器打开localhost:3000，此时应该显示的是hello world；

打开localhost:3000/api/demo，页面显示

{
	"code": "0",
	"msg": "demo1",
	"data": {
		"code": "0",
		"message": "message消息",
		"lists": [{
			"naem": "小马",
			"age": "12",
			"sex": "男"
		}, {
			"naem": "小韦",
			"age": "12",
			"sex": "女"
		}]
	}
}

到此都是成功的，那就说明配置成功了，在api文件夹下复制一个js文件命名为demo2.js，改动一下数据，浏览器访问localhost:3000/api/demo2就可以访问不同的数据了；

使用

假设线上接口是 https://www.huizhi.com/mydata/java/school/list ，我们在api文件夹按照路径新建文件夹和文件即可；

├── api
│   └── mydata
│       └── java
│           └── school
│               └── list.js

开发的时候指向本地服务器器接口，联调测试上线的时候只需要把指向本地服务器地址替换成线上地址一下就可以了；

var baseUrl = 'https://www.huizhi.com';   // 线上地址
var baseUrl = 'http://localhost:3000/api';  // 本地服务器地址

gitee地址： https://gitee.com/huachuan005/shujumoni