Express基础

已于 2022-09-17 20:18:08 修改
阅读量619 收藏 1
点赞数
分类专栏： node.js 文章标签： express javascript 前端
于 2022-09-14 20:20:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38367703/article/details/126856387
版权

Express

基于Node.js平台，快速、开放、极简的web开发框架

使用Express

1.下载

//下载4.17.1版本
npm install express@4.17.1

2.导入包并使用

const express = require('express')
const app = express()

app.listen(80,() => {

})

路由

express中的路由是客户端请求和服务器处理函数之间的映射关系

监听请求

浏览器访问：http://127.0.0.1/getData?name=‘123’&age=20
req.query可以获取?name=‘123’&age=20访问时拼接的参数

//监听GET请求
//请求url /getData
app.get('/getData',function(req,res){
	console.log(req.query)    // { name: "'123'", age: '20' }
	res.send({name:'胡',age:20, gender:'女'}) //页面显示{name:'胡',age:20, gender:'女'}
})
//监听POST请求
app.post('/getData',function(req,res){
	res.send() // 把响应给客户端
})

使用:动态匹配， req.params获取动态参数
浏览器访问：http://127.0.0.1/getData/2

//动态匹配
app.get('/getData/:id',function(req,res){
	console.log(req.params)    // 2
	res.send({name:'胡',age:20, gender:'女'}) //页面显示{name:'胡',age:20, gender:'女'}
})

浏览器访问：http://127.0.0.1/getData/2/hu

app.get('/getData/:id/:name',function(req,res){
	console.log(req.params)    // { id: '2', name: 'hu' }
	res.send({name:'胡',age:20, gender:'女'}) //页面显示{name:'胡',age:20, gender:'女'}
})

路由匹配规则：

  1. 路由先后顺序进行匹配
  2. 请求类型和请求地址同时匹配成功 才会调用函数
托管静态资源

使用express.static()
存放静态资源的目录名不会出现在url中
托管多个静态资源目录时，根据目录的添加顺序查找所需的文件

app.use(express.static('public'))
app.use(express.static('./public2'))
// public 目录下的图片、文件资源都可以访问

// 访问public/images/bg.jpg  http://127.0.0.1/images/bg.jpg
// 访问public/index.html http://127.0.0.1/index.html
路由模块

在项目中我们通常需要定义的接口往往很多，所以需要把模块化路由。

  1. 创建路由模块对应的.js文件
  2. 调用express.Router()函数创建路由对象
  3. 向路由对象上挂载具体的路由
  4. 使用module.exports向外共享路由
  5. app.use函数注册路由
//创建route.js文件
const express = require('express')

const router = express.Router()

router.get('/user/list',(req, res) => {
    res.send('userlist')
})
router.post('/user/add',(req, res) => {
    res.send('post')
})

module.exports = router

//启动文件中
const router = require('./route')
app.use(router)

Express中间件

中间件有输入输出。
express 可以连续调用多个中间件，从而对这次请求 请求预处理。

中间件的作用

多个中间件之间，共享同一份req和res
我们可以在上游的中间件中，统一为req和res对象添加自定义的属性或方法供下游的中间件或路由使用。

中间件的使用
const express = require('express')

const app = express()
//中间件
app.get('/',function(req,res,next){
	req.time = Date.now
    next()
})
//可以访问到req.time
app.get('/use',function(res,req){
   console.log(req.time)
})

包含了next参数回调函数就是中间件,未包含是路由处理函数
next函数的作用:

  1. next函数是实现多个中间件连续调用的关键
  2. 它把流关系转交给下一个中间件或路由
全局中间件

方式一：

const mw = function (req,res, next) {
    next()
}
app.use(mw)

方式二：

app.use(function (req,res, next) {
    next()
})
局部中间件

不使用app.use()就是局部中间件
// mw中件件参数

const mw = function (req,res, next) {
    next()
}
app.get('/',mw,function(req,res){
    // 中间件只在当前中作用
})

定义多个中间件 以下两种等价

