当前位置： 首页 > news >正文

nodejs - express 学习笔记

news 来源：原创 2024/9/20 13:55:12

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

一、初体验

// 1、导入 express 模块
const express = require('express')
// 2、创建应用对象
const app = express()
// 3、创建路由
app.get('/home', (req,res) => {res.end('hello express')
})
// 4、监听端口，启动服务
app.listen(3000, () => {console.log('服务启动成功....')
})

命令行执行该脚本

node <文件名> 
# 或者 
nodemon <文件名>

二、路由

1、什么是路由

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

2、路由的使用

一个路由的组成有 请求方法 ， 路径 和 回调函数 组成
express 中提供了一系列方法，可以很方便的使用路由，使用格式如下：
app.<method>(path，callback)

// 引入 express 模块
const express = require('express')
//  创建 express 应用
const app = express()
// 创建路由
app.get('/home', (req,res) => {res.end('hello express')
})
app.get('/', (req,res) => {res.end('home')
})
app.post('/login', (req,res) => {res.end('login')
})
// all 表示匹配所有方法：get、post等
// 只匹配路径，
app.all('/test', (req,res) => {res.end('test')
})
// 路径匹配不上时，就匹配 *
app.all('*', (req,res) => {res.end('404 not Found')
})// 监听端口
app.listen(3000, () => {console.log('服务已经启动....')
})

3、获取请求参数

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

// http://127.0.0.1:3000/request?name=zs&age18const express = require('express')const app = express()app.get('/request', (req,res) => {// console.log(req.method) // GET// console.log(req.url)  // /request?name=zs&age18// console.log(req.httpVersion)  // 1.1// console.log(req.headers)  // {}// express 操作// console.log(req.path) // /request// console.log(req.query)  // { name: 'zs', age18: '' }// console.log(req.ip) // ::ffff:127.0.0.1// 获取请求头console.log(req.get('host'))  // 127.0.0.1:3000res.end('request')
})app.listen(3000, () => {console.log('服务已经启动')
})

4、获取路由参数

路由参数指的是 URL 路径中的参数（数据）
通过 req.params 获取

app.get('/:id.html', (req,res) => {console.log(req.params.id)res.setHeader('content-type', 'text/html;charset=utf-8')res.end(`商品详情---商品id为${req.params.id}`)
})

5、路由参数练习

访问 http://127.0.0.1:3000/singer/id.html，根据 id 不同显示不同人员对信息
singers.json

{"singers": [{"singer_name":"周杰伦","singer_pic":"https://tse4-mm.cn.bing.net/th/id/OIP-C.MBdWohb239f-DDL1hTOD1gHaFj?rs=1&pid=ImgDetMain","other_name":"Jay Chou","singer_id": 4342,"id": 1},{"singer_name":"林俊杰","singer_pic":"https://ts1.cn.mm.bing.net/th/id/R-C.88bd5be6d420729a8c2522cea088dbba?rik=k6VZw%2bb%2bOra%2beA&riu=http%3a%2f%2fpic.baike.soso.com%2fp%2f20130105%2f20130105232231-1799387588.jpg&ehk=YSa6clxTqIwRP5wPGj6JGXPfHacZlaS9wPieFXYoi0U%3d&risl=&pid=ImgRaw&r=0","other_name":"JJ Lin","singer_id": 233,"id": 2},{"singer_name":"邓紫棋","singer_pic":"https://ts1.cn.mm.bing.net/th/id/R-C.1b542de55345409e9d43876f6ee1cb63?rik=SSmPaHF5CsAUxA&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20110%2f120%2fw1080h1440%2f20220718%2f8dc6-218cc21c8f91db792bf3166bc3da4de4.jpg&ehk=gossNEDToapx2%2f7lhVLnyfLQta8zoXHzwgqVnDpSR%2fg%3d&risl=&pid=ImgRaw&r=0","other_name":"Cloria Tang","singer_id": 343,"id": 3}]
}

路由参数练习.js

const express = require('express')const { singers } = require('./singers.json')const app = express()app.get('/singer/:id.html', (req, res) => {let singer = singers.find(item => {return item.id === Number(req.params.id)})if(!singer) {res.statusCode = 404res.end('404 not Found')return}res.end(`<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><h1>${singer.singer_name}</h1><img src="${singer.singer_pic}" alt="" width="200"></body></html>`)
})
app.listen(3000, () => {console.log('服务已经启动....')
})

6、设置一般响应

