用express模拟接口数据

前端工程师写好页面后，经常需要等待后端工程师给接口，影响了开发进度，自给自足就很必要了。这里介绍使用express搭建一个后台服务，模拟接口数据。
第一步，安装express

npm install express

第二部，搭建服务

// server.js

var express = require('express');
var app = express();

app.get('/', function (req, res) {
  res.send('这里是首页')
})

var server = app.listen(8000, 'localhost', function () {
  console.log('服务器已经启动，地址是http://localhost:8000')
})

运行：node server.js
打开浏览器，进入localhost:8000，显示这里是首页服务就搭建好了。

第三步，模拟接口数据

app.get('/goods', function (req, res) {
  res.json(data)  //返回json数据
})
// 模拟的数据
var data = {
  code: 200,
  msg: 'ok',
  data: {
    a: aa,
    b: bb
  }
}

这里模拟了一个接口，访问http://localhost:8000/goods就会返回data
再前端代码中调用，就会拿到我们熟悉的json数据了

http.get('http://localhost:8000/goods').then(res => {
    …… // 
})

第四步，解决跨域问题
ajax调用会报错，显示

Failed to load http://localhost:8000/goods: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

这是跨域请求问题，解决方法

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();
});

第五步，热更新
每次修改server.js都需要重新运行才能够生效，很麻烦
安装nodemon

npm install nodemon -g

总结：最终代码

var express = require('express');
var app = express();

//解决跨域  
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();
});


var server = app.listen(8000, 'localhost', function () {
  console.log('服务器已经启动，地址是http://localhost:8000')
})

app.get('/', function (req, res) {
  res.send('这里是首页')
})
app.get('/goods', function (req, res) {
  res.json(data) // 返回json
})
var data = {
  code: 200,
  msg: 'ok',
  data: {
    a: aa,
    b: bb
  }
}

参考文档：Express
感谢浏览，欢迎评论指正，转载请标明出处。

用express模拟接口数据

推荐阅读更多精彩内容