NodeJs_03 _ 学习笔记

最新推荐文章于 2023-01-06 17:26:12 发布

雨季mo浅忆

最新推荐文章于 2023-01-06 17:26:12 发布

阅读量819

点赞数

分类专栏：前端 NodeJs 文章标签：前端 NodeJs

本文链接：https://blog.csdn.net/weixin_58099903/article/details/119775571

版权

前端同时被 2 个专栏收录

159 篇文章 29 订阅

订阅专栏

NodeJs

7 篇文章 0 订阅

订阅专栏

1.2.3、获取 URL 中 get 查询参数

跳转链接 : NodeJs_01 _ 学习笔记

跳转链接 : NodeJs_02 _ 学习笔记

跳转链接 : NodeJs_04 _ 学习笔记

目标

能够编写运行 express 静态服务器
能够在 express 中获取 get 和 url 路由参数
能够模块化拆分请求路由
能够自定义中间件
引入第3方中间件为 express 使用
使用中间件完成数据验证
使用第3方中间件设置好 cookie 和 session

一、Express

1.1、介绍

网址：Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档 | Express 中文网

Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。搭建 web 服务器

Express 的本质：就是一个 npm 上的第三方包，提供了快速创建 Web 服务器的便捷方法。

使用 Express 开发框架可以非常方便、快速的创建 Web 网站的服务器或 API 接口的服务器

Express 它是一个轻量级的 web 服务器框架 , 搭建 web 简单易上手 .

1.2、基本使用

1.2.1、安装

在项目目录中，打开 cmd 命令窗口，执行如下命令

( 1 ) npm init -y

( 2 ) npm i -S express => "express": "^4.17.1"

1.2.2、创建 web 服务

引入模块
实例化应用对象
监听主机和端口
定义路由 get / post / put / delete

// 1. 引入 express 模块
const express = require('express')
// 2. 创建 web 服务 , 实例化服务对象
const app = express( )
// 监听 get 请求
// req 请求对象        // res 响应对象
app.get ( '请求 URI' , ( req, res ) => {
// 向客户端响应数据
res.send({ id:1, name:'张三' })
})
// 启动服务
app.listen( 8080, ()=>{ } )

// 引入 express 没有对于原有的http模块中的功能减少，而是在原有的功能上增强了
const express = require('express')
// 实例化服务对象
const app = express()
// 定义路由
// 当前以get的方式来进行方式，url路径为 / (根)
app.get('/', (req, res) => {
  // res.end('hello')
  // res.end('你好世界')
  // res.send('你好世界')
  // res.send({ id: 1 })
  // res.send(1)  =>  数字不行 , 会报错
  // res.send(1 + '')
  res.send(req.ip)  // 功能增强
})
// 监听端口
app.listen(3000, '0.0.0.0', () => console.log('express start'))

1.2.3、获取 URL 中 get 查询参数

通过 req.query 对象，可以访问到客户端通过查询字符串的形式发送到服务器的参数

app.get ( '/?id=1', ( req, res ) => {

console.log( req.query )

})

1.2.4、URL 中动态参数

通过 req.params 对象，可以访问到 URL 中动态参数

// 必填的
/xxx/:名称 => req.params.名称
// 可选
/xxx/:名称?

/:id 动态路由参数，: (冒号)它是一个占位符号

// 路由匹配从上向下一直接匹配，【默认】是匹配成功后就停止向下匹配
// 把精确的路由规则写在上面，模糊写在下面

// 动态路由参数
// 根据新闻id查看当前的新闻，传统方案 /news?id=100
// 传统方案：1.id字段暴露在地址栏中 , 有不安全的可能性
// 2.地址栏不优雅，不利用seo，3.参数可以随意添加或减少,一般传统方案用于搜索
// 动态路由
// 1.字段不会暴露，2.有利于seo, 3.参数必须提前在规则中定义好不然不能用
// /:id 动态路由参数，它是一个占位
// /goods/100  => 404
//  ? 可选参数
// 路由匹配从上向下一直接匹配，【默认】是匹配成功后就停止向下匹配
// 把精确的路由规则写在上面，模糊写在下面
app.get('/goods/666', (req, res) => {    // 精确的路由规则
  res.send('商品详情 - 特别处理')
})