app.get('/',mw1,mv2,function(req,res){
    // 中间件只在当前中作用
})

app.get('/',[mw1,mv2],function(req,res){
    // 中间件只在当前中作用
})

注意： 一定要在路由之前注册中间件，把中间件件放到路由后面 路由就无法使用

中间件执行规则

连续定义多个中间件，会安照定义的先后顺序依次调用。

中间件分类

官方把常见的中间件用法，分成了5大类分别是：

1.应用级别的中间件

绑定到app实例上的中间件

app.use()
app.get()
app.post()
2.路由别的中间件

绑定到express.Router()实例上的中间件

3.错误级别的中间件

专门用来捕获整个项目中发生的异常错误，防止程序崩溃。必须有四个参数(err,req,res,next)
错误中间件必须注册在路由之后

4.Express内置的中间件

三个常用的内置中间件：

  1. express.static 托管静态资源文件
  2. express.json json格式的请求体数据（有兼容性，仅在4.16.0+版本中可用）
    json格式的请求体数据（有兼容性，仅在4.16.0+版本中可用）
    3.express.urlencoded 解析URL-encode格式的请求体数据（有兼容性，仅在4.16.0+版本中可用）
    不配置解析中间件为undefined
//在路由之前配置
app.use(express.static('public'))
app.use(express.json())
app.use(express.urlencoded({extended:false}))
5.第三方的中间件

使用第三方中间件body-parser：res.body 获取JSON 格式表单数据和url-encoded格式的数据

//1.下载
npm install body-parser
//2.导入包
const parser = require('body-parser')
//3.app.use
app.use(parser.urlencoded({extended:false}))

nodemon

使用插件，避免每次修改内容后，都需要收到启动服务器

//下载
npm install -g nodemon
//启动服务
dnoemon app.js //app.js 启动文件

Express解决接口跨域问题

协议、域名 、端口其中一个不同就会存在跨域

使用CORS第三方中间件
  1. 安装
npm install cors
  1. 使用
const cros = require('cors')
  1. 在路由之前调用
app.use(cors())
CORS跨域资源共享

CORS跨域资源共享由一系列HTTP响应头组成，这些HTTP响应头决定。
浏览器是阻止 前端js代码跨域获取资源

CORS在浏览器中有兼容性，只支持XMLHttpRequest level2浏览器，才能正常访问开启CROS的服务器接口

CORS响应头部有三个响应头：
  1. Access-Control-Allow-Origin
    Access-Control-Allow-Origin:<origin> | *origin参数允许访问资源的外域URL
// 只允许来自https://cn.vuejs.org/的请求
res.setHeader('Access-Control-Allow-Origin','https://cn.vuejs.org/')

//允许来自任何域的请求
res.setHeader('Access-Control-Allow-Origin','*')
  1. Access-Control-Allow-Headers
    默认情况下，CORS仅支持客户端发送如下的9个请求头
    在这里插入图片描述

如果客户端向服务器发送了额外的请求头信息，则需要通过Access-Control-Allow-Headers对额外的请求头进行申明，否则这次请求失败

 // 允许客户端额外向服务器发送请求头 Content-Type X-Custom-Header
res.setHeader('Access-Control-Allow-Headers','Content-Type', 'X-Custom-Header')
//多个请求头之间用英文逗号进行分隔

3.Access-Control-Allow-Methods
默认情况下COES仅支持客户端发起 GET、POST、HEAD请求，PUT 、DELETE 需要 指明实际请求所允许使用的HTTP方法

//允许请求方式：GET POST HEADPUT DELETE
res.setHeader('Access-Control-Allow-Methods', 'GET', 'POST', 'HEADPUT', 'DELETE',)

//允许所有请求方式
res..setHeader('Access-Control-Allow-Methods','*')
预检请求

普通请求 只发生一次请求 预检请求会发生两次
什么情况下会预检请求？

  1. GET、POST、HEAD之外的的请求类型
  2. 请求头中包含自定义头部字段
  3. 向服务器发送了 application/json 格式的数据
    预检请求会先发送 OPTION请求进行预检，以获知服务器是否允许该实际请求 ，成功后才会发送真正的请求并携带真实数据
