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