Node.js |（六）express框架 | 尚硅谷2023版Node.js零基础视频教程

news2024/12/23 22:44:19

学习视频：尚硅谷2023版Node.js零基础视频教程，nodejs新手到高手

在这里插入图片描述

文章目录

  • 📚express使用
    • 🐇初体验
    • 🐇express路由
      • ⭐️路由的使用
      • ⭐️获取请求参数
      • ⭐️获取路由参数
    • 🐇express响应设置
    • 🐇express中间件
      • ⭐️定义全局中间件
      • ⭐️定义路由中间件
      • ⭐️静态资源中间件
    • 🐇 获取请求体数据 body-parser
  • 📚Router
    • 🐇介绍
    • 🐇使用
  • 📚EJS模板引擎
    • 🐇介绍
    • 🐇常用语法

📚express使用

🐇初体验

  • express 是一个基于 Node.js 平台的极简、灵活的 WEB 应用开发框架，官方网址
  • 简单来说，express 是一个封装好的工具包，封装了很多功能，便于我们开发 WEB 应用（HTTP 服务）

  • express 本身是一个 npm 包，所以可以通过 npm 安装

    npm init
npm i express

  • 初体验

    //1. 导入 express
const express = require('express');
//2. 创建应用对象
const app = express();
//3. 创建路由规则
app.get('/home', (req, res) => {
	res.end('hello express server');
});
//4. 监听端口 启动服务
app.listen(3000, () =>{
	console.log('服务已经启动, 端口监听为 3000...');
});

    在这里插入图片描述

🐇express路由

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

⭐️路由的使用

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

  • express中提供了一系列方法，使用路由，使用格式如下：app.<method>(path,callback)

  • res.end和res.send的区别

    //导入 express
const express = require('express');
//创建应用对象
const app = express();
//创建 get 路由
app.get('/home', (req, res) => {
    res.send('网站首页');
});
//首页路由
app.get('/', (req,res) => {
    res.send('我才是真正的首页');
});
//创建 post 路由
app.post('/login', (req, res) => {
    res.send('登录成功');
});
//匹配所有的请求方法
app.all('/search', (req, res) => {
    res.send('1 秒钟为您找到相关结果约 100,000,000 个');
});
//自定义 404 路由
app.all("*", (req, res) => {
    res.send('<h1>404 Not Found</h1>')
});
//监听端口 启动服务
app.listen(3000, () =>{
    console.log('服务已经启动, 端口监听为 3000');
});

  • 以下是上述代码运行后直接输网址得到的返回。
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

  • 针对login部分，上边那得不到想要的是因为指定了post
    在这里插入图片描述在这里插入图片描述

⭐️获取请求参数

  • express 框架封装了一些 API 来方便获取请求报文中的数据，并且兼容原生 HTTP 模块的获取方式。
    //导入 express
const express = require('express');
//创建应用对象
const app = express();
//获取请求的路由规则
app.get('/request', (req, res) => {
	//1. 获取报文的方式与原生 HTTP 获取方式是兼容的
	console.log(req.method);
	console.log(req.url);
	console.log(req.httpVersion);
	console.log(req.headers);
	//2. express 独有的获取报文的方式
	//获取查询字符串
	console.log(req.query); // 『相对重要』
	//获取ip
    console.log(req.ip)
    // 获取指定的请求头
	console.log(req.get('host'));
	res.send('请求报文的获取');
});
//启动服务
app.listen(3000, () => {
	console.log('启动成功....')
})
    在这里插入图片描述

⭐️获取路由参数

  • 路由参数指的是 URL 路径中的参数（数据）
    //导入 express
const express = require('express');

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

//创建路由
app.get('/:id.html', (req, res) => {
  //获取 URL 路由参数
  res.send('商品详情, 商品 id 为' + req.params.id);
});


//监听端口, 启动服务
app.listen(3000, () => {
  console.log('服务已经启动, 端口 3000 正在监听中....')
})
    在这里插入图片描述

练习：根据路由参数响应歌手信息

//导入 express
const express = require('express');
//导入 json 文件（中括号解构，返回数组）
const {singers} = require('./singers.json');
//创建应用对象
const app = express();

//创建路由
app.get('/singer/:id.html', (req, res) => {
  //获取路由参数
  let {id} = req.params;
  //在数组中寻找对应 id 的数据
  let result = singers.find(item => {
    if(item.id === Number(id)){
      return true;
    }
  });

  //判断
  if(!result){
    res.statusCode = 404;
    res.send(`<h1>404 Not Found</h1>`)
    return;
  }

  res.send(`
  <!DOCTYPE html>
  <html lang="en">
  <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>Document</title>
  </head>
  <body>
    <h2>${result.singer_name}</h2>
    <img src='${result.singer_pic}' />
  </body>
  </html>`);
});

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

