一幅长文细学node.js——一幅长文系列

已于 2022-08-13 12:08:58 修改
阅读量737 收藏 9
点赞数 3
分类专栏： 前端 文章标签： node.js javascript 前端
于 2022-08-13 12:08:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengyuhaomei520/article/details/126317782
版权

文章目录

1 Node.js概述

1.1 初识Node.js

后端开发可以使用Java、Python、PHP，但JavaScript也可以做后端开发，但要借助node.js这个运行环境。


1.2 Node.js简介

Node.js是一个基于Chrome V8引擎的JS运行环境。

浏览器是JS的前端运行环境

Node.js是JS的后端运行环境

Node.js无法调用DOM和BOM等浏览器内置API


1.3 Node.js安装

官网：Node.js (nodejs.org)

查看Nodejs版本：node -v


1.4 使用Node.js运行JS代码

（一）写入下面代码

console.log("hello Node.js");

（二）在项目下按shift+右键点击PowerShell打开终端，输入node 文件路径即可。


2 fs文件系统模块

2.1 读取文件

// // 1.请求模块
// const fs = require('fs');
// // 2.读取文件 read(path[,options],callback)
// fs.readFile('./2_1.txt','utf8',function(err,dataStr){
//     // 打印读取失败后的结果
//     console.log(err);
//     console.log('------');
//     // 打印读取成功后的结果
//     console.log(dataStr);
// })


// 改良代码
// 1.请求模块
const fs = require('fs');
// 2.读取文件 read(path[,options],callback)
fs.readFile('./2_1.txt','utf8',function(err,dataStr){
    // 打印读取失败后的结果
    if (err) {
        console.log('文件读取失败：'+err);
    }
    // 打印读取成功后的结果
    else{
        console.log('文件读取成功,文件内容是：'+dataStr);
    }
})

2.2 写入文件

const fs = require('fs');
// 1.文件不存在时，使用node的API可以使得先创建文件然后再写入数据
// 2.指定编码是可选的，默认为utf-8
fs.writeFile('./2_1_2.txt','abcd',function(err){
    if(err) console.log('文件写入失败'+err.message);
    else console.log('文件写入成功');
})

2.3 路径问题

我们在上面文件的读取和写入过程中，路径使用的都是相对路径，但是如果我们的node不是位于文件下使用shell执行js的话，则代码会报错。比如我js代码中写的是./2_1_2.txt。我位于C:\UserWorkstation\代码\Node下执行shell指令是没问题的，因为路径会被拼接为node C:\UserWorkstation\代码\Node\2_1_2.txt。但是如果你不在Node目录下执行shell指令，则会拼接失败。

解决方法是在JS代码中使用绝对路径而不是相对路径，这样就可以避免路径动态拼接错误问题。


3 Path路径模块

3.1 Path模块概述

path模块是由Nodejs官方提供的、用来处理路径的模块，它提供了一系列的方法和属性，用来满足于用户对路径的处理需求。


3.2 路径拼接

// C:\UserWorkstation\代码\Node

// 1.导入path包
const fs = require('fs')
const path = require('path')
// 2.拼接路径 拼接时若包含有../，则它的拼接后路径所处的上一层会被抵消
const pathStr = path.join('C:','../UserWorkstation/我是要被抵消的路径片段','../','代码')
console.log(pathStr);


//3 读取文件采用join方法来读取
fs.readFile(path.join(__dirname,'/3_2.txt'),'utf-8',function(err,dataStr){
    if(err) console.log(err);
    else console.log(dataStr);
})

3.3 获取路径的文件名

const fs = require('fs')
const path = require('path')

// 1.获取路径中的文件名
const fpath = 'C:/UserWorkstation/代码/Node/3_3.js'
var fullName = path.basename(fpath)
console.log(fullName);

// 2.去掉文件末尾扩展名
var nameWithoutExt = path.basename(fpath,'.js')
console.log(nameWithoutExt);

4 Http模块

4.1 Http概述

客户端：在网络节点中，负责消费资源的电脑

服务器：负责对外提供网络资源的电脑

电脑变服务器：只需使用Node.js官方提供的http模块即可把自己的电脑变成Web服务器。


4.2 服务器相关的概念

IP地址：互联网上每台计算机的唯一地址

IP地址格式：使用点分十进制表示成（a,b,c,d）的形式，其中a，b，c，d都是0~255之间的十进制整数。例如：192.168.1.1。

域名：IP和域名一一对应，对应关系存放在域名服务器(DNS)中。如https://www.baidu.com

本机IP和本机域名：127.0.0.1为本机域名，localhost为本机域名。

端口号：一台服务器上可以有多个服务，端口号和服务一一对应。80端口是可以省略不写的。


4.3 创建Web服务器!!!

// 1.导入Http模块
const http = require('http')
// 2.创建web服务器实例
const server = http.createServer()
// 3.为服务器实例绑定request请求，监听客户端请求
// req为请求对象，包含了客户端相关的数据和属性
server.on('request', (req, res) => {
    const url = req.url //客户端请求url
    const method = req.method //客户端请求方式
    const str = `你的请求url为${url},你的请求方法是${method}`
    console.log(str);

    // 调用res.send()方法，向客户端响应一些内容
    // 当调用res.send()方法会出现乱码，此时我们需要手动设置内容的编码格式
    res.setHeader('Content-Type', 'text/html; charset=utf-8')
    res.send(str)
})
// 4.启动服务器
server.listen(8080, () => {
    console.log('http server running at http://127.0.0.1:8080');
})