app.get('/goods/:id/:goodname?', (req, res) => { // 模糊的路由规则
  // 商品详情
  let params = req.params

  res.send('商品详情 -- ' + params.id)
})

1.2.5、静态资源管理

express 提供了一个非常好用的方法，叫做 express.static( ) ，通过此方法，可以非常方便地创建一个 静态 web 资源服务器

// 中间件，内置中间件拥有一个静态资源服务器
app.use(express.static('路径'))

路由定义 :

get 获取 资源 200

post 添加 资源 201

put / patch 修改 资源 put 全量修改 , patch 增量修改 id name age 201 / 202

delete 删除 返回状态码 204 204状态码，没有响应体 ( 就是所谓的 JSON 数据得不到 , 因为你都删除了 , 所以没必要有响应体 , 去浪费额外的带宽 )

1.3、路由

1.3.1、概述

路由在生活中如拨打服务电话时，按数字几能处理什么样的处理，它就是类似于按键与服务之间的映射关系。

在 Express 中，路由指的就是客户端发起的请求与服务器端 处理方法之间的 映射关系 。

服务器端路由的切换 , 会引起浏览器刷新 , 重新加载 , 并且返回对应的 http 状态码

1.3.2、定义路由

express 中的路由分3部份组件，分别是 请求类型、请求 url 和对应的处理函数。

当一个客户端请求到达服务端之后，先经过路由规则匹配，只有匹配成功之后，才会调用对应的处理函数。在匹配时，会按照路由的顺序进行匹配，如果 请求类型 和请求的 URL 同时匹配成功，则 Express 会将这次请求，转交给对应的函数进行处理。

app.<get / post / put / delete / all / use>(uri, ( req, res ) => { } )

定义 get 路由 :

// path 模块用于处理文件和目录(文件夹)的路径
const path = require('path')
// fs 模块提供了用于与文件进行交互相关方法
const fs = require('fs')
// fs.promise 它是返回一个 fs 对象, 但是这后面的方法全部返回 promise
const pfs = fs.promises
// 路径要以引入到最终执行的文件位置为主
const filepath = path.resolve('./data/user.json')
/**
 * 读取用户数据
 * @returns promise
 */
const readFile = async () => {
  // 使用fs读取用户的json数据，返回的是一个promise对象，使用async/await进行同步化操作
  let str = await pfs.readFile(filepath, 'utf-8')
  // 得到的是一个json字符串，转为json对象
  return JSON.parse(str)
}
// 导出
module.exports = {
  readFile
}

定义 post 路由 :

定义 put 路由 :

// 查看单个用户信息
app.get('/api/users/:uid', async (req, res) => {
  // 读取用户数据
  let userList = await fs.readFile()
  // 获取用户 id
  let uid = req.params.uid
  // 使用数组方法
  let user = userList.find(item => item.id == uid)
  res.send({
    code: 0,
    msg: 'ok',
    data: user
  })
})


// 修改
app.put('/api/users/:uid', async (req, res) => {
  // 修改的数据
  let user = {
    "name": "李四 --" + Math.random()
  }
  // 读取用户数据
  let userList = await fs.readFile()
  // 获取用户 id
  let uid = req.params.uid
  // 使用数组方法
  let index = userList.findIndex(item => item.id == uid)
  userList[index] = { ...userList[index], ...user }
  // 写入到文件中
  fs.writeFile(userList)
  res.send({
    code: 0,
    msg: 'ok',
    data: userList[index]
  })
})

定义 delete 路由 :

// 删除
app.delete('/api/users/:uid', async (req, res) => {
  // 读取用户数据
  let userList = await fs.readFile()
  // 获取用户 id
  let uid = req.params.uid
  // 使用数组方法
  let index = userList.findIndex(item => item.id == uid)
  userList.splice(index, 1)
  // 写入到文件中
  fs.writeFile(userList)
  // 注意 : 204 没有响应体
  res.status(204).send('')
})

