Node.js 是什么
Node.js 作用1.开发服务器应用
2.开发工具类应用
3.开发桌面端应用
注意:这个网址可以安装任何以一个版本的 Node.js
一、认识命令行工具 cmd
1. 打开方式
① 在开始页面 ,输入 cmd 找到 命令提示符 打开就行
② 点击win键 + R键 在弹出窗口输入cmd 回车打开
2. 命令的结构
若输入两个协议就可以同时打开两个网址
3. 常用命令
① d :切换到D盘
② dir 可以查看具体内容
③ cd + 文件名 可以切换到别的文件夹内(切换目录)
注意:. 一个点 表示当前目录 .. 两个点表示上一级目录
④ dis /s 查看文件夹下面的所有文件内容
按 Ctrl C 停止
二、编码注意事项
1. 运行文件
用Node.js 运行代码,在终端打开,用 node + 文件名 回车运行文件
2. 编写 Node.js 不可以用BOM 和 DOM 的 API
① Node.js 中不能使用 BOM 和 DOM 的 API,可以使用 console 和 定时器 API
② Node.js 中的顶级对象为 global,也可以用 globalThis 访问顶级对象
浏览器中的 JavaScript
三、Buffer (缓冲器)
1. 概念
Buffer 是一个类似于数组的 对象,用于表示固定长度的字节序列
Buffer 本质是一段内存空间,专门用来处理 二进制数据
2. 特点
① Buffer 大小固定且无法调整
② Buffer性能较好,可以直接对计算机内存进行操作
③ 每个元素的大小为1字节(byte)
注意:每一个0 或者1 表示一个bit 八个 bit 表示一个字节
3. Buffer创建方法
① alloc
每一个二进制键位都会归 0
② allocUnsafe
注意:不会对旧的数据做一个清空,用此方法创建的 Buffer 是会有旧数据的
但是这种方法创建的速度比alloc方法创建的快
注意:每一次敲回车。最后的结果都不一样(前面旧的数据部分)
③ from
内容字母 ,对相应的unicode ,对应的 ASCII 值 ,对应的值变为十六进制值 ,输出出来
4. Buffer的注意事项
① 字符串转换 toString()
② Buffer的读写 通过【 】
对单个元素的查看
对单个元素的修改红圈中的内容为打印修改后的字符串
黄框中的内容为修改字符串
③ 溢出
舍去二进制高于八位的内容
④ 中文
中文是 utf-8 是栈三个字节
四、fs 模块
1. 写入文件
注意:黄框中的文件要是没有的话,会直接帮你创建一个文件
2. fs 异步与同步
① 异步写入
将fs模块内容先封存起来,先执行19行的代码
再调用fs模块中的代码
② 同步写入
直接执行fs模块内容
3. 追加写入
① appendFile
② appendFileSync
在 fs模块 里面换行用 \r\n
③ 用 writeFile 实现追加写入
必须加入{ flag : 'a' }
4. 流式写入
【案例】
5. 文件写入应用场景
6. 文件读取
① 异步读取
② 同步读取
③ 流式读取
注意:这个代码可以实现与上面代码一样的输出功能
注意:end 事件不一定要必须绑定
7. 文件读取应用场景
等等
8. 文件移动与重命名
【文件重命名】
调用 rename,后面的是新的名字
【文件移动】
调用 rename ,后面的是新位置
9. 文件删除
① unlink
② rm
10. 文件夹操作
① mkdir 创建目录
创建目录
单个目录
递归目录
注意:创建递归目录时必须要加红圈中的参数
② readdir 读取文件夹
返回结果是一个数组,数组内容是所获取文件夹下面资源的名称
获取当前文件夹
③ 删除文件夹
递归删除
但是,递归删除不推荐用 redir
推荐使用 rm
11. 查看资源状态
可以获取文件的相关信息
isFile检测所测目标是不是一个文件
isDirectory检测所测目标是不是一个文件夹
atime 最后的访问时间
mtime 最后的修改时间
ctime 最后一次修改文件状态的时间
12. fs路径
① 相对路径
-1- 在当前文件夹下面创建
./
没有./
../ 把文件创建在上一级目录下面
注意:love 是写入的内容
② 绝对路径
在根目录下创建(在最外面创建文件)
第一种 D:要创建的文件名 ,文件内容
第二种 / 要创建的文件名,文件内容
③ 相对路 径的BUG
操作fs文件时,加上__dirname ,避免工作目录发生变化,导致程序运行发生变化
、
BUG原因
相对路径参照物:命令行的工作目录
13【fs案例】重命名
五、path 模块
① resolve 拼接规范的绝对路径
会把绝对路径和相对路径做一个计算,拼接成最后的绝对路径
前面两种可以,./ 或直接写文件名,这两种都会是相对路径;但是要是只写 / 的话,就会变成绝对路径
② sep 分隔符
③ parse 解析路径并且返回对象
filename 获取保存文件的绝对路径
④ basename 获取文件基础名称
⑤ dirname 获取文件目录名
⑥ extname 获取文件扩展名
六、HTTP协议
1. 请求报文结构
2. 请求行
① 请求方法
② url
③ HTTP版本号
3. 请求头
请求头格式 键值 :键名
想要查看请求头是什么含义,可以到这个网址查看
4. 响应报文
① 响应行
-1- 响应状态码
-2- 响应状态描述
实际上是一个字符串,其与状态码一一对应
注意:若遇到陌生的状态码,可以到这个网址里面查找
② 响应头
若遇到不清楚的响应头,可以在 MDN 中查找
③ 响应体
七、HTTP 模块
1. 创建http服务
javascript
//1. 导入 http 模块
const http = require('http');
//2. 创建服务对象 create 创建 server 服务
// request 意为请求. 是对请求报文的封装对象, 通过 request 对象可以获得请求报文的数据
// response 意为响应. 是对响应报文的封装对象, 通过 response 对象可以设置响应报文
const server = http.createServer((request, response) => {
// 设置响应体
response.end('Hello HTTP server');
}); //=>返回结果是一个对象
//3. 监听端口, 启动服务
server.listen(9000, () => {
console.log('服务已经启动, 端口 9000 监听中...');
});
注意事项
- Ctrl C 停止服务
在某一个命令行中运行代码,就必须在某一个命令行中按Ctrl C 才可以停止服务
当响应体内容更新时,必须重启服务才可以生效
如果中文乱码
设置一个响应头就好了
- 端口号被占用
① 关闭当前正在运行监听端口的服务(使用较多)
② 修改其他端口号
- HTTP 协议默认端口是 80。HTTP 服务开发常用端口有3000,8080,8090,9000等
如果端口被其他程序占用,可以使用 资源监视器 找到占用端口的程序,然后使用 任务管理器 关闭对应的程序
2. 浏览器查看 HTTP 报文
点击步骤
查看请求行与请求头
查看请求体
查看 URL 查询字符串
查看响应行与响应头
查看响应体
3. 获取 HTTP 请求报文
① 获取请求行和请求头
② 请求体
注意:地址栏里面直接敲回车,一般是 get 请求,get 请求 的返回结果一般是空的
想要返回结果不为空的话
需要发送一个请求体不为空的请求,下图是一个表单,并且 method 是一个 post
所以他会发送一个 post 请求,并且红框中的内容会显示在请求体中
③ 获取路径与查询字符串
// 路径
let pathname = res.pathname
// 查询字符串
let keyword = res.query.keyword
【案例】
按照以下要求搭建 HTTP 服务
请求类型**(方法)** | 请求地址 | 响应体结果 |
---|---|---|
get | /login | 登录页面 |
get | /reg | 注册页面 |
//1、引入http模块
const http = require("http");
//2、建立服务
const server = http.createServer((request,response)=>{
let {url, method} = request; //对象的解构赋值
//设置响应头信息
//解决中文乱码
response.setHeader("Content-Type","text/html;charset=utf-8")
if(url == "/register" && method == "GET"){
response.end("注册页面");
}else if(url=="/login" && method == "GET"){
response.end("登录页面");
}else{
response.end("<h1>404 Not Found</h1>")
}
})
//3、监听端口
server.listen(8000,()=>{
console.log('服务启动中....');
})
4.设置 HTTP 响应报文
作用 | 语法 |
---|---|
设置响应状态码 | response.statusCode |
设置响应状态描述 | response.statusMessage ( 用的非常少 ) |
设置响应头信息 | response.setHeader('头名', '头值') (可以自定义 ) |
设置响应体 | response.write('xx') response.end('xxx') |
// 1. 设置响应状态码
response.statusCode = 203
// 2. 响应状态的描述
response.statusMessage = 'i love you'
// 3. 响应头
response.setHeader('content-type', 'text/html;charset=utf-8')
// 自定义响应头
response.setHeader('myHeader', 'test test')
// 设置多个同名的响应头
response.setHeader('test', ['a', 'b', 'c'])
// write 和 end 的两种使用情况:
// 1. write 和 end 的结合使用 响应体相对分散
response.write('xx');
response.write('xx');
response.write('xx');
response.end(); //每一个请求,在处理的时候必须要执行 end 方法的
//2. 单独使用 end 方法 响应体相对集中
response.end('xxx');
【案例练习】
搭建 HTTP 服务,响应一个 4 行 3 列的表格,并且要求表格有 隔行换色效果
,且 点击
单元格能 高亮显示
【js部分】
javascript
// 导入 http 模块
const http = require('http')
const fs = require('fs')
// 创建服务对象
const server = http.createServer((request, response) => {
response.setHeader('content-type', 'text/html;charset=utf-8')
// 读取文件内容
let html = fs.readFileSync(__dirname + '/table.html')
// end 方法的参数可以是字符串也可以是Buffer
response.end(html)
})
// 监听端口,启动服务器
server.listen(9000, () => {
console.log('服务器已经启动...')
})
【http部分】
html
<!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>
<style>
td {
padding: 20px 40px;
}
table tr:nth-child(odd) {
background-color: #aef;
}
table tr:nth-child(even) {
background-color: #fcb;
}
table,
td {
border-collapse: collapse;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
const tds = document.querySelectorAll('td')
tds.forEach(item => {
item.addEventListener('click', function () {
this.style.backgroundColor = '#000'
})
})
</script>
</body>
</html>
5.网页资源的基本加载过程
网页资源的加载都是循序渐进的,首先获取 HTML 的内容, 然后解析 HTML 在发送其他资源的请求,如 CSS,Javascript,图片等。理解了这个内容对于后续的学习与成长有非常大的帮助
静态资源服务
静态资源
是指 内容长时间不发生改变的资源 ,例如图片,视频,CSS 文件,JS文件,HTML文件,字体文件等
动态资源
是指 内容经常更新的资源 ,例如百度首页,网易首页,京东搜索列表页面等
网站根目录或静态资源目录
HTTP 服务在哪个文件夹中寻找静态资源,那个文件夹就是 静态资源目录 ,也称之为 网站根目录
思考:vscode 中使用 live-server 访问 HTML 时, 它启动的服务中网站根目录是谁?
- 改文件的所处的文件夹
网页中的 URL
网页中的 URL 主要分为两大类:相对路径
与 绝对路径
① 绝对路径
绝对路径可靠性强,而且相对容易理解,在项目中运用较多
形式 | 特点 |
---|---|
http://atguigu.com/w eb | 直接向目标资源发送请求,容易理解。网站的外链会用到此形式 |
//atguigu.com/web | 与页面 URL 的协议拼接形成完整 URL 再发送请求。大型网站用的比较多 |
/web | 与页面 URL 的协议、主机名、端口拼接形成完整 URL 再发送请求。中小型网站 |
② 相对路径
相对路径在发送请求时,需要与当前页面 URL 路径进行 计算
,得到完整 URL 后,再发送请求,学习阶段用的较多
例如当前网页 url 为 http://www.atguigu.com/course/h5.html
形式 | 最终的 URL |
---|---|
./css/app.css | http://www.atguigu.com/course/css/app.css |
js/app.js | http://www.atguigu.com/course/js/app.js |
../img/logo.png | http://www.atguigu.com/img/logo.png |
../../mp4/show.mp4 | http://www.atguigu.com/mp4/show.mp4 |
③ 网页中使用 URL 的场景小结
包括但不限于如下场景:
- a 标签 href
- link 标签 href
- script 标签 src
- img 标签 src
- video audio 标签 src
- form 中的 action
- AJAX 请求中的 URL
设置资源类型(mime类型)
媒体类型
(通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型 )是一种标准,用来表示文档、文件或字节流的性质和格式。
html
mime 类型结构: [type]/[subType]
例如: text/html text/css image/jpeg image/png application/json
HTTP 服务可以设置响应头 Content-Type 来表明响应体的 MIME 类型,浏览器会根据该类型决定如何处理资源
下面是常见文件对应的 mime 类型
javascript
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'
对于未知的资源类型,可以选择
application/octet-stream
类型,浏览器在遇到该类型的响应时,会对响应体内容进行独立存储,也就是我们常见的下载
效果
javascript
require('http').createServer((request,response)=>{
//获取请求的方法已经路径
let {url,method} = request;
//判断请求方式以及请求路径
if(method == "GET" && url == "/index.html"){
//需要响应文件中的内容
let data = require('fs').readFileSync( dirname + '/index.html');
response.end(data);
}else if(method == "GET" && url == "/css/app.css"){
//需要响应文件中的内容
let data = require('fs').readFileSync( dirname + '/public/css/app.css');
response.end(data);
}else if(method == "GET" && url == "/js/app.js"){
//需要响应文件中的内容
let data = require('fs').readFileSync( dirname + '/public/js/app.js');
response.end(data);
}else{
//404响应
response.statusCode = 404;
response.end("<h1>404 Not Found</h1>");
}
}).listen(80,()=>{
console.log('80端口正在启动中....');
})
很明显上面的代码,当只要有一个请求路径就需要进行判断,显然这种方式不够完美,那么我们需要封装
javascript
require('http').createServer((request,response)=>{
//获取请求的方法已经路径
let {url,method} = request;
//文件夹路径 根路径
let rootDir = dirname + '/public';
//拼接文件路径
let filePath = rootDir + url;
//读取文件内容
fs.readFile(filePath,(err,data)=>{
//判断
if(err){
//如果出现错误,响应404状态码
response.statusCode = 404;
response.end('<h1>404 Not Found</h1>');
}else{
//响应文件内容
response.end(data);
}
})
}).listen(80,()=>{
console.log('80端口正在启动中....');
})
6. GET 和 POST 请求场景小结
GET 请求的情况:
- 在地址栏直接输入 url 访问
- 点击 a 链接
- link 标签引入 css
- script 标签引入 js
- img 标签引入图片
- form 标签中的 method 为 get (不区分大小写)
- ajax 中的 get 请求
POST 请求的情况:
-
form 标签中的 method 为 post(不区分大小写)
-
AJAX 的 post 请求
7. GET 和POST请求的区别
GET
和 POST
是 HTTP 协议请求的两种方式。
GET
主要用来获取数据,POST
主要用来提交数据GET
带参数请求是将参数缀到 URL 之后,在地址栏中输入 url 访问网站就是 GET 请求,POST
带参数请求是将参数放到请求体中POST
请求相对GET
安全一些,因为在浏览器中参数会暴露在地址栏GET
请求大小有限制,一般为 2K,而 POST 请求则没有
slice 去掉后缀名前面的点 .html => html
八、模块化
1. 介绍
什么是模块化与模块 ?
将一个复杂的程序文件依据一定规则(规范)拆分成多个文件的过程称之为
模块化
其中拆分出的 每个文件就是一个模块,模块的内部数据是私有的,不过模块可以暴露内部数据以便其他模块使用
什么是模块化项目 ?
编码时是按照模块一个一个编码的, 整个项目就是一个模块化的项目
模块化好处
下面是模块化的一些好处:
-
防止命名冲突
-
高复用性
-
高维护性
模块暴露数据
模块初体验
可以通过下面的操作步骤,快速体验模块化
-
创建 me.js
//声明函数 function tiemo(){ console.log('贴膜....'); } //暴露数据 module.exports = tiemo;
-
创建 index.js
//导入模块 const tiemo = require('./me.js'); //调用函数 tiemo(); //=> 贴膜....
暴露数据
模块暴露数据的方式有两种:
-
module.exports
= value -
exports.name
= value
使用时有几点注意:
module.exports
可以暴露 任意 数据不能使用
exports = value
的形式暴露数据,模块内部 module 与 exports 的隐式关系exports = module.exports = {}
,require 返回的是目标模块中module.exports
的值require 返回的是目标模块中 module.exports 的值,不是 exports 的值
、
导入(引入)模块
在模块中使用 require 传入文件路径即可引入文件
const test = require('./me.js')
require 使用的一些注意事项:
-
对于自己创建的模块,导入时路径建议写 相对路径,且不能省略
./
和../
-
js
和json
文件导入时可以不用写后缀,c/c++编写的node
扩展文件也可以不写后缀,但是一般用不到,直接使用 node 的require()
方法即可将 JSON 文件转换成 JS 对象 -
如果导入其他类型的文件,会以
js
文件进行处理 -
如果导入的路径是个文件夹,则会 首先 检测该文件夹下
package.json
文件中main
属性对应的文件,如果存在则导入,反之如果文件不存在会报错。
如果 main 属性不存在,或者 package.json 不存在,则会尝试导入文件夹下的
index.js
和index.json
,如果还是没找到,就会报错
-
导入 node.js 内置模块时,直接 require 模块的名字即可,无需加
./
和../
-
JS 和 JSON 文件导入时可以不用写后缀,当文件名相同,但是后缀名不相同时,先去看是不是 JS 文件,看完JS文件之后,才会去看是否为 JSON 文件
导入模块的基本流程
这里我们介绍一下 require
导入 自定义模块 的基本流程
- 将相对路径转为绝对路径,定位目标文件
- 缓存检测
- 读取目标文件代码
- 包裹为一个函数并执行(自执行函数)。通过
arguments.callee.toString()
查看自执行函数 - 缓存模块的值
- 返回
module.exports
的值
javascript
/**
* 伪代码
*/
function require(file){
//1. 将相对路径转为绝对路径,定位目标文件
let absolutePath = path.resolve(__dirname, file);
//2. 缓存检测
if(caches[absolutePath]){
return caches[absolutePath];
}
//3. 读取文件的代码
let code = fs.readFileSync(absolutePath).toString();
//4. 包裹为一个函数 然后执行
let module = {};
let exports = module.exports = {};
(function (exports, require, module, __filename, __dirname) {
const test = {
name: '尚硅谷'
}
module.exports = test;
//输出
console.log(arguments.callee.toString());
})(exports, require, module, __filename, __dirname)
//5. 缓存结果
caches[absolutePath] = module.exports;
//6. 返回 module.exports 的值
return module.exports;
}
CommonJS 规范
module.exports
、exports
以及 require
这些都是 CommonJS
模块化规范中的内容。
而 Node.js 是实现了 CommonJS 模块化规范,二者关系有点像 JavaScript 与 ECMAScript
九、包管理工具
概念介绍
包是什么
『包』英文单词是
package
,代表了一组特定功能的源码集合
包管理工具
管理『包』的应用软件,可以对「包」进行 下载安装
, 更新
, 删除
, 上传
等操作
借助包管理工具,可以快速开发项目,提升开发效率
包管理工具是一个通用的概念,很多编程语言都有包管理工具,所以 掌握好包管理工具非常重要
常用的包管理工具
下面列举了前端常用的包管理工具
npm
- yarn
- cnpm
npm
npm 全称
Node Package Manager
,翻译为中文意思是『Node 的包管理工具』
npm 是 node.js 官方内置的包管理工具,是 必须要掌握住的工具
npm 的安装
node.js 在安装时会 自动安装 npm
,所以如果你已经安装了 node.js,可以直接使用 npm
可以通过 npm -v
查看版本号测试,如果显示版本号说明安装成功,反之安装失败
查看版本时可能与上图版本号不一样,不过不影响正常使用
npm 基本使用
初始化
创建一个空目录,然后以此目录作为工作目录 启动命令行工具,执行 npm init
npm init
命令的作用是将文件夹初始化为一个『包』, 交互式创建 package.json 文件
package.json
是包的配置文件,每个包都必须要有 package.json
package.json
内容示例:
{
"name": "01_npm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
属性翻译
{
"name": "1-npm", #包的名字
"version": "1.0.0", #包的版本
"description": "", #包的描述
"main": "index.js", #包的入口文件
"scripts": { #脚本配置
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "", #作者
"license": "ISC" #开源证书
}
初始化的过程中还有一些注意事项:
- package name (
包名
) 不能使用中文、大写,默认值是文件夹的名称
,所以文件夹名称也不 能使用中文和大写- version (
版本号
)要求x.x.x
的形式定义,x
必须是数字,默认值是1.0.0
- ISC 证书与 MIT 证书功能上是相同的,关于开源证书扩展阅读 http://www.ruanyifeng.com/blog/2011/05/how_to_choose_free_software_licenses.html
package.json
可以手动创建与修改- 使用
npm init -y
或者npm init --yes
极速创建package.json
搜索包
搜索包的方式有两种
-
命令行 『npm s/search 关键字』
-
网站搜索
网址是https://www.npmjs.com/
经常有同学问,『我怎样才能精准找到我需要的包?』 这个事儿需要大家在实践中不断的积累,通过看文章,看项目去学习去积累
下载安装包
我们可以通过 npm install
和 npm i
命令安装包
# 格式
npm install <包名>
npm i <包名>
# 示例
npm install uniq
npm i uniq
运行之后文件夹下会增加两个资源
node_modules 文件夹
存放下载的包package-lock.json 包的锁文件
,用来锁定包的版本
安装 uniq 之后, uniq 就是当前这个包的一个
依赖包
,有时会简称为依赖
比如我们创建一个包名字为 A,A 中安装了包名字是 B,我们就说 B 是 A 的一个依赖包,也会说 A 依赖 B
require 导入 npm 包基本流程
- 在当前文件夹下 node_modules 中寻找同名的文件夹
- 在上级目录中下的 node_modules 中寻找同名的文件夹,直至找到磁盘根目录
生产环境与开发环境
开发环境
是程序员 专门用来写代码 的环境,一般是指程序员的电脑,开发环境的项目一般 只能程序员自己访问
生产环境
是项目 代码正式运行 的环境,一般是指正式的服务器电脑,生产环境的项目一般 每个客户都可以访问
生产依赖与开发依赖
我们可以在安装时设置选项来区分 依赖的类型
,目前分为两类:
类型 | 命令 | 补充 |
---|---|---|
生产依赖 | npm i -S uniq npm i --save uniq | -S 等效于 --save,-S 是默认选项 包信息保存在 package.json 中 dependencies 属性 |
开发依赖 | npm i -D less npm i --save-dev less | -D 等效于 --save-dev 包信息保存在 package.json 中 devDependencies 属性 |
举个例子方便大家理解,比如说做蛋炒饭需要
大米
,油
,葱
,鸡蛋
,锅
,煤气
,铲子
等其中
锅
,煤气
,铲子
属于开发依赖,只在制作阶段使用而
大米
,油
,葱
,鸡蛋
属于生产依赖,在制作与最终食用都会用到所以
开发依赖
是只在开发阶段使用的依赖包,而生产依赖
是开发阶段和最终上线运行阶段都用到的依赖包
全局安装
我们可以执行安装选项 -g 进行全局安装
npm i -g nodemon
全局安装完成之后就可以在命令行的任何位置运行 nodemon
命令
该命令的作用是 自动重启 node 应用程序
说明:
- 全局安装的命令不受工作目录位置影响
- 可以通过
npm root -g
可以查看全局安装包的位置- 不是所有的包都适合全局安装,只有全局类的工具才适合,可以通过查看包的官方文档来确定安装方式,这里先不必太纠结
修改 windows 执行策略
windows 默认不允许 npm 全局命令执行脚本文件,所以需要修改执行策略
- 以
管理员身份
打开powershell
命令行
- 键入命令
set-ExecutionPolicy remoteSigned
-
键入 A 然后敲回车 👌
-
如果不生效,可以尝试重启 vscode
环境变量 Path
Path 是操作系统的一个环境变量,可以设置一些文件夹的路径,在当前工作目录下找不到可执行文件 时,就会在环境变量 Path 的目录中挨个的查找,如果找到则执行,如果没有找到就会报错
补充说明:
- 如果希望某个程序在任何工作目录下都能正常运行,就应该将该程序的所在目录配置到环境 变量 Path 中
- windows 下查找命令的所在位置
cmd 命令行
中执行where nodemon
powershell命令行
执行get-command nodemon
安装包依赖
在项目协作中有一个常用的命令就是 npm i
,通过该命令可以依据 package.json
和 package-lock.json
的依赖声明安装项目依赖
npm i
npm install
node_modules 文件夹大多数情况都不会存入版本库
安装指定版本的包
项目中可能会遇到版本不匹配的情况,有时就需要安装指定版本的包,可以使用下面的命令的
## 格式
npm i <包名@版本号>
## 示例
npm i jquery@1.11.2
删除依赖
项目中可能需要删除某些不需要的包,可以使用下面的命令
## 局部删除
npm remove uniq
npm r uniq
## 全局删除
npm remove -g nodemon
配置命令别名
通过配置命令别名可以更简单的执行命令
配置 package.json 中的 scripts
属性
{
.
.
.
"scripts": {
"server": "node server.js",
"start": "node index.js",
},
.
.
}
配置完成之后,可以使用别名执行命令
npm run server
npm run start
不过 start
别名比较特别,使用时可以省略 run
npm start
补充说明:
npm start
是项目中常用的一个命令,一般用来启动项目npm run
有自动向上级目录查找的特性,跟require
函数也一样- 对于陌生的项目,我们可以通过查看
scripts
属性来参考项目的一些操作
cnpm
介绍
cnpm 是一个淘宝构建的npmjs.com
的完整镜像,也称为『淘宝镜像』,网址https://npmmirror.com/ cnpm 服务部署在国内 阿里云服务器上,可以提高包的下载速度
官方也提供了一个全局工具包 cnpm
,操作命令与 npm 大体相同
安装
我们可以通过 npm 来安装 cnpm 工具
npm install -g cnpm --registry=https://registry.npmmirror.com
操作命令
功能 | 命令 |
---|---|
初始化 | cnpm init / cnpm init |
安装包 | cnpm i uniq cnpm i -S uniq cnpm i -D uniq cnpm i -g nodemon |
安装项目依赖 | cnpm i |
删除 | cnpm r uniq |
npm 配置淘宝镜像
用 npm 也可以使用淘宝镜像,配置的方式有两种
- 直接配置
- 工具配置
直接配置
执行如下命令即可完成配置
npm config set registry https://registry.npmmirror.com/
工具配置
使用 nrm
配置 npm 的镜像地址 npm registry manager
-
安装 nrm
npm i -g nrm
-
修改镜像
nrm use taobao
-
检查是否配置成功(选做)
npm config list
检查 registry 地址是否为 https://registry.npmmirror.com/ , 如果
是
则表明成功
补充说明:
- 建议使用第二种方式进行镜像配置,因为后续修改起来会比较方便
- 虽然 cnpm 可以提高速度,但是 npm 也可以通过淘宝镜像进行加速,所以 npm 的使用率还是高于 cnpm
yarn
yarn 介绍
yarn 是由 Facebook 在 2016 年推出的新的 Javascript 包管理工具,官方网址:https://yarnpkg.com/
yarn 特点
yarn 官方宣称的一些特点
- 速度超快:yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快
- 超级安全:在执行代码之前,yarn 会通过算法校验每个安装包的完整性
- 超级可靠:使用详细、简洁的锁文件格式和明确的安装算法,yarn 能够保证在不同系统上无差异的工作
yarn 安装
我们可以使用 npm 安装 yarn
npm i -g yarn
yarn 常用命令
功能 | 命令 |
---|---|
初始化 | yarn init / yarn init -y |
安装包 | yarn add uniq 生产依赖 yarn add less --dev 开发依赖 yarn global add nodemon 全局安装 |
删除包 | yarn remove uniq 删除项目依赖包 yarn global remove nodemon 全局删除包 |
安装项目依赖 | yarn |
运行命令别名 | yarn <别名> # 不需要添加 run |
思考题:
这里有个小问题就是 全局安装的包不可用,yarn 全局安装包的位置可以通过
yarn global bin
来查看,那你有没有办法使 yarn 全局安装的包能够正常运行?
- 配置 path 环境
yarn 配置淘宝镜像
可以通过如下命令配置淘宝镜像
yarn config set registry https://registry.npmmirror.com/
可以通过 yarn config list
查看 yarn 的配置项
npm 和 yarn 选择
大家可以根据不同的场景进行选择
-
个人项目
如果是个人项目,哪个工具都可以,可以根据自己的喜好来选择
-
公司项目 如果是公司要根据项目代码来选择,可以 通过锁文件判断 项目的包管理工具
- npm 的锁文件为
package-lock.json
- yarn 的锁文件为
yarn.lock
- npm 的锁文件为
包管理工具 不要混着用,切记,切记,切记
管理发布包
创建与发布
我们可以将自己开发的工具包发布到 npm 服务上,方便自己和其他开发者使用,操作步骤如下:
-
创建文件夹,并创建文件 index.js, 在文件中声明函数,使用 module.exports 暴露
-
npm 初始化工具包,package.json 填写包的信息 (包的名字是唯一的)
-
激活账号 ( 一定要激活账号 )
-
修改为官方的官方镜像 (命令行中运行
nrm use npm
) -
命令行下
npm login
填写相关用户信息 -
命令行下
npm publish
提交包 👌
更新包
后续可以对自己发布的包进行更新,操作步骤如下
-
更新包中的代码
-
测试代码是否可用
-
修改
package.json
中的版本号 -
发布更新
npm publish
删除包
执行如下命令删除包
npm unpublish --force
删除包需要满足一定的条件, https://docs.npmjs.com/policies/unpublish
- 你是包的作者
- 发布小于 24 小时
- 大于 24 小时后,没有其他包依赖,并且每周小于 300 下载量,并且只有一个维护者
扩展内容
在很多语言中都有包管理工具,比如:
语言 | 包管理工具 |
---|---|
PHP | composer |
Python | pip |
Java | maven |
Go | go mod |
JavaScript | npm/yarn/cnpm/other |
Ruby | rubyGems |
除了编程语言领域有包管理工具之外,操作系统层面也存在包管理工具,不过这个包指的是『软件包
』
操作系统 | 包管理工具 | 网址 |
---|---|---|
Centos | yum | https://packages.debian.org/stable/ |
Ubuntu | apt | https://packages.ubuntu.com/ |
MacOS | homebrew | https://brew.sh/ |
Windows | chocolatey | https://chocolatey.org/ |
用此中方法,文件名不可以有中文或者大写字母
注意这个文件名必须和 main 部分保持一致
十、express框架
express 介绍
express 是一个基于 Node.js 平台的极简、灵活的 WEB 应用开发框架,官方网址: https://www.expressjs.com.cn/
简单来说,express 是一个封装好的工具包,封装了很多功能,便于我们开发 WEB 应用(HTTP 服务)
express 使用
express 下载
express 本身是一个 npm 包,所以可以通过 npm 安装
npm init
npm i express
express 初体验
大家可以按照这个步骤进行操作:
-
创建 JS 文件,键入如下代码
//1. 导入 express
const express = require('express');
//2. 创建应用对象
const app = express();
//3. 创建路由规则
app.get('/home', (req, res) => {
res.end('hello express server');
});
//4. 监听端口 启动服务
app.listen(3000, () =>{
console.log('服务已经启动, 端口监听为 3000...');
}); -
命令行下执行该脚本
1. node <文件名> # 或者 nodemon <文件名>
-
然后在浏览器就可以访问 http://127.0.0.1:3000/home 👌
express 路由
什么是路由
官方定义: 路由确定了应用程序如何响应客户端对特定端点的请求
路由的使用
一个路由的组成有 请求方法
, 路径
和 回调函数
组成
express 中提供了一系列方法,可以很方便的使用路由,使用格式如下:
app.<method>(path,callback)
代码示例:
//导入 express
const express = require('express');
//创建应用对象
const app = express();
//创建 get 路由
app.get('/home', (req, res) => {
res.send('网站首页');
});
//首页路由
app.get('/', (req,res) => {
res.send('我才是真正的首页');
});
//创建 post 路由
app.post('/login', (req, res) => {
res.send('登录成功');
});
//匹配所有的请求方法
app.all('/search', (req, res) => {
res.send('1 秒钟为您找到相关结果约 100,000,000 个');
});
//自定义 404 路由
app.all("*", (req, res) => {
res.send('<h1>404 Not Found</h1>')
});
//监听端口 启动服务
app.listen(3000, () =>{
console.log('服务已经启动, 端口监听为 3000');
});
获取请求参数
express 框架封装了一些 API 来方便获取请求报文中的数据,并且兼容原生 HTTP 模块的获取方式
//导入 express
const express = require('express');
//创建应用对象
const app = express();
//获取请求的路由规则
app.get('/request', (req, res) => {
// 1. 获取报文的方式与原生 HTTP 获取方式是兼容的
console.log(req.method);
console.log(req.url);
console.log(req.httpVersion);
console.log(req.headers);
// 2. express 独有的获取报文的方式
// 获取路径
console.log(req.path)
//获取查询字符串
console.log(req.query); // 『相对重要』对象形式返回所有的查询字符串
// 获取指定的请求头
console.log(req.get('host'));
res.send('请求报文的获取');
});
//启动服务
app.listen(3000, () => {
console.log('启动成功....')
})
获取路由参数
路由参数指的是 URL 路径中的参数(数据)
app.get('/:id.html', (req, res) => {
res.send('商品详情, 商品 id 为' + req.params.id);
});
express 响应设置
express 框架封装了一些 API 来方便给客户端响应数据,并且兼容原生 HTTP 模块的获取方式
//获取请求的路由规则
app.get("/response", (req, res) => {
//1. express 中设置响应的方式兼容 HTTP 模块的方式
res.statusCode = 404;
res.statusMessage = 'xxx';
res.setHeader('abc','xyz');
res.write('响应体');
res.end('xxx');
//2. express 的响应方法
res.status(500); //设置响应状态码
res.set('xxx','yyy');//设置响应头
res.send('中文响应不乱码');//设置响应体
//连贯操作
res.status(404).set('xxx','yyy').send('你好朋友')
//3. 其他响应
res.redirect('http://atguigu.com')//重定向
res.download('./package.json');//下载响应
res.json();//响应 JSON
res.sendFile(__dirname + '/home.html') //响应文件内容
});
express 中间件
什么是中间件
中间件(Middleware)本质是一个回调函数
中间件函数
可以像路由回调一样访问 请求对象(request)
, 响应对象(response)
中间件的作用
中间件的作用
就是 使用函数封装公共操作,简化代码
中间件的类型
全局中间件 路由中间件
定义全局中间件
每一个请求
到达服务端之后 都会执行全局中间件函数
声明中间件函数
let recordMiddleware = function(request,response,next){
//实现功能代码
//.....
//执行next函数(当如果希望执行完中间件函数之后,仍然继续执行路由中的回调函数,必须调用next)
next();
}
应用中间件
app.use(recordMiddleware)
声明时可以直接将匿名函数传递给 use
app.use(function (request, response, next) {
console.log('定义第一个中间件');
next();
})
多个全局中间件
express 允许使用 app.use() 定义多个全局中间件
app.use(function (request, response, next) {
console.log('定义第一个中间件');
next();
})
app.use(function (request, response, next) {
console.log('定义第二个中间件');
next();
})
定义路由中间件
如果只需要对某一些路由进行功能封装,则就需要路由中间件
调用格式如下:
app.get('/路径',`中间件函数`,(request,response)=>{
});
app.get('/路径',`中间件函数1`,`中间件函数2`,(request,response)=>{
});
静态资源中间件
express 内置处理静态资源的中间件
//引入express框架
const express = require('express');
//创建服务对象
const app = express();
//静态资源中间件的设置,将当前文件夹下的public目录作为网站的根目录
app.use(express.static('./public')); //当然这个目录中都是一些静态资源
//如果访问的内容经常变化,还是需要设置路由
//但是,在这里有一个问题,如果public目录下有index.html文件,单独也有index.html的路由
//则谁书写在前,优先执行谁
app.get('/index.html',(request,response)=>{
respsonse.send('首页');
});
//监听端口
app.listen(3000,()=>{
console.log('3000 端口启动....');
});
注意事项:
- index.html 文件为默认打开的资源
- 如果静态资源与路由规则同时匹配,谁先匹配谁就响应
- 路由响应动态资源,静态资源中间件响应静态资源
获取请求体数据 body-parser
express 可以使用 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' }
注意: 现在你已经可以抛弃 body-parser 模块,因为 Express 自从 4.16.0 版本开始,内置了 body 解析
使用方法:
const express = require('express');
const app = express();
// 解析 JSON 格式的请求体的中间件
app.use(express.json())
// 解析 querystring 格式请求体的中间件
app.use(express.urlencoded({ extended: false }))
Router
什么是 Router
express 中的 Router 是一个完整的中间件和路由系统,可以看做是一个小型的 app 对象。
Router 作用
对路由进行模块化,更好的管理路由
Router 使用
创建独立的 JS 文件(homeRouter.js)
//1. 导入 express
const express = require('express');
//2. 创建路由器对象
const router = express.Router();
//3. 在 router 对象身上添加路由
router.get('/', (req, res) => {
res.send('首页');
})
router.get('/cart', (req, res) => {
res.send('购物车');
});
//4. 暴露
module.exports = router;
主文件
const express = require('express');
const app = express();
//5.引入子路由文件
const homeRouter = require('./routes/homeRouter');
//6.设置和使用中间件
app.use(homeRouter);
app.listen(3000,()=>{
console.log('3000 端口启动....');
})
EJS 模板引擎
什么是模板引擎
模板引擎是分离 用户界面和业务数据 的一种技术
什么是 EJS
EJS 是一个高效的 Javascript 的模板引擎 官网: https://ejs.co/ 中文站: https://ejs.bootcss.com/
EJS 初体验
下载安装EJS
npm i ejs --save
代码示例
//1.引入ejs
const ejs = require('ejs');
//2.定义数据
let person = ['张三','李四','王二麻子'];
//3.ejs解析模板返回结构
//<%= %> 是ejs解析内容的标记,作用是输出当前表达式的执行结构
//"<%= %>"可以直接输出变量或表达式的值,变量或表达式的值将作为一个字符串在浏览器中输出。
let html = ejs.render('<%= person.join(",") %>', {person:person});
//4.输出结果
console.log(html);
命令行下运行
EJS 常用语法
执行JS代码
<% code %>
输出转义的数据到模板上
<%= code %>
输出非转义的数据到模板上
<%- code %>
在express中使用ejs
// 导入 express
const express = require('express')
const path = require('path')
// 创建应用对象
const app = express()
// 1. 设置模板引擎
app.set('view engine', 'ejs') // pug twing
// 2. 设置模板文件的存放位置
// 模板文件: 具有模板语法内容的文件
app.set('views', path.resolve(__dirname, './views'))
// 创建路由
app.get('/home', (req, res) => {
// 3. render 响应
// res.render('模板的文件名','数据')
let title = '尚硅谷 - 让天下没有难学的技术'
res.render('home', { title })
// 4. 创建模板文件
// 如下面文件 views/home.ejs
})
// 监听端口,启动服务
app.listen(3000, () => {
console.log('服务器已启动~~~~')
})
views/home.ejs
<!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>
</head>
<body>
<h2>
<%=title %>
</h2>
</body>
</html>
补充
path 获取绝对路径
全局中间件的实践
路由中间件实践
声明路由中间件
通过这种方法获取到 code
路由中间件的执行过程
输入images/logo.png 就可以得到 public下面的 images 中的文件
注意: 现在你已经可以抛弃 body-parser 模块,因为 Express 自从 4.16.0 版本开始,内置了 body 解析
使用方法:
const express = require('express'); const app = express(); // 解析 JSON 格式的请求体的中间件 app.use(express.json()) // 解析 querystring 格式请求体的中间件 app.use(express.urlencoded({ extended: false }))
防盗链
路由模块化
ejs模块
可以在js里面写html的内容,将html和js文件完全分离开
ejs列表渲染
ejs条件渲染
红框的必须保持一致,黄圈的也必须保持一致
代码
在express 中使用ejs
十一、MongoDB
MongoDB
简介
Mongodb 是什么
MongoDB 是一个基于分布式文件存储的数据库,官方地址 https://www.mongodb.com/
数据库是什么
数据库(DataBase)是按照数据结构来组织、存储和管理数据的 应用程序
数据库的作用
数据库的主要作用就是 管理数据
,对数据进行 增(c)、删(d)、改(u)、查(r)
数据库管理数据的特点
相比于纯文件管理数据,数据库管理数据有如下特点:
- 速度更快
- 扩展性更强
- 安全性更强
为什么选择 Mongodb
操作语法与 JavaScript 类似,容易上手,学习成本低
核心概念
Mongodb 中有三个重要概念需要掌握
-
数据库(database) 数据库是一个数据仓库,数据库服务下可以创建很多数据库,数据库中可以存放很多集合
-
集合(collection) 集合类似于 JS 中的数组,在集合中可以存放很多文档
-
文档(document) 文档是数据库中的最小单位,类似于 JS 中的对象
JSON 文件示例:
{
"accounts": [
{
"id": "3-YLju5f3",
"title": "买电脑",
"time": "2023-02-08",
"type": "-1",
"account": "5500",
"remarks": "为了上网课"
},
{
"id": "3-YLju5f4",
"title": "请女朋友吃饭",
"time": "2023-02-08",
"type": "-1",
"account": "214",
"remarks": "情人节聚餐"
},
{
"id": "mRQiD4s3K",
"title": "发工资",
"time": "2023-02-19",
"type": "1",
"account": "4396",
"remarks": "终于发工资啦!~~"
}
],
"users":[
{
"id": 1,
"name": "zhangsan",
"age": 18
},
{
"id": 2,
"name": "lisi",
"age": 20
},
{
"id": 3,
"name": "wangwu",
"age": 22
}
]
}
大家可以通过 JSON 文件来理解 Mongodb 中的概念
-
一个
JSON 文件
好比是一个数据库
,一个 Mongodb 服务下可以有 N 个数据库 -
JSON 文件中的
一级属性的数组值
好比是集合
-
数组中的对象好比是
文档
-
对象中的属性有时也称之为
字段
一般情况下
- 一个项目使用一个数据库
- 一个集合会存储同一种类型的数据
下载安装与启动
下载地址: https://www.mongodb.com/try/download/community
建议选择 zip
类型, 通用性更强
配置步骤如下:
1> 将压缩包移动到 C:\Program Files
下,然后解压
2> 创建 C:\data\db
目录,mongodb 会将数据默认保存在这个文件夹
3> 以 mongodb 中 bin 目录作为工作目录,启动命令行
4> 运行命令 mongod
看到最后的 waiting for connections
则表明服务 已经启动成功
然后可以使用 mongo
命令连接本机的 mongodb 服务
注意:
- 为了方便后续方便使用 mongod 命令,可以将 bin 目录配置到环境变量 Path 中
千万不要选中服务端窗口的内容
,选中会停止服务,可以敲回车
取消选中
配置windows服务: https://www.shuzhiduo.com/A/E35pAE6Ydv/
修改mongodb
数据库位置
命令行交互
命令行交互一般是学习数据库的第一步,不过这些命令在后续用的比较少,所以大家了解即可
数据库命令
-
显示所有的数据库
show dbs
-
切换到指定的数据库,如果数据库不存在会自动创建数据库
use 数据库名
-
显示当前所在的数据库
db
-
删除当前数据库
use 库名 db.dropDatabase()
集合命令
-
创建集合
db.createCollection('集合名称')
-
显示当前数据库中的所有集合
show collections
-
删除某个集合
db.集合名.drop()
-
重命名集合
db.集合名.renameCollection('newName')
文档命令
-
插入文档
db.集合名.insert(文档对象);
-
查询文档
db.集合名.find(查询条件)
_id 是 mongodb 自动生成的唯一编号,用来唯一标识文档
-
更新文档
db.集合名.update(查询条件,新的文档) db.集合名.update({name:'张三'},{$set:{age:19}})
-
删除文档
db.集合名.remove(查询条件)
应用场景
新增
- 用户注册
- 发布视频
- 发布商品
- 发朋友圈
- 发评论
- 发微博
- 发弹幕
- .......
删除
-
删除评论
-
删除商品
-
删除文章
-
删除视频
-
删除微博
-
......
更新
- 更新个人信息
- 修改商品价格
- 修改文章内容
- ......
查询
- 商品列表
- 视频列表
- 朋友圈列表
- 微博列表
- 搜索功能
- ......
十二、Mongoose
介绍
Mongoose 是一个对象文档模型库,官网 http://www.mongoosejs.net/
作用
方便使用代码操作 mongodb 数据库
使用流程
//1. 安装 mongoose
//2. 导入 mongoose
const mongoose = require('mongoose');
//3. 连接数据库 数据库名称
mongoose.connect('mongodb://127.0.0.1:27017/bilibili');
//4. 设置连接回调
//连接成功 once 一次 事件回调函数只执行一次
mongoose.connection.on('open', () => {
console.log('连接成功');
//5. 创建文档结构对象
// 设置集合中 文档的属性以及属性值得类型
let BookSchema = new mongoose.Schema({
title: String,
author: String,
price: Number
});
//6. 创建文档模型对象 对文档操作的封装对象 mongoose会使用集合名称的复数,创建集合
let BookModel = mongoose.model('book', BookSchema);
//7. 插入文档
BookModel.create({
title: '西游记',
author: '吴承恩',
price: 19.9
}, (err, data) => {
// 判断是否有错误
if (err) throw err;
//输出 data 对象 如果没有出错,则输出插入后的文档对象
console.log(data);
//8. 断开连接 关闭数据链接 (项目运行过程中,不会添加该代码)
mongoose.disconnect();
});
});
//连接出错
mongoose.connection.on('error', () => {
console.log('连接出错~~');
})
//连接关闭
mongoose.connection.on('close', () => {
console.log('连接关闭');
})
字段类型
文档结构可选的常用字段类型列表
类型 | 描述 |
---|---|
String | 字符串 |
Number | 数字 |
Boolean | 布尔值 |
Array | 数组,也可以使用 [] 来标识 |
Date | 日期 |
Buffer | Buffer 对象 |
Mixed | 任意类型,需要使用 mongoose.Schema.Types.Mixed 指定 |
ObjectId | 对象 ID,需要使用 mongoose.Schema.Types.ObjectId 指定 |
Decimal128 | 高精度数字,需要使用 mongoose.Schema.Types.Decimal128 指定 |
字段值验证
Mongoose 有一些内建验证器,可以对字段值进行验证
必填项
title: {
type: String,
required: true // 设置必填项
},
默认值
author: {
type: String,
default: '匿名' //默认值
},
枚举值
gender: {
type: String,
enum: ['男','女'] //设置的值必须是数组中的
},
唯一值
username: {
type: String,
unique: true
},
unique 需要
重建集合
才能有效果永远不要相信用户的输入
CURD
数据库的基本操作包括四个,增加(create),删除(delete),修改(update),查(read)
增加
插入一条
SongModel.create({
title:'给我一首歌的时间',
author: 'Jay'
}, function(err, data){
//错误
console.log(err);
//插入后的数据对象
console.log(data);
});
批量插入
//1.引入mongoose
const mongoose = require('mongoose');
//2.链接mongodb数据库 connect 连接
mongoose.connect('mongodb://127.0.0.1:27017/project');
//3.设置连接的回调
mongoose.connection.on('open',()=>{
//4.声明文档结构
const PhoneSchema = new mongoose.Schema({
brand:String,
color:String,
price:Number,
tags:Array
})
//6.创建模型对象
const PhoneModel = mongoose.model('phone',PhoneSchema);
PhoneModel.insertMany([
{
brand:'华为',
color:'灰色',
price:2399,
tags:['电量大','屏幕大','信号好']
},
{
brand:'小米',
color:'白色',
price:2099,
tags:['电量大','屏幕大','信号好']
}
],(err,data)=>{
if(err) throw err;
console.log('写入成功');
mongoose.connection.close();
})
})
删除
删除一条数据
SongModel.deleteOne({_id:'5dd65f32be6401035cb5b1ed'}, function(err){
if(err) throw err;
console.log('删除成功');
mongoose.connection.close();
});
批量删除
SongModel.deleteMany({author:'Jay'}, function(err){
if(err) throw err;
console.log('删除成功');
mongoose.connection.close();
});
更新
更新一条数据
SongModel.updateOne({author: 'JJ Lin'}, {author: '林俊杰'}, function (err) {
if(err) throw err;
mongoose.connection.close();
});
批量更新数据
SongModel.updateMany({author: 'Leehom Wang'}, {author: '王力宏'}, function (err) {
if(err) throw err;
mongoose.connection.close();
});
查询
查询一条数据
SongModel.findOne({author: '王力宏'}, function(err, data){
if(err) throw err;
console.log(data);
mongoose.connection.close();
});
//根据 id 查询数据
SongModel.findById('5dd662b5381fc316b44ce167',function(err, data){
if(err) throw err;
console.log(data);
mongoose.connection.close();
});
批量查询数据
//不加条件查询
SongModel.find(function(err, data){
if(err) throw err;
console.log(data);
mongoose.connection.close();
});
//加条件查询
SongModel.find({author: '王力宏'}, function(err, data){
if(err) throw err;
console.log(data);
mongoose.connection.close();
});
条件控制
运算符
在 mongodb 不能 > < >= <= !== 等运算符,需要使用替代符号
-
>
使用$gt
-
<
使用$lt
-
=
使用$gte
-
<=
使用$lte
-
!==
使用$ne
db.students.find({id:{$gt:3}}); id号比3大的所有的记录
// 价格小于 20 的图书
BookModel.find({ price: { $lt: 20 } }, (err, data) => {
if (err) {
console.log('读取失败~~~')
return
}
console.log(data)
})
逻辑运算
$or
逻辑或的情况
db.students.find({$or:[{age:18},{age:24}]});
// 曹雪芹 或者 余华的书
BookModel.find({ $or: [{ author: '曹雪芹' }, { author: '余华' }] }, (err, data)=>{
if (err) {
console.log('读取失败~~~')
return
}
console.log(data)
})
$and
逻辑与的情况
db.students.find({$and: [{age: {$lt:20}}, {age: {$gt: 15}}]});
// 价格大于 30 且 小于 70
BookModel.find({ $and: [{ price: { $gt: 30 } }, { price: { $lt: 70 } }] }, (err, data) => {
if (err) {
console.log('读取失败~~~')
return
}
console.log(data)
})
正则匹配
条件中可以直接使用 JS 的正则语法,通过正则可以进行模糊查询
db.students.find({name:/imissyou/});
正则表达式,搜索书籍名称中带有 '三' 的图书
BookModel.find({ name: /三/ }, (err, data) => {
if (err) {
console.log('读取失败~~~')
return
}
console.log(data)
})
BookModel.find({ name: new RegExp('三') }, (err, data) => {
if (err) {
console.log('读取失败~~~')
return
}
console.log(data)
})
个性化读取
字段筛选
//0:不要的字段
//1:要的字段
SongModel.find().select({_id:0,title:1}).exec(function(err,data){
if(err) throw err;
console.log(data);
mongoose.connection.close();
});
数据排序
// sort 排序
// 1:升序
// -1:倒序
SongModel.find().sort({hot:1}).exec(function(err,data){
if(err) throw err;
console.log(data);
mongoose.connection.close();
});
数据截取
//skip 跳过 limit 限定
SongModel.find().skip(10).limit(10).exec(function(err,data){
if(err) throw err;
console.log(data);
mongoose.connection.close();
});
图形化管理工具
我们可以使用图形化的管理工具来对 Mongodb 进行交互,这里演示两个图形化工具
-
Navicat 收费 https://www.navicat.com.cn/
mongoose 补充
三者关系图
通过红框中的代码,省略掉该部分的代码
想要修改文件的配置信息,从config.js里面修改就可以了
十二、会话控制
cookie
maxAge 最大时限 单位是毫秒 一秒设置为 60 * 1000
介绍
所谓会话控制就是 对会话进行控制
HTTP 是一种无状态的协议,它没有办法区分多次的请求是否来自于同一个客户端,无法区分用户
而产品中又大量存在的这样的需求,所以我们需要通过 会话控制 来解决该问题
常见的会话控制技术有三种:
- cookie
- session
- token
cookie
cookie 是什么
cookie 是 HTTP 服务器发送到用户浏览器并保存在本地的一小块数据
cookie 是保存在浏览器端的一小块数据
cookie 是按照域名划分保存的
简单示例:
域名 | cookie |
---|---|
www.baidu.com | a=100; b=200 |
www.bilibili.com | xid=1020abce121; hm=112411213 |
jd.com | x=100; ocw=12414cce |
cookie 的特点
浏览器向服务器发送请求时,会自动将 当前域名下
可用的 cookie 设置在请求头中,然后传递给服务器
这个请求头的名字也叫 cookie
,所以将 cookie 理解为一个 HTTP 的请求头也是可以的
cookie 的运行流程
填写账号和密码校验身份,校验通过后下发 cookie
有了 cookie 之后,后续向服务器发送请求时,就会自动携带 cookie
浏览器操作 cookie
浏览器操作 cookie 的操作,使用相对较少,大家了解即可
- 禁用所有 cookie
- 删除 cookie
- 查看 cookie
cookie 的代码操作
express 中可以使用 cookie-parser
进行处理
const express =require('express');
//1. 安装 cookie-parser npm i cookie-parser
//2. 引入 cookieParser 包
const cookieParser = require('cookie-parser');
const app = express();
//3. 设置 cookieParser 中间件
app.use(cookieParser());
//4-1 设置 cookie
app.get('/set-cookie', (request, response) => {
// 不带时效性 会在浏览器关闭的时候,销毁
response.cookie('username','wangwu');
// 带时效性
response.cookie('email','23123456@qq.com', {maxAge: 5*60*1000 });
//响应
response.send('Cookie的设置');
});
//4-2 读取 cookie
app.get('/get-cookie', (request, response) => {
//读取 cookie
console.log(request.cookies);
//响应体
response.send('Cookie的读取');
});
//4-3 删除cookie
app.get('/delete-cookie', (request, response) => {
//删除
response.clearCookie('username');
//响应
response.send('cookie 的清除');
});
//4. 启动服务
app.listen(3000, () => {
console.log('服务已经启动....');
});
不同浏览器中的 cookie 是相互独立的,不共享
session
session 是什么
session 是保存在 服务器端的一块儿数据,保存当前访问用户的相关信息
session 的作用
实现会话控制,可以识别用户的身份,快速获取当前用户的相关信息
session 运行流程
填写账号和密码校验身份,校验通过后创建 session 信息
,然后将 session_id
的值通过响应头返回给浏览器
有了cookie,下次发送请求时会自动携带cookie,服务器通过 cookie
中的 session_id
的值确定用 户的身份
session 的代码操作
express 中可以使用 express-session
对 session 进行操作
const express = require('express');
//1. 安装包 npm i express-session connect-mongo
//2. 引入 express-session connect-mongo
const session = require("express-session");
const MongoStore = require('connect-mongo');
const app = express();
//3. 设置 session 的中间件
app.use(session({
name: 'sid', //设置cookie的name,默认值是:connect.sid
secret: 'atguigu', //参与加密的字符串(又称签名) 加盐
saveUninitialized: false, //是否为每次请求都设置一个cookie用来存储session的id
resave: true, //是否在每次请求时重新保存session
store: MongoStore.create({
mongoUrl: 'mongodb://127.0.0.1:27017/project' //数据库的连接配置
}),
cookie: {
httpOnly: true, // 开启后前端无法通过 JS 操作
maxAge: 1000 * 300 // 这一条 是控制 sessionID 的过期时间的!!!
},
}))
//创建 session session的设置
app.get('/login', (req, res) => {
//设置session
req.session.username = 'zhangsan';
req.session.email = 'zhangsan@qq.com'
res.send('登录成功');
})
//获取 session
app.get('/home', (req, res) => {
console.log('session的信息');
console.log(req.session.username);
// 检测 session 是否存在用户数据
if (req.session.username) {
res.send(`你好 ${req.session.username}`);
}else{
res.send('登录 注册');
}
})
//销毁 session
app.get('/logout', (req, res) => {
//销毁session
// res.send('设置session');
req.session.destroy(() => {
res.send('成功退出');
});
});
app.listen(3000, () => {
console.log('服务已经启动, 端口 ' + 3000 + ' 监听中...');
});
session 和 cookie 的区别
cookie 和 session 的区别主要有如下几点:
- 存在的位置
- cookie:浏览器端
- session:服务端
- 安全性
- cookie 是以明文的方式存放在客户端的,安全性相对较低
- session 存放于服务器中,所以安全性
相对
较好
- 网络传输量
- cookie 设置内容过多会增大报文体积, 会影响传输效率
- session 数据存储在服务器,只是通过 cookie 传递 id,所以不影响传输效率
- 存储限制
- 浏览器限制单个 cookie 保存的数据不能超过
4K
,且单个域名下的存储数量也有限制 - session 数据存储在服务器中,所以没有这些限制
token
token 是什么
token
是服务端生成并返回给 HTTP 客户端的一串加密字符串, token
中保存着用户信息
token 不属于 http 标准,完全由前后端协商而定,但 cookie 属于 http 标准
token 的作用
实现会话控制,可以识别用户的身份,主要用于移动端 APP
token 的工作流程
填写账号和密码校验身份,校验通过后响应 token,token 一般是在响应体中返回给客户端的
后续发送请求时,需要手动
将 token 添加在请求报文中(cookie是自动携带的),一般是放在请求头中
token 的特点
-
服务端压力更小
- 数据存储在客户端
-
相对更安全
- 数据加密
- 可以避免 CSRF(跨站请求伪造)
-
扩展性更强
- 服务间可以共享
- 增加服务节点更简单
JWT
JWT(JSON Web Token )是目前最流行的跨域认证解决方案,可用于基于 token
的身份验证
JWT 使 token 的生成与校验更规范
我们可以使用 jsonwebtoken 包
来操作 token
//导入 jsonwebtokan
const jwt = require('jsonwebtoken');
//创建 token
// jwt.sign(数据, 加密字符串, 配置对象)
let token = jwt.sign({
username: 'zhangsan'
}, 'atguigu', {
expiresIn: 60 //单位是 秒
})
//解析 token
// jwt.verify(token,加密字符串,回调函数)
jwt.verify(token, 'atguigu', (err, data) => {
if(err){
console.log('校验失败~~');
return
}
console.log(data);// { username: '张三', iat: (创建时间), exp:(过期时间)}
})
扩展阅读: https://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html
附录
本地域名
所谓本地域名就是 只能在本机使用的域名,一般在开发阶段使用
操作流程
编辑文件 C:\Windows\System32\drivers\etc\hosts
127.0.0.1 www.baidu.com
如果修改失败,可以修改该文件的权限
原理
在地址栏输入 域名
之后,浏览器会先进行 DNS(Domain Name System)查询,获取该域名对应的 IP 地 址 请求会发送到 DNS 服务器,可以 根据域名返回 IP 地址
可以通过 ipconfig /all
查看本机的 DNS 服务器
hosts
文件也可以设置域名与 IP 的映射关系,在发送请求前,可以通过该文件获取域名的 IP 地址