JSONP解决跨域

浏览器通过<script>标签的src属性，请求服务器上的数据同时服务器返回一个函数的调用
只支持GET
为了防止冲突 必须在配置CORS中间件之前申明JSONP的接口
字符串拼接出一个函数调用的字符串 在<script>标签执行解析

app.get('/api/jsonp',(req,res) => {
    const funcName = req.query.callback
    const data = {}
    const scriptStr = `${funcName}(){${JSON.stringify(data)}}`
    res.send(scriptStr)
})

Express中使用MySQL

MySQL传统性数据库，MySQL是用来组织、存储和管理数据的仓库

MySQL安装

下载mysql地址：https://dev.mysql.com/downloads/mysql/
下载后进行安装，会安装如下两个：
MySQL Server 专门用来提供数据存储和服务的软件
MySQL Workbench 可视化的MySQL管理工具

在项目中操作MySQL

  1. 安装操作MySQL数据库的第三方模块
npm install mysql
  1. 通过mysql模块连接到MySQL 数据库
const mysql = require('mysql')

const db = mysql.createPool({
    host: '127.0.0.1', // 数据库的IP地址
    user: 'root', // 登录数据库的账号
    password: '123456', // 数据库的密码
    database: 'my_database', // 指定操作哪个数据库
})
  1. 通过mysql模块 执行SQL语句
    先测试mysql模块是否正常工作
db.query('select 1', (err,results) => {
    if (err) return console.log(err.message)
    console.log(results)
})

操作数据前，先在数据库中建表，以下操作基于users表操作

查询表数据
const sqlStr = 'select * from users' 
db.query(sqlStr , (err,results) => {
    if (err) return console.log(err.message)
    console.log(results)
})
插入数据
const user = {username: 'hu1',passsowrd:'node123'}
const sqlStr = 'insert into users (username,passsowrd) values (?,?)' 
db.query(sqlStr ,[user.username,user.passsowrd] ,(err,results) => {
    if (err) return console.log(err.message)
    if (results.affectedRows === 1) { 
        console.log('插入数据成功')
    }
    console.log(results)
})

便捷插入

const user = {username: 'hu2',passsowrd:'node456'}
const sqlStr = 'insert into users set ?' 
// 数据对象的每一个属性和数据表字段一一对应
// 直接将数据对象当做占位符
db.query(sqlStr, user ,(err,results) => {
    if (err) return console.log(err.message)
    if (results.affectedRows === 1) { 
        console.log('插入数据成功')
    }
    console.log(results)
})
更新数据
const user = {id:6,username: 'huq2',passsowrd:'node789'}
const sqlStr = 'update users set username=?,passsowrd=? where id=?' 
db.query(sqlStr, [user.username,user.passsowrd,user.id] ,(err,results) => {
    if (err) return console.log(err.message)
    if (results.affectedRows === 1) { 
        console.log('更新数据成功')
    }
    console.log(results)
})

便捷更新数据

const user = {id:6,username: 'huq2',passsowrd:'node789'}
const sqlStr = 'update users set ? where id=?' 

db.query(sqlStr, [user,user.id] ,(err,results) => {
    if (err) return console.log(err.message)
    if (results.affectedRows === 1) { 
        console.log('更新数据成功')
    }
    console.log(results)
})
删除数据

id唯一标识

const sqlStr = 'delete from users where id=?' 

db.query(sqlStr, 6 ,(err,results) => {
    if (err) return console.log(err.message)
    if (results.affectedRows === 1) { 
        console.log('删除数据成功')
    }
    console.log(results)
})

直接删除delete不能找回数据，所以在项目中最好使用标记删除，定义一个 status删除状态，设置为1，就代表数据已删除

const sqlStr = 'update users set status=1 where id=?' 
db.query(sqlStr, 6 ,(err,results) => {
    if (err) return console.log(err.message)
    if (results.affectedRows === 1) { 
        console.log('删除数据成功')
    }
    console.log(results)
})