4.4 根据不同的url响应不同的html内容

const http = require('http')
const server = http.createServer()

server.on('request',(req,res)=>{
    // 1.获取请求的url地址
    const url = req.url
    // 2.设置默认的响应内容为 404 Not found
    let content = '404 Not found!'
    // 3.判断用户请求的是否为/或/indexe.html首页
    if(url == '/' || url == '/index.html'){
        content = '<h1>首页<h1>'
    }else if(url === '/about.html'){
        content = '<h1>关于页面</h1>'
    }
    // 4.设置响应头
    res.setHeader('Content-Type','text/html;charset=utf-8')
    // 5.发送内容给客户端
    res.end(content)
})

server.listen(80,()=>{
    console.log('server running at http://127.0.0.1');
})

5 模块化

5.1 模块化概述

模块化：解决一个复杂问题时，自顶向下把系统划分成若干模块的过程，对于整个系统来说，模块是可组合、分解和更换的单元。

编程领域中的模块化：遵守一定的规则，把一个大文件拆分成独立并互相依赖的多个小模块。

模块化规范：对代码进行模块化的拆分和组合时，需要遵守的基本规则。


5.2 Node.js的模块化

模块分类

内置模块：Node.js官方提供的，如fs、path、http。

自定义模块：用户创建的每个.js文件

第三方模块：第三方开发的模块，使用前需下载


加载模块

使用require()方法加载即可，且模块的js后缀可省略。


模块作用域

与函数作用域类似，在自定义模块中定义的变量、方法等成员，只能在当前模块内被访问，这种模块级别的访问限制，叫做模块作用域。


module对象

每个模块中都存在一个module对象。

console.log(module);

module.exports对象
// 外界用require()方法导入自定义模块时，得到的就是module.exports所指向的对象
const m = require('./5_2_2_test')
console.log(m);

// 在自定义模块中，可以使用module.exports对象将模块内的成员共享出去给外界使用。
// 向module.exports 对象上挂载username属性
module.exports.username = 'zs'
// 向module.exports对象上挂载sayHello方法
module.exports.sayHello = ()=>{
    console.log('Hello!');
}

const age = 20
module.exports.age = age

exports对象

exports对象和module.exports对象是同一个对象，只是为了简化书写。如果同时存在exports和module.exports，require最终导入的还是以module.exports为准。

在以下的误区中，只要你清楚地认识对象即地址和深浅拷贝原理，就不难理解。

为了防止混乱，不建议在同一个模块中使用exports和module.exports，这样就巧妙地避开了这个问题。

误区一：

// exports和module.exports同时指向name
exports.name = "John"
// 通过赋值的形式，使得module.exports指向该对象所在的地址
module.exports = {
    gerder:'男',
    age:22
}

const m = require('./5_2_3_test')
// module.exports所在地址的对象中只有两个属性，没有name
console.log(m);

误区二：

// 往exports所在地址的对象中添加name属性
exports.name = 'ArimaMisaki'
// 往module.exports所在地址的对象中添加age属性
module.exports.age = 12

const m = require('./5_2_4_test')
// 所得结果应为两个属性，应为exports和module.exports最初是指同一个对象
console.log(m);

误区三：

// exports指向包含username,gender的对象地址
exports = {
    username:'zs',
    gender:'男'
}

// module.exports指向了exports所在的地址
module.exports = exports
// exports往该地址的对象中添加了属性
module.exports.age = 22

const m = require('./5_2_5_test')
// 最终结果有三个属性
console.log(m);

模块化规范
  • CommonJS规定了Node.js的模块化规范
  • 每个模块内部，module变量代表当前模块
  • module变量是一个对象，它的exports属性是对外的接口
  • 加载某个模块，其实是加载该模块的module.exports属性，require()方法用于加载模块

5.3 npm和包

包

第三方模块就是包，其基于内置模块封装出来的。

Node.js的内置模块仅提供了一些底层的API，导致基于内置模块进行项目开发时效率很低。

全球最大的包共享平台：https://www.npmjs.com

下载包的服务器：https://registry.npmjs.org

下载包的网址是无法直接打开的，但是我们可以通过node.js自带的包管理工具Node Package Manager来下载包。通过npm -v可以查看这个工具的版本号。


Npm初体验

格式化时间的传统做法

利用npm格式化时间

  1. 使用npm i moment下载第三方包moment
  2. 使用require()导入
  3. 使用moment的官方API对时间进行格式化
// 1.导入包
const moment = require('moment')
// format中写入你想要的时间格式
const dt = moment().format('YYYY-MM-DD HH:mm:ss')
console.log(dt);

Npm下载的其他问题

使用npm下载后项目多出的文件

  • node_modules：用于存放所有已安装到项目中的包
  • package_lock.json：记录package.json下每一个包的下载信息，例如包的名字、版本号、下载地址等
  • package.json：用于记录项目中用到的包

使用npm进行下载

  • 安装命令：npm i/install 包名[@指定版本]
  • 卸载命令：npm uninstall 包名