在这里插入图片描述

🐇express响应设置

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

    //获取请求的路由规则
app.get("/response", (req, res) => {
//1. express 中设置响应的方式兼容 HTTP 模块的方式
res.statusCode = 404;
res.statusMessage = 'xxx';
res.setHeader('abc','xyz');
res.write('响应体');
res.end('xxx');
//2. express 的响应方法
res.status(500); //设置响应状态码
res.set('xxx','yyy');//设置响应头
res.send('中文响应不乱码');//设置响应体
//连贯操作
res.status(404).set('xxx','yyy').send('你好朋友')
//3. 其他响应
res.redirect('http://atguigu.com')//重定向
res.download('./package.json');//下载响应
res.json();//响应 JSON
res.sendFile(__dirname + '/home.html') //响应文件内容
});

🐇express中间件

  • 中间件（Middleware）本质是一个回调函数。中间件函数可以像路由回调一样访问请求对象（request）和响应对象（response）。
  • 中间件的作用 就是 使用函数封装公共操作，简化代码。
  • 类型：全局中间件和路由中间件。

⭐️定义全局中间件

  • 声明中间件函数

    let recordMiddleware = function(request,response,next){
	//实现功能代码
	//.....
	//执行next函数(当如果希望执行完中间件函数之后，仍然继续执行路由中的回调函数，必须调用next)
	next();
}

    在这里插入图片描述

  • 应用中间件：app.use(recordMiddleware);

  • 声明时直接传递

    app.use(function (request, response, next) {
	console.log('定义第一个中间件');
	next();
})

  • express 允许使用 app.use() 定义多个全局中间件

    app.use(function (request, response, next) {
	console.log('定义第一个中间件');
	next();
})
app.use(function (request, response, next) {
	console.log('定义第二个中间件');
	next();
})

⭐️定义路由中间件

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

  • 调用格式如下：

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

⭐️静态资源中间件

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

    //引入express框架
const express = require('express');
//创建服务对象
const app = express();
//静态资源中间件的设置，将当前文件夹下的public目录作为网站的根目录
app.use(express.static('./public')); //当然这个目录中都是一些静态资源
//如果访问的内容经常变化，还是需要设置路由
//但是，在这里有一个问题，如果public目录下有index.html文件，单独也有index.html的路由，
//则谁书写在前，优先执行谁
app.get('/index.html',(request,response)=>{
	respsonse.send('首页');
});
//监听端口
app.listen(3000,()=>{
	console.log('3000 端口启动....');
});

    在这里插入图片描述

🐇 获取请求体数据 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' }

📚Router

🐇介绍

  • express 中的 Router 是一个完整的中间件和路由系统，可以看做是一个小型的 app 对象。
  • Router 作用：对路由进行模块化，更好的管理路由。

🐇使用

  • 创建独立的js文件（homeRouter.js）
    //1. 导入 express
const express = require('express');
//2. 创建路由器对象
const router = express.Router();
//3. 在 router 对象身上添加路由
router.get('/', (req, res) => {
res.send('首页');
})
router.get('/cart', (req, res) => {
res.send('购物车');
});
//4. 暴露
module.exports = router;
  • 主文件
    const express = require('express');
const app = express();
//5.引入子路由文件
const homeRouter = require('./routes/homeRouter');
//6.设置和使用中间件
app.use(homeRouter);
app.listen(3000,()=>{
	console.log('3000 端口启动....');
})

📚EJS模板引擎

🐇介绍

  • 模板引擎是分离 用户界面和业务数据 的一种技术。
  • EJS 是一个高效的 Javascript 的模板引擎，官网，中文站
  • 下载安装：npm i ejs --save
  • 示例
    //1.引入ejs
const ejs = require('ejs');
//2.定义数据
let person = ['张三','李四','王二麻子'];
//3.ejs解析模板返回结构
//<%= %> 是ejs解析内容的标记，作用是输出当前表达式的执行结构
let html = ejs.render(‘<%= person.join(",") %>’, {person:person});
//4.输出结果
console.log(html);

🐇常用语法

  • 执行js代码：<% code %>
  • 输出转义的数据到模板上：<%= code %>
  • 输出非转义的数据到模板上：<%- code %>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1181932.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

面试题：你在工作中发现最有意义的bug？

面试题：你在工作中发现最有意义的bug？

软件测试面试中被问的问题有时候会是形形色色的&#xff0c;不会局限在你会哪些测试设计技术&#xff1f;测试流程是怎么样的&#xff1f; 就比如你会遇到这种问题&#xff1a;工作中最有意义的bug&#xff1f; 是不是有点懵&#xff1f;面试官问这个题目可不是真的关心你提过…
阅读更多...
Android 常用 UI 组件

