用express模拟接口数据

2018-05-03  本文已影响99人  疾风劲草ccy

前端工程师写好页面后,经常需要等待后端工程师给接口,影响了开发进度,自给自足就很必要了。这里介绍使用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
感谢浏览,欢迎评论指正,转载请标明出处。

上一篇 下一篇

猜你喜欢

热点阅读