Mock数据一 使用基于Node.js的Express框架来Mock接口数据

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/abc6368765/article/details/85130579

一、安装Express

Express快速入门

  • 安装 nodejs

打开下载地址 ,选择mac os版本下载到本地,进行安装。(也可以通过Homebrew来进行安装)

  • 获取nodejs模块安装目录访问权限
sudo chmod -R 777 /usr/local/lib/node_modules/
  • 安装淘宝镜像cnpm,国外的npm下载非常慢
npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 安装express(如果出现了权限拒绝问题,可以在命令行前加sudo)
$ npm install express --save

二、Express 应用程序生成器

通过应用生成器工具 express-generator 可以快速创建一个应用的骨架。
express-generator 包含了 express 命令行工具。通过如下命令即可安装:

$ npm install express-generator -g

如下命令创建了一个名称为 myapp 的 Express 应用。此应用将在当前目录下的 myapp 目录中创建,并且设置为使用 Pug 模板引擎(view engine):

$ express --view=pug myapp

   create : myapp
   create : myapp/package.json
   create : myapp/app.js
   create : myapp/public
   create : myapp/public/javascripts
   create : myapp/public/images
   create : myapp/routes
   create : myapp/routes/index.js
   create : myapp/routes/users.js
   create : myapp/public/stylesheets
   create : myapp/public/stylesheets/style.css
   create : myapp/views
   create : myapp/views/index.pug
   create : myapp/views/layout.pug
   create : myapp/views/error.pug
   create : myapp/bin
   create : myapp/bin/www

然后安装所有依赖包:

$ cd myapp
$ npm install

在 MacOS 或 Linux 中,通过如下命令启动此应用:

$ DEBUG=myapp:* npm start

在 Windows 中,通过如下命令启动此应用:

> set DEBUG=myapp:* & npm start

然后在浏览器中打开 http://localhost:3000/ 网址就可以看到这个应用了。
通过生成器创建的应用一般都有如下目录结构:

.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.pug
    ├── index.pug
    └── layout.pug

7 directories, 9 files

三、客户端发起请求响应的接口path,成功返回respond

使用express-generator默认生成的项目初始结构:
初始目录

Mac电脑使用如下命令行来启动此应用

$ DEBUG=myapp:* npm start

然后在浏览器中输入http://localhost:3000/,可以看到如下所示,该请求对应index.js里面的

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

初始请求
然后在浏览器中输入http://localhost:3000/users,可以看到如下所示,该请求对应users.js里面的

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

二级请求

四、自定义接口path,并返回json字符串

在项目根目录创建data文件夹,并在里面添加user.json文件:

{
  "name": "afinalstone",
  "sex": "男",
  "age": 26,
  "country": "中国"
}

在index.js里面添加内容:

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

var fs = require('fs')
var path = require('path')

router.all('*', function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*'); //访问控制允许来源:所有
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); //访问控制允许报头 X-Requested-With: xhr请求
    res.header('Access-Control-Allow-Metheds', 'PUT, POST, GET, DELETE, OPTIONS'); //访问控制允许方法
    res.header('Content-Type', 'application/json;charset=utf-8');
    next();
})

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

/** 测试方法 */
router.get('/test', function(req, res, next) {
    var file = path.join(__dirname, '../', '/data/user.json');
    var json = fs.readFileSync(file, 'utf-8')
    console.log(json)
    res.json(JSON.parse(json))
})

module.exports = router;

然后重新启动应用,在浏览器中输入http://localhost:3000/test,可以看到如下所示
自定义json文件

到这里我们就基本实现了mock数据的功能,我们首先配置相应的请求路径,然后在配置具体返回的json内容,然后在前端,移动端发起对应的url请求,即可获取对应的json字符串。

五、允许客户端使用其他请求方式来进行请求响应

  • 对客户端使用Post请求进行响应:
app.post('/', function (req, res) {
  res.send('Got a POST request')
})
  • 对客户端Put请求进行响应
app.put('/user', function (req, res) {
  res.send('Got a PUT request at /user')
})
  • 对客户端Delete请求进行响应
app.delete('/user', function (req, res) {
  res.send('Got a DELETE request at /user')
})

如果需要更多更加具体的Router指南,请参考官方文档

猜你喜欢

转载自blog.csdn.net/abc6368765/article/details/85130579