const express = require('express')
const app = express()app.get('/response', (req, res) => {// 原生响应// 设置状态码// res.statusCode = 404// // 设置状态信息// res.statusMessage = 'not Found'// // 设置请求头// res.setHeader('xxx', 'yyy')// // 设置响应体// // res.write('hello express')、// // 设置响应体// res.send('你好')// 设置响应体// res.end('response')// express  响应// 设置状态码// res.status(500)// // 设置请求头// res.set('aaa', 'bbb')// // 设置响应体（会自动设置 Content-Type）// res.send('你好 express')// express 设置响应也可以链式调用res.status(500).set('aaa','bbb').send('你好啊 express')
})app.listen(3000, () => {console.log('服务已经启动....')
})

7、设置其他类型

const express = require('express')const app = express()
app.get('/other', (req, res) => {// 其他响应// 设置重定向 302// res.redirect('https://www.jd.com/')// 下载响应（里面放绝对路径）// res.download(__dirname+'/package.json')// JSON 响应，会自动设置 json 对应的响应头// res.json({//   name: 'zs',//   age: 18// })// 响应文件内容res.sendFile(__dirname + '/index.html')// 这里的响应，不需要再用 res.end() 结束
})app.listen(3000, () => {console.log('服务已经启动成功....')
})

三、express 中间件

1、概念

中间件Middleware本质是一个回调函数。
中间件函数可以像路由回调一样访问 请求对象、响应对象。
好像是 vue2 中的路由守卫

2、作用

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

3、类型

  • 全局中间件（类似于全局路由守卫）
    每次访问路由，都会先经过中间件，然后经过路由
  • 路由中间件（类似于独享路由守卫）
    访问具体的路由时，会先经过 路由中间件，再经过路由

以坐火车流程来举例，全局中间件就好像是 进站口，每个人都需要经过进站口，路由中间件 就好像是某一趟车的闸机口，只有这一趟车的人才会经过这个闸机口。

4、全局中间件

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

  1. 首先定义中间件函数 fn，接收3个参数：req、res、next（函数）
  2. 通过 app.user(fn) 应用中间件
let recordMiddleware = function(request,response,next){ //实现功能代码 //..... //执行next函数(当如果希望执行完中间件函数之后，仍然继续执行路由中的回调函数，必须调用next) next(); 
}app.use(recordMiddleware)
app.use(recordMiddleware2)

const express = require('express')
const fs = require('fs')
const path = require('path')const app = express()// 声明中间件函数
function recordMiddleware(req, res, next) {// 获取 url、iplet { url, ip } = req// 将信息保存在文件 access.log 中 fs.appendFileSync(path.resolve(__dirname, './access.log'), `${url}   ${ip}\r\n`)// 调用 next（这里如果不调用 next，后续的路由回调不会正常执行）next()
}
// 使用中间件函数
app.use(recordMiddleware)
app.get('/home', (req, res) => {res.end('home')
})
app.get('/admin', (req, res) => {res.end('admin')
})
app.all('*', (req, res) => {res.end('404 not Found')
})
app.listen(3000, () => {console.log('服务已经启动...')
})

5、路由中间件

如果 只需要对某一些路由进行功能封装 ，则就需要路由中间件
app.get('/路径','中间件函数',(request,response)=>{ });

/* 针对 /admin   /setting 的请求，要求 URL 携带 code= 521 参数，如未携带提示   暗号错误
*/const express = require('express')
const app = express()// 定义路由中间件
const checkCodeMiddleware = (req, res, next) => {if(req.query.code === '521') {next()} else {res.send('暗号错误')}
}
// 在需要校验的路由上，添加路由中间价
app.get('/admin', checkCodeMiddleware, (req, res) => {res.send('admin')
})
app.get('/setting', checkCodeMiddleware, (req, res) => {res.send('setting')
})
app.listen(3000, () => {console.log('服务已经启动.....')
})

6、讲台资源中间件

预习：nodejs