包的语义化版本规范

以2.24.0为例

  • 第一位数字：大版本
  • 第二位数字：功能版本
  • 第三位数字：Bug修复版本

多人协作问题

上传方：在上传源代码时，第三方包可能过大，导致源代码总体变大。解决的方案是删除node_modules或者将其添加到.gitgnore忽略文件中，保留package.json和package_lock.json以方便查看包信息。

接收方：接收方下载源码，依靠package.json提供的信息，可以使用命令npm i一次性下载所有项目所需的包。


package.json中的节点
  • 如果包只在项目开发阶段用到，我们将包记录在devDependencies。使用npm i 包名 -D即可将包下载到该节点。
  • 如果包一直会被用到，则记录在dependencies。使用npm下载命令不添加-D参数即可。

解决包下载慢的问题

切换镜像源

npm下包时默认从国外的https://registry.npmjs.org服务器下载，这样经过海底光缆下载速度较慢。使用淘宝NPM镜像服务器可以解决这个问题。

  1. 查看当前的下包镜像源：npm config get registry
  2. 切换为淘宝镜像：npm config set registry=https://registry.npm.taobao.org
  3. 检查镜像源是否下载成功：npm config get registry

nrm

使用nrm可以快速查看和切换下包的镜像源

  1. 下载nrm工具：npm i nrm -g
  2. 查看自身所拥有的所有镜像源：nrm ls
  3. 切换镜像源：nrm use taobao

包的分类
  • 项目包：安装到node_modules的包
  • 开发依赖包：记录在devDependencies的包
  • 核心依赖包：记录在dependencies的包
  • 全局包：提供-g参数则会将包安装为全局包。全局包保存在C:\Users\用户\AppData\Roaming\npm\node_modules

推荐的包！

i5ting_toc：可以将md文档转为html文件


模块的加载机制

模块在第一次加载后就会被缓存，所以无需加载多次

内置模块的加载机制最高，这意味着node_modules有和内置模块同名的包时，默认优先加载内置模块

加载自定义模块时我们要写入相对路径，这样才不会被误以为是包，如果单纯写模块名，则系统会跑去node_modules开始寻找包，找不到包再去找自定义模块

如果没有指定node命令的后缀，则系统会按.js>.json>.node的方式依次填入后缀并尝试运行，如果都失败则报错


6 Express

6.1 Express概述

Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。

官网：Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档 | Express 中文网 (expressjs.com.cn)

本质：是一个第三方包

作用：用于创建Web服务器，相比于http模块来说更加强大

安装：npm i express


6.2 Express基本使用

// 1.导入包
const express = require('express')
// 2.创建web服务器
const app = express()
// 3.调用app.listen启动服务器
app.listen(8080,()=>{
    console.log('express server running at http://127.0.0.1:8');
})

6.3 监听Get和post请求

要完成监听，我们可以下载postman工具。当然，现在已经有浏览器内置扩展了，以edge为例：

image-20220809225454672

// 1.导入包
const express = require('express')
// 2.创建web服务器
const app = express()
// 3.调用app.listen启动服务器
app.listen(8080,()=>{
    console.log('express server running at http://127.0.0.1');
})
//4 监听get请求
app.get('/user',(req,res)=>{
    // 调用res.send方法，向客户端发送json对象数据
    res.send({name:'zs',age:20,gender:'男'})
})
//5 监听post请求
app.post('/user',(req,res)=>{
    // 调用res.send方法，向客户端响应一个文本字符串
    res.send('请求成功')
})
// 6 通过req.query获取客户端发送过来的查询参数
app.get('/',(req,res)=>{
    // 默认是一个空对象
    console.log(req.query);
    res.send(req.query)
})
// 7 通过req.params可以访问URL中通过:匹配到的动态参数
// :一定要，表示动态匹配，id表示动态值的键，可以自己命名。
// 我们可以通过:id/:name书写多个动态参数匹配
app.get('/user/:id/:name',(req,res)=>{
    console.log(req.params);
    res.send(req.params)
})

image-20220809225657823

image-20220809230706010

image-20220809231423695


6.4 托管静态资源

image-20220809233256208

// 1.导入包
const express = require('express')
const path = require('path')
// 2.创建web服务器
const app = express()
// 3.express提供了express.static()来创建一个静态资源服务器
// 如果有多个静态资源目录，只需调用多次static即可
// 访问静态资源文件时，express.static()函数会根据多个静态资源目录顺序查找所需文件
app.use(express.static('./public'))
// 通过这种方式创建的静态服务器我们已经指定托管静态资源的文件夹，故url中无需输入\public
// 如访问9.jpg，我们只需http://127.0.0.1:8080/9.jpg，而不是http://127.0.0.1:8080/public/9.jpg
// 如果希望出现public，可以通过以下方式挂载
// app.use('./public',express.static('public'))

// 4.调用app.listen启动服务器
app.listen(8080,()=>{
    console.log('express server running at http://127.0.0.1');
})

image-20220809233409209


6.4 使用nodemon

  • 在前面的源码修改中，我们一旦修改代码就必须将服务器关掉重启非常麻烦，为此，nodemon为我们带来了福音。
  • nodemon可以监听项目文件，当源码修改，则自动重启服务器。
  • 通过npm i -g nodemon可以下载该工具。
  • 以后启动项目时，采用nodemon 文件名来启动服务器。