前后端的身份认证

Web开发模式主流：

第一种：基于服务器渲染的传统Web开发模式，服务发送给客户端的HTML页面，是在服务器通过字符串的拼接，动态生产的,不需要Ajax额外请求页面数据
优点：

  1. 耗时少， 浏览器只需要直接渲染页面，尤其是移动端更省电
  2. 有利于SEO
    缺点：占用服务器端资源 会造成压力
    不利于前后端分离，开发效率低
    第二种：基于前后端分离的新型web开发模式，后端只负责提供API接口，前端使用Ajax调用接口的开发模式
    优点：开发体验好，用户体验好，减轻了服务器的渲染压力
    项目具体使用哪种开发模式需要通过项目需求来选择合适的方式
    也可以结合使用，比如：首屏服务器渲染+其他页面前后端分离
session的工作原理

通过一定手段，完成对用户身份的确认
目的：确认当前申称为某种用户，确实是所声称的某种用户
前后端分离推荐使用Session认证机制、JWT认证机制
1.http协议的无状态性
是指客户端每次HTTP请求都是独立的，连续多个请求之间没有直接关系，服务器不会主动保留每次HTTP请求
2.如何突破HTTP无状态机制
使用Cookie。
Cookie是存储在用户浏览器的一段不超过4kb的字符串,它由一个名称、一个值和其他几个用于控制Cookie有效性、安全性、使用范围的可选属性组成
不同域名下的Cookie各自独立,每当客户端发起请求时
会自定把当前域名下所有未过期的cookie一同发送到服务器。
Cookie特征:自动发送、域名独立、过期时限、4kb限制

客户端第一次请求的时候，服务器通过响应头的形式，向客户端发送一个身份认证Cookie，客户端会自动将Cookie保存到浏览器。随后，当客户端浏览器每次请求服务器的时候，浏览器会将身份认证相关的cookie,通过请求头的形式发送给服务器，服务器级可验明客户端的身份
在这里插入图片描述

Cookie不具有安全性
由于cookie是存储在浏览器中的，而且浏览器也提供了读写Cookie的API，因此Cookie很容易被伪造
不建议服务器将重要的隐私数据，通过cookie形式发送给浏览器
提高身份认证的安全性，使用Session认证机制

在Express中使用Session认证

npm install express-session

app.use(session({
    secret:'HUQIN', //任意字符串
    resave: false, //固定写法
    saveUninitialized:true //固定写法
}))

app.get('/login',(req,res) => {
    // 配置session后可以使用req.session
    if(req.query.password!=='123') {
    }
    req.session.user = req.query
    req.session.islogin = true
    res.send('登录成功')
})

app.get('/userData',(req,res) => {
    if(!req.session.islogin){
        return res.send('获取数据失败')
    }
    res.send('成功')
})

JWT认证机制

Session认证的局限性:Session认证机制需要配合Cookie才能实现，由于Cookie默认不支持跨域访问，所以，当涉及到前端跨域请求后端接口的时候,需要做很多额外配置才能实现Session认证。
JWT认证机制最流行跨域认证解决方案
通常由三部分组成：
Header(头部)
Payload(有效载荷) 真正的用户信息
Signature(签名)
其它两个是安全性相关部分，只是为了保证Token的安全性使用. 进行分隔

Header.Payload.Siginature

客户端通常会把JWT存储在localSorage 或 sessionStorage中,每次请求都有带上JW字符串 从而进行身份认证
在这里插入图片描述

推荐把jwt放在请求头中的Authorization字段后
Authorization：Bearer
使用JWT需要下载两个模

npm install jsonwebtoken express-jwt

jsonwebtoken 生产jwt字符串

express-jwt 将jwt字符串解析还原成JSON对象

