1.Express概述
Node支持JavaScript服务端编程，但是Node内建的模块http开发服务器比较繁琐和复杂的，需要手工去区别不同的请求路径，区分不同的请求方式，使用fs文件系统模块完成网页的读写操作，最终将网页数据响应给客户端浏览器！
第三方团队开发了一个基于Node技术专门用于开发服务端应用的模块/框架：Express
（1）安装express
Express就是一个Node第三方模块，所以使用npm全局安装
npm install express-generator -g
（2）创建项目
express安装完成后，命令行进入需要创建项目的文件夹中，执行命令创建项目
$ cd /d F:\第三阶段\code
# express -e 项目名称
$ express -e demo01
（3）启动项目
cd demo01 进入项目
npm i 安装依赖
npm start 启动项目
（4）访问项目
直接在浏览器访问
（5）文件结构
|-- demo01/ 项目文件夹
|-- bin/ 项目启动命令文件
|-- public/ 公共资源文件夹，存放需要的图片、js文件、css文件等
|-- node-modules/ 项目依赖目录
|-- routes/ 路由文件夹：处理用户请求的js模块
|-- views/ 视图文件夹，存放各种网页视图（接口开发时忽略）
|-- app.js 项目启动文件/模块
|-- package.json 项目配置文件
2.不同请求方式接口
（1）创建一个项目
express -e demo //创建一个为demo的项目
cd demo //进入demo项目目录
npm i //安装需要的依赖
（2）测试路由模块
创建一个用于测试接口的路由模块：demo/routes/helloworld.js
//引入express
const express = require('express')
//创建路由模块
const router = express.Router()
//http请求规范中包含的请求方式：get,post,put,delete
//1.get接口
router.get('/get',(req,res) => {
res.json({
code:200,
msg:'ok',
data:'get数据'
})
})
//2.post接口
router.post('/post',(req,res) => {
res.json({
code:200,
msg:'ok',
data:'post数据'
})
})
//3.put接口
router.put('/put',(req,res) => {
res.json({
code:200,
msg:'ok',
data:'put数据'
})
})
//4.delete接口
router.delete('/delete',(req,res) => {
res.json({
code:200,
msg:'ok',
data:'delete数据'
})
})
//CommonJS规范：导出路由对象
module.exports = router
（3）配置app.js
打开app.js,配置顶级路由
...
var helloworldRouter = require('./routes/helloworld')
...
app.use('/helloworld',helloworldRouter)
（4）启动访问项目命令
npm start
（5）原始测试方法
在外部创建一个html网页
在使用测试之前先把跨域配置好
命令：
npm i cors -S
编辑app.js
//引入cors
var cors = require('cors')
...
//启用跨域
app.use(cors())
（6）测试代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试不同请求方式接口</title>
</head>
<body>
<button id="get">GET请求</button>
<button id="post">POST请求</button>
<button id="put">PUT请求</button>
<button id="del">DELETE请求</button>
<script src="./jquery/jquery.js"></script>
<script>
// 测试GET请求
$('#get').on("click", function () {
// 发送get请求
$.ajax({
url: 'http://localhost:3000/helloworld/get',
type: 'GET',
success: function (response) {
console.log("get接口返回数据：", response)
}
})
})
// 测试post请求
$("#post").on("click", function () {
// 发送post请求
$.ajax({
url: 'http://localhost:3000/helloworld/post',
type: 'POST',
success: function (response) {
console.log("post接口返回数据：", response)
}
})
})
// 测试put请求
$("#put").on("click", function () {
// 发送put请求
$.ajax({
url: 'http://localhost:3000/helloworld/put',
type: 'put',
success: function (response) {
console.log("put接口返回数据：", response)
}
})
})
// 测试delete请求
$("#del").on("click", function () {
// 发送delete请求
$.ajax({
url: 'http://localhost:3000/helloworld/del',
type: 'DELETE',
success: function (response) {
console.log("delete接口返回数据;", response)
}
})
})
</script>
</body>
</html>
3.接口测试工具推荐:APIFOX
4.项目重启
项目开发中，已经启动的接口项目，在修改内容后需要手动重新启动，频繁操作，会浪费时间，为了开发效率，可以安装一个nodemon
npm insert nodemon -g
修改项目启动文件：package.json
"scripts": {
// "start": "node ./bin/www"
"start": "nodemon ./bin/www"
},
网友评论