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

news2024/11/24 19:58:39

目录

  • 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.coloradmin.cn/o/1852812.html

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

相关文章

51单片机学习记录(二)————外部中断

文章目录 前言一、中断1.中断的定义 二、51中断1.中断源2.中断的配置3.中断允许控制寄存器4.中断触发方式51中断有两种触发方式&#xff1a; 三、外部中断1.外部中断引脚2.外部中断配置&#xff08;以外部中断0为例&#xff09; 总结 前言 一个学习嵌入式的小白~ 有错误评论区…

【ARM】PK51如何将BL51链接器切换成LX51链接器

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 解决客户在使用PK51进行项目研发的时候&#xff0c;想要使用LX51链接器进行使用。 2、 问题场景 客户在使用51芯片进行开发的时候&#xff0c;发现工程中使用的是BL51链接器&#xff0c;而不是LX51链接器&#xff…

【非常实验】如何在移动设备上运行 Docker?

本章就从在 DevOps 中最基本但也是最强大的工具 Docker 开始。最近,我在尝试更多Termux的可能性,于是就想着试试Docker适不适合arm架构。 我用的是天玑9000芯片,而不是高通,所以显示不出来 Qualcomm。所以我决定从在手机上运行 docker 开始,但这可能吗?让我们一起来看看吧…

Node.js实现短链接(ShortLink):shortid、epxress让URL更简单

文章目录 一、短链接介绍二、插件介绍1、epxress2、shortid 三、实现方案1、安装依赖&#xff1a;2、实现原理 四、示例代码五、测试生产短链接 一、短链接介绍 短链接是指仅包含一个网址的链接形式&#xff0c;通俗一些就是将一个很长很复杂的的网址变成一个简短易记的链接。…

基于CSDN的Markdown文本编辑器的博客界面优化 | HTML | 文本标签 | 图像标签 | 个人主页引导

&#x1f64b;大家好&#xff01;我是毛毛张! &#x1f308;个人首页&#xff1a; 神马都会亿点点的毛毛张 今天毛毛张分享的内容是如何在CSDN的Markdown编辑器中实现上图的效果&#xff0c;如果觉得能帮助到你的话就点击个人主页点点关注吧❗ 文章目录 1.前言2.基础知识3.字…

游戏工厂:AI(AIGC/ChatGPT)与流程式游戏开发

游戏工厂&#xff1a;AI&#xff08;AIGC/ChatGPT&#xff09;与流程式游戏开发 码客 卢益贵 ygluu 关键词&#xff1a;AI&#xff08;AIGC、ChatGPT、文心一言&#xff09;、流程式管理、好莱坞电影流程、电影工厂、游戏工厂、游戏开发流程、游戏架构、模块化开发 一、前言…

ArcGIS批量投影转换的妙用(地理坐标系转换为平面坐标系)

​ 点击下方全系列课程学习 点击学习—>ArcGIS全系列实战视频教程——9个单一课程组合系列直播回放 这次文章我们来介绍一下&#xff0c;如何巧妙用要素数据集来实现要素的批量投影。不需要ArcGIS的模型构建器与解决。 例如&#xff0c;有多个要素要将CGCS_2000地理坐标系投…

单机、集群和分布式

目录 1.概述 2.单机服务器 单机版的服务器的性能&#xff0c;设计上的瓶颈&#xff1f; 3.集群 解决瓶颈1&#xff1a; 没有解决瓶颈2&#xff1a; 没有解决瓶颈3&#xff1a; 集群的优点&#xff1f; 集群的缺点&#xff1f; 4.分布式 分布式的优点&#xff1f; 分…

1970-2022年中国碳排放1KM栅格数据

【数据简介】 数据名称&#xff1a;1970-2022年中国碳排放栅格数据&#xff08;1KM) 区域范围&#xff1a;全国 数据格式&#xff1a;tif文件 数据大小:800M 数据来源&#xff1a;欧盟委员会全球大气排放数据库&#xff08;EDGAR) 部分数据预览&#xff1a; 原文链接http…

君子小人的格局、境界