6.5 路由

路由的使用
const express = require('express')
// 路由格式：app.METHOD(PATH,HANDLER)
// 当定义了多个路由，我们会按定义的顺序来匹配路由。
// 匹配必须是请求方式和url同时满足才可匹配成功，一旦匹配成功则不会继续匹配下去

const app= express()

// 挂载路由
app.get('/',(req,res)=>{
    res.send('hello world')
})

app.post('/',(req,res)=>{
    res.send('Post Request')
})

app.listen(8080,()=>{
    console.log('server running at http://127.0.0.1:8080');
})

模块化路由
// 自定义路由模块的书写
// 1. 导入express
const express = require('express')
// 2. 创建路由对象
const router = express.Router()
// 3. 挂载具体的路由
router.get('/user/list',(req,res)=>{
    res.send('Get user list')
})

router.post('/user/add',(req,res)=>{
    res.send('Add user list')
})
// 4.向外导出路由
module.exports = router

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

// 1.导入自定义路由模块
const router = require('./6_5_2_routemodule')
// 2.注册路由模块
app.use(router)
// 可以像使用托管静态资源那样给路由前缀
// app.use('/api',router)

app.listen(8080,(req,res)=>{
    console.log('server running at http://127.0.0.1:8080');
})

6.6 中间件

中间件的调用流程

当一个请求到达Express的服务器之后，可以连续调用多个中间件来对这次请求进行预处理。

image-20220810123113875


中间件的格式

Express的中间件本质上就是一个function函数。格式如图所示：

image-20220810123325198

需要注意的是，中间件函数的形参列表中，必须包含next参数，而路由处理函数中只包含req和res。


next函数的作用

next函数是实现多个中间件连续调用的关键，它表示把流转关系转交给下一个中间件或路由。


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

// // 1.定义一个中间件函数
// const mw = function(req,res,next){
//     console.log('一个简单的中间件函数');
//     next()
// }

// // 2.将mw注册为全局生效的中间件
// app.use(mw)

/* 简化写法 */
app.use((req,res,next)=>{
    console.log('一个简单的中间件函数');
    next()
})

// 此后，我们定义的任何路由都会结果中间件的处理后再生效
app.get('/',(req,res)=>{
    res.send('Home page')
})

app.get('/user',(req,res)=>{
    res.send('User page')
})

app.listen(8080,(req,res)=>{
    console.log('server running at http://127.0.0.1:8080');
})

中间件的作用

多个中间件之间共享同一份req和res。基于这样的特性，我们可以在上游的中间件中，统一为req和res添加一些自定义属性和方法，供下游使用。

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

app.use((req,res,next)=>{
    // 为req对象挂载自定义属性，从而把时间共享给后面的所有路由
    const time = Date.now()
    req.startTime = time
    next()
})

// 欲在中间件中访问时间
app.get('/',(req,res)=>{
    res.send('Home page'+req.startTime)
})

app.get('/user',(req,res)=>{
    res.send('User page'+req.startTime)
})

app.listen(8080,()=>{
    console.log('server running at http://127.0.0.1:8080');
})

定义多个中间件
const express = require('express')
const app = express()

// 定义第一个全局中间件
app.use((req,res,next)=>{
    console.log('调用了第一个全局中间件');
    next()
})

// 定义第二个全局中间件
app.use((req,res,next)=>{
    console.log('调用了第二个全局中间件');
    next()
})

app.get('/user',(req,res)=>{
    res.send('User page')
})

app.listen(8080,()=>{
    console.log('server running at http://127.0.0.1:8080');
})

局部生效的中间件

不使用app.use()定义的中间件叫做局部生效的中间件。

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

// 定义局部中间件
const mw = (req,res,next)=>{
    console.log('局部中间件被执行');
}

// 没有挂载中间件的路由
app.get('/',(req,res)=>{
    res.send('Home page')
})

// 挂载了局部中间件的路由
app.get('/user',mw,(req,res)=>{
    res.send('User page')
})

app.listen(8080,()=>{
    console.log('server running at http://127.0.0.1:8080');
})

说明：定义多个局部中间件在get请求里按顺序添加中间件常量名作为参数即可。


中间件的注意事项
  • 必须在定义路由之前定义中间件
  • 客户端发送过来的请求可以连续调用多个中间件进行处理
  • 执行完中间件的业务代码之后，不要忘记调用next()函数
  • 为了防止代码混乱，next()后不要再写代码
  • 连续调用多个中间件，多个中间件之间共享req和res对象

中间件的分类

应用级别中间件：通过app.use()或app.get()或app.post()绑定到app实例上的中间件。

路由级别中间件：绑定到express.Router()实例上的中间件，用法和应用级别中间件无区别

错误级别中间件：本质是一个拦截器，用于捕获整个项目中发生的异常错误，从而防止项目异常奔溃

Express内置中间件：

  • express.static：静态资源内置中间件
  • express.json：解析json格式的请求体数据，有兼容性，仅在4.16.0+可用
  • express.urlencoded：解析url-encoded格式的请求体数据，有兼容性，仅在4.16.0+可用

