1. 认识 node
认识 node
+ 是一个环境
+ 私人: 一个 "软件", 你电脑执行某些功能的能力
=> 例子: 你的电脑有没有 office 环境
=> 例子: 你的电脑有没有 apache 环境
=> 例子: 你的电脑有没有 node 环境
+ 是一个把 js 解析引擎独立出来, 安装在你的电脑上
=> 让你的电脑有了独立运行 js 代码的能力
+ 官方: 一个基于 Chrome V8 解析引擎的运行时环境
前端 js
+ DOM
=> 因为 js 被引入了 html 页面
=> 所有的 DOM 结构都依赖于 html 结构运行
=> 我们的 js 是在一个页面里面运行的, 在文档流内
+ BOM
=> 因为最终这个文件被引入了 浏览器 执行
=> 操作浏览器的部分内容
+ ECMAScript
=> js 的语法
后端 js(node)
+ ECMAScript
+ I/O (Input/Output)
+ system
+ server
+ ...
js 代码
+ 代码不区分前后端
+ 区分你的执行方式
+ 将来你需要把这一段 js 代码, 放在 html 文件内引入, 在浏览器打开
=> 那么你的代码就需要书写关于 DOM / BOM 的操作
=> 不能操作 文件, 操作系统 之类的内容
+ 将来你需要把一段 js 代码, 放在 node 环境中运行
=> 那么你的代码就需要书写关于 文件, 操作系统 之类的内容
=> 不能操作 DOM / BOM 相关的内容
+ 例子:
=> a.js
const box = document.querySelctor('div')
box.onclick = function () { }
-> 因为以上代码涉及了 DOM 操作, 所以只有引入 html 文件使用的时候才可以
-> 一旦这个代码被 node 环境运行了, 那么就报错了
=> b.js
const fs = require('fs')
fs.readFile('', '', function () {})
-> 因为以上代码涉及了 文件操作, 所以只有依赖在 node 环境下才可以
-> 一旦这个代码被引入 html 文件使用, 那么就报错了
node 环境的安装和卸载
+ 安装
=> 官网下载 http://nodejs.cn/
=> 双击安装
+ 检测
=> 打开你的电脑终端
-> MAC 直接开启终端
-> WIN win + r 输入 cmd 回车
=> 输入指令
-> $ node --version
-> 简写: $ node -v
+ 卸载
=> 在控制面板, 卸载程序, 找到 node 右键卸载
2.node 运行 js 代码
node 运行 js 代码
方式1:
+ 打开终端
-> MAC 直接开启终端
-> WIN win + r 输入 cmd 回车
+ 输入指令
-> $ node
+ 会进入 js 代码编辑环境
-> 相当于浏览器的控制台
-> 可以直接书写 js 代码, 回车后运行
方式2:
+ 利用终端来执行一个 js 文件
+ 需要把代码书写在 .js 文件内
+ 打开终端
-> MAC 直接开启终端
-> WIN win + r 输入 cmd 回车
+ 切换终端目录(重点)至当前文件所在目录
+ 输入指令
-> $ node 文件名
+ 会在终端内以 node 环境来运行当前 js 文件
个人:
第一步：先切个盘符(什么盘:)
第二步: cd 路径地址
第三步: dir 查看所有路径下的文件
第四步: node 文件名 就能调用
3. 简单的命令行操作指令
简单的命令行操作指令
打开命令行(终端)
+ MAC
=> 直接开启终端
+ WIN
=> win + r
=> 输入 cmd
=> 按下回车
简单介绍
+ 有一个目录
=> 表示当前命令行所在的当前目录
=> 你所有在命令行内操作的当前目录, 都是操作的这个目录下内容
+ 有一个光标闪烁
=> 等待你输入指令
简单指令
+ 切换目录
=> $ cd 目录名称
+ 返回上一级目录
=> $ cd ..
+ 切换盘符
=> $ 盘符:
+ 清屏
=> MAC: $ clear
=> WIN: $ cls
第一步：先切个盘符(什么盘:)
第二步: cd 路径地址
第三步: dir
第四步: node 文件名 就能调用
4.模块化语法
模块化语法
+ node 的开发必须是模块化开发
+ commonJS 后端 nodejs 的模块化语法
分析:
+ 前端js, 我们的所有 js 文件都是引入在 html 文件内, 放在浏览器内运行
=> 多个 js 文件之间如果需要产生关联
=> 只要把多个 js 文件引入在一个 html 文件内
=> 共用的一个公共的 html 文件, 放在一个窗口内执行, 共用了一个 window
+ 后端js, 使用 node 环境直接执行 js 文件
=> 多个 js 文件之间是没有关系的
=> 想让多个 js 文件之间产生关系, 必须要依赖模块化语法
模块化语法
+ 详见 04_模块化语法/
总结:
+ 导出
=> 每一个js文件会向外暴露一个内容叫做 module.exports, 默认是一个对象
=> 如果你想向这个对象内添加一些信息
-> module.exports.xxx = yyy
-> exports.xxx = yyy
=> 如果你想直接替换掉这个 module.exports
-> module.exports = xxx
+ 导入
=> 语法: const 变量 = reuqire('文件地址')
=> 当你的文件地址确实是以 .js 后缀结尾的时候, 可以省略后缀不写
个人:
cmd中 文件路径问题：
可以用cd.. 返回路径
也可以用cd../路径 但是需要同一个父级文件
5.内置模块
5-1_fs模块
const fs = require('fs')
console.log('start')
1. fs.readFile()
语法: fs.readFile(文件地址[, 格式], 回调函数)
格式: 默认读取的 buffer 格式字符串, 我们可以选填 'utf-8'
作用: 异步读取文件信息
fs.readFile('./test.txt', 'utf-8', (err, data) => {
if (err) return console.log(err)
console.log(data)
})
2. fs.readFileSync
语法: fs.readFileSync(文件地址[, 格式])
作用: 同步读取文件信息
返回值: 该文件内的信息
const res = fs.readFileSync('./test.txt', 'utf-8')
console.log(res)
3. fs.writeFile()
语法: fs.writeFile(文件地址, 写入内容, 回调函数)
作用: 异步写入文件内容
注意: 完全覆盖式的写入内容
注意: 当你写入的时候, 如果没有这个文件, 会自动创建这个文件并写入
fs.writeFile('./test.css', 'div { width: 100px; height: 200px; }', () => console.log('写入文件完成'))
4. fs.writeFileSync()
语法: fs.writeFileSync(文件地址, 写入内容)
作用: 同步写入文件内容
注意: 完全覆盖式的写入内容
注意: 当你写入的时候, 如果没有这个文件, 会自动创建这个文件并写入
fs.writeFileSync('test.js', 'console.log(123)')
console.log('end')
05-2_path模块
const path = require('path')
1. join()
语法: path.join(路径信息1, 路径信息2, ...)
返回值: 把多个路径信息组装在一起, 返回一个 相对路径
const res = path.join('a', 'b', 'c', './d', 'file.html')
console.log(res) //a\b\c\d\file.html
2. resolve()
语法: path.resolve(路径信息1, 路径信息2, ...)
返回值: 把多个路径信息组装在一起, 返回一个 绝对路径
const res = path.resolve('a', 'b', 'c', './d', 'file.html')
console.log(res) //D:\北科_二阶段\BK_GP_30\05_第五周\DAY01\02_代码\05_内置模块\a\b\c\d\file.html
3. parse()
语法: path.parse(路径信息)
返回值: 是一个对象数据类型, 保存的就是该路径内的所有信息(如下所示)
const res = path.parse('D:/北科_二阶段/BK_GP_30/05_第五周/DAY01/02_代码/05_内置模块/a/b/c/d/file.html')
console.log(res)
05-3_url模块
/*
url 模块
+ 也是一个 node 的内置模块
+ 存储的都是关于 url 地址的信息
*/
// 导入 url 模块
const url = require(
1. url.parse()
语法: url.parse(url地址[, 是否深度解析])
是否深度解析: 是否解析查询字符串内容, 默认是 false, 选填 true
返回值: 是一个对象数据类型, 存储的就是该 url 内解析出来的信息
/* 未开启深度解析
{
// 该 url 信息内的 传输协议
protocol:
slashes: true,
auth: null,
// 该 url 信息内的 域名 + 端口号
host:
// 该 url 信息内的 端口号
port:
// 该 url 信息内的 域名
hostname:
// 该 url 信息内的 哈希值
hash:
// 该 url 信息内传递的 查询字符串
search:
// 该 url 信息内传递的 真实查询字符
query:
// 该 url 信息内的完整地址
pathname:
path:
// 该 url 的完整信息
href:
}
*/
/* 开启深度解析
{
protocol:
slashes: true,
auth: null,
host:
port:
hostname:
hash:
search:
query: { name:
pathname:
path:
href:
}
*/
const res = url.parse(
console.log(res)
console.log(res.query)
05-4_http模块
/*
http 模块
+ 一个 node 的内置模块
+ 专门用来开启一个 http 服务的模块
=> 利用这个模块
=> 可以把 js 文件在 cmd 运行的状态变成一个服务器
服务器
+ 一个 提供服务 的机器
+ 服务:
=> 根据前端的请求给出一个 文件(html, css, js, jpg, wmv, ...)
=> 根据前端的请求给出一个 数据
+ 什么叫做前端的请求(向服务器索要内容)
=> 注意: 请求内的地址是一个标识符, 不是真是的文件地址(详见解释一)！！！！！！！！！
=> 地址栏书写地址
-> http://localhost:8888/a/index.html
-> 向服务器发送了一个 get 请求, 请求地址是 /a/index.html
=> link 标签的 href 属性
-> <link href="http://localhost:8888/a/index.css">
-> 向服务器发送了一个 get 请求, 请求地址是 /a/index.css
=> script 标签的 src 属性
-> <script src="http://localhost:8888/a/index.js"></script>
-> 向服务器发送了一个 get 请求, 请求地址是 /a/index.js
=> ajax 请求
-> 根据你配置的 请求地址 和 请求方式
-> 决定向服务器发送了 get 或者 post 请求, 地址是你填写 url
const xhr = new XMLHttpRequest()
xhr.open('POST', 'http://localhost:6666/users/login')
-> 向服务器发送了一个 POST 请求, 请求地址是 /users/login
+ http 模块就是专门来开启一个服务
=> 在里面进行配置什么标识符返回什么内容的
=> 详细搭建信息见 06/
*/
/* 解释一
地址标识符
+ 前后端约定好的一个标志
+ 例子:
=> 服务器:
-> 我有一个 index.html 文件
-> 做了一个服务器处理
-> 当前端需要访问这个 index.html 文件的时候, 只要告诉我请求 /aaa
=> 客户端
-> 当你需要访问这个 index.html 文件的时候
-> 你只需要发送一个请求, 请求地址书写 /aaa 即可
*/
6.nvm命令
nvm 切换安装node版本
nvm ls 打印当前安装的所有node版本
nvm install v版本 安装node版本
nvm uninstall v版本 卸载版本
nvm use v版本 使用某个版本
nvm -v 查看nvm版本
修改nvm路径下settings.txt (C:\Users\User\AppData\Roaming\nvm)
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/
修改下载的淘宝镜像
7.npm命令
npm node package manager node包管理器
https:
nrm 切换npm下载镜像源
npm i nrm -g
nrm test 镜像源 测试镜像源的速度
nrm use 镜像源 切换镜像源
常用:!!!!!!!!!!!
npm init -y 初始化npm 配置文件package.json
{
"name": "0624", 项目名（有可能是自己做的项目，有可能是需要上传到npm上插件）
"version": "1.0.0", 当前项目的版本，每次迭代时可以修改这个，用来上传到npm时覆盖升级
"description": "", 描述针对当前项目描述，在上传到npm后，用户可以通过描述了解这个插件
"main": "index.js", 主文件，入口文件（具体使用后面说）
"type": "module", 模块化方式支持 commonjs和module模块化（ES5和ES6模块化，具体后面说）
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
项目依赖 当项目完成需要发布到线上时，代码中所依赖的模块也需要一同发布
3大版本 6 小版本 0就是微型版本
"jquery":"^3.6.0" 大版本锁定
"jquery":"3.6.0" 版本锁定
"jquery":"~3.6.0" 小版本锁定
},
"devDependencies": {
开发依赖 仅在开发过程中使用到模块，线上时不需要一同发布，比如测试，打包等工具
},
"config": {
配置 可以通过在这里做配置，然后node中就可以调用了（具体后面讲）
},
"keywords": [],关键词 在上传到npm后，希望更多人能够使用这个插件，需要描述关键词，
以便于被搜索到
"author": "", 作者
"license": "ISC" 专利证书
}
7.1 npm安装下载
npm install 插件名 下载安装插件
npm i 插件名 简写
npm i 插件名 -g 全局安装
使用命令操作的插件使用全局安装
npm i nrm -g 安装nrm nrm管理镜像源
npm i http-server -g 安装http- server http服务
npm i anywhere -g 安装anywhere node的服务 启动静态服务
npm i gulp -g 打包工具
npm i webpack -g 打包工具
npm i nodemon -g 实时更新node服务
1.安装到项目依赖
npm i 插件名
npm i 插件名 --save
npm i 插件名 -S
npm i jquery -S
npm i vue -S
2.安装到开发依赖
npm i 插件名 --save-dev
npm i 插件名 -D
npm i 插件名@latest 尽量不要使用这个
npm i 插件名@版本号 插件名对应的版本
npm install git+ssh://git@github.com:EricXie79/GP22.git
通过git下载插件，这个插件放在git仓库中并没有在npm仓库中
7.2 npm 插件升级和卸载
npm update 插件名 升级
npm view 插件名 versions 查找插件所发布的所有版本号
npm i 更新或者安装当前package.json描述的所有插件 开启服务
npm ls 插件名 查找当前已经安装的这个插件的版本和其依赖的所以插件版本
npm uninstall 插件名 卸载插件
有时候安装时突然断网了或者突然其他异常，引起安装失败
npm 不支持断点续传、不支持多点下载
npm cache verify
npm cache clean
清除缓存重新下载
在脚本中写入 脚本名:"命令内容"
npm run 脚本名
start这个脚本名是特殊的
npm start 运行就可以
所有插件尽量不要安装在全局中
描述在开发依赖中，当使用者更新npm i 就会把这些插件下载到开发依赖
使用 脚本运行时，优先查找开发依赖中是否有该命令可以运行
nodemon 后面不描述文件名时，就会找入口文件名 main:"index.js"
只要修改package.json需要重启nodemon
"config": {"属性名":120},
这里的配置数据可以在node中通过 process.env.npm_package_config_属性名 来调用
插件 cross-env 直接可以通过脚本传参
首先下放在开发依赖中更新
然后再脚本中描述
"start": "cross-env port=4001 nodemon"
启动时后面port变量就可以在nodejs中
console.log(process.env.port)找到
// npx 针对npm推出一个命令
// 当需要全局运行某个插件时，但是不希望下载，想通过缓存后调用，可以使用npx调用
npx nodemon a.js
8.yarn 命令
yarn init -y 初始化
yarn add 包名 安装
yarn upgrade 包名 更新
yarn remove 包名 卸载
yarn 更新及安装package.json所有插件