all 和 use 的定义 :

// 接受所有的http请求动作  all / use  
// all 一般不推荐使用
// all 路径匹配是 精确匹配，只有和参数1中的路径一致才进行匹配
app.all('/api', (req, res) => {
  res.send(`Api接口文档---` + req.method)
})

// 模糊匹配，参数1的意思，请求pathname以/api开头的则匹配成功
// use 正是因为这样的特性，所以可以用来 拦截请求(中间件)
app.use('/api', (req, res) => {
  res.send(`Api接口文档---` + req.method)
})

// 可以用 use / all 来实现访问页面404处理
// 上面所有的请求如果都没有匹配成功，则 * 全部匹配成功
app.all('*', (req, res) => {
  res.send('404')
})

// 参数1不写，表示所有的请求动作和路径我都能匹配成功
app.use((req,res)=>{
  res.send('404!')
})

1.3.3、模块化路由

在开发项目时，如果将所有的路由规则都挂载到入口文件中，程序编写和维护都变的更加困难。所以 express 为了路由的模块化管理功能，通过 express.Router( ) 方法创建路由模块化处理程序，可以将不同业务需求分开到不同的模块中，从而便于 代码的维护和项目扩展 。

路由模块化处理可以分为以下步骤来完成

创建独立 js 空白文件 ( 最后是统一放在一个目录下 )
在 js 中使用 express.Router( ) 方法创建 路由模块对象
使用路由对象完成路由规则的对应的业务编写
使用模块化导出 ( module.exports = router )
在主入口文件中能过 app.use 方法来注册定义的路由模块

自动化实现路由导入 :

// 得到路由对象
const router = require('express').Router()
// path 模块用于处理文件和目录(文件夹)的路径
const path = require('path')
// 引入对应的方法, fs 模块提供了用于与文件进行交互相关方法
const fs = require('fs')
// 路由目录
let routerDir = path.resolve('./router/routes')
// 读取当前目录下面的文件列表
let dirs = fs.readdirSync(routerDir, 'utf-8')
// 把目录下面的文件时行路径的映射
dirs = dirs.map(item => './routes/' + item)
// 循环来导入到路由中
dirs.forEach(item => {
  router.use('/api', require(item))
})
/* // 用户
router.use('/api', require('./routes/userRouter'))
// 新闻
router.use('/api', require('./routes/newsRouter')) */
module.exports = router

路由模块化 :

1.4、中间件

1.4.1、中间件理解

中间件( 拦截器 )可以理解为业务流程的中间处理环节。( 允许我们可以进行切片编程 )

如生活中一般吃炒青菜，大约分为如下几步骤 :

express中当一个请求到达的服务器之后，可以在给客户响应之前连续调用多个中间件，来对本次请求和返回响应数据进行处理。(middleware)

1.4.2、中间件分类

中间件可以分类可分如下几类

内置中间件也就是express本身自带无带npm安装
第三方中间件

非 Express 官方内置的，而是由第三方开发出来的中间件，叫做第三方中间件。在项目中可以通过 npm 进行安装第三方中间件并配置，从而提高项目的开发效率。例如 body-parser 此中间件可以很方便帮助我们获取到 post 提交过来的数据。

自定义中间件开发者自己编写的

1.4.3、自定义中间件

自定义中间件，其本质就是定义一个处理请求的函数，只是此函数中除了有 request 和 response 参数外还必须包含一个 next 参数，此参数作用让中间件能够让流程向下执行下去直到匹配到的路由中发送响应给客户端。也可以通过给 request 对象添加属性来进行中间件数据的向下传递

function mfn ( req, res, next ) {

// 中间件最后一定要执行此函数，否则程序无法向下执行下去

next( )

}

使用中间件来实现错误的统一处理,即错误级别中间件

1.4.4、内置中间件

