Express

简介

  • Express 是一个简洁而灵活的 Node.js Web 应用框架，提供一系列强大特性帮助你创建各种 Web 应用
  • Express 内部还是使用的 http 模块实现服务器创建和监听，对 http 模块进行了二次封装
  • 严格上来说 express 就是 NodeJS 的一个模块 直接下载安装

使用

  • node 下载 express 模块：
  • 命令 ：
    • 初始化服务 ： npm init -y
    • 下载 express： npm i express
  • 使用的时候 引入 需要实例化一个 express 应用 使用应用对象创建各种服务

express 响应

  • express 响应的时候使用 response 对象中的 send 方法进行响应 注意 send 只能响应一次 如果多次 将不执行
  • 只会执行第一次响应的内容
  • 使用 send 的时候 不需要设置头信息 直接使用就可以
js
1
2
3
4
5
6
7
8
9
10
11
12
13
const express = require("express");
// 创建一个应用 (不用new)
let app = express();
// 测试一个web服务器
app.get("/index",(req,res)=>{
    // 在express中,响应用到的是response的send()方法; 且只能用一个
    res.send("<h1>你好 2022</h1>")
})

// 监听
app.listen(3000,"127.0.0.1",()=>{
    console.log("服务器正在运行...")
})

现象：若浏览器输入 127.0.0.1：3000 浏览器则显示 Cannot GET /；只有输入 127.0.0.1：3000/index 才能显示 你好 2022

express 路由

  • 路由其实就是我们平时所说的路径
  • express 路由分为 get、post、use、all (不常用，也就不写例子了)
  1. get 路由： 定义的 get 路由在浏览器中访问的时候 只能使用 get 方式进行访问
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const express = require("express");
// 创建应用
let app = express();

// 定义路由
app.get("/",(req,res)=>{
    res.send("<h1>this is root </h1>")
})

app.get("/index",(req,res)=>{
    res.send("这是index路由")
})

// 监听
app.listen(3000)

在页面输入 127.0.0.1:3000 则会显示 h1 解析之后的 this is root ；输入 127.0.0.1:3000/index 则会显示 这是 index 路由

  1. post 路由：定义的 post 路由在浏览器中访问的时候 只能使用 post 方式进行访问
html
1
2
3
4
//因为是post,所以不能在url地址栏中进行输入,那里面的都算get,所以需要html来协助一哈哈
 <form action="http://127.0.0.1:3000/index" method="POST">  //要有action 和method 缺一不可
     <input type="submit">
 </form>
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const express = require("express");
// 创建应用
let app = express();

// 定义路由
app.post("/",(req,res)=>{
    res.send("<h1>this is root </h1>")
})

app.post("/index",(req,res)=>{
    res.send("这是index路由")
})

// 监听
app.listen(3000)

跟 get 相比，仅仅是 get 改为了 post，别的一毛一样；

  1. use 路由 (可以用来设置 404 页面)
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const express = require("express");
// 创建应用
let app = express();

// 定义路由
app.get("/",(req,res)=>{
    res.send("<h1>this is root </h1>")
})

app.post("/index",(req,res)=>{
    res.send("这是index路由")
})

// 不设置路由表示除了上面的别的都匹配(脸最大的时候就是不要脸)
// status()设置状态码
app.use((req,res)=>{
    res.status(404).send("404 Not Found")
})

// 监听
app.listen(3000)

响应头

  • 响应头就是 MIME，express 中默认是响应头的 “Content-type”：”text/html”
  • 但如果想展示一张图片，text/html 不能解析图片，则需要设置响应头
  • setHeader () 内置两个参数：第一个参数是 Content-type 第二个参数是 MIME 类型 例如： image/jpg
  • 要是设置了不管用，清缓存或者开一个无痕浏览
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const express = require("express");
const fs  = require("fs");
const path = require("path")

let app = express();

app.get("/index",(req,res)=>{
    res.setHeader("Content-type","image/jpg");
    let contents = fs.readFileSync(path.resolve(__dirname,"./dm.jpg"));//图片不能写utf-8;因为图片是二进制的
    res.send(contents)
})

app.listen(3000,()=>{
    console.log("is running")
})

sendFile 响应文件

  • sendFile 是响应一个文件 和上述的功能是差不多的 如果说 我们直接响应一个图片
  • 我们可以直接使用 sendFile 方法进行响应 直接输入图片的地址 但是要求 图片地址必须是绝对路径
  • sendFIle 内置一个参数 参数是文件的绝对路径
js
1
2
3
4
5
6
7
8
9
10
11
const express =require("express");
const path = require("path");

let app = express();
app.get("/index",(req,res)=>{
    res.sendFile(path.resolve(__dirname,"./dm.jpg"))
})

app.listen(3000,()=>{
    console.log("server is running")
})

解析 get 参数

  • Express 中解析 get 参数相对来说比较简单 使用 request 对象中的 query
  • 可以使用表单，可以使用 url 地址栏传参；**(除了 form 和 ajax，别的其实都是 url 地址栏传参的)**
  • 接受到的结果直接就是一个对象 直接处理就可以
html
1
2
3
4
5
6
7
8
9
10
11
<form action="http://127.0.0.1:3000/index" method="GET">
    <div>用户名：
        <input type="text" name="username">
    </div>
    <div>密码：
        <input type="text" name="password">
    </div>
    <div>
        <input type="submit" value="提交">
    </div>
</form>
js
1
2
3
4
5
6
7
8
9
10
11
12
const express =require("express");
let app = express();

app.get("/index",(req,res)=>{
    let params = req.query;  
    console.log(params);  //{ username: 'asdasd', password: '123' }
    res.send("lala")
})

app.listen(3000,()=>{
    console.log("server is running")
})

路由参数

  • 路由参数不能通过 form 表单进行传参

  • 参数名在路由上进行传递 接收 传递参数的时候一一对应

  • 路由参数传递数量和参数名保持一致 否则 404

  • 数名在路由上进行传递 ‘/index/:name/:age/:sex’

  • 处理参数的时候 路由参数保存在 request 对象中的 params 对象中

js
1
2
3
4
5
6
7
8
9
10
11
const express = require("express");
let app =express();
app.get("/index/:name/:age/:sex",(req,res)=>{
    let params = req.params;
    console.log(params)  //{ name: 'fsl', age: '24', sex: '1' }
    res.send("lala")
})

app.listen(3000,()=>{
    console.log("server is running")
})

在地址栏中输入 http://127.0.0.1:3000/index/fsl/24/1 即可访问，参数和定义的路由一一对应，少传参数或者多传都会访问不到，例如少传一个：http://127.0.0.1:3000/index/fsl/24/ =>Cannot GET /index/fsl/24/

get 参数和路由参数的区别

  1. get 可以表单传参，可以 url 地址栏传参，url 地址栏使用？进行传递 参数名 = 参数值 多个参数使用 & 进行分割；路由参数只能在 url 地址栏传参，url 地址栏使用 /:key/:key 的方式传参 (例如：/index/:name/:age/:sex http://127.0.0.1:3000/index/fsl/24/1 )
  2. 路由传参参数名在路由上进行传递，接收，参数必须一一对应，参数数量必须保持一致，否则 404
  3. get 参数通过 res.query，路由参数通过 res.params；(但都是对象)

热更新

  • 传统写 node，每次进行代码修改之后，需要 ctrl+c 然后重启服务，有点繁琐
  • 下载第三方模块 nodemon，需要全局下载 npm install nodemon -g
  • 直接 nodemon 运行程序
  • 注：仅在测试的时候用，上线的时候不能用，因为上线之后一改就重启服务的话……hha……