第三方的中间件：在express@4.16.0之前，我们经常使用body-parser第三方中间件来解析数据。

  1. 运行npm install body-parser安装中间件
  2. 使用require导入中间件
  3. 调用app.use()注册并使用中间件

错误级别中间件演示
const express = require('express')
const app = express()

app.get('/',(req,res)=>{
    // 人为制造错误
    throw new Error('服务器内部发生了错误')
    // 此时send不会执行，因为上一句代码出现问题
    res.send('Home Page')
})

// 定义错误级别中间件捕获整个项目的异常错误，从而防止程序崩溃
// 错误中间件必须放在所有路由之后才能捕获错误
app.use((err,req,res,next)=>{
    console.log('发生错误！'+err.message);
    res.send('Error：'+err.message)
})

app.listen(8080,()=>{
    console.log('server running at http://127.0.0.1:8080');
})

内置中间件演示

express.json演示

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

// 除了错误级别的中间件，其他的中间件必须在路由之前进行配置
// express.json：解析json格式的请求体数据，有兼容性，仅在4.16.0+可用
app.use(express.json())

app.post('/user',(req,res)=>{
    // req.body可用于接收客户端发送的请求体数据
    // 在没有配置解析表单数据的中间件时，req.body默认为undefined
    console.log(req.body);
    res.send('ok')
})

app.listen(8080,()=>{
    console.log('server running at http://127.0.0.1:8080');
})

image-20220810140447213

image-20220810140503117


express.urlencoded演示

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

// 除了错误级别的中间件，其他的中间件必须在路由之前进行配置
// express.json：解析json格式的请求体数据，有兼容性，仅在4.16.0+可用
// 配置解析application/x-www-form-urlencoded格式数据的内置中间件
app.use(express.urlencoded({extended:false}))

app.post('/user',(req,res)=>{
    // req.body可用于接收客户端发送的请求体数据
    // 在没有配置解析表单数据的中间件时，req.body默认为undefined
    console.log(req.body);
    res.send('ok')
})

app.listen(8080,()=>{
    console.log('server running at http://127.0.0.1:8080');
})

image-20220810140810334

image-20220810140917973


6.7 接口

// 路由模块
const express = require('express')
const router = express.Router()

router.get('/get',(req,res)=>{
    // 通过req.query获取客户端通过查询字符串，发送到服务器的数据
    const query = req.query
    res.send({
        status:0,
        msg:'Get请求成功',
        data:query
    })
})

router.post('/post',(req,res)=>{
    const body = req.body
    res.send({
        status:0,
        msg:'POST请求成功',
        data:req.body
    })
})

module.exports = router

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

app.use(express.urlencoded({extended:false}))

//导入路由模块
const router = require('./6_7_1_router')
app.use('/api',router)

app.listen(8080,(req,res)=>{
    console.log('server running at http://127.0.0.1:8080');
})

6.8 跨域

基于cors解决接口跨域问题

以上编写的GET和POST接口存在的问题是不支持跨域请求。为此，我们有以下两种方案可用于解决：

  • CORS
  • JSONP（不支持get请求）

CORS(Cross-Origin Resource Sharing，跨域资源共享)是Express的一个第三方中间件，其由一系列HTTP响应头组成，这些HTTP响应头决定浏览器是否阻止前端JS代码跨域获取资源。

浏览器的同源安全策略默认会阻止网页跨域获取资源，但如果接口服务器配置了CORS相关的HTTP响应头，就可以解除浏览器端的跨域访问限制。

image-20220810170302023

通过安装和配置cors中间件，可以很方便地解决跨域问题。。

  1. 运行npm i cors安装中间件
  2. 使用const cors = require(‘cors’)导入
  3. 使用app.use(cors())配置中间件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
</head>
<body>
    <button id="btn-get">GET</button>
    <button id="btn-post">POST</button>

    <script>
        $('#btn-get').on('click',()=>{
            $.ajax({
                type:'GET',
                url:'http://127.0.0.1:8080/api/get',
                data:{name:'zs',age:23},
                success:(res)=>{
                    console.log(res);
                }
            })
        })

        $('#btn-post').on('click',()=>{
            $.ajax({
                type:'POST',
                url:'http://127.0.0.1:8080/api/post',
                data:{bookname:'水浒传',author:'施耐庵'},
                success:(res)=>{
                    console.log(res);
                }
            })
        })
    </script>

</body>
</html>

image-20220810170758894

此时出现跨域问题，我们可以在服务器端配置cors。

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

app.use(express.urlencoded({extended:false}))

const cors = require('cors')
app.use(cors())

//导入路由模块
const router = require('./6_7_1_router')
app.use('/api',router)

app.listen(8080,(req,res)=>{
    console.log('server running at http://127.0.0.1:8080');
})

image-20220810170819686


CORS响应头

Access-Control-Allow-Origin

响应头部可以携带一个Access-Control-Allow-Origin字段。

Access-Control-Allow-Origin:<origin> | *

其中origin参数指定了允许访问该资源的外域URL。我们可以通过res.setHeader来设置请求头。

res.serHeader('Access-Control-Allow-Origin','*')

其中*表示通配符，表示接受任何域的请求。


Access-Control-Allow-Methods

默认情况下，CORS仅支持客户端发起GET、POST、HEAD请求。如果客户端希望通过PUT、DELETE等方式请求服务器的资源，则需要在服务器端，通过Access-Control-Allow-Meethods来指明实际请求所允许使用的HTTP方法。


