webpack
什么是 Webpack
官网
官方解释:webpack is a static module bundler for modern JavaScript applications.
翻译一下:webpack 是一个静态的模块化打包工具,为现代的 JavaScript 应用程序;
我们来对上面的解释进行拆解:
打包 bundler:webpack 可以将帮助我们进行打包,所以它是一个打包工具;
静态的 static:这样表述的原因是我们最终可以将代码打包成最终的静态资源(部署到静态服务器);
模块化 module:webpack 默认支持各种模块化开发,ES Module、CommonJS、AMD 等;
现代的 modern:现代前端的开发越来越复杂,催生了 webpack 的出现和发展;
即:无论开发使用什么语言,最终通过 webpack 将代码打包成普通的静态资源(详见下文:Webpack 依赖图);
环境 Webpack 的运行是依赖 Node 环境的,所以我们电脑上必须有 Node 环境;
安装 webpack 的安装目前分为两个:webpack(代码使用)、webpack-cli(命令行使用);
这里推荐局 ...
网络安全修改
背景网站做完之后,移交给第三方机构进行安全检测,对” 安全功能验证观察报告” 指出的问题进行了如下修改;
接口重放什么是重放参考文献:基于 timestamp 和 nonce 的防止重放攻击方案
重放攻击指的是攻击者通过发送一个目的主机已接受到的包,来达到欺骗系统的目的。其基本原理就是把窃听到的数据原封不动的重新发送给接收方 (好像修改了数据在发送就不叫重放了),即使传输的数据是加密的,窃听方不知道具体的数据内容,但是容易知道数据的作用(即使不知道作用也能对系统造成一定破坏),这时就能通过原封不动的重新发送达到一定的目的,比如:
影响数据: 重放添加接口可能会无限添加数据;
数据泄漏: 攻击者可以重复访问敏感数据,导致数据泄漏;
资源耗尽: 重复请求可能导致服务器资源的枯竭,影响正常用户的服务;
身份伪装: 通过重复使用合法用户的身份验证凭据,攻击者可以伪装成合法用户执行操作;
如何防止重放给每个请求加上不可复制、不可模仿的唯一标识:时间戳 + 随机数并加密;
时间戳
优点:服务端对请求时间戳进行判断,如超过半分钟,认定为重放攻击,请求无效;
缺点:时间戳无法完全防止重放攻击。未认证系统还是可 ...
Koa2 实战
koa2 项目实战本文所有代码已上传:github
项目的搭建目录结构的划分
按照功能模块划分:例如:控制器 (controller) 的放在一起;操作数据库 (service) 的放在一起……
按照业务模块划分:一个完整的小功能放在一起;
本文将用功能模块划分
1234567-src -main.js // 入口文件 -app // 全局文件夹 -controller // 所有的控制器 -service // 数据库操作相关 -router // 路由相关 -utils // 工具
安装依赖 1234// 在 src 目录下 npm init -ynpm i koanpm i nodemon -D //-D 为开发依赖
设置快捷启动 12345// 在 package.json 配置 "scripts": { "start": "nodemon ./src/main.js" }// 之后可以直接通过 npm run start 方式启动项目,不需要找目录结构了
入口文件
ma ...
Nginx
正向代理与反向代理
反向代理:服务端将请求转发给其他应用程序,比如转给 Java;
正向代理:客户端使用,比如 vpn;
一句话就是:正向代理代理客户端,反向代理代理服务器;
环境
win11、VMware17 Pro、CentOS Linux release 7.9.2009 (Core),Nginx-1.24.0、静态 IP:192.168.209.111、192.168.209.112、192.168.209.113、192.168.209.114;
查看 centos 版本
1cat /etc/redhat-release
关闭防火墙:
1systemctl stop firewalld
重启网络服务
1systemctl restart network
反向代理代理网站 123location / { proxy_pass http://www.atguigu.com/;}
在浏览器地址栏输入 192.168.209.111,然后地址栏不变,但访问的是尚硅谷的网站;
代理网站,地址栏 url 发生改变 123location / ...
https
调研背景
公司项目打算采用 HTTPS 来保证数据的安全性。在计划零成本的前提下,看是否可以实现 HTTPS。
HTTP 与 HTTPS 区别
数据加密:HTTPS 使用 SSL/TLS 协议对传输数据进行加密,使得第三方无法窃取数据内容。HTTP 传输的数据是明文,容易被黑客窃取和篡改。
数据完整性:在数据传输过程中,HTTPS 使用消息认证码(MAC)校验数据完整性,如果数据被篡改或者损坏,在传输过程中会被损坏。
身份验证:HTTPS 使用证书机制来验证网络通信的双方身份,加强了验证的强度和客户端和服务器之间的信任。HTTP 没有身份验证机制,容易遭受中间人攻击。
HTTPS 并不是一种新的协议,我们可以理解为 HTTPS 协议 = HTTP 协议 + SSL/TLS 协议。通常来说,HTTP 是直接和 TCP 进行通信的。当我们使用 SSL/TLS 时,会变成先和 SSL/TLS 通信,然后再由 SSL/TLS 和 TCP 进行通信。
SSL/TLS
SSL(Secure Sockets Layer)和 TLS(T ...
TypeScript
TypeScript 是什么
TS 是 JS 的超集,所以 JS 基础的类型都包含在内
TypeScript 开发环境搭建
全局安装 typescript:
1npm install typescript -g
查看 typescript 当前版本号:
1tsc -v
将 TS 编译成 JS (TS 不能直接在浏览器执行,需要编译器将 TS 转为 JS)
1tsc xxx.ts
基础数据类型
基础类型:Number、String、Boolean、null、undefined 以及 ES6 的 Symbol 和 ES10 的 BigInt。
字符串类型 12345678let str: string = "这是字符串类型";// 上方我们将 str 这个变量定义为了 string 类型,如果对他输入其他类型的内容就会报错,例如:let str1: string = 666;// 这个就会报错了,会提示你不能将类型 "number" 分配给类型 "string"let muban: string = `web${str}`;// 我们也可以使用 E ...
NodeJs 登录凭证
登录凭证
登录成功返回凭证:cookie+session 或者是 Token 令牌;现在基本都是 Token 令牌作为登录凭证;
为什么需要登录凭证呢?
web 开发中,我们使用最多的协议是 http,但是 http 是一个无状态的协议。那什么叫做无状态协议呢?
举个例子:
我们登录了一个网站 www.fsllala.top;
登录的时候我们需要输入用户名和密码:比如用户名 forward,密码:Forward666;
登录成功之后,我们要以 forward 的身份去访问其他的数据和资源,还是通过 http 请求去访问。
fsllala 的服务器会问:你谁呀?
forward 说:我是 forward 呀,刚刚登录过呀;
fsllala:怎么证明你刚刚登录过呀?
forward 说:这。。。,http 没有告诉你吗?
fsllala:http 的每次请求对我来说都是一个单独的请求,和之前请求过什么没有关系。
看到了吧?这就是 http 的无状态,也就是服务器不知道你上一步做了什么,我们必须得有一个办法可以证明我们登录过;
那如何证明刚才就是我登录的啊?
登陆成功的时候服务器给我们发过来一个登录凭证,访问其 ...
NodeJs 连接 MySQL
NodeJs 连接 MySQLmysql 与 mysql2
如何可以在 Node 的代码中执行 SQL 语句呢?这里我们可以借助于两个库:
mysql:最早的 Node 连接 MySQL 的数据库驱动;
mysql2:在 mysql 的基础之上,进行了很多的优化、改进;
目前相对来说,更偏向于使用 mysql2,mysql2 兼容 mysql 的 API,并且提供了一些附加功能;
更快 / 更好的性能;
Prepared Statement (预编译语句):
提高性能:将创建的语句模块发送给 MySQL,然后 MySQL 编译(解析、优化、转换)语句模块,并且存储它但是不执行,之 后我们在真正执行时会给?提供实际的参数才会执行;就算多次执行,也只会编译一次,所以性能是更高的;
防止 SQL 注入:之后传入的值不会像模块引擎那样就编译,那么一些 SQL 注入的内容不会被执行;or 1 = 1 不会被执行;
支持 Promise,所以我们可以使用 async 和 await 语法;
mysql2 的使用
安装 mysql2:
12npm init -ynpm install mysql2
mysql2 的使用过程如下:
第 ...
NodeJs Koa2
Koa2 简介
官网
koa2 是 express 同一个团队开发的一个新的 Web 框架;
相对于 express 具有更强的异步处理能力;**(Koa 框架的 next () 函数返回的是一个 promise)**
Koa2 的核心代码只有 1600 + 行,是一个更加轻量级的框架,我们可以根据需要安装和使用中间件;
使用
node 下载 koa 模块
命令:
初始化服务:npm init -y
下载 koa:npm i koa
koa2 初体验
PS: 我一直以为是 koa,然后群友说 koa2,我才发现我用的是 koa2;
Koa vs Express && Koa1 vs Koa2;什么是 KOA2?KOA2 和 KOA 的差别;
koa2 并没有像 express 一样,将 req 和 res 分开,而是将它们作为 ctx 的属性;
ctx 代表依次请求的上下文对象;
ctx.request:获取请求对象;(koa 封装的请求对象)
ctx.response:获取响应对象;(koa 封装的响应对象)
ctx.req:(Node 封装的请求对象)
ctx.res:(Node 封装的响应对象)
1234567891011121314 ...
NodeJs Express
Express 简介
Express 是一个简洁而灵活的 Node.js Web 应用框架,提供一系列强大特性帮助你创建各种 Web 应用
Express 内部还是使用的 http 模块实现服务器创建和监听,对 http 模块进行了二次封装
严格上来说 express 就是 NodeJS 的一个模块 直接下载安装
中文官网 express 中文官网
使用
node 下载 express 模块:
命令 :
初始化服务 : npm init -y
下载 express: npm i express
使用的时候 引入 需要实例化一个 express 应用 使用应用对象创建各种服务
express 初体验 12345678910111213141516171819const express = require ("express");//express 其实是一个函数;// 调用函数返回 app,app 本质也是一个函数;const app =express ();// 监听默认路径 (GET) app.get ("/",(req,res,next)=>{ ...