Node.js开发-express框架

  • 开发
  • 24

express框架

1) 介绍

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

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

npm init
npm i express

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 中提供了一系列方法，可以很方便的使用路由，使用格式如下：

app.<method>(path，callback)

代码示例:

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 模块的获取方式

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 路径中的参数（数据）

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 模块的获取方式

// 导包
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响应
  • 文件响应
// 导包
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）

中间件的作用

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

中间件的类型

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

定义全局中间件

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

在这里插入图片描述

/**
 * 记录每个请求的 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正在监听中");
});

调用格式如下：

app.use(recordMiddleware);

定义路由中间件

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

/**
 * 针对 /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正在监听中");
});

调用格式如下：

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

6) 静态资源中间件

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

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 包处理请求体

第一步：安装

npm i body-parser

第二步：导入 body-parser 包

const bodyParser = require('body-parser');

第三步：获取中间件函数

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

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

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' }

完整代码

/**
 * 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)

// 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;

// 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;

主文件

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

npm i ejs --save

代码示例

// 导入ejs
const ejs = require("ejs");

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

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

console.log(result);

命令行下运行

EJS 常用语法

执行JS代码

<% code %>

输出转义的数据到模板上

<%= code %>

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

<%- code %>
阅读全部

相关推荐

  3. Node顶级框架-----Express....

    2024-02-16 11:30:02       37 阅读

最近更新

  4. TCP协议是安全的吗?

    2024-02-16 11:30:02       16 阅读

  12. 阿里云服务器执行yum，一直下载docker-ce-stable失败

    2024-02-16 11:30:02       16 阅读

  13. 【Python教程】压缩PDF文件大小

    2024-02-16 11:30:02       15 阅读

  18. 通过文章id递归查询所有评论（xml）

    2024-02-16 11:30:02       18 阅读

热门阅读

  5. Flutter run 一直 Running Gradle task ‘assembleDebug’…

    2024-02-16 11:30:02       30 阅读

  7. RedisTemplate重写的一些模板

    2024-02-16 11:30:02       33 阅读

  9. LeetCode 399：除法求值（图的bfs遍历）

    2024-02-16 11:30:02       32 阅读

  10. 力扣102-二叉树的层序遍历

    2024-02-16 11:30:02       31 阅读

  12. 蓝桥杯（Web大学组）2022省赛真题：冬奥大抽奖

    2024-02-16 11:30:02       31 阅读

  16. 【实战】一、Jest 前端自动化测试框架基础入门（四） —— 前端要学的测试课 从Jest入门到TDD BDD双实战（四）

    2024-02-16 11:30:02       29 阅读

  17. 代码随想录算法训练营29期Day51|LeetCode 139

    2024-02-16 11:30:02       37 阅读

  20. vue3跨组件(多组件)通信：事件总线【Event Bus】

    2024-02-16 11:30:02       34 阅读

  24. GEE：关于在GEE平台上进行回归计算的若干问题

    2024-02-16 11:30:02       36 阅读

  25. Ubuntu+Anaconda 常用指令记录

    2024-02-16 11:30:02       30 阅读

  27. Ajax，

    2024-02-16 11:30:02       30 阅读

  30. [office] excel2003限定单元格输入值范围教程 #微信#经验分享

    2024-02-16 11:30:02       31 阅读