7 数据库

7.1 数据库模块的安装及配置

安装mysql模块

npm i mysql


配置mysql模块

先创建一个数据库

image-20220810190747298

在VC中写入代码

// 1.导入mysql模块
const mysql = require('mysql')
// 2.建立与MySQL数据库的连接关系
const db = mysql.createPool({
    host:'127.0.0.1',//数据库IP地址
    user:'root',//登录数据库的账号
    password:'943073123',//登录数据库的密码
    database:'nodejs_test'//指定操作哪个数据库
})

// 测试mysql模块是否正常工作
db.query('select 1',(err,results)=>{
    if(err) return console.log(err.message);
    console.log(results);
})

执行，若返回结果如下图则成功

image-20220810191146265


7.2 数据库基本操作

查询和插入数据

image-20220810203501487

const mysql = require('mysql')
const db = mysql.createPool({
    host:'127.0.0.1',
    user:'root',
    password:'943073123',
    database:'nodejs_test'
})

// 1.查询
db.query('select * from user',(err,results)=>{
    if(err) console.log('Error:'+err.message);
    else console.log(results);
})

// 2.插入数据
// 定义要插入user的数据对象
const u1 = {username:'ls',password:'13695'}
// 执行sql语句,?位表示占位符，防止sql注入
const sqlStr = 'insert into user (username,password) values (?,?)'
// 使用数组的形式依次为?指定具体的值
db.query(sqlStr,[u1.username,u1.password],(err,results)=>{
    if(err) console.log('Error:'+err.message);
    if(results.affectedRows === 1) console.log('插入数据成功');
})

插入数据的便捷方式

向表中新增数据时，如果数据对象的每个属性和数据表字段一一对应，则可以通过如下方式快速插入数据，这里不再演示，如下图：

image-20220810204918804


更新数据
const mysql = require('mysql')
const db = mysql.createPool({
    host:'127.0.0.1',
    user:'root',
    password:'943073123',
    database:'nodejs_test'
})

// 1.准备要更新的数据对象
const u1 = {username:'aaa',password:'000',updateUsername:'ls'}
// 2.要执行的sql语句
const sqlStr = 'update user set username = ? , password = ? where username = ?'
// 3.调用db.query()执行sql语句的同时，使用数组依次为占位符指定具体的值
db.query(sqlStr,[u1.username,u1.password,u1.updateUsername],(err,results)=>{
    if(err) console.log(err.message);
    if(results.affectedRows === 1) console.log('更新数据成功');
})

更新语句的快捷方式

同插入，这里不再赘述。

image-20220810220652417


删除数据
const mysql = require('mysql')
const db = mysql.createPool({
    host:'127.0.0.1',
    user:'root',
    password:'943073123',
    database:'nodejs_test'
})

// 1.要执行的sql语句
const sqlStr = 'delete from user where username = ?'
// 3.调用db.query()执行sql语句的同时，使用数组依次为占位符指定具体的值
db.query(sqlStr,'zs',(err,results)=>{
    if(err) console.log(err.message);
    if(results.affectedRows === 1) console.log('删除数据成功');
})

标记删除

使用delete语句会把数据从表中删掉，为了保险起见，推荐使用标记删除的形式，来模拟删除的动作。

所谓的标记删除就是在表中设置status的状态字段，来标记当前这条数据是否被删除。

当用户执行了删除的动作时，我们并没有执行delete语句把数据删除掉，而是执行update语句，将这条数据的status字段标记为删除。


8 前后端身份认证

8.1 Web开发模式

服务端渲染开发

概念：服务器发送给客户端的HTML页面，是在服务器通过字符串的拼接动态生成的，因此，客户端不需要使用ajax这样的技术来额外请求页面的数据。

优点：前端耗时少，有利于SEO。

缺点：占用服务端资源，不利于前后端分离，开发效率低。


前后端分离开发

概念：依赖ajax，后端只负责提供API接口，前端使用ajax调用接口的开发模式。

优点：开发体验好，用户体验好，减轻了服务器端的渲染压力。

缺点：不利于SEO，但利用Vue和React的SSR可以解决这个问题。


8.2 身份认证

不同开发模式下的身份认证

服务端渲染：推荐使用Session认证机制

前后端分离：推荐使用JWT认证机制


HTTP协议的无状态性

HTTP协议无状态性指的是客户端的每次HTTP请求都是独立的，连续多个请求之间没有直接的关系，服务器不会主动保留每次HTTP请求的状态。


突破HTTP无状态的限制

使用Cookie可以突破这种限制。


8.3 Session认证机制

Cookie

Cookie是存储在用户浏览器中一段不超过4KB的字符串，它是一个名称、一个值和其他几个用于控制Cookie有效期、安全性、适用范围的可选属性组成。

不同域名下的Cookie各自独立，每当客户端发起请求时，会自动把当前域名下所有未过期的Cookie一同发送到服务器。

客户端第一次请求服务器的时候，服务器通过响应头的形式，向客户端发送一个身份认证的Cookie，客户端会自动将Cookie保存在浏览器中。