express 也提供了好用的内置中间件，如提供一个 静态资源管理 的中间件，通过此中间件就可以帮助为我们快速搭建一个静态资源服务器

app.use ( express.static ( '托管目录地址' ) )

1.4.5、第三方中间件

express 搭建的 web 服务器中想要接受表单中的 post 数据可以通过第 3 方中间件帮助解析获取post 数据 body-parser

普通 post 接受

安装 $ => npm i -S body-parser
通过中间件调用 app.use ( body.urlencoded( { extended: false } ) ) ，在匹配的路由中通过 req.body 获数 post 中数据

创建 application/x-www-form-urlencoded 解析

在匹配的路由中通过 req.body 获数 post 中数据

文件上传

安装 $ => npm i -S multer

使用 :

// var upload = multer({ dest: 'www/uploads/' })

var storage = multer.diskStorage({

  destination: function (req, file, cb) {

    cb(null, 'www/uploads/')

  },

  filename: function (req, file, cb) {

    cb(null, Date.now() + '-' + file.originalname)

  }

})

var upload = multer({ storage: storage })

router.post(路径，upload.single(表单项名称),(req,res)=>{})

router.post(路径，upload.array(表单项名称),(req,res)=>{})

// 获取数据

req.file/files

1.5、cookie 和 session

1.5.1、cookie

HTTP 是一个无状态协议，客户端每次发出请求时候，下一次请求得不到上一次请求的数据，我们如何将上一次请求和下一次请求的数据关联起来呢？如用户登录成功后，跳转到其他页面时候，其他的页面是如何知道该用户已经登录了呢？此时就可以使用到 cookie 中的值来判断用户是否登录，cookie 可以保持用户数据。

cookie它是一个由浏览器和服务器共同协作实现的(cookie是存储于浏览器中)。cookie分为如下几步实现：

1.5.2、session

cookie 操作很方便，但是使用 cookie 安全性不高，cookie 中的所有数据存储在客户端浏览器中，数据很容易被伪造；所以一些重要的数据就不能放在 cookie 当中了，并且 cookie 还有一个缺点就是不能存放太多的数据，一般浏览大约在 4 k 左右，为了解决这些问题，session 就产生了，session 中的数据保留在服务端的。

把数据放到 cookie 中是不安全的，我们可以在 cookie 中存放一个 sessionId 值, 该 sessionId 会与服务器端之间会产生映射关系，如果 sessionId 被篡改的话，那么它就不会与服务器端数据之间产生映射，因此安全性就更好，并且 session 的有效期一般比较短，一般都是设置是 20 分钟左右，如果在 20 分钟内客户端与服务端没有产生交互，服务端就会将数据删除。

express 中操作的 cookie 使用 cookie-seesion 模块 npm i -S cookie-session

const express = require('express');
const session = require('cookie-session');
const app = express();

app.use(session({
  name: 'sessionId',
  // 给 sessionid 加密的 key, 随便填写s
  secret: 'afsfwefwlfjewlfewfef',
  //maxAge: 20 * 60 * 1000 // 20分钟
}));

app.get('/, (req, res) => {
  if(!req.session['view']){
    req.session['view'] = 1;
  }else{
    req.session['view']++;
  }
  res.send(`欢迎您第 ${req.session['view']} 次访问！`);
})
app.listen(3000)

图例 :

跳转链接 : NodeJs_01 _ 学习笔记

跳转链接 : NodeJs_02 _ 学习笔记

跳转链接 : NodeJs_04 _ 学习笔记

雨季mo浅忆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
NodeJs_03 _ 学习笔记

目录目标一、web服务器1.1、get数据获取1.2、post数据获取1.3、浏览器缓存跳转链接 :NodeJs_01_ 学习笔记跳转链接 :NodeJs_02 _ 学习笔记目标接受get或post数据设置好图片浏览器缓存能够编写运行express静态服务器能够在express中获取get和url路由参数能够模块化拆分请求路由能够自定义中间件引入第3方中间件为express使用能够读写cookie和session一、web服务器...
复制链接

扫一扫