Android 常用 UI 组件

目录 ​编辑 1. View 和ViewGroup 2. Android UI 开发概述 2.1 界面布局开发 2.2 控件开发 2.3 AdapterView 与 Adapter 开发 2.4 UI 组件开发 2.5 自定义 View、图形图像和动画 1. View 和ViewGroup Android中所有的UI元素都是使用View和ViewGroup对象建立的,…
阅读更多...
【工具】OCR方法｜不用下载额外的软件，提取扫描中英文PDF的目录文本的最优解！（一）

【工具】OCR方法｜不用下载额外的软件，提取扫描中英文PDF的目录文本的最优解！（一）

需求&#xff1a; 1&#xff09;从PDF里快速提取目录&#xff1b; 2&#xff09;不想下载任何软件。 我提取出来的目录文本会用于嵌入到PDF中&#xff0c;向PDF批量添加目录的软件以及软件的使用方法可以看我上一篇文章&#xff1a;PDF批量插入目录。 以下是我自己能想到的方…
阅读更多...
竞赛 深度学习驾驶行为状态检测系统(疲劳 抽烟 喝水 玩手机) - opencv python

竞赛 深度学习驾驶行为状态检测系统(疲劳 抽烟 喝水 玩手机) - opencv python

文章目录 1 前言1 课题背景2 相关技术2.1 Dlib人脸识别库2.2 疲劳检测算法2.3 YOLOV5算法 3 效果展示3.1 眨眼3.2 打哈欠3.3 使用手机检测3.4 抽烟检测3.5 喝水检测 4 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于深度学习的驾…
阅读更多...
【Python深入学习】- 书籍推荐|数据结构和算法介绍|内建集合数据类型

【Python深入学习】- 书籍推荐|数据结构和算法介绍|内建集合数据类型

&#x1f308;个人主页: Aileen_0v0 &#x1f525;系列专栏:PYTHON学习系列专栏 &#x1f4ab;"没有罗马,那就自己创造罗马~" 若把编写代码比作行军打仗&#xff0c;那么要想称霸沙场&#xff0c;不能仅靠手中的利刃&#xff0c;还需深谙兵法。Python是一把利刃&…
阅读更多...
oracle使用regexp_substr来拆分，CONNECT BY LEVEL查询卡死，速度慢的问题。

oracle使用regexp_substr来拆分，CONNECT BY LEVEL查询卡死，速度慢的问题。

一、问题 oracle 使用regexp_substrCONNECT BY LEVEL来&#xff0c;根据特定字符拆分成多行。 &#xff08;注意这里我的数据是每个值都有“ ; ”&#xff0c;即使后面没有值&#xff0c;后面也会有个“ ; ”&#xff0c; 如果是正常的分隔符&#xff0c;sql 需要改成” LEVEL…
阅读更多...
Centos7下安装使用K3S

Centos7下安装使用K3S

## K3S简介 K3S官方文档链接 K3s是一个轻量级的、专为容器化应用和Kubernetes集群设计的开源Kubernetes发行版。K3s的目标是提供一个更小、更简单、更易于部署和维护的Kubernetes集群。它是Rancher Labs开发的一个项目&#xff0c;旨在满足边缘计算、IoT设备、开发和测试环境…
阅读更多...
QoS（服务质量）学习记录

QoS（服务质量）学习记录

一、概述 QoS&#xff0c;英文全称quality of service&#xff0c;是网络通信协议的设计提供了理论基础。 QoS的度量指标 带宽 时延 指数据报文从发送端到接收端所需要的延迟时间。时延包括传输延迟、发送端处理延迟和接收端处理延迟。 抖动 描述延迟变化的程度&#xf…
阅读更多...
栈（定义，基本操作，顺序存储，链式存储）

栈（定义，基本操作，顺序存储，链式存储）

