首先,我们在终端打开,用命令创建一个文件夹
$ npx express -e port // 创建一个port文件夹 如果你的npm版本不是5.2+以上,那么建议你可以先全局安装express再创建
$ npm i express-generator -g
$ cnpm i express-generator -g
$ yarn add express-generator global
创建成功后会有一些目录文件夹:
//node_modules需要命令安装
//安装node_modules
$ npm/cnpm i //简写形式
//删除node_modules
$ npm install rimraf -g
$ rimraf node_modules
bin ( www 启动了一个静态服务器( web服务器 ))
node_modules 真个项目的依赖包
public 静态资源文件
routes 路由文件夹
view(xxx.ejs 项目的模板)
app.js 整个项目的入口文件
package.json 真个项目的依赖配置文件
项目环境搭建完成后,我们先找到routes文件夹,建一个port.js文件,先暴露接口文件(暴露port.js文件)然后找到app.js文件
然后在app.js文件里引入我们在routes里创建的port.js文件:
//先要暴露接口
const express = require('express');
const router = new express.Router();
module.exports = router;
var portRouter = require('./routes/port');
继续在app.js文件里使用我们的这个文件:
app.use('/port',portRouter);
紧接着,我们在port.js文件中打造接口,还需要在views目录下新建一个port.ejs文件
const express = require('express');
const router = new express.Router();
router.get('/',( req,res,next ) => {
res.render('port',{
ports: JSON.stringify(
[
{
id: 1,
content: '敲代码'
},
{
id: 2,
content: '打篮球'
}
]
)
})
})
module.exports = router;
这个时候属于跨域请求,所以,需要一个应用级中间件(cors),我们可以在app.js文件中通过app.use 来使用这些中间件,中间件的分类:
应用级中间价件
路由中间件 app.get( '/', function ( req,res,next ) {})
错误处理中间件 function ( err , req,res,next ) {}
//找到app.js文件
var cors = require('cors') //引入cors模块之后,在终端用命令安装cors模块
//安装cors的命令 $ cnpm i cors -S
app.use( cors ({
"origin": "*",
"methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
"preflightContinue": false,
"optionsSuccessStatus": 200
}) )
找到views目录中的port.ejs文件:
<%- ports %> //第一个百分号后有横杠
我们可以在终端启动一下这个api服务器:
$ npm start //启动成功后,默认端口是3000
// http://localhost:3000/port
我们可以找个后端接口测试工具试试:
//Insomnia后端接口测试工具测试的结果
[
{
"id": 1,
"content": "敲代码"
},
{
"id": 2,
"content": "打篮球"
}
]
当然我们可以在port.js文件里打造多个请求,这样就等于每个路由就是一个接口了:
//使用restful api的规则
http://localhost:3000/port
//接口可以是一个,可以打造多个请求-----get,post,put,delete,options,head-----