Express框架

站长

2023年09月29日 11:21 · 阅读数 12

Express是一个基于Node平台的Web应用开发框架。

提供了简洁的路由定义方式
对获取http请求参数进行了简化处理
对模板引擎支持程度高，方便渲染动态HTML页面
拥有大量的中间件机制有效控制http请求
拥有大量的第三方中间件对功能进行扩展

基本使用

//引入express框架
const express=require("express")
//创建服务器
const app=express()
app.get("/",(req,res)=>{
    //向客户响应一个对象
    res.send({
        name:"lhh",
        age:20
    })
})
app.get("/login",(req,res)=>{
    res.send("login")
})
//监听端口
app.listen(3000,()=>{
    console.log("server start");
})

其中send()方法内部会检测响应内容的类型，自动设置http状态码，自动设置响应的内容类型和编码。

Express的路径监听支持方式：

app.get("/ab?cd",(req,res)=>{//b?匹配b可有可无
    res.send("abcd")
})
app.get("/ab/:id/:id2",(req,res)=>{///:匹配/****
    res.send("/ab:")
})
app.get("/ab+cd",(req,res)=>{
    res.send("/ab+cd")
})
app.get("/ab*cd",(req,res)=>{
    res.send("/ab*cd")
})
app.get(/.*fly$/,(req,res)=>{//正则表达式
    res.send("/.*fly$/")
})

Express中间件

中间件是一个函数，它可以访问请求对象，响应对象，和web应用中处于请求-响应循环流程中的中间件，一般被命名为next的变量。

Express应用可使用如下几种中间件：

应用级中间件
路由级中间件
错误处理中间件
内置中间件
第三方中间件

1.应用级中间件

应用级中间件绑定到app对象使用app.use()和app.METHOD(),其中，METHOD()是需要处理HTTP请求的方法，例如GET，PUT，POST等等，全部小写。例如：

const app=express()
//没有挂载路径的中间件，应用的每个请求都会执行该中间件
app.use(function(req,res,next){
    console.log("Time:",Date.now());
    next()
})

应用级中间件注册时应注意放置的位置，因为应用级中间件会直接执行。（可以添加第一个参数作为匹配路径）

2.路由级中间件

路由级中间件绑定对象为express.Router().

const express=require("express")
const router=express.Router()
//路由级别
router.get("/home",(req,res)=>{
    res.send("home")
})
router.get("/login",(req,res)=>{
    res.send("login")
})
//挂载到应用级中间件上
app.use('/',router)

3.错误处理中间件

错误处理中间件和其他中间件定义类型类似，参数：（err,req,res,next）。

app.user(function(err,req,res,next){
    console.log(err)
    res.status(500).send('something broke!')
})

4.内置的中间件

express.static是Express的内置中间件，它基于serve-static，负责在Express应用中托管静态资源。每个应用可以有多个静态目录。

app.use(express.static(path.join(__dirname, 'public')));
//将public目录设置为静态资源目录

5.第三方中间件

安装所需功能的node模块，并在应用中加载，可以在应用级加载，也可以在路由级加载。

例如下面例子安装并加载了一个解析cookie的中间件：cookie-parser

npm install cookie-parser

var express = require("express")
var app = express()
var cookieParser = require("cookie-parser")

// 加载用于解析cookie的中间件
app.user(cookieParser())

请求处理

1.GET请求获取参数

Express框架使用req.query获取GET参数，框架内部会将GET参数转化为对象并返回。

//地址：http://localhost:3000/?name=zhangsan&age=25
router.get("/",(req,res)=>{
    console.log(req.query);//{"name":"zhangsan","age":"25"}
    res.send("login")
})

2.POST请求获取参数

Express框架使用req.body请求参数，但是需要配置中间件

//配置解析post参数的中间件-不用下载
app.use(express.urlencoded({extended:false}))//post参数格式：{n=l&a=2}
app.use(express.json())//post参数格式：{name:"",age:20}

//响应前端的post请求
app.post("/",(req,res)=>{
    console.log(req.body);//必须配置中间件
    res.send({ok:1})
})

Express托管静态页面

通过Express内置的express.static可以方便的托管静态文件，例如图片、CSS、JavaScript文件等。

将静态资源文件所在的目录作为参数传递给express.static中间件就可以提供静态资源文件的访问了。例如：

app.use(express.static("pubilc"))//public目录放置了图片、CSS、JavaScript文件

//可以访问public目录下的文件
http://localhost:3000/imges/**.jpg
http://localhost:3000/css/**.css
http://localhost:3000/js/**.js
http://localhost:3000/**.html

如果有多个静态资源目录，可以多次调用express.static：

app.use(express.static("public"))
app.use(express.static("static"))

访问静态资源文件时，express.static中间件会根据目录添加的顺序查找所需的文件。

服务端渲染（模板引擎）

1.服务器渲染，后端嵌套模板，后端渲染模板，SSR（后端把页面组装）。前端做好静态页面，动态效果。把前端代码提供给后端，后端要把静态html以及里面的假数据删掉，提供模板进行动态生成html的内容。

2.前后端分离：BSR（前端中组装页面）。做好静态页面，动态效果。json模拟，ajax动态创建页面。真实接口数据，前后联调。把前端提供给后端静态资源文件夹。

npm i ejs

需要在应用中进行如下设置，才能让Express渲染模板文件：

//配置模板引擎
app.set("views","./views")
app.set("view engine","ejs")

<% %>流程控制标签 <%= %>输出标签 <%- %>输出标签 <%# %>注释标签 <%- include()%>导入公共模板内容