Node.js开发-express框架

中二Espresso2024-02-17 22:10

express框架

1) 介绍

express 是一个基于 Node.js 平台的极简、灵活的 WEB 应用开发框架，官方网址：https://www.expressjs.com.cn/

简单来说，express 是一个封装好的工具包，封装了很多功能，便于我们开发 WEB 应用（HTTP 服务）

sh 复制代码 
npm init
npm i express
js 复制代码 
const express= require("express");

// 2.创建应用对象
const app = express();

// 3.创建路由
app.get("/home", (request, response) => {
    response.end("hello express");
});

// 4.监听端口，启动服务
app.listen(3000, () => {
    console.log("服务已经启动，端口3000正在监听中");
});

2) express 路由

官方定义： 路由确定了应用程序如何响应客户端对特定端点的请求

一个路由的组成有 请求方法 ， 路径 和 回调函数 组成

express 中提供了一系列方法，可以很方便的使用路由，使用格式如下：

js 复制代码 
app.<method>(path，callback)

代码示例:

js 复制代码 
const express= require("express");

// 2.创建应用对象
const app = express();

// 3.创建路由
app.get("/home", (request, response) => {
    response.end("hello express");
});

app.get("/", (request, response) => {
    response.end("home");
});

app.post("/login", (request, response) => {
    response.end("login login");
});

app.all("/test", (request, response) => {
    response.end("test test");
});

app.all("*", (request, response) => {
    response.end("404 Not found");
});

// 4.监听端口，启动服务
app.listen(3000, () => {
    console.log("服务已经启动，端口3000正在监听中");
});

获取请求参数

express 框架封装了一些 API 来方便获取请求报文中的数据，并且兼容原生 HTTP 模块的获取方式

js 复制代码 
const express= require("express");

// 创建应用对象
const app = express();

// 创建路由
app.get("/request", (request, response) => {
    // 原生操作
    console.log(request.method);
    console.log(request.url);
    console.log(request.httpVersion);
    console.log(request.headers);

    // express 操作
    console.log(request.path);
    console.log(request.query);
    // 获取ip
    console.log(request.ip);
    // 获取请求头
    console.log(request.get("host"));
    response.end("hello express");
});

// 监听端口，启动服务
app.listen(3000, () => {
    console.log("服务已经启动，端口3000正在监听中");
});

获取路由参数

路由参数指的是 URL 路径中的参数（数据）

js 复制代码 
const express= require("express");

// 创建应用对象
const app = express();

// 创建路由
app.get("/:id.html", (request, response) => {
    // 获取路由参数
    console.log(request.params.id);
    response.setHeader("content-type", "text/html;charset=utf-8");
    response.end("商品详情");
});

// 监听端口，启动服务
app.listen(3000, () => {
    console.log("服务已经启动，端口3000正在监听中");
});

3) express 响应设置

express 框架封装了一些 API 来方便给客户端响应数据，并且兼容原生 HTTP 模块的获取方式

js 复制代码 
// 导包
const express= require("express");

// 创建应用对象
const app = express();

// 创建路由
app.get("/response", (request, response) => {
    // 原生响应
//     response.statusCode = 404;
//     response.statusMessage = "Love";
//     response.setHeader("xxx", "yyy");
//     response.write("hello express ");
//     response.end("response");
    
    // express 响应
    // response.status(500);
    // response.set("aaa", "bbb");
    // response.send("你好 express");

    response.status(404).set("xxx", "yyy").send("链式编程");
});

// 监听端口，启动服务
app.listen(3000, () => {
    console.log("服务已经启动，端口3000正在监听中");
});

4) express 其他响应

  • 跳转响应
  • 下载响应
  • JSON响应
  • 文件响应
js 复制代码 
// 导包
const express= require("express");

// 创建应用对象
const app = express();

// 创建路由
app.get("/other", (request, response) => {   
    // 跳转响应
    // response.redirect("https://www.baidu.com");

    // 下载响应
    // response.download(__dirname + "/package.json");

    // JSON响应
    // response.json({
    //     name: "XXX",
    //     slogon: "天下"
    // });

    // 响应文件内容
    response.sendFile(__dirname + '/2_form.html');
});

