Node.js 系列之 Express 框架入门实战教程

目录

  • 1 Node.js是什么
  • 2 Express初体验
  • 3 Express 路由
    • 3.1 什么是路由
    • 3.2 路由的使用
    • 3.3 获取路由参数
  • 4 常见响应设置
    • 4.1 express 响应方法
    • 4.2 原生响应方法
  • 5 express 中间件
    • 5.1 中间件作用
    • 5.2 中间件类型
    • 5.3 全局中间件
    • 5.4 路由中间件
  • 6 获取请求体数据
  • 7 路由模块化

1 Node.js是什么

在这里插入图片描述

官方解释为:Node.js是一个开源的,跨平台的 javascript 运行环境
通俗来讲:Node.js就是一款应用程序,是一款软件,它可以运行 javascript

2 Express初体验

Express 是最流行的 Node 框架,是许多其他流行 Node 框架 的底层库
接下来,要使用 express 实现一个效果:当浏览器使用get方法,访问/home时,服务端会返回响应:{data: {name: dddd, age: 18}}

进入编辑器,初始化一个项目

npm init

会生成 package.json 、node_module 等文件
在这里插入图片描述

安装 express

npm i express

新建文件: 01_初体验.js

// 1 导入 express
const express = require('express')

// 2 创建一个对象
const app = express()

// 3 创建路由
app.get('/home', (req, res) => {
  // 当使用get方法,访问/home时,会触发下面
  // req请求报文封装对象 res响应报文封装对象
  res.setHeader('content-type', 'text/html;charset=utf-8')
  res.end('{data: {name: dddd, age: 18}}')  // 做一个响应
})

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

接下来在命令行中,使用 node 去启动

node .\01_初体验.js

在这里插入图片描述

或者可以安装 nodemon 来监控 node.js 源代码的任何变化和自动重启你的服务器(推荐)

npm install -g nodemon

运行:

nodemon .\01_初体验.js

在浏览器中访问:
http://localhost:3000/home

效果:

在这里插入图片描述

3 Express 路由

3.1 什么是路由

路由确定了应用程序如何相应客户端对特定端点的请求

3.2 路由的使用

一个路由的组成包含:请求方法、路径、回调函数
express 中使用路由格式如下:

app.<method>(path, callback)

举例:

// get
app.get('/home', (req, res) => {
  res.end('hello hello')
})

// post
app.post('/login', (req, res) => {
  res.end('login')
})

// 所有请求
app.all('/test', (req, res) => {
  res.end('test')
})

3.3 获取路由参数

如何获取如下 URL 的参数:123

http://localhost:3000/123.html

代码如下:

app.get('/:id.html', (req, res) => {
  res.setHeader('content-type', 'text/html;charset=utf-8')
  console.log('id值', req.params.id)
  res.end('HTML')  // 做一个响应
})

4 常见响应设置

4.1 express 响应方法

app.get('/test', (req, res) => {
  res.status(200)  // 设置状态码
  res.set('testHeader', '111')  // 设置响应头
  res.send('响应体')  // 设置响应体
})

当使用 express 的 send() 方法返回响应体时,响应头会自动添加:

Content-Type:text/html; charset=utf-8

4.2 原生响应方法

app.get('/test', (req, res) => {
  res.statusCode = 200
  res.statusMessage = 'test'
  res.setHeader('content-type', 'text/html;charset=utf-8') // 响应头
  res.write('设置响应体')
  res.end('设置响应')
})

5 express 中间件

5.1 中间件作用

使用函数封装公共操作,简化代码

5.2 中间件类型

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

5.3 全局中间件

每一个请求到达服务端后,都会执行

// 1 声明中间件函数
let recordMiddleware = function(req,res, next) {
  // 实现业务代码
  console.log('全局中间件')
  // .....
  // 执行完中间件函数后,若继续执行后续路由中的回调,则调用next
  next()
}
// 2 使用中间件函数
app.use(recordMiddleware)

// 路由代码
app.get('/test', (req, res) => {
  //.....
})

5.4 路由中间件

在固定路由才会执行的中间件

// 1 声明路由中间件函数
let checkCodeMiddleware = function(req,res, next) {
  // 实现业务代码
  console.log('test路由中间件')
  // .....
  // 执行完中间件函数后,若继续执行后续路由中的回调,则调用next
  next()
}

// 2 在test路由中使用中间件
app.get('/test', checkCodeMiddleware, (req, res) => {
  // ....
})

6 获取请求体数据

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

npm i body-parser

以供处理的数据类型分为:

  • application/x-www-form-urlencoded 格式,使用:bodyParser.urlencoded({extended: false})
  • application/json 格式,使用:let jsonParser = bodyParser.json()

完整代码:

