一、前后端认知
- 前端
- 把后端给的数据展示在页面上 (显示列表页面)
- 把前端的数据传递给后端,让后端存储起来(注册)
- 后端
- 当前端需要数据的时候,后端从数据库里面拿到数据给前端
- 把前端传递赖的数据存储在数据库里面
- 数据库
- 专门让“后端”进行数据的增删改查的
例子:注册
- 前端
- 通过在页面上绑定事件的方式获取用户填写的用户名和密码
- 当用户点击注册按钮的时候,把用户名和密码传递到后端
- 后端
- 接收到前端传递来的用户名和密码
- 把用户名和密码存储在数据库里面
- 把存储成功或者失败的信息发生给前端
- 前端
- 接收后端给回来的反馈信息
- 根据反馈信息告诉用户注册成功或者失败
- 整个流程里面
- 前端 => 后端 => 数据库 => 后端 => 前端
注意:
- 前端是不能操作数据库的
- 前端想对数据库进行操作,都要把信息告诉后端
- 由后端进行数据库操作
- 把操作的信息反馈给前端
二、服务器
了解服务器
-
什么是服务器?
+ 就是一台在网络“那一头”的一台电脑 + 只不过运行了一些特殊的环境 + 运行了一些特殊的“软件”
-
服务器作用
- 当一台电脑运行了一个服务器环境以后
- 在这台电脑上,就会🈶️一个文件夹被对外开放了,叫做“服务器空间”
- 只要你在这个服务器空间(文件夹)里面放上对应的html文件
- 其他网络上的小伙伴就能根据网线找到你这台电脑,找到对应的文件夹
- 就可以看到里面的页面了(只读的权限)
-
服务器的作用
- 运行服务端(后端)代码
- 如果我们写一个后端代码,那么需要在服务器环境下运行
- 因为浏览器不支持后端代码的运行
例子:http://www.baidu.com:80/
-
上面是一个地址,能看到百度的首页
-
http => 传输协议
- 前后端交互的规则
- 规范前端怎么传递数据给后端
- 规范后端怎么传递数据给前端
-
www.baidu.com => 域名(是ip地址的高辨识度的名字)
- 在网络环境中,每一个电脑有一个自己的ip地址(123.23.45.78)
- 数字不好记忆,网络上就会有一个高辨识度的名字来代表这个ip地址
- 通过域名,能找到百度家服务器的那个电脑
-
80 => 端口号(理解为一个软件的门牌号码)
-
就是找到对应的这台电脑上的那个服务器软件
-
能找到这个软件,就能找到这个软件开放的那个文件夹(服务器空间)
-
如果百度提前在这个文件夹里面放好了一个html页面
-
我们就能看到这个页面了
过一过
-
域名找到对应的电脑
-
端口号找到这台电脑上的某一个软件(也就是找到了服务器空间)
-
如果这个服务器空间里面有页面,那么我们就能看到了
-
如果这个服务器空间里面有一个叫做index.html的文件
- 不要你确定是否访问,会自动打开
-
了解
- http 传输协议,浏览器会自动帮你添加80端口
- https 传输协议,浏览器会自动帮你添加443端口
三、安装Node环境
-
安装node
- js的运行
- 当js运行在浏览器里的时候- 操作DOM,操作BOM,不能操作文件
- 当js运行在node环境下的时候 - 不能操作BOM,不能操作DOM,能操作文件,数据库之类的内容
- 因为我们的电脑没有运行js代码的能力
- 所以我们需要安装一个“能力”给我们的电脑
- 安装完毕以后,就可以运行js代码了
- 能力:node.js环境
- js的运行
-
安装步骤
- 去官网下载就可以了:https://nodejs.org/zh-cn/
- 下载最好下载一个LTS版本的
- 长期稳定版本
- current 当前的最新版本
- 下载的时候 下载安装包,不要下载二进制文件
- 安装包可以一键安装
- 二进制文件是一个免安装版本的,需要手动配置系统环境变量
- 直接双击安装包就可以了
- 一直下一步(next),傻瓜式安装
- 安装完毕以后(finish),没有任何图标显示
- 装在你电脑系统里面的一个“软件”
- 检测是否安装好了
- 打开命令行(终端)
- window操作系统
- win+r 出现运行窗口
- 在运行窗口输入cmd回车
- mac系统
- 点击顶部的搜索按钮,输入终端回车
- window操作系统
- 输入指令
- node --version
- 或者
- node -v
- 出现版本号就安装成功了
- 打开命令行(终端)
- 卸载
- 直接打开控制面板卸载就可以了
- 去官网下载就可以了:https://nodejs.org/zh-cn/
-
安装好以后
- 你的电脑就有了直接运行js代码的能力
- 就可以在命令行(终端)直接运行js代码,不在需要浏览器了
四、在Node环境下运行js代码
-
实际上就是在命令行(终端)运行js代码
-
有两指令方式
-
方式一:
- 直接在命令行(终端)运行
- 打开命令行
- 输入指令node ,然后按回车
- 会进入代码编辑模式
- 直接写js代码就可以运行了(就相当于我们浏览器里面的控制台输入代码)
- 如果要退出js代码书写环境
- 按下ctrl+c两次
- 缺点:写完的代码没法保存下来
- 直接在命令行(终端)运行
-
方式二:
- 把你要在node环境中运行的js代码写在一个.js后缀的文件里面
- 文件名和目录尽量不要写中文(中文没事)
- 不要命名成node.js
- 打开命令行,把目录切换到你写的js文件的目录下
- 快捷方法1:
- 找到你要运行的文件所在的文件夹
- 在文件夹的地址栏输入cmd回车
- 打开的命令行里面的地址就是当前文件夹地址
- 快捷方法2:
- 在编辑器vscode里面选中文件夹右键
- 点击在继承终端中打开
- 在打开的面板选择cmd
- 快捷方法1:
- 书写:node 你要运行的js文件的文件名,按回车
- 就是在命令行运行你写的这个js文件
- 输入文件名的快捷方式
- 输入文件名里面包含的字符,按tab键,会自动补全文件名
- 把你要在node环境中运行的js代码写在一个.js后缀的文件里面
五、Node基础
-
什么是 node
- Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.
- Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
-
这个是 node 官网的解释
- 其实 node 就是用 javascript 语言写 后端
- 也就是说,我们的 javascript 有了 node 以后,不光是一个前端语言,也是一个后端语言
-
前端 javascript
- 三大核心
- ECMAScript
- DOM
- BOM
- 操作内容
- 浏览器
- 解决兼容问题
- 三大核心
-
后端 javascript (node)
- 核心
- ECMAScript
- 操作内容
- 后端代码
- 数据库
- 核心
-
也就是说,node 我们不需要解决兼容问题,不需要 DOM 和 BOM,只关注业务逻辑就可以了
1.require()
导入
-
在 node 里面,我们使用
require
来导入一个文件// 我是 index.js 文件 require('./a.js') console.log('我是 index.js 文件')
-
当我在命令行运行
index.js
文件的时候- 首先会把
a.js
文件运行一遍 - 然后再继续执行我自己文件内部的代码
- 首先会把
-
也可以再导入的时候接受另一个文件导出的内容
// a 接受到的内容就是 a.js 这个文件导出的内容 // 如果 a.js 文件中什么都没有导出,那么接受到的就是一个 空对象 const a = require('./a.js')
2.exports.
导出
-
我们在写一个 js 文件的时候,可以向外导出一些内容
-
将来在这个文件被导入的时候,就可以接受到一些内容
// 我是 a.js // 每一个 js 文件都会有一个对象叫做 module // 在 module 里面有一个成员,叫做 exports // 每一个 js 文件会默认把 module.exports 导出 // 也就是说,我们向 module.exports 中添加什么内容 // 那么就会导出什么内容 module.exports.name = 'Jack' module.exports.age = 18
-
将来这个文件被导入的时候,接受到的内容就是一个对象,里面有两个成员
// 我是 index.js const a = require('./a.js') console.log(a) // { name: 'Jack', age: 18 }
3.模块化
- 在 node 的开发过程中
- 我们是把每一个功能独立做成一个模块
- 然后在使用 导入导出 的方式把他们关联在一起
- 利于维护
- 准确定位
- 我们一般把模块分为三种
- 内置模块 (node 天生就带有的模块)
- 自定义模块 (我们自己写的文件)
- 第三方模块 (从网上下载的别人写好的模块)
六、Node常用的内置模块
1.path
解析本地文件路径
1.1join()
链接路径片段
-
将所有给定的本地文件路径片段链接在一起
-
规范化生产的路径
-
语法:path.join(‘/目录1’,‘目录2’,‘目录3/目录4’,‘目录5’,‘…’)
-
返回值:‘/目录1/目录2/目录3/目录4’
-
path.join()拼接的时候是相对路径,拼接好也是相对路径
-
path.join()拼接的时候是绝对路径,拼接好也是绝对路径
// 1 path.join() console.log(path.join('./','..','其他资料/复习.md')); // 我们用path的join方法生产的规范路径 // console.log('../其他资料/复习.md');// 我们自己用字符串写的符合window操作系统规范的路径
1.2resolve()
拼接绝对路径
-
使用同 path.join()
-
区别:path.resolve()拼接好以后都是绝对路径
// 2 path.resolve() console.log(path.resolve('./','..','其他资料/复习.md'));
2.url
解析url网络路径
2.1parse()
解析成对象
- 作用:把字符串形式的url网络路径解析成对象
- 语法:url.parse(urlString,[parseQueryString,slashesDenoteHost])
- urlString:表示url网络地址,是一个字符串
- parseQueryString:是否解析查询字符串,默认是false
- slashesDenoteHost:如果为true,表示//后面,/前面是主机名(完整地址true和false没有区别)
2.2format()
合并成字符串
- 作用:把url对象合并成url地址字符串
- 语法:url.format(url对象)
- 返回值:url地址字符串
2.3resolve()
合并两段url
- 作用:把两段url片段,组合成一个完整的url
- 返回值:url地址字符串
3.FS
操作文件
-
fs
是 node 的一个内置模块 -
专门用来操作文件的
-
使用的时候直接导入就可以使用了
const fs = require('fs') // 接下来就可以使用 fs 这个变量去操作文件了
3.1readFile()
异步读取
-
异步的读取某一个文件内的内容
const fs = require('fs') // 因为是异步读取,所以要在回调函数里面获取结果 fs.readFile('./text.txt', 'utf8', function (err, data) { // err 表示读取的时候出现的错误 // data 表示读取到的内容,如果出现错误,那么是 data 是没有内容的 })
3.2readFileSync()
同步读取
-
同步读取某一个文件的内容
const fs = require('fs') // 因为是同步读取,所以直接以返回值的形式接收读取的内容就可以 const res = fs.readFileSync('./text.txt', 'utf8') // 同步读取的时候,如果出错会直接在控制台报错,并中断程序继续执行 // 如果没有错误,res 就会得到文件中的内容
3.3writeFile()
异步写入
-
异步的向某一个文件中写入内容
const fs = require('fs') // 写入内容的时候,一般不会出现错误 // 因为如果没有这个文件的话,会创建一个这个文件在向里面写入内容 // 所以回调函数一般没什么用处,只不过是在写入文件结束后做些事情而已 // 虽然没有用处,但是必须要写 fs.writeFile('./text.txt', '我是要写入的内容', function () { console.log('写入完成') })
3.4writeFileSync()
同步写
-
同步的向某一个文件内写入内容
const fs = require('fs') // 因为是写入文件 // 没有返回值,因为一般都会写入成功 fs.writeFileSync('./text.txt', '我是要写入的内容')
4.http
开启服务、发送请求
-
node的内置模块有一个http模块
- 这个模块专门用来开启服务器的
- 就是可以把一个电脑上的命令行窗口,当成一个服务器来使用
- 只能支持http协议
- 一个内置模块,直接导入就可以使用了
const http = require('http') // 接下来就可以使用 http 这个模块去开启服务了
-
http模块里面创建服务的方法
- http.createServer(function(){})
- 返回值:就是一个服务
- 当这个服务监听一个端口号的时候,就变成了一个服务器
- 使用这个服务区监听一个端口号
- 你创建的服务.listen(你要监听的端口号,监听成功的回调函数(选填))
- http.createServer(function(){})
-
上面的代码写好以后,当你在终端运行这个文件的时候
- 你的那个终端就是一个服务器了
- 就可以打开浏览器去访问 http//localhost:你自己定义的端口号
- 给服务器发http请求了
// 0 导入http模块
const http = require('http');
const url = require('url')
// 1 创建一个服务
const server = http.createServer(function(req,res){
// 这个函数是前端的每一个发送到后端的http请求都会触发的函数
// console.log('有一个请求发送到8080端口了')
// 这个函数接收两个形参
// 第一个形参: req(request) => 这个对象是请求信息
// req.url 表示本次请求的地址
console.log("本次请求的url是:"+req.url)
let urlObj = url.parse(req.url,true);// 解析url字符串为一个对象
console.log("本次请求的查询字符串是:")
console.log(urlObj.query)
console.log("本次请求的路由是:")
console.log(urlObj.pathname)
// 第二个形参: res(response) => 这个对象是响应信息
// res.end() 表示本次响应的内容,()里面写buffer或者字符串
// res.setHeader() 表示本次响应的响应头
// 发送请求之前设置响应头
res.setHeader('content-type','text/html;charset=utf-8');
res.end("我是后端返回的响应主体,内容:hello world",'utf-8')
})
// 2 监听一个端口
// 端口号 0-65535
// 0-1023 不推荐使用
server.listen(8080,function(){
console.log('监听8080端口成功')
})
4.1createServer()
创建服务
-
要开启先要创建一个服务
const http = require('http') // 创建一个服务 // 这个服务默认监听 http 协议 // 这个服务默认监听 localhost 域名 // 返回值就是这个服务 const server = http.createServer(function (request, response) { // 前端发来的每一个请求都会触发这个函数 // request 包含着所有的请求信息 // response 是所有的响应信息 })
### 4.2`listen()`监听一个端口
- 确定这个服务监听哪一个端口
```javascript
const http = require('http')
// 创建一个服务
const server = http.createServer(function (request, response) {
// 前端发来的每一个请求都会触发这个函数
})
server.listen(8080, function () {
// 这个函数会在服务开启成功以后执行
console.log('listening on port 8080')
})
4.3end()
给出一个响应
-
简单给出一个响应
const http = require('http') // 创建一个服务 const server = http.createServer(function (request, response) { // 前端发来的每一个请求都会触发这个函数 // 接受到请求以后给出一个响应 response.end('hello world') }) server.listen(8080, function () { // 这个函数会在服务开启成功以后执行 console.log('lintening on port 8080') })
-
此时,打开浏览器
-
地址栏输入
localhost:8080
-
浏览器就会响应文字
hello world
七、自定义模块
// 在这个文件里面定义一个模块,里面都是操作数字的方法
function add(){
console.log("我是a模块里面的add方法")
}
function cut(){
console.log("我是a模块里面的cut方法")
}
// 要把模块里面的方法导出别人才能通过导入来使用
// 每个js文件都是一个独立的模块
// 每个js文件天生自带一个变量叫做module,是一个对象
// 每个module里面有一个成员叫做exports,是一个对象
// 这个module.exports就是这个文件向外到处的内容,默认是一个空对象
// 我们把想要向外暴露的内容添加到这个对象里面就可以了
module.exports.a = 100
module.exports.add = add;
八、npm
包管理器
-
在我们安装
node
的环境的时候,会自动帮我们一起安装一个npm
环境 -
就好像我们安装一些软件的时候,会自动在帮我们安装一些什么
xxx软件管家
/xxx游戏
之类的东西 -
但是
npm
不是垃圾软件,而是一个我们超级实用的工具
1.检测是否安装
-
和检测 node 一样
-
在命令行输入指令
$ npm -v
-
能够得到一个版本号就可以了
2.了解npm
- 什么是 npm 呢
- 我们可以把他想象成一个大超市,一个装着所有我们需要用到的
插件
/库
/框架
的超市 - 我们要下载一个
jQuery-validation
插件- 我们可以选择去官网进行下载
- 可以选择去 GitHub 上查找并下载
- 也可以选择直接在命令行用 npm 下载
- 我们要下载一个
bootstrap
- 我们可以选择去官网进行下载
- 可以选择去 GitHub 上查找并下载
- 也可以选择直接在命令行用 npm 下载
- 也就是说,npm 包含着我们所有的第三方的东西
- 我们需要的时候,只要打开终端,就可以使用指令来帮我们下载
- 再也不需要去官网找了
- 而且,npm 不光可以在后端使用,也可以在前端使用
- npm 只不过是一个依赖于 node 环境的大型的包管理器
3.使用npm
- 我们想使用 npm 只要打开命令行就可以了
- 作为一个 包管理器
- 可以帮我们下载一些 插件 库 框架 之类的东西供我们使用
3.1 下载包
-
打开命令行
-
输入下载的指令
# 表示使用 npm 这个工具下载一个 jquery $ npm install jquery
-
下载完毕以后,就会在当前目录下多出一个文件夹
- 叫做
node_modules
- 在这个目录下就会有一个文件夹叫做
jquery
- 就是我们需要的东西了
- 叫做
-
npm 的下载默认是下载最新版本的包
-
我们也可以在下载的时候指定一下我要下载哪一个版本
# 表示使用 npm 这个工具下载一个 3.3.7 版本的 jquery $ npm install bootstrap@3.3.7
3.2 删除包
-
在删除包的时候,我们可以直接去
node_modules
文件夹中找到对应的包的文件夹删除掉 -
但是这样做并不好,我们还是应该使用命令行的指令来删除包
# 表示我要删除 jquery 这个包 $ npm uninstall jquery
-
这样,这个包就会被卸载了
3.3 管理项目
-
我们的每一个项目都有可能需要依赖很多的包(有插件/库/框架)
-
npm 会帮助我们记录,我们当前这个项目所使用的包
-
但是前提是,你要告诉 npm 说: “你来帮我管理整个文件夹”
-
我们依旧是使用指令在命令行来告诉 npm
# 表示告诉 npm 你来帮我们管理整个文件夹(也就是我的整个项目) $ npm init
3.4 npm 清除缓存
-
有的时候,有些包下载到一半,因为各种原因失败了(比如突然没有网了)
-
那么这个下载了一半的包 有可能 会被缓存下来
-
那么以后你再次下载的时候,就都是失败的状态
-
那么我们就要清除掉缓存以后,在重新下载
# 表示清除 npm 的缓存 $ npm cache clear -f
九、nrm
切换镜像源工具
- 我们的
npm
虽然好用 - 但是有一个缺点
- 就是,他虽然在帮我们下载东西
- 但是他的下载地址是在国外
- 也就是说,每次使用 npm 下载的时候,都是去国外的服务器上进行下载
- 那么就会有很多不稳定的因素
- 而且相对时间比较长
nrm
就是一个用来切换npm
下载地址的工具(切换镜像源工具)
1.安装nrm
-
nrm
如果想使用,那么需要我们自己安装一下 -
因为是我们的工具,所以使用
npm
就可以安装 -
依旧是使用指令的方式来进行安装
-
只不过这里要把这个
nrm
安装成一个全局的依赖,而不再是项目内部的依赖了- 全局依赖,一个电脑安装一次,就一直可以使用
-
我们使用指令安装一个全局
nrm
# 表示安装一个全局 nrm $ npm install --global nrm $ npm i -g nrm
2.检测安装
-
安装完毕之后,我们检测一下是否安装成功
-
和检测 node npm 的时候一样
-
在命令行使用指令查看一下版本号
$ nrm --version
-
能出现版本号,表示安装成功
3.使用nrm
-
nrm 里面存着好几个镜像源地址
-
我们要挑一个比较快的使用
$ nrm test
3.1 检测镜像源地址
-
我们直接在命令行使用指令来查看所有镜像源地址的网速
# 表示查看 nrm 镜像源地址网速 $ nrm test
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ths3iZ0F-1672412216737)(C:\Users\JReal\AppData\Roaming\Typora\typora-user-images\image-20220919191622833.png)]
3.2 切换镜像源
-
我们检测完毕以后,就直到哪个比较快了
-
我们就使用指令切换一下镜像源地址就好了
-
nrm use 镜像源名称
# 表示切换到 taobao 镜像源地址 $ nrm use taobao
注意:
-
nrm切换完镜像以后就没有用了,你可以卸载nrm
$ npm uninstall nrm -g
-
nrm切换完镜像以后,还是使用npm下载包
npm install 包名
- 只不过不再从国外服务器下载,而是从你指定的一个国内服务器下载,速度更快,更稳定
十、全局依赖&本地依赖
- npm安装的包可以是全局的, 可以是本地的
1.全局依赖
- 你的全局依赖是属于整个电脑的
- 你在下载的时候,可以在电脑的任意位置打开命令行下载
- npm install --global 包名
- 简写: npm i -g 包名
- 比如: npm i -g nrm
- 就会把下载的包放到电脑的指定位置,在任意位置都可以使用这个包
- 通过在命令行输入指令来使用
- 使用这个全局依赖包,比如: nrm test
2.本地依赖
- 你的本地依赖肯定是属于某个项目的
- 你在下载的时候,就要在指定项目的根目录打开命令行下载
- npm install 包名
- 在项目根目录就多个一个node_modules文件夹
- 在项目里面的js文件就可以通过require来导入这个包
- const vue = require(‘vue’)