// 创建一个 HTTP 服务，端口 9000，满足如下需求：
// GET   /index.html       响应  page/index.html       的文件内容
// GET   /css/app.css      响应  page/css/app.css      的文件内容
// GET   /images/logo.png  响应  page/images/logo.png  的文件内容const http = require('http')
// 加载 fs 模块处理文件
const fs = require('fs')
// 加载 path 模块处理文件名、后缀
const path = require('path')
// 常用的 请求头
const mime = {html: 'text/html', css: 'text/css', js: 'text/javascript', png: 'image/png', jpg: 'image/jpeg', gif: 'image/gif', mp4: 'video/mp4', mp3: 'audio/mpeg', json: 'application/json'
}const server = http.createServer((request, response) => {let { pathname } = new URL(request.url, 'http://127.0.0.1:9000')if(request.method !== 'GET') {response.statusCode = 405response.end('<h1>405 Method Not Allowed</h1>')}fs.readFile(`${__dirname}/page${pathname}`, (err, data) => {// 读取文件失败后的处理if(err) {response.setHeader('content-type','text/html;charset=utf-8')switch (err.code) {case 'ENOENT':response.statusCode = 404response.end('<h1>404 NotFound</h1>')break;case 'EPERM':response.statusCode = 403response.end('<h1>403 Forbidden</h1>')break;default:response.statusCode = 500response.end('<h1>500 Internal Server Error</h1>')break;}return}// 获取文件后缀，如：htmllet ext = path.extname(pathname).slice(1)if(ext === 'html') {response.setHeader('content-type', `${mime[ext]};charset=utf-8`)} else {response.setHeader('content-type', mime[ext])}response.end(data)})})
server.listen('9000', () => {console.log('服务已经启动....')
})

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

const express = require('express')
const app = express()// express 有内置的静态资源中间件，只需要设置一下资源目录
app.use(express.static(__dirname + '/public'))
//如果访问的内容经常变化，还是需要设置路由 
//但是，在这里有一个问题，如果public目录下有index.html文件，单独也有index.html的路由， 
//则谁书写在前，优先执行谁app.get('/home', (req,res) => {res.end('home')
})  
app.listen(3000, () => {console.log('服务启动成功....')
})

注意事项:

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

7、获取请求体数据 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

1、概念

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

2、作用

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

3、使用

创建独立的 JS 文件（homeRouter.js）

// 1、导入 express
const express = require('express')
// 2、创建路由器对象
const router = express.Router()
// 3、在 router 对象上添加路由
router.get('/home', (req, res) => {res.send('前台首页')
})
router.get('/search', (req, res) => {res.send('搜索首页')
})
// 暴露 router 对象
module.exports = router

主文件 index.js

const express = require('express')
// 引入子路由文件
const adminRouter = require('./routes/adminRouter')
const homeRouter = require('./routes/homeRouter')const app = express()
// 设置和使用中间件
app.use(adminRouter)
app.use(homeRouter)// app.get('/home', (req, res) => {
//   res.send('前台首页')
// })// app.get('/search', (req, res) => {
//   res.send('搜索页面')
// })// app.get('/admin', (req, res) => {
//   res.send('后台首页')
// })// app.get('/setting', (req, res) => {
//   res.send('设置页面')
// })app.all('*', (req, res) => {res.send('404 Not Found')
})app.listen(3000, () => {console.log('服务已经启动....')
})

五、EJS 模板引擎

1、什么是模板引擎

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

2、什么是EJS

EJS 是一个高效的 Javascript 的模板引擎。
官网: https://ejs.co/
中文站：https://ejs.bootcss.com/

3、初体验

下载安装 EJS
npm i ejs --save
代码：

const ejs = require('ejs')
const fs = require('fs')const country = '中国'
// const str = `我爱你 ${country}`// const str = ejs.render('我爱你 <%= country %>', {country})
const file = fs.readFileSync(__dirname + '/01-初体验.html').toString()
const name = 'zhangsan'
const str = ejs.render(file, {country, name})console.log(str)

01-初体验.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>我爱你 <%= country %></h1><h2>来自 <%= name %></h2>
</body>
</html>

4、常用语法

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

练习：

4-1、列表渲染

02-列表渲染.js

const fs = require('fs')
const ejs = require('ejs')
const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧']// 1、js 模板字符串
// let html = '<ul>'// xiyou.forEach(item => {
//   html += `<li>${item}</li>`
// })
// html += '</ul>'// 2、ejs 直接拼标签
// let html = ejs.render(`<ul>
//     <% xiyou.forEach(item => { %>
//       <li> <%= item %> </li>
//     <% }) %>
// </ul>`, {xiyou})// 3、读取 html 文件，ejs 将数据传给 html
let file = fs.readFileSync(__dirname + '/02-列表渲染.html').toString()
let html = ejs.render(file, { xiyou })
console.log(html)

02-列表渲染.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul><% xiyou.forEach(item => { %><li><%= item %></li><% }) %></ul>
</body>
</html>
4-2、条件渲染
/* 通过 isLogin 决定最终的输出内容true    输出 <span>欢迎回来</span>flase   输入 <button>登录</button>  <button>注册</button>
*/const ejs = require('ejs')
let isLogin = false
// let html
// // 原生 js
// if(isLogin) {
//   html = `<span>欢迎回来</span>`
// } else {
//   html = `<button>登录</button>  <button>注册</button>`
// }let html = ejs.render(`<% if(isLogin) { %><span>欢迎回来</span><% } else { %><button>登录</button>  <button>注册</button><% } %>`, {isLogin})console.log(html)