// 监听端口，启动服务
app.listen(3000, () => {
    console.log("服务已经启动, 端口3000正在监听中");
});

5) express中间件

什么是中间件

中间件（Middleware）本质是一个回调函数

中间件函数 可以像路由回调一样访问 请求对象（request） ， 响应对象（response）

中间件的作用

中间件的作用 就是 使用函数封装公共操作，简化代码

中间件的类型

  • 全局中间件
  • 路由中间件

定义全局中间件

每一个请求 到达服务端之后 都会执行全局中间件函数

js 复制代码 
/**
 * 记录每个请求的 url 与 IP地址
 */
const express= require("express");
const fs = require("fs");
const path = require("path");

// 创建应用对象
const app = express();

// 声明中间件函数
function recordMiddleware(request, response, next) {
    // 获取 url 和 ip
    let {url,ip} = request;
    // 将信息那批次早文件中 access.log
    fs.appendFileSync(path.resolve(__dirname, "./access.log"), `${url} ${ip}\r\n`);
    // 调用next
    next();
}

// 使用中间件函数
app.use(recordMiddleware);

// 创建路由
app.get("/home", (request, response) => {
    
    response.send("前台首页");
});

app.get("/admin", (request, response) => {
    response.send("后台首页");
});

app.get("*", (request, response) => {
    response.send("<h1>404 Not Found</h1>");
});

// 监听端口，启动服务
app.listen(3000, () => {
    console.log("服务已经启动，端口3000正在监听中");
});

调用格式如下：

js 复制代码 
app.use(recordMiddleware);

定义路由中间件

如果 只需要对某一些路由进行功能封装 ，则就需要路由中间件

js 复制代码 
/**
 * 针对 /admin /setting 的请求，要求 URL 携带 code=521 参数，如未携带提示""
 */
const e = require("express");
const express= require("express");

// 创建应用对象
const app = express();

// 创建路由
app.get("/home", (request, response) => {
    response.send("前台首页");
});

// 声明中间件
let checkCodeMiddleware = (request, response, next) => {
    // 判断 url 中是否 code=521
    if (request.query.code === "521") {
        next();
    } else {
        response.send("暗号错误");
    }
};

app.get("/admin", checkCodeMiddleware, (request, response) => {
    response.send("后台首页");
});

app.get("/setting", checkCodeMiddleware, (request, response) => {
    response.send("设置页面");
});

app.get("*", (request, response) => {
    response.send("<h1>404 Not Found</h1>");
});

// 监听端口，启动服务
app.listen(3000, () => {
    console.log("服务已经启动，端口3000正在监听中");
});

调用格式如下：

js 复制代码 
app.get('/路径',`中间件函数`,(request,response)=>{
    
});
app.get('/路径',`中间件函数1`,`中间件函数2`,(request,response)=>{
    
});

6) 静态资源中间件

express 内置处理静态资源的中间件

js 复制代码 
const express= require("express");

// 创建应用对象
const app = express();

// 静态资源中间件设置
app.use(express.static(__dirname + '/public'));

// 创建路由
app.get("/home", (request, response) => {
    response.end("hello express");
});

// 监听端口，启动服务
app.listen(3000, () => {
    console.log("服务已经启动，端口3000正在监听中");
});

注意事项:

  • index.html 文件为默认打开的资源
  • 如果静态资源与路由规则同时匹配，谁先匹配谁就响应
  • 路由响应动态资源，静态资源中间件响应静态资源

7) 获取请求体数据 body-parser

express 可以使用 body-parser 包处理请求体

第一步：安装

sh 复制代码 
npm i body-parser

第二步：导入 body-parser 包

sh 复制代码 
const bodyParser = require('body-parser');

第三步：获取中间件函数

js 复制代码 
//处理 querystring 格式的请求体
let urlParser = bodyParser.urlencoded({extended:false}));
//处理 JSON 格式的请求体
let jsonParser = bodyParser.json();

第四步：设置路由中间件，然后使用 request.body 来获取请求体数据