随后，当客户端浏览器每次请求服务器的时候，浏览器会自动将身份认证的Cookie通过请求头的形式发送给服务器，服务器可验明客户端的身份。

image-20220810225108701

image-20220810225235931


Cookie不具有安全性

Cookie存于浏览器，且浏览器也提供了读写Cookie的API，因此Cookie很容易被伪造，不具有安全性。因此不建议服务器将重要的隐私数据，通过Cookie的形式发送给服务器。


提高身份认证的安全性

为了防止Cookie被伪造，我们需要进行认证，而Cookie+认证的设计理念正是Session认证机制的精髓。


Session认证原理

image-20220810225838319


Session的使用

下载：npm i express-session

配置：通过app.use()来注册该中间件

const session = require('express-session')
app.use(
  session({
    secret: 'Bruce', // secret 的值为任意字符串
    resave: false,
    saveUninitalized: true,
  })
)

向session中存数据：

app.post('/api/login', (req, res) => {
  req.session.user = req.body
  req.session.isLogin = true

  res.send({ status: 0, msg: 'login done' })
})

向session中取数据

app.get('/api/username', (req, res) => {
  if (!req.session.isLogin) {
    return res.send({ status: 1, msg: 'fail' })
  }
  res.send({ status: 0, msg: 'success', username: req.session.user.username })
})

清空session

app.post('/api/logout', (req, res) => {
  // 清空当前客户端的session信息
  req.session.destroy()
  res.send({ status: 0, msg: 'logout done' })
})

8.4 JWT认证机制

Session的局限性

Session认证需要配合Cookie才能实现。由于Cookie默认不支持跨域访问，所以当涉及到前端跨域请求后端接口的时候需要做很多额外的配置，才能实现跨域Session认证。

  • 当前端请求后端接口不存在跨域问题的时候，推荐使用Session身份认证机制。
  • 当前端需要跨域请求后端接口的时候，不推荐使用Session身份认证机制，推荐使用JWT认证机制。

JWT工作原理

JWT(Json Web Token)是目前最流行的跨域解决方案，其工作原理如下：

image-20220810235131092

总结就是：用户的信息通过Token字符串的形式保存在客户端浏览器中，服务器通过还原Token字符串的形式来认证用户的身份。


JWT组成部分

JWT通常由三部分组成，分别是Header、Payload、Signature。三者使用英文的.分隔。

image-20220811220935554

  • Header：安全性相关部分
  • Payload：真正的用户信息，它是用户信息经过加密之后生成的字符串
  • Signature：安全性相关部分

JWT使用方式

客户端受到服务器返回的JWT时候，通常会将其存储在localStorage或sessionStorage中。此后，服务器每次与服务端通信，都要带上这个JWT的字符串，从而进行身份验证。推荐的做法是把JWT放在HTTP请求头的Authorization字段中。

格式：Authorization: Bearer<token>


JWT的安装

安装：npm i jsonwebtoken express-jwt

说明:

  • jsonwebtoken：用于生成JWT字符串
  • express-jwt：将JWT字符串解析还原为JSON对象

定义secret秘钥

为了保证JWT字符串的安全性，防止JWT字符串在网络传输过程中被别人破解，我们需要专门定义一个用于加密和解密的secret秘钥：

  1. 当生成JWT字符串的时候，需要使用secret秘钥对用户的信息进行加密，最终得到加密好的JWT字符串。
  2. 当把JWT字符串解析还原为JSON对象的时候，需要使用secret秘钥进行解密。

在登录后生成JWT字符串

调用jsonwebtoken包提供的sign方法，将用户的信息加密成JWT字符串，响应给客户端。

导入jwt包

const jwt = require('jsonwebtoken')
const expressJWT = require('express-jwt')

// 密钥为任意字符串
const secretKey = 'Bruce'

生成 JWT 字符串

app.post('/api/login', (req, res) => {
  ...
  res.send({
    status: 200,
    message: '登录成功',
    // jwt.sign() 生成 JWT 字符串
    // 参数：用户信息对象、加密密钥、配置对象-token有效期
    // 尽量不保存敏感信息，因此只有用户名，没有密码
    token: jwt.sign({username: userInfo.username}, secretKey, {expiresIn: '10h'})
  })
})

JWT 字符串还原为 JSON 对象