// 处理 application/x-www-form-urlencoded 格式
let urlParser = bodyParser.urlencoded({extended: false})
// 处理 application/json 格式
let jsonParser = bodyParser.json()

// 在路由中,使用urlParser 
// 使用 req.body 打印请求体数据
app.post('/test', urlParser,  (req, res) => {
  console.log(req.body) // ----打印请求体数据-----
  res.statusCode = 200
  res.statusMessage = 'test'
  res.setHeader('content-type', 'text/html;charset=utf-8') // 响应头
  res.write('设置响应体')
  res.end('设置响应')
})

前端创建表单,提交username数据

  <div>
    <form action="http://localhost:3000/test" method="post">
      用户名: <input type="text" name="username">
      <button>登录</button>
    </form>
  </div>

在这里插入图片描述

username输入:ddd,点击登录,控制台会打印出:

[Object: null prototype] { username: 'ddd' }

7 路由模块化

如果将所有的路由都罗列在同一个文件中,代码会变得臃肿
Express中为了解决这个问题,提供了模块化路由。 我们可以根据某种条件将路由进行分类。 将不同的路由放置在不同的模块中。
在这里插入图片描述

首先新建 routes/homeRouter.js 文件,声明路由:

// 导入 express
const express = require('express')
// 导入json数据
const dataList = require('../data/data.json')

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

router.get('/home', (req, res) => {
  // 当使用get方法,访问/home时,会触发下面
  // req请求报文封装对象 res响应报文封装对象
  res.setHeader('content-type', 'text/html;charset=utf-8')
  res.end(JSON.stringify(dataList))  // 做一个响应
})

// 暴漏 router
module.exports = router

其中,响应的 json 数据,需要创建 data.json 文件
在这里插入图片描述

{
  "docker": [
    {
      "name": "ancker",
      "age": "18"
    }
  ],
  "snwver": [
    {
      "name": "laoce",
      "age": "28"
    }
  ]
}

将路由 homeRouter.js 导入:

// 导入路由
const homeRouter = require('./routes/homeRouter') 

// 使用路由
app.use(homeRouter) 

运行node
访问 http://localhost:3000/home
得到返回:
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【LocalAI】(13):LocalAI最新版本支持Stable diffusion 3,20亿参数图像更加细腻了,可以继续研究下

最新版本v2.17.1 https://github.com/mudler/LocalAI/releases Stable diffusion 3 You can use Stable diffusion 3 by installing the model in the gallery (stable-diffusion-3-medium) or by placing this YAML file in the model folder: Stable Diffusion 3 Medium 正…

Android AOSP 6(1)

mkdir android-6.0.1_r72 cd android-6.0.1_r72 2.下载相应版本的源码 先查询设备支持的版本&#xff0c;你要下载那个版本的源码&#xff0c;科学上网查看source.android.com/source/buil…。表格如下格式&#xff0c;查询对应设备的相应分支。 BuildBranchVersionSupporte…

Python与Java实现SM2互调

文章目录 一、项目背景二、环境极其依赖三、具体功能1.Python生成密钥对2.java生成密钥对3.Python加签验签4.java加签验签 四、遇到的问题五、解决方案 一、项目背景 Python对接Java接口互相SM2加签验签 二、环境极其依赖 python环境 pip3 install gmssljava环境 <depen…

字符串根据给定关键词进行高亮显示

问题 一般使用搜索引擎的时候我们会发现,搜索出来的内容都对我们搜索的关键词进行了高亮显示, 这样我们能很直观的看出是不是我们想要的结果, 最近我也遇到了类似的功能, 因为关于舆情的系统使用到了ES, 一开始心想ES本身就有支持的API实现起来不难, 但我这里的需求还不太一样…

2023-2024 学年第二学期小学数学六年级期末质量检测模拟(制作:王胤皓)(90分钟)

word效果预览&#xff1a; 一、我会填 1. 1.\hspace{0.5em} 1. 一个多位数&#xff0c;亿位上是次小的素数&#xff0c;千位上是最小的质数的立方&#xff0c;十万位是 10 10 10 和 15 15 15 的最大公约数&#xff0c;万位是最小的合数&#xff0c;十位上的数既不是质数也…

【Kubernetes】集群学习

常见的 Kubernetes 集群类型 Kubernetes 集群可以根据不同的标准进行分类&#xff0c;但通常我们根据其部署环境和用途来区分集群类型。以下是几种常见的 Kubernetes 集群类型&#xff1a; 开发集群&#xff08;Development Cluster&#xff09;&#xff1a; 用于开发和测试环…

Linux 特殊变量 $?

一. 说明 在 Linux 和其他类 Unix 系统中&#xff0c;$? 是一个特殊的变量&#xff0c;用于获取上一个命令的退出状态码。 退出状态码是一个整数值&#xff0c;通常用来表示命令的执行结果。 ⏹退出状态码的含义 0&#xff1a;命令成功执行。0以外的数字&#xff1a;命令执…