5、express 中使用 ejs

  1. 创建一个目录（views）用来存放模板（以 ejs 结尾）
  2. 路由上使用
    在这里插入图片描述
const express = require('express')
const path = require('path')const app = express()
// 1、设置模板引擎
app.set('view engine','ejs'); 
app.engine('ejs', require('ejs').__express);
// 2、设置模板文件存放位置， 模板文件：具有模板语法内容的文件
app.set('views', path.resolve(__dirname, './views'))app.get('/home', (req, res) => {let title = '使用 ejs 模板渲染'// 3、render 响应// res.render('模板的文件名', '书库')res.render('home', { title })// res.send('你好啊')
})
app.listen(3000, () => {console.log('服务已经启动过成功')
})

6、express- generator 工具

它是 express 应用程序生成器，通过 express- generator 可以快速创建一个应用的骨架（类似与 vue 中的 vue-cli）。

6-1、下载

npm install -g express-generator

6-2、使用

express -e 目录名XXX 创建目录 XXX，这个目录 添加了 ejs 模板引擎的支持。

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 【Qt 】JSON 数据格式详解
  • 【传知代码】智慧医疗：纹理特征VS卷积特征（论文复现）
  • 计算机网络 6.1Internet概念
  • STM32 裸机 LWIP RAW接口 TCP客户端和服务端，以及UDP收发实现
  • Binius-based zkVM：为Polygon AggLayer开发、FPGA加速的zkVM
  • python机器学习8--网络
  • 【React】JSX 实现列表渲染
  • Linux进程控制——进程等待
  • WEB前端12-axios基础
  • SQL labs-SQL注入（四，sqlmap对于post传参方式的注入）
  • Java Web应用安全防护
  • 03--KVM虚拟化
  • Python 爬虫入门（一）：从零开始学爬虫 「详细介绍」
  • ES里面常用的查询语句有哪些？
  • Pytorch使用教学2-Tensor的维度
  • [译]前端离线指南（上）
  • 【Leetcode】104. 二叉树的最大深度
  • ES6 ...操作符
  • ES学习笔记(10)--ES6中的函数和数组补漏
  • Java｜序列化异常StreamCorruptedException的解决方法
  • javascript 总结（常用工具类的封装）
  • jquery cookie
  • Promise面试题2实现异步串行执行
  • python大佬养成计划----difflib模块
  • 基于Dubbo+ZooKeeper的分布式服务的实现
  • 基于Vue2全家桶的移动端AppDEMO实现
  • 融云开发漫谈：你是否了解Go语言并发编程的第一要义？
  • 删除表内多余的重复数据
  • 使用agvtool更改app version／build
  • 使用Swoole加速Laravel(正式环境中)
  • 微服务框架lagom
  • 一起来学SpringBoot | 第三篇：SpringBoot日志配置
  • Oracle Portal 11g Diagnostics using Remote Diagnostic Agent (RDA) [ID 1059805.
  • mysql面试题分组并合并列
  • 小白应该如何快速入门阿里云服务器,新手使用ECS的方法 ...
  • ​​​​​​​GitLab 之 GitLab-Runner 安装，配置与问题汇总
  • ‌‌雅诗兰黛、‌‌兰蔻等美妆大品牌的营销策略是什么？
  • # wps必须要登录激活才能使用吗？
  • #!/usr/bin/python与#!/usr/bin/env python的区别
  • $(selector).each()和$.each()的区别
  • $.extend({},旧的,新的)；合并对象，后面的覆盖前面的
  • （1）STL算法之遍历容器
  • （39）STM32——FLASH闪存
  • （4）Elastix图像配准：3D图像
  • （C#）一个最简单的链表类
  • (二十五)admin-boot项目之集成消息队列Rabbitmq
  • （附源码）spring boot智能服药提醒app 毕业设计 102151
  • （附源码）ssm户外用品商城 毕业设计 112346
  • （附源码）ssm考试题库管理系统 毕业设计 069043
  • （剑指Offer）面试题41：和为s的连续正数序列
  • (使用vite搭建vue3项目（vite + vue3 + vue router + pinia + element plus）)
  • （学习日记）2024.02.29：UCOSIII第二节
  • （转）PlayerPrefs在Windows下存到哪里去了？
  • 、写入Shellcode到注册表上线
  • .Net Core/.Net6/.Net8 ，启动配置/Program.cs 配置