目录 1.栈的定义1.重要术语2.特点 2.栈的基本操作3.栈的顺序存储1.顺序栈的定义2.基本操作1.初始化2.进栈3.出栈4.读栈顶 3.共享栈 4.栈的链式存储 1.栈的定义 栈( Stack&#xff09;是只允许在一端进行插入或删除操作的线性表。 一种受限的线性表&#xff0c;只能在栈顶进行插…
阅读更多...
IDEA使用Git进行代码管理教程

IDEA使用Git进行代码管理教程

系列文章目录 1.Win11Git安装教程 2.git同时配置Gitee和GitHub 文章目录 系列文章目录前言一、Git提交代码二、合并分支三、版本回退 前言 这一篇文章主要用来记录如何使用IDEA中的git进行代码管理&#xff0c;包括日常开发中进行代码提交&#xff0c;以及如何将开发分支的代…
阅读更多...
红黑数原理及存在原因

红黑数原理及存在原因

我红黑树那么牛&#xff0c;你们为什么不用&#xff1f;_哔哩哔哩_bilibili 面试时经常会被问到红黑树&#xff0c;它到底有什么优点呢&#xff1f; 对于查找数据&#xff0c;数组二分查询速度最快&#xff0c;时间复杂度为O(logN)。但是如果增加和删除数据&#xff0c;数组就…
阅读更多...
TikTok小店运营的三大技巧！跨境电商必看

TikTok小店运营的三大技巧！跨境电商必看

众所周知&#xff0c;国内的抖音早已风生水起&#xff0c;抖音给了很多普通人一夜暴富的机会。而Tiktok也跟随着抖音开启了商业模式&#xff0c;目前流量与机会都是不可小觑的。在店铺申请通过&#xff0c;成功入驻之后&#xff0c;又该如何运营&#xff1f;这篇文章为大家解答…
阅读更多...
每天一点python——day63

每天一点python——day63

#第63天 #字符串的字符串的查询操作字符串的查询操作方法 如图 我们可以把字符串看做是关于字符的列表 所以字符串与列表查的操作是非常相似的 区别在于 当我们获得字符串中指定子串索引的时候除了index&#xff08;&#xff09;方法&#xff0c;还有如上图所示的rindex&#x…
阅读更多...
得帆云iPaaS白皮书｜WMS集成，打造高效规范的仓储管理业务生态

得帆云iPaaS白皮书｜WMS集成，打造高效规范的仓储管理业务生态

仓储管理&#xff0c;在传统企业运作中往往是比较容易被管理者忽视的一个部分&#xff0c;部分管理者认为仓库只是放货的场所&#xff0c;能正常出入库即可。 而随着企业信息化的不断发展&#xff0c;越来越多的企业意识到仓储管理与生产、销售、发货有着密切的联系&#xff0…
阅读更多...
使用STM32微控制器进行 Blink LED

使用STM32微控制器进行 Blink LED

在嵌入式系统开发中&#xff0c;点亮一个简单的 LED 是入门级的练习。通过使用STM32微控制器&#xff0c;我们可以通过 GPIO 控制来实现Blink LED的功能。本文将介绍如何在STM32微控制器上利用CubeMX和HAL库来实现Blink LED的功能。 一、 硬件准备 首先&#xff0c;确保你有一…
阅读更多...
Java连接数据库并查询表中的全部数据

Java连接数据库并查询表中的全部数据

1、导入相关jar包 这里创建简单的maven项目&#xff0c;我们导入相关的jar包 相关依赖&#xff1a; <dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.47</version></dependenc…
阅读更多...
操作系统实验--进程调度算法的模拟代码

操作系统实验--进程调度算法的模拟代码

代码如下&#xff0c;运行了没问题&#xff01; #include<stdio.h> #include<stdlib.h> #define getpch(type) (type*)malloc(sizeof(type)) struct pcb {char name[10];char state;int nice;int ntime;int rtime;struct pcb* link; }*readyNULL, *p; typedef str…
阅读更多...
怎样选择金鸣识别中的输出选项（网页版）？

怎样选择金鸣识别中的输出选项（网页版）？

本操作适合金鸣表格文字识别程序的网页版&#xff08;新版&#xff09;。 表格识别&#xff1a; excel(xlsx)&#xff1a;将需识别的图片转换成编辑的xlsx格式&#xff0c;此格式仅支持excel2007以上版本或wps打开。 excel(xls)&#xff1a;将需识别的图片转换成编辑的xls格式…
阅读更多...
虚幻引擎:如何进行关卡切换?

虚幻引擎:如何进行关卡切换?

一丶非无缝切换 在切换的时候会先断开连接,等创建好后才会链接,造成体验差 蓝图中用到的节点是 Execute Console Command 二丶无缝切换 链接的时候不会断开连接,中间不会出现卡顿,携带数据转换地图 1.需要在gamemode里面开启无缝漫游,开启之后使用上面的切换方式就可以做到无缝…
阅读更多...
‘vite‘ is not recognized as an internal or external command

‘vite‘ is not recognized as an internal or external command

标题翻译后就是&#xff1a;‘vite‘ 不是内部或外部命令&#xff0c;也不是可运行的程序 或批处理文 运行一个由 Vite 构建的 Vue3 项目&#xff0c;之前还好好的能正常跑&#xff0c; 但拉取新代码之后再次执行 npm run dev 就提示 ‘vite’ 不是内部或外部命令&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023