const jwt = require('express-jwt')
const expressJWT = require('express-jwt')
const secreKey = 'xiaohuzi' //加密的key 可以是任意字符串
// 只有配置成功 就可以使用req.user
app.use(expressJWT({secret: secreKey}).unless({path:[/^\/api\//]}))// 使用正则配置api开头不需要访问权限
app.get('/login',(req,res) => {
    //userInfo 模拟获取到的值
    const userInfo = {username:'xiaohuzi'}
    const tokenStr = jwt.sigin({username:userInfo.username},secreKey,{expiresIn:'30s'})
    res.send({
        status:200,
        token:tokenStr
    })
    res.send('登录成功')
})
有思想的小胡子
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
如何Request在 TypeScript 中扩展 Express 对象
分享身边生活经验blog
10-20 1143
扩展类型所需要做的Request就是定义一个index.d.ts文件，如下所示：export {}: Language;user?: User;}}}将此文件放在src/types/express文件夹中。Typescript 使用.d.ts 声明文件来加载有关用 JavaScript 编写的库的类型信息。在这里，TypeScript 将使用index.d.ts global 模块Request来全局扩展 Express 类型。
Nodejs轻松入门（四）Express
长夜漫漫，无心睡眠
04-19 755
一.Express环境搭建 在项目目录下执行： cnpm install express --save 添加Express框架代码提示： 当前项目目录下执行（最好在vscode里执行，我也不知道为啥，第一遍在电脑的cmd里执行安装后竟然没效果） npm i -D @types/express Express版Hello world： index.js: const express=require("express"); //构建express对象 const app=express(
Nodejs + Typescript + Express框架搭建
tanchao0910的博客
06-28 1780
创建项目，生成描述文件 使用 npm init 命令创建项目，生成项目描述文件。 npm init -y name 项目名称 version 项目的版本号 description 项目的描述信息 entry point 项目的入口文件 test command 项目启动时脚本命令 git repository 如果你有 Git 地址，可以将这个项目放到你的 Git 仓库里 keywords 关键词 author 作者叫啥 license 项目要发行的时候需要的证书，平时玩玩忽略..
[chatgpt问答录]npm中，“express“: “^4.18.2“，^是什么意思
dlhlSC的博客
04-08 240
符号表示允许安装指定版本的软件包，以及与该版本兼容的所有次要版本。具体来说，^4.18.2表示可以安装4.18.2、4.18.x（其中x是任何数字）和4.y.z（其中y和z也是任何数字）等版本，但不包括5.0.0及更高版本。这意味着当运行npm install命令时，npm将下载最新的4.x.x版本，而不是仅下载4.18.2版本。因此，这有利于确保您获得最新的修复程序和安全更新，同时避免向后不兼容的更改。
Nodejs的安装及使用
weixin_52353216的博客
11-07 2459
从零了解node，学习node的内置模块(fs、http、path)、简单使用express搭建一个web服务器，整合mysql及身份认证(session认证机制、jwt认证机制)。
nodejs入门之Express基础
01-08
Express基础 一.前言 基于Node.js平台,快速,开放,极简的Web开发框架 1.框架的作用 框架可以帮助省略掉一些基本的相同底层代码的反复书写，只需调用框架的方法就可以实现你想要的功能。 回顾 nodejs入门之web服务搭建...
express 搭建 基础demo
10-11
express 搭建 基础demo
nodejs中express入门和基础知识点学习
10-18
本文将深入讲解Express的基础知识，包括初始化、安装、创建Hello World实例、生成器以及路由。 **初始化** 在开始使用Express之前，你需要先创建一个项目目录。例如，你可以创建一个名为`myapp`的目录，然后使用`...
node.js学习笔记，包含ES模块化、express基础、jsonp模块、koa2、Mocha、MySQL操作、路.zip
最新发布
02-22
2. **Express基础**：Express是一个轻量级的Web应用框架，用于构建API和web应用。它简化了HTTP服务器的创建，提供了路由、中间件和视图系统的支持。例如，创建一个简单的Express应用： ```javascript const ...
rocketseat-bootcamp-nodejs-basic-project：NodeJS-Typescript + Express基础项目
02-17
**Node.js + TypeScript + Express 基础项目详解** 在"rocketseat-bootcamp-nodejs-basic-project"中，我们将深入探讨如何使用Node.js、TypeScript和Express框架构建一个基础的Web应用。这个项目旨在帮助初学者理解...
Invoice_checker
04-07
Invoice Checker 一个使用Node.js + Vue.js 打造的发票兑奖网站，使用者于网站选择兑奖月份及输入发票末三码，即可回传是否中奖、中奖金额等资讯，并会自动纪录兑奖次数、中奖次数。 环境建置需求 Node.js: v10.15.0 npm: 7.8.0 nodemon: 2.0.4 express: 4.17.1 body-parser: 1.19.0 mongoDB: 3.6.11 mongoose: 5.12.3 dotenv: ^8.2.0 安装 开启终端机(Terminal)，clone 此专案至本机电脑 git clone https://github.com/yunhsuanchin/Invoice_checker.git 进入专案资料夹 cd Invoice_checker 透过robo 3T 操作mongoDB，与本机localhost:
express-unless, 有条件地添加一个中间件来表达一些.zip
10-10
express-unless, 有条件地添加一个中间件来表达一些 满足条件时有条件跳过中间件。安装npm i express-unless --save用法使用现有中间件：var unless = require('express-unless');var sta
nodeJS 系列四 Express基本使用；路由的概念；中间件；跨域资源共享问题；
m0_55170432的博客
04-28 812
------------------------- Express -------------------------- 1.1 Express 简介 官方给出的概念：Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。 通俗的理解：Express 的作用和 Node.js 内置的 http 模块类似，是专门用来创建 Web 服务器的。 1. Express 的本质：就是一个 npm 上的第三方包，提供了快速创建 Web 服务器的便捷方法。 Express 的中文官网： ht
node学习 expressjwt unless无效
qq_43610311的博客
12-20 2094
node 使用express-jwt unless无效，图片无法查看
如何使用TypeScript通过Express构建节点API
12-06 566
本文最初发布在Okta开发人员博客上 。 感谢您支持使SitePoint成为可能的合作伙伴。 自1995年以来，无论是否喜欢，JavaScript一直在帮助开发人员为Internet提供支持。那时，JavaScript的使用已从小型用户体验增强功能发展为使用服务器上的Node.js和客户端上的许多框架之一的复杂的全栈应用程序。例如Angular，React或Vue。 如今， 大规模构建J...
初始化一个express项目
05-09 1164
首先npm install express安装express框架创建myapp文件夹 makdir myapp 进入文件夹 cd myapp 初始化 npm init entry point:(index.js) //入口默认index.jsvar express=require('express'); var app=express(); app.get('/',function(re
node.js 报错解决办法node:events:505 throw er； // Unhandled ‘error‘ event
小祥编程擅长前端
10-24 4604
node.js 报错解决办法node:events:505 throw er; // Unhandled 'error' event
express模块化路由
LLL3189860667的博客
08-24 889
在我们使用express的时候，如果不作模块化处理，那么就需要在app.js中写入大量的代码。如果将所有的路由都挂载到app服务器对象上的话，随着路由的不断增多，app.js中的代码量会不断增多，那么将会使得后期我们对app.js的维护难以进行，同时这也十分不利于我们多人合作编码。
十分钟教你使用 Express 框架
JFAHS67的博客
10-09 497
express 框架作为npm官网上热度排名前十的存在,是我们作为前端程序员不可忽视的一部分,今天就让我们一起来了解并学会使用这个框架吧! 1.初识 Express 1.1 Express 简介 官方给出的概念：Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架. 本质就是一个第三方包,其作用和node.js中内置http模块相似,是专门用来创建Web服务器的. 使用 Express，我们可以方便、快速的创建 Web 网站的服务器或 API 接口的服务器....
springboot qlexpress
02-22
Spring Boot是一个用于创建独立的、基于Spring的应用程序的框架。它简化了Spring应用程序的...开发人员可以使用Spring Boot快速搭建应用程序的基础框架，然后使用Qlexpress定义和执行规则，以实现业务逻辑的动态化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值