上市公司澄清公告数据库(2001-2023)

数据来源&#xff1a;中国上市公司澄清公告数据来自深交所上市公司公告板块https://www.szse.cn/disclosure/listed/notice/index.html、上交所上市公司公告板块https://www.sse.com.cn/disclosure/listedinfo/announcement/和部分受上市公司委托发布的财经媒体如新浪财经、东方…

一小时搞定Git(含盖IDEA使用)

文章目录 1. git基本概念1.1版本控制1.1.1 版本控制软件 2. 命令的使用2.1 Linux命令2.2 git基础指令2.2.1 设置用户2.2.2 初始化本地仓库2.2.3 查看本地仓库状态2.2.4 添加暂存区域2.2.5 提交本地库2.2.6 切换版本 2.3 分支操作2.3.1 分支基本操作2.3.2 合并操作2.3.4 分支开发…

想更好应对突发网络与业务问题?您需要一款“全流量”

全流量分析&#xff0c;能为我做什么&#xff1f; 在生活中遇到问题&#xff0c;我们的第一反应可能是拿出手机拍照记录&#xff0c;方便后续处理。这些问题是临时的、突发的。 流量分析&#xff0c;就是网络中的“手机”&#xff0c;针对突发的网络故障和安全事件&#xff0…

【bug】配置SpringCloudAlibaba AI的maven依赖问题

问题描述 尝鲜alibaba的ai模块&#xff0c;maven依赖一直报找不到包&#xff0c;报错如下 Unresolved dependency: org.springframework.ai:spring-ai-core:jar:0.8.1原因分析&#xff1a; 由于是按照官方文档配置的&#xff0c;所以检查了很多遍maven配置&#xff0c;加上去…

java:spring-security的简单例子

【pom.xml】 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId><version>2.3.12.RELEASE</version> </dependency> <dependency><groupId>org.springf…

飞行堡垒系列_键盘灯开关

飞行堡垒系列键盘灯可以通过键盘上的"Fn 方向键"控制 演示机型品牌型号&#xff1a;飞行堡垒8 系统版本&#xff1a;Windows 11 飞行堡垒键盘灯可通过键盘上的"Fn方向键"控制。 " Fn 下方向键 "为减弱键盘灯光&#xff0c;多按几次键盘灯就可…

如何使用AI工具进行写作

随着AI人工智能技术的飞速发展&#xff0c;AI工具已经逐渐成为学术和专业写作的得力助手。AI工具不仅可以帮助我们提高写作效率&#xff0c;还能在内容创作上提供灵感和支持。在本文中&#xff0c;小编将和大家分享如何利用AI工具提高写作效率和质量&#xff0c;并确保文章的原…

湖北民族大学2024年成人高等继续教育招生简章

湖北民族大学&#xff0c;这所承载着深厚文化底蕴和卓越教育理念的学府&#xff0c;在崭新的2024年再次敞开怀抱&#xff0c;热烈欢迎有志于深化学习、提升自我的成人学员们。今年的成人高等继续教育招生&#xff0c;不仅是学校对于终身教育理念的具体实践&#xff0c;更是为广…

java的单例集合迭代器

迭代器Iterator 根据之前的介绍我们知道&#xff0c;单例集合是由接口Collection定义的容器。Collection接口之下由定义了List接口和Set接口&#xff0c;其中List接口定义的容器的特征是有序可重复&#xff0c;而Set接口定义的容器的特征是无序不可重复的。 List接口定义的容器…

FFmpeg源码:ff_ctz / ff_ctz_c函数分析

一、ff_ctz函数的作用 ff_ctz定义在FFmpeg源码目录的libavutil/intmath.h 下&#xff1a; #ifndef ff_ctz #define ff_ctz ff_ctz_c /*** Trailing zero bit count.** param v input value. If v is 0, the result is undefined.* return the number of trailing 0-bits*/…

LeetCode 算法:翻转二叉树 c++

原题链接&#x1f517;&#xff1a;翻转二叉树 难度&#xff1a;简单⭐️ 题目 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1] 示例 …

英语智汇学习系统

目 录 1 软件概述 1.1 项目研究背景及意义 2 系统相关技术 2.1 HTML、WXSS、JAVASCRIPT技术 2.2 Vanilla框架 2.3 uni-app框架 2.4 MYSQL数据库 3 需求分析 3.1 可行性分析 3.2 功能需求分析 3.3 系统用户及用例分析 3.4 非功能需求分析 3.5 数据流图…

bazel :Output Directory Layout

Output Directory Layout This page covers requirements and layout for output directories. Requirements for an output directory layout: Doesn’t collide if multiple users are building on the same box.如果多个用户在同一个盒子上建造则不会发生冲突。 Support…