/ unless({ path: [/^\/api\//] }) 指定哪些接口无需访问权限
app.use(expressJWT({ secret: secretKey }).unless({ path: [/^\/api\//] }))

获取用户信息

app.get('/admin/getinfo', (req, res) => {
  console.log(req.user)
  res.send({
    status: 200,
    message: '获取信息成功',
    data: req.user,
  })
})

捕获解析JWT失败后产生的错误

app.use((err, req, res, next) => {
  if (err.name === 'UnauthorizedError') {
    return res.send({ status: 401, message: 'Invalid token' })
  }
  res.send({ status: 500, message: 'Unknown error' })
})


ArimaMisaki
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
怎么样成为一个优秀的互联网BD（长文慎入）
02-26
BD，是一个英文缩写，全名为BussinessDevelopment。翻译成中文就是商务拓展。我相信任何一个中国人都不难从商务拓展这几个字看出BD的含义和意思，拓展，就是在原有关系上加深关系，比如你把你女朋友稍微拓展下，没准...
信号检测与估计曲长文2016年版.rar
12-16
曲长文2016年版的教材深入浅出地讲解了这一领域的核心概念和技术。以下是该书可能涵盖的一些关键知识点： 1. **信号与噪声**：在通信系统中，信号是携带信息的物理量，而噪声则是随机干扰，它们混杂在一起，使得...
时间序列模型——ARIMA模型实现预测
pumpkin96的博客
06-22 6825
这次接触到的算法为时序模型。数据比较复杂，且没有明显的规律。时序图在前期比较规律，成周期性上升，之后出现了断点，之后的数据呈不规律的现象。由于刚开始对时序模型了解不够，因此刚上手时，就直接对整个时期的数据进行ARIMA处理，而没有认真分析数据的周期性和基本走向。在得到指点之后，对前期比较规律的数据进行处理和预测。但是采用该模型得到的预测结果过于平缓，与实际的数据有较大的差距，因此，在前期的基础上采用了时序模型的因子预测（baseline）。............
npm安装并配置环境变量（安装node.js）
雨云21的博客
01-05 6283
npm命令通过安装node.js实现 node.js官网：https://nodejs.org/en/ 下载安装包后换个路径或者用默认路径，然后直接下一步，直到完成 然后再cmd中输入命令查看 接下来就是配置环境变量 运行命令：在node目录下生成两个目录 npm config set prefix "D:\Program Files\nodejs\node_global" npm config set cache "D:\Program Files\nodejs\node_cache" 然后使用命令
node安装后的设置(node_global和node_cache) - windows
热门推荐
scorpio_meng的博客
10-23 6万+
之前安装node后就进行了demo的测试和学习，从网上拉取包的有时候不知道放在什么地方了，c盘也有，当前项目目录也有，挺乱的。 使用npm安装模块分为本地安装和全局安装。 本地安装：npm install express 会安装到当前项目 全局安装：npm install express -g 会安装到指定的目录(node_global) 另外，如果没有设置全局目录node_glo...
一幅长文细学JavaScript（三）——DOM
弄鹊
08-15 673
JsDOM的使用
产品需求-深度长文(一)什么是产品架构.pdf
12-17
【产品架构】是构建产品的一种框架，它定义了产品的各个组成部分及其相互关系，旨在支持产品的功能、性能和稳定性。在IT行业中，特别是针对B端（企业级）产品，产品架构显得尤为重要，因为它需要紧密贴合业务需求，...
产品需求-深度长文(一)什么是产品架构.docx
12-17
产品架构在IT行业中是至关重要的一个概念，尤其在软件开发和产品设计中，它是指产品的基本构造和组织方式，是产品的骨架和核心组成部分。产品架构的设计不仅决定了产品的功能分布、性能表现，还影响到产品的可扩展性...
【Node.js】调试 Node.js 程序
小秀的博客
07-21 342
调试 Node.js 程序可以使⽤以下⽅法：
【Node.js基础04】node.js模块化
大前端开发工程师、互联网方向创业者
07-21 355
简要语言阐述node.js中模块化是什么，以及CommonJS标准和ECMAScript标准两种导入和导出方式
WEB前端09-前端服务器搭建(Node.js/nvm/npm)
XYX_888的博客
07-21 1103
前端服务器的搭建 在本文中，我们将介绍如何安装和配置 nvm（Node Version Manager）以方便切换不同版本的 Node.js，以及如何设置 npm（Node Package Manager）使用国内镜像，并搭建一个简单的前端服务器。 1.Node.js简介 什么是 Node.js？ Node.js 是一个基于 Chrome V8 引擎构建的 JavaScript 运行时，允许开发者在服务器端运行 JavaScript 代码。特别适用于需要处理大量并发连接的应用程序。与传统的服务器端技术不同，
Next.js静态导出与动态路由优化
天涯学馆
07-20 1053
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 409
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
【React 】开发环境搭建详细指南
最新发布
lph159的博客
07-24 838
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 997
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE中的重点*
qq_61132537的博客
07-22 898
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 987
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
长文图文:0.500:3.800;其他:0.500:3.800是什么类型
06-13
您提到的"长文图文:0.500:3.800;其他:0.500:3.800"看起来像是某种格式或者参数描述，但没有明确的上下文，它可能指的是不同类型的内容组织或排版规范。通常情况下，这种表达可能用于： 1. 长文本或文章的长度和格式要求：0.500到3.800可能是字数范围或者页面数，表示一篇内容的长度应在500到3800字之间，或者对应的图片、图表的大小范围。 2. 在多媒体项目中，0.500:3.800可能是时间范围，比如视频或音频剪辑的时间长度。 3. 在设计或网页布局中，这可能是图像与文字的大小比例或区域分配，比如图文混排中的图片占0.5到3.8个单位，文字占剩余部分。 要准确理解，需要更多的上下文信息，例如是用于哪种类型的文档（博客、报告、网站设计等）、具体软件或平台的规则，或者是某个特定行业的术语。如果您能提供更多信息，我可以给出更详细的解释。有关这方面的问题，您可以考虑问： 1. 这种格式是在哪个领域或工具中使用的？ 2. 是否是指特定软件对文档内容的规定？ 3. 是否有例子说明如何应用这种格式来排版或设计？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ArimaMisaki

如果知识有用请我喝杯咖啡

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值