前言:首先安装node
官网下载稳定版本:https://nodejs.org/en/download/
1.页面新建项目文件夹 vscode打开文件 在终端输入express 会新建express项目(先全局安装npm install -g express-generator 安装express应用程序生成器)
2、安装依赖:npm install
3. npm start 查看:在浏览器输入localhost:3000,会打开一个页面显示Welcome to Express,说明已经成功启动服务了。 (这样访问的话每次修改数据都需要重新启动为了实时刷新做以下操作)
2-1.
配置
打开 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
默认数据在routes 里面是访问的数据
可以看到页面显示的内容就是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发现我们的请求给我们缓存了; 重新启动一下试试,刷新就可以了
这样虽然可以请求,但是有缓存问题,而且接口多的话每次都得配置一个路径,太复杂,所以要封装一下,重复使用,每次请求重新请求不加载缓存。
在项目下新建一个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);
根目录新建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,页面显示