子曰&#xff1a;君子怀德&#xff0c;小人怀土&#xff1b;君子怀刑&#xff0c;小人怀惠。 直译&#xff1a;君子怀念道德&#xff0c;小人怀念乡土&#xff1b;君子关心法度&#xff0c;小人关心恩惠。 这里的君子与小人只是体现格局、境界的不同&#xff1b; 君子怀的是德…

算法基础精选题单 动态规划(dp)(递推+线性dp)(个人题解)

前言&#xff1a; 一些简单的dp问题。 正文&#xff1a; 题单&#xff1a;237题】算法基础精选题单_ACM竞赛_ACM/CSP/ICPC/CCPC/比赛经验/题解/资讯_牛客竞赛OJ_牛客网 (nowcoder.com) 递推&#xff1a; NC235911 走楼梯&#xff1a; #include<bits/stdc.h> using na…

JAVA期末复习题1

目录 Java 填空题整理及解析 1. 说出Java的特点&#xff1a; 2. Java的运行机制是先编译再解释运行。 3. 请按照以下分类补全对应的数据类型&#xff1a; 4. 在有限次数循环时&#xff0c;一般选择for循环结构&#xff1b;未知循环次数时&#xff0c;可以选择while循环结构…

一文读懂LLM API应用开发基础(万字长文)

前言 Hello&#xff0c;大家好&#xff0c;我是GISer Liu&#x1f601;&#xff0c;一名热爱AI技术的GIS开发者&#xff0c;上一篇文章中我们详细介绍了LLM开发的基本概念&#xff0c;包括LLM的模型、特点能力以及应用&#xff1b;&#x1f632; 在本文中作者将通过&#xff1a…

用VPS部署聊天机器人有哪些优势?

VPS足以帮助您将人工智能 (AI) 的功能无缝融入聊天机器人并增强客户支持。聊天机器人已迅速成为改善用户体验的首选解决方案&#xff0c;因为它们全天候在线且可编程回答各种问题。 聊天机器人在客户支持方面的作用不容置疑。但所有出色的解决方案都需要出色的网络托管。 VPS…

三国之家网站的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;论坛管理&#xff0c;公告管理&#xff0c;三国视频管理&#xff0c;基础数据管理&#xff0c;三国图文管理 前台账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#…

(2024.6.23)最新版MAVEN的安装和配置教程(超详细)

1.什么是MAVEN Maven是一个自动化构建工具&#xff0c;主要用于Java项目&#xff0c;它由Apache软件基金会维护。Maven能够自动化完成编译、测试、打包、发布等构建过程&#xff0c;可以大大提高开发效率&#xff0c;保证项目的质量。 下面我们从几个方面来介绍一下MAVEN的功能…

《人生苦短,我用python·四》pybind11多场景使用

引言 Pybind11作为一个强大的工具&#xff0c;不仅可以轻松地将简单的C函数和类暴露给Python&#xff0c;还可以处理更复杂的场景&#xff0c;比如支持C标准库容器、处理C异常、以及自定义数据结构的转换。本文将深入介绍Pybind11的一些高级用法&#xff0c;帮助你在实际项目中…

为什么用excel求出的和是错误的?

Excel中求和结果错误的原因可能有几种常见的情况&#xff1a;1. **数据格式问题**&#xff1a;有时候数字可能被错误地视为文本格式。这种情况下&#xff0c;Excel 在求和时会忽略这些单元格。你可以通过将这些单元格的格式改为数值格式来解决。2. **隐藏的行或列**&#xff1a…

SpringBoot前后端传递数据时常用的JSON格式数据是什么?【讲解JSON概念、语法、以及Java对象互转】

SpringBoot前后端传递数据时常用的JSON格式数据是什么&#xff1f; JSON概念JSON语法JSON的两种结构&#xff1a;JSON字符串和Java对象互转&#xff1a;objectMapper.writeValueAsString(person);objectMapper.readValue(jsonStr,Person.class); 在SpringMVC框架中&#xff0c;…

Go 语言学习笔记之数组与切片

大家好&#xff0c;我是码农先森。 数组与切片的区别 在 Go 语言中&#xff0c;数组和切片是两种不同的数据结构&#xff0c;它们之间有以下主要区别。 参数长度&#xff1a; 数组&#xff08;Array&#xff09;&#xff1a;数组的长度是固定的&#xff0c;在创建时就需要指…