js 复制代码 
app.post('/login', urlParser, (request,response)=>{
    //获取请求体数据
    //console.log(request.body);
    //用户名
    console.log(request.body.username);
    //密码
    console.log(request.body.userpass);
    response.send('获取请求体数据');
});

获取到的请求体数据：

[Object: null prototype] { username: 'admin', userpass: '123456' }

完整代码

js 复制代码 
/**
 * GET  /login 显示表单网页
 * POST /login 获取表单中的"用户名"和"密码"
 */
const express= require("express");
const bodyParser = require('body-parser');

// 创建应用对象
const app = express();

// 解析json格式的请求体的中间件
const jsonParse = bodyParser.json();

// 解析querystring格式的请求体的中间件
const urlencodeParser = bodyParser.urlencoded({extended: false});

// 创建路由规则
app.get("/login", (request, response) => {
    // response.send("表单页面");
    response.sendFile(__dirname + "/11_form.html");
});

app.post("/login", urlencodeParser, (request, response) => {
    // 获取用户名和密码
    console.log(request.body);
    console.log(request.body.username);
    console.log(request.body.password);
    response.send("获取用户的数据");
});

// 监听端口，启动服务
app.listen(3000, () => {
    console.log("服务已经启动, 端口3000正在监听中");
});

8) Router 路由模块化

什么是 Router

express 中的 Router 是一个完整的中间件和路由系统，可以看做是一个小型的 app 对象。

Router 作用

对路由进行模块化，更好的管理路由

Router 使用

创建独立的 JS 文件（router/homeRouter.js）(router/adminRouter.js)

js 复制代码 
// router/homeRouter.js
const express = require("express");

// 创建路由对象
const router = express.Router();

// 创建路由规则
router.get("/home", (request, response) => {
    response.send("前台首页");
});

router.get("/search", (request, response) => {
    response.send("内容搜索");
});

// 暴露 router
module.exports = router;
js 复制代码 
// router/adminRouter.js
const express = require("express");

// 创建路由对象
const router = express.Router();

// 创建路由规则
router.get("/admin", (request, response) => {
    response.send("后台首页");
});

router.get("/setting", (request, response) => {
    response.send("设置页面");
});

// 暴露 router
module.exports = router;

主文件

js 复制代码 
const express= require("express");
const homeRouter = require("./routes/homeRouter");
const adminRouter = require("./routes/adminRouter");

// 创建应用对象
const app = express();

// 设置
app.use(homeRouter);
app.use(adminRouter);

app.get("*", (request, response) => {
    response.send("<h1>404 Not Found</h1>");
});

// 监听端口，启动服务
app.listen(3000, () => {
    console.log("服务已经启动，端口3000正在监听中");
});

9) EJS 模板引擎

什么是模板引擎

模板引擎是分离 用户界面和业务数据 的一种技术

什么是 EJS

EJS 是一个高效的 Javascript 的模板引擎

官网: https://ejs.co/

中文站：https://ejs.bootcss.com/

EJS 初体验

下载安装EJS

sh 复制代码 
npm i ejs --save

代码示例

js 复制代码 
// 导入ejs
const ejs = require("ejs");

// 字符串
let china = "中国";
let str = "我爱你";

// 使用 ejs 渲染
    let result = ejs.render("我爱你 <%= china %>", {china: china});

console.log(result);

命令行下运行

EJS 常用语法

执行JS代码

js 复制代码 
<% code %>

输出转义的数据到模板上

js 复制代码 
<%= code %>

输出非转义的数据到模板上

js 复制代码 
<%- code %>
相关推荐
暮毅3 小时前
10.Node.js连接MongoDb
数据库·mongodb·node.js
~甲壳虫9 小时前
说说webpack中常见的Plugin？解决了什么问题？
前端·webpack·node.js
~甲壳虫9 小时前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫9 小时前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
熊的猫10 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
前端青山20 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
GDAL1 天前
npm入门教程1：npm简介
前端·npm·node.js
郑小憨1 天前
Node.js简介以及安装部署 （基础介绍 一）
java·javascript·node.js
lin-lins1 天前
模块化开发 & webpack
前端·webpack·node.js
GDAL2 天前
npm入门教程13：npm workspace功能
前端·npm·node.js
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解