一、初始Node.js
1.初识 Node.js
浏览器中的 JavaScript 的组成部分
为什么 JavaScript 可以在浏览器中被执行
不同的浏览器使用不同的 JavaScript 解析引擎 Chrome 浏览器 => V8 Firefox 浏览器 => OdinMonkey(奥丁猴) Safri浏览器 => JSCore IE 浏览器 => Chakra(查克拉) 其中,Chrome 浏览器的 V8 解析引擎性能最好!
为什么 JavaScript 可以操作 DOM 和 BOM
每个浏览器都内置了 DOM、BOM 这样的 API 函数,因此,浏览器中的 JavaScript 才可以调用它们
浏览器中的 JavaScript 运行环境
运行环境是指代码正常运行所需的必要环境
总结
- V8 引擎负责解析和执行 JavaScript 代码
- 内置 API 是由运行环境提供的特殊接口,只能在所属的运行环境中被调用
JavaScript 能否做后端开发
需要node.js
Node.js 简介
- 什么是 Node.js Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境 官网地址 https://nodejs.org/zh-cn/
- Node.js 中的 JavaScript 运行环境
- 浏览器是 JavaScript 的前端运行环境
- Node.js 是 JavaScript 的后端运行环境
- Node.js 中无法调用 DOM 和 BOM 等浏览器内置 API
3.Node.js 可以做什么
Node.js 作为一个 JavaScript 的运行环境,仅仅提供了基础的功能和 API。然而,基于 Node.js 提供的这些基础能,很多强大的工具和框架如雨后春笋,层出不穷,所以学会了 Node.js ,可以让前端程序员胜任更多的工作和岗位
- a基于 Express 框架 http://www.expressjs.com.cn/ 可以快速构建 Web 应用
- b基于 Electron 框架 https://electronjs.org/ 可以构建跨平台的桌面应用
- c基于 restify 框架 http://restify.com/ 可以快速构建 API 接口项目
- d读写和操作数据库、创建实用的命令行工具辅助前端开发、etc…
4.Node.js 怎么学 浏览器中的 JavaScript 学习路径
- JavaScript 基础语法 + 浏览器内置 API(DOM + BOM) + 第三方库(jQuery、art-template 等
- Node.js 的学习路径 JavaScript 基础语法 + Node.js 内置 API(fs、path、http等)+ 第三方 API 模块(express、mysql 等)
**shift+**鼠标右键 可以在该目录下打开powershell窗口**
在powershell中的快捷键:
- ⬆,可以快速定位到上一次执行的命令。
- tab键,可以快速补全文件的路径(先输入第一个字,然后使用tab键,可以快速补全路径)
- ESC,可以快速清空已输入的命令
- cls,清空powershell面板
tips:./表示为当前目录,写不写都可以
2.fs 文件系统模块
什么是 fs 文件系统模块
fs 模块是 Node.js 官方提供的、用来操作文件的模块。提供了一系列的方法和属性,用来满足对文件的操作需求 如果要在 JavaScript 代码中,使用 fs 模块来操作文件,则需要使用如下的方式先导入它
const fs = require("fs")
fs.readFile(path[, option], callback)
读取指定文件中的内容 path
必选参数,字符串,文件路径 option
可选参数,设置字符集 callback
必选参数,文件读取完成后的回调函数
// 1. 导入 fs 模块,来操作文件
const fs = require('fs')
// 2. 调用 fs.readFile() 方法读取文件
// 参数1:读取文件的存放路径
// 参数2:读取文件时候采用的编码格式,一般默认指定 utf8
// 参数3:回调函数,拿到读取失败和成功的结果 err dataStr
fs.readFile('./files/1.txt', 'utf8', function(err, dataStr) {<!-- -->
// 2.1 打印失败的结果
// 如果读取成功,则 err 的值为 null
// 如果读取失败,则 err 的值为 错误对象,dataStr 的值为 undefined
console.log(err)
console.log('-------')
// 2.2 打印成功的结果
console.log(dataStr)
})
//一般逻辑可以这么写:
fs.readFile('./files/11.txt', 'utf8', function(err, dataStr) {<!-- -->
if (err) {<!-- -->
return console.log('读取文件失败!' + err.message)
}
console.log('读取文件成功!' + dataStr)
})
fs.writeFile(path, data[, option], callback)
向指定的文件中写入内容 path
必选参数,字符串,文件路径 data
必选参数,写入的内容 option
可选参数,设置字符集,默认值是 utf8 callback
必选参数,文件写入完成后的回调函数 注意:写入会覆盖原内容
const fs = require('fs')
// 2. 调用 fs.writeFile() 方法,写入文件的内容
// 参数1:表示文件的存放路径
// 参数2:表示要写入的内容
// 参数3:回调函数
fs.writeFile('./files/3.txt', 'ok123', function(err) {<!-- -->
// 2.1 如果文件写入成功,则 err 的值等于 null
// 2.2 如果文件写入失败,则 err 的值等于一个 错误对象
// console.log(err)
//判断是否写入成功
if (err) {<!-- -->
return console.log('文件写入失败!' + err.message)
}
console.log('文件写入成功!')
})
省略第三个参数则默认为UTF8格式
前言:路径动拼接的问题
使用fs模块操作文件时,如果提供的操作路径是以./或…/开头的相对路径时,很容易出现路径动态拼接错误的问题。原因:代码在运行的时候,会以执行node命令时所处的目录,动态拼接出被操作文件的完整路径。 解决方案:在使用fs模块操作文件时,直接提供完整的路径,不要提供.或…/开头的相对路径,从而防止路径动态拼接的问题。**注意js中写完整路径要用//,不然会被当成转义字符处理。**但是这种方法移植性差。fs中有解决办法。
__dirname 表示当前文件所处的目录**(即以js文件所处地方为基准),不会根据打开node目录变化而变化(即为打开node的地方为基准)**。
console.log(__dirname)
fs.readFile(__dirname + '/files/1.txt', 'utf8', function(err, dataStr) {<!-- -->
if (err) {<!-- -->
return console.log('读取文件失败!' + err.message)
}
console.log('读取文件成功!' + dataStr)
})
3.path 路径模块
path 模块是 Node.js 官方提供的、用来处理路径的模块。提供一系列的方法和属性,用来满足对路径的处理需求 如果要在 JavaScript 代码中,使用 path 模块来处理路径,则需要使用如下的方式先导入它
const path = require("path")
path.join(...paths)
可以把多个路径片段拼接为完整的路径字符串
●**…paths ** 路径片段的序列
● 返回 注意:凡是涉及到路径拼接的操作,都要使用 path.join() 方法进行处理。不直接使用 + 进行字符串的拼接
const path = require('path')
const fs = require('fs')
// 注意: ../ 会抵消前面的路径
const pathStr = path.join('/a', '/b/c', '../../', './d', 'e')
console.log(pathStr) // \a\b\d\e
// 取代fs.readFile(__dirname + '/files/1.txt', ...)
fs.readFile(path.join(__dirname, './files/1.txt'), 'utf8', function(err, dataStr) {<!-- -->
if (err) {<!-- -->
return console.log(err.message)
}
console.log(dataStr)
})
path.basename(path[, ext])
可以获取路径中的最后一部分,经常通过这个方法获取路径中的文件名
●**path ** 必选参数,表示一个路径的字符串
●**ext ** 可选参数,表示文件扩展名
●返回 路径的最后一部分
const path = require('path')
// 定义文件的存放路径
const fpath = '/a/b/c/index.html'
const fullName = path.basename(fpath)
console.log(fullName) // index.html
const nameWithoutExt = path.basename(fpath, '.html')
console.log(nameWithoutExt) // index
path.extname(path)
可以获取路径中的扩展名部分
●path 必选参数,表示一个路径的字符串
●返回 返回得到的扩展名字符串
const path = require('path')
// 这是文件的存放路径
const fpath = '/a/b/c/index.html'
const fext = path.extname(fpath)
console.log(fext)//输出.html
注意点:
fs.writeFile()方法只能用来创建文件,不能用来创建路径 重复调用fs.writeFile(写入同一个文件,新写入的内容会覆盖之前的旧内容
二、模块化
1.模块化的基本概念
模块化:是指解决一个复杂问题时,自顶向下逐层把系统划分成若干模块的过程。对于整个系统来说,模块是可组合、分解和更换的单元 编程领域中的模块化,就是遵守固定的规则,把一个大文件拆成独立并互相依赖的多个小模块。 把代码进行模块化拆分的好处
- 提高了代码的复用性
- 提高了代码的可维护性
- 可以实现按需加载
模块化规范:就是对代码进行模块化的拆分与组合时,需要遵守的那些规则。例如使用什么样的语法格式来引用模块,在模块中使用什么样的语法格式向外暴露成员
模块化规范的好处:大家都遵守同样的模块化规范写代码,降低了沟通的成本,极大方便了各个模块之间的相互调用,利人利己
2.Node.js 中的模块化
Node.js 中模块的分类
Node.js 中根据模块来源的不同,将模块分为了 3 大类
- 内置模块(内置模块是由 Node.js 官方提供的,例如 fs、path、http 等)
- 自定义模块(用户创建的每个 .js 文件,都是自定义模块)
- 第三方模块(由第三方开发出来的模块,使用前需要先下载)
加载模块
使用强大的 require()
方法,可以加载需要的内置模块、用户自定义模块、第三方模块进行使用
●注意:使用 require() 方法加载其它模块时,会执行被加载模块中的代码
const fs = require('fs') // 内置模块
const custom = require('./custom.js') // 自定义模块,需指明路径,可以省略 .js 的后缀名
const moment = require('moment') // 第三方模块
注意,不用.js后缀名也可以加载对应的文件。
Node.js 中的模块作用域
模块作用域:和函数作用域类似,在自定义模块中定义的变量、方法等成员,只能在当前模块内被访问,这种模块级别的访问限制
●模块作用域的好处:防止了全局变量污染的问题
// 模块作用域
const username = '张三'
function sayHello() {<!-- -->
console.log('大家好,我是' + username)
}
const custom = require('./模块作用域')
console.log(custom)
输出是空对象,说明模块内定义的变量只能在模块内被访问。
向外共享模块作用域中的成员
module对象
在每个 .js 自定义模块中都有一个module对象,它里面存储了和当前模块有关的信息
module.exports
●在自定义模块中,可以使用module.exports对象,将模块内的成员共享出去,供外界使用
●外界用 require() 方法导入自定义模块时,得到的就是 module.exports 所指向的对象,而一般默认该属性是{}即空对象。
// 在一个自定义模块中,默认情况下, module.exports = {}
const age = 20
// 向 module.exports 对象上挂载 username 属性
module.exports.username = 'zs'
// 向 module.exports 对象上挂载 sayHello 方法
module.exports.sayHello = function() {<!-- -->
console.log('Hello!')
}
module.exports.age = age//再共享出去
// 让 module.exports 指向一个全新的对象
module.exports = {<!-- -->
nickname: '小黑',
sayHi() {<!-- -->
console.log('Hi!')
}
}
exports 和 module.exports
●由于 module.exports 单词写起来比较复杂,为了简化向外共享成员的代码,Node 提供了 exports 对象。默认情况下,exports 和 module.exports 指向同一个对象。最终共享的结果,还是以 module.exports 指向的对象为准。
●时刻谨记,require() 模块时,得到的永远是 module.exports 指向的对象,若出现exports 和 module.exports,最终不管exports怎么指向,都输出module.exports。注意挂载属性和指向新对象的区别。
●注意:为了防止混乱,建议大家不要在同一个模块中同时使用 exports 和 module.exports
// 在一个自定义模块中,默认情况下, module.exports = {}
const age = 20
// 向 module.exports 对象上挂载 username 属性
module.exports.username = 'zs'
// 向 module.exports 对象上挂载 sayHello 方法
module.exports.sayHello = function() {<!-- -->
console.log('Hello!')
}
module.exports.age = age
// 让 module.exports 指向一个全新的对象
module.exports = {<!-- -->
nickname: '小黑',
sayHi() {<!-- -->
console.log('Hi!')
}
}
// 在外界使用 require 导入一个自定义模块的时候,得到的成员,
// 就是 那个模块中,通过 module.exports 指向的那个对象
const m = require('./11.自定义模块')
console.log(m)
Node.js 中的模块化规范
Node.js 遵循了 CommonJS 模块化规范,CommonJS 规定了模块的特性和各模块之间如何相互依赖
●每个模块内部,module 变量代表当前模块
●module 变量是一个对象,它的 exports 属性(即 module.exports)是对外的接口
●加载某个模块,其实是加载该模块的 module.exports 属性。require() 方法用于加载模块
3.npm与包
Node.js 中的第三方模块又叫做包
不同于 Node.js 中的内置模块与自定义模块,包是由第三方个人或团队开发出来的,免费供所有人使用。Node.js 中的包都是免费且开源的
●由于 Node.js 的内置模块仅提供了一些底层的 API,导致在基于内置模块进行项目开发的时,效率很低
●包是基于内置模块封装出来的,提供了更高级、更方便的 API,极大的提高了开发效率
●包和内置模块之间的关系,类似于 jQuery和 浏览器内置 API 之间的关系
国外有一家 IT 公司,叫做 npm, Inc. 这家公司旗下有一个非常著名的网站 https://www.npmjs.com/,它是全球最大的包共享平台,你可以从这个网站上搜索到任何你需要的包,只要你有足够的耐心!到目前位置,全球约1100多万的开发人员,通过这个包共享平台,开发并共享了超过120多万个包 供我们使用。npm, Inc. 公司提供了一个地址为 https://registry.npmjs.org/ 的服务器,来对外共享所有的包,我们可以从这个服务器上下载自己所需要的包。
- 从 https://www.npmjs.com/网站上搜索自己所需要的包
- 从 https://registry.npmjs.org/ 服务器上下载自己需要的包
下载包**
npm, Inc. 公司提供了一个包管理工具,使用这个工具从 https://registry.npmjs.org/ 服务器把需要的包下载到本地使用。
工具的名字叫做 Node Package Manager(简称 npm 包管理工具),这个包管理工具随着 Node.js 的安装包一起被安装到了用户的电脑上。在终端中
执行 npm -v命令,来查看自己电脑上所安装的 npm 包管理工具的版本号
npm 安装
// dateFormat.js
// 1. 定义格式化时间的方法
function dateFormat(dtStr) {<!-- -->
const dt = new Date(dtStr)
const y = dt.getFullYear()
const m = padZero(dt.getMonth() + 1)
const d = padZero(dt.getDate())
const hh = padZero(dt.getHours())
const mm = padZero(dt.getMinutes())
const ss = padZero(dt.getSeconds())
return `${<!-- -->y}-${<!-- -->m}-${<!-- -->d} ${<!-- -->hh}:${<!-- -->mm}:${<!-- -->ss}`
}
// 定义补零的函数
function padZero(n) {<!-- -->
return n > 9 ? n : '0' + n
}
module.exports = {<!-- -->
dateFormat
}
// 1. 导入需要的包
// 注意:导入的名称,就是装包时候的名称
const moment = require('moment')
//查文档看用法
const dt = moment().format('YYYY-MM-DD HH:mm:ss')//对时间进行格式化
console.log(dt)
// 导入自定义的格式化时间的模块
const TIME = require('./dateFormat')
// 调用方法,进行时间的格式化
const dt = new Date()
// console.log(dt)
const newDT = TIME.dateFormat(dt)
console.log(newDT)
在项目中安装包的命令
下载在项目里
npm install 包的完整名称
或者
npm i 包的完整名称
npm i 包的完整名称 包的完整名称(加空格可以安装多个包)
// 导入自定义的格式化时间的模块
const TIME = require('./dateFormat')
// 调用方法,进行时间的格式化
const dt = new Date()
// console.log(dt)
const newDT = TIME.dateFormat(dt)
console.log(newDT)
初次装包完成后,在项目文件夹下多一个叫做 node_modules 的文件夹和 package-lock.json 的配置文件。
- node_modules
- package-lock.json
{<!-- -->
"requires": true,
"lockfileVersion": 1,
"dependencies": {<!-- -->
"moment": {<!-- -->
"version": "2.29.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
"integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
}
}
}
注意:不要手动修改 node_modules 或 package-lock.json文件中的任何代码,npm 包管理工具会自动维护它们
安装指定版本的包
npm install 命令默认安装最新版本的包。如需安装指定版本的包,在包名之后,@
npm i 包的完整名称@版本号
不用删除以前的版本,npm会自动覆盖之前的版本。
版本号
包的版本号以“点分十进制”形式进行定义,总共有三位数字,如 2.24.0。其中每一位数字所代表的的含义如下
- 第1位数字:大版本
- 第2位数字:功能版本
- 第3位数字:Bug修复版本
版本号提升的规则:只要前面的版本号增长了,则后面的版本号归零
包管理配置文件
npm规定,在项目根目录中,必须提供一个叫做 package.json
- 项目的名称、版本号、描述等
- 项目中都用到了哪些包
- 哪些包只在开发期间会用到
- 那些包在开发和部署时都需要用到
1.多人协作的问题
遇到的问题:第三方包的体积过大,不方便团队成员之间共享项目源代码。
解决方案:共享时剔除 node_modules
2.如何记录项目中安装了哪些包
在项目根目录 package.json 的配置文件用来记录项目中安装了哪些包。从而方便剔除 node_modules 目录之后,在团队成员之间共享项目的源代码
注意:今后在项目开发中,一定要把 node_modules文件夹,添加到 .gitignore
3.快速创建 package.json npm
包管理工具提供了一个快捷命令,可以在执行命令时所处的目录中,快速创建 package.json 这个包管理配置文件。如下:
npm init -y
- 在新建项目文件夹以后就执行该命令,项目开发期间只用执行这一次就行。
- 上述命令只能在英文的目录下成功运行!所以项目文件夹的名称一定要使用英文命名,不能出现空格
- 运行 npm install 命令安装包的时候,npm包管理工具会自动把包的名称和版本号,记录到 package.json**
1.package.json 文件中的 dependencies 节点,专门用来记录您使用 npm install 命令安装了哪些包
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"art-template": "^4.13.2",
"jquery": "^3.6.0",
"moment": "^2.29.1"
}
}
一次性安装所有的包
拿到一个剔除了 node_modules 的项目之后,需要先把所有的包下载到项目中,才能将项目运行起来。否则会报类似于下面的错误
可以运行 npm install
npm install
卸载包
运行 npm uninstall
命令,来卸载指定的包
npm uninstall 包名
npm uninstall 命令执行成功后,会把卸载的包,自动从 package.json 的 dependencies 中移除掉
devDependencies节点
如果某些包只在项目开发阶段会用到,在项目上线之后不会用到,则建议把这些包记录到 devDependencies节点中。如果某些包在开发和项目上线之后都需要用到,则建议把这些包记录到 dependencies 节点中。可以使用如下的命令,将包记录到 devDependencies节点中。
//完整写法 包名和--save-dev顺序不重要
npm install 包名 --save-dev
或
//常用简写
npm i 包名 -D
解决下包速度慢的问题
- npm 下包的时候,默认从国外的 https://registry.npmjs.org/ 服务器进行下载,可能会慢
- 使用国内镜像服务器-淘宝,大幅改善下载速度
切换npm 的下包镜像源
npm config get registry # 查看当前包镜像源
npm config set registry=http://registry.npm.taobao.org/ # 切换源头
npm config get registry # 检查镜像源是否下载成功
为了方便的切换下包的镜像源,安装nrm小工具,利用 nrm 提供的终端命令,快速查看和切换下包的镜像源
npm install nrm -g # -g 全局可用
nrm ls # 查看当前可用的镜像源地址list
nrm use taobao # 切换镜像源
包的分类
使用 npm 包管理工具下载的包,共分为两大类,分别是
1.项目包
那些被安装到项目的 node_modules 目录中的包,都是项目包。项目包又分为两类
- 开发依赖包(被记录到 devDependencies节点中的包,只在开发期间会用到)npm i 包名 -D
- 核心依赖包(被记录到 dependencies节点中的包,在开发期间和项目上线之后都会用到)npm i 包名
2.全局包
在执行 npm install 命令时,如果提供了 -g 参数,则会把包安装为全局包
全局包会被安装到 C:\Users\用户目录\AppData\Roaming\npm\node_modules 目录下**
npm install 包名 -g # 全局安装指定的包
npm uninstall 包名 -g # 卸载全局指定的包
注意:
1.只有工具性质的包,才有全局安装的必要性**。因为它们提供了好用的终端命令
2.判断某个包是否需要全局安装后才能使用,可以参考官方提供的使用说明即可
i5ting_toc
i5ting_toc 是一个可以把 md 文档转为 html 页面的小工具
npm i i5ting_toc -g # 安装
i5ting_toc -f sample.md -o # 转换
规范的包结构
一个规范的包,它的组成结构,必须符合以下 3 点要求
- 包必须以单独的目录而存在
- 包的顶级目录(点进去的目录)下要**必须包含 **
- package.json 这个包管理配置文件- package.json 中必须包含 name,version,main这三个属性,分别代表包的名字、版本号、包的入口(.js文件)(require()加载的文件)
关于更多的约束参考 https://yarnpkg.com/zh-Hans/docs/package-json
开发包
1.新建 itheima-tools 文件夹,作为包的根目录
2.在 itheima-tools 文件夹中,新建。也可以直接初始化(npm init -y)
●package.json (包管理配置文件)
{<!-- -->
"name": "itheima-tools",
"version": "1.1.0",
"main": "index.js",
"description": "提供了格式化时间、HTMLEscape相关的功能",//检索时出现的功能介绍
"keywords": [//搜索关键词
"itheima",
"dateFormat",
"escape"
],
"license": "ISC"//协议
}
●index.js (包的入口文件)
// src 文件夹下开发代码,导入到 index.js 中
const date = require('./src/dateFormat')
const escape = require('./src/htmlEscape')
// 向外暴露需要的成员
module.exports = {<!-- -->
...date, // ... 展开运算符,将data所有属性交给新对象
...escape // ... 展开运算符,将escape所有属性交给新对象
}
●src 源代码
// dateFormat.js
function dateFormat(dateStr) {<!-- -->/* 略 */}
function padZero(n) {<!-- -->return n > 9 ? n : '0' + n}
module.exports = {<!-- -->
dateFormat
}
// htmlEscape.js
function htmlEscape(htmlstr) {<!-- -->/* 略 */}
function htmlUnEscape(str) {<!-- -->/* 略 */}
module.exports = {<!-- -->
htmlEscape,
htmlUnEscape
}
●README.md (包的说明文档)
## 安装
```
npm install itheima-tools
```
## 导入
```js
const itheima = require('itheima-tools')
```
## 格式化时间
```js
// 调用 dateFormat 对时间进行格式化
const dtStr = itheima.dateFormat(new Date())
// 结果 2020-04-03 17:20:58
console.log(dtStr)
```
## 转义 HTML 中的特殊字符
```js
略
```
## 还原 HTML 中的特殊字符
```js
略
```
## 开源协议
ISC
使用
const itheima = require('./itheima-tools')
// 格式化时间的功能
const dtStr = itheima.dateFormat(new Date())
console.log(dtStr)
console.log('-----------')
const htmlStr = '<h1 title="abc">这是h1标签<span>123 </span></h1>'
const str = itheima.htmlEscape(htmlStr)
console.log(str)
console.log('-----------')
const str2 = itheima.htmlUnEscape(str)
console.log(str2)
发布包
1.https://www.npmjs.com/ 注册 npm 账号
2.在终端登录,终端中执行 npm login 命令,依次输入用户名、密码、邮箱后,即可登录成功
●注意:执行命令前,必须先把下包的服务器地址切换为 npm 的官方服务器。否则会导致发布包失败!先用nrm命令检查一下,nrm use 命令切换。
3.终端切换到包的根目录之后,运行 npm publish 命令,即可将包发布到 npm 上(注意:包名不能雷同)
4.运行 npm unpublish 包名 --force命令,即可从 npm 删除已发布的包
●npm unpublish 命令只能删除 72 小时以内发布的包
●npm unpublish 删除的包,在 24 小时内不允许重复发布
●发布包的时候要慎重,尽量不要往 npm 上发布没有意义的包
4.模块的加载机制
模块在第一次加载后会被缓存,多次调用 require() 模块的代码只会被执行一次。不论是内置模块、用户自定义模块、还是第三方模块,它们都会优先从缓存中加载,从而提高模块的加载效率。
内置模块的加载机制
●内置模块的加载优先级最高(当第三方模块和内置模块同名时)
自定义模块的加载机制
●使用 require() 加载自定义模块时,必须指定以 ./ 或 …/ 开头的路径标识符。在加载自定义模块时,如果没有指定 ./ 或 …/ 这样的路径标识符,则 node 会把它当作内置模块或第三方模块进行加载。
●在使用 require() 导入自定义模块时,如果省略了文件的扩展名,Node.js 会按顺序分别尝试加载以下的文件
1.按照确切的文件名进行加载
2.补全 .js 扩展名进行加载
3.补全 .json 扩展名进行加载
4.补全 .node 扩展名进行加载
5.加载失败,终端报错
第三方模块的加载机制
●如果传递给 require() 的模块标识符不是一个内置模块,也没有以 ./ 或 …/ 开头,则 Node.js 会从当前模块的父目录开始,尝试从 /node_modules 文件夹中加载第三方模块
●如果没有找到对应的第三方模块,则移动到再上一层父目录中,进行加载,直到文件系统的根目录
●假设在 ‘C:\Users\itheima\project\node_modules\a.js’ 里调用 require(‘tools’),Node.js 会按以下顺序查找
1.C:\Users\itheima\project\node_modules\tools
2.C:\Users\itheima\node_modules\tools
3.C:\Users\node_modules\tools
4.C:\node_modules\tools
5.报错
目录作为模块
●当把目录作为模块标识符,传递给 require() 进行加载的时候,有三种加载方式
1.在被加载的目录下查找一个叫做 package.json 的文件,并寻找 main 属性值作为 require() 加载的入口
2.如果目录里没有 package.json 文件,或者 main 入口不存在或无法解析,则 Node.js 将会试图加载目录下的 index.js 文件
3.如果以上两步都失败了,则 Node.js 会在终端打印错误消息,报告模块的缺失:Error: Cannot find module ‘xxx’
三、Express 简介
Express 是基于 Node.js 平台,快速、开放、极简的 Web 开发框架 通俗的理解:Express 的作用和 Node.js 内置的 http 模块类似,是专门用来创建 Web 服务器的。 本质就是一个 npm 上的第三方包,提供了快速创建 Web 服务器的便捷方法 中文官网 http://www.expressjs.com.cn/
不使用 Express 能否创建 Web 服务器? 能,使用 Node.js 提供的原生 http 模块即可 有了 http 内置模块,为什么还有用 Express? http 内置模块用起来很复杂,开发效率低; Express 是基于内置的 http 模块进一步封装出来的,能够极大的提高开发效率 http 内置模块与 Express 是什么关系? 类似于浏览器中 Web API 和 jQuery 的关系。后者是基于前者进一步封装出来的
对于前端程序员来说,最常见的两种服务器,分别是 Web 网站服务器:专门对外提供 Web 网页资源的服务器 API 接口服务器:专门对外提供 API 接口的服务器 使用 Express,我们可以方便、快速的创建 Web 网站的服务器或 API 接口的服务器
1.Express 的基本使用
1.在项目所处的目录中安装
npm i express@4.17.1
2.创建基本的 Web 服务器
const express = require('express); // 导入express
const app = express(); // 创建web服务器
app.listen(80, () => { // 调用回调函数,listen() 启动服务器
console.log(''express server running at http://127.0.0.1)
});
3.处理请求
// 监听 GET 请求
app.get('url', function(req, res) { /*处理函数*/ })
// 监听 POST 请求
app.post('url', function(req, res) { /*处理函数*/ })
app.post('url', function(req, res) {
// 通过 req.query 对象,可以访问到客户端通过查询字符串的形式,发送到服务器的参数
console.log(req.query)
// 通过 req.params 对象,可以访问到 URL 中,通过 : 匹配到的动态参数
console.log(req.parms)
// 通过 res.send()方法,把处理好的内容发送给客户端
res.send(data);
})
// 1. 导入 express
const express = require('express')
// 2. 创建 web 服务器
const app = express()
// 4. 监听客户端的 GET 和 POST 请求,并向客户端响应具体的内容
app.get('/user', (req, res) => {
// 调用 express 提供的 res.send() 方法,向客户端响应一个 JSON 对象
res.send({ name: 'zs', age: 20, gender: '男' })
})
app.post('/user', (req, res) => {
// 调用 express 提供的 res.send() 方法,向客户端响应一个 文本字符串
res.send('请求成功')
})
app.get('/', (req, res) => {
// 通过 req.query 可以获取到客户端发送过来的 查询参数 ‘/’表示ip根目录
// 注意:默认情况下,req.query 是一个空对象
console.log(req.query)
res.send(req.query)
})
// 注意:这里的 :id 是一个动态的参数
app.get('/user/:id/:username', (req, res) => {
// req.params 是动态匹配到的 URL 参数,默认也是一个空对象
console.log(req.params)
res.send(req.params)
})
// 3. 启动 web 服务器
app.listen(80, () => {
console.log('express server running at http://127.0.0.1')
})
注意: :id 是一个动态的参数,‘:’是固定的写法,可以有多个参数,其中id 是该参数名字,而req.params可以动态匹配该参数的值。
托管静态资源
- express 提供了一个非常好用的函数,叫做 express.static(),通过它,我们可以非常方便地创建一个静态资源服务器,例如,通过如下代码就可以将 public 目录下的图片、CSS 文件、JavaScript 文件对外开放访问了
app.use(express.statis('public'))
现在,你就可以访问 public 目录中的所有文件了
http://localhost/images/bg.jpg
http://localhost/css/style.css
- 注意:Express 在指定的静态目录中查找文件,对外提供资源访问路径,目录名不会出现在 URL 中
托管多个静态资源目录
- 访问静态资源文件时,express.static() 函数会根据目录的添加顺序查找所需的文件,如下同名先访问public文件夹
app.use(express.statis('public'))
app.use(express.statis('files'))
挂载路径前缀
- 如果希望在托管的静态资源访问路径之前,挂载路径前缀,则可以使用如下的方式
app.use('/public', express.statis('public'))
现在,你就可以通过带有 /public 前缀地址来访问 public 目录中的文件了
http://localhost:3000/public/images/kitten.jpg
http://localhost:3000/public/css/style.css
http://localhost:3000/public/js/app.js
const express = require('express')
const app = express()
// 在这里,调用 express.static() 方法,快速的对外提供静态资源
app.use('/files', express.static('./files'))
app.use(express.static('./clock'))
app.listen(80, () => {<!-- -->
console.log('express server running at http://127.0.0.1')
})
nodemon
在编写调试 Node.js 项目的时候,如果修改了项目的代码,需要频繁的手动重新启动服务,使用 nodemon
npm i -g nodemon
现在,我们可以将 node 命令替换为 nodemon 命令,使用 nodemon app.js 来启动项目。
nodemon app.js
2.Express 路由
广义上来讲,路由就是映射关系
在 Express 中,路由指的是客户端的请求与服务器处理函数之间的映射关系
- Express 中的路由分 3 部分组成,分别是请求的类型、请求的 URL 地址、处理函数,格式如下
app.method(path, handler()) // method 具体为 get post 等
路由的匹配过程
- 每当一个请求到达服务器之后,需要先经过路由的匹配,只有匹配成功之后,才会调用对应的处理函数。- 在匹配时,会按照路由的顺序进行匹配,如果请求类型和请求的 URL 同时匹配成功,则 Express 会将这次请求,转交给对应的 function 函数进行处理。
●注意
- 按照定义的先后顺序进行匹配
- 请求类型和请求的URL同时匹配成功,才会调用对应的处理函数
路由的使用
●在 Express 中使用路由最简单的方式,就是把路由挂载到 app 上,示例代码:
const express = require('express')
const app = express()
// 挂载路由
app.get('/', (req, res) => {<!-- -->res.send('hello world.')})
app.post('/', (req, res) => {<!-- -->res.send('Post Request.')})
app.listen(80, () => {<!-- -->console.log('express server running at http://127.0.0.1')})
模块化路由
为了方便对路由进行模块化的管理,Express 不建议将路由直接挂载到 app 上,而是推荐将路由抽离为单独的模块。将路由抽离为单独模块的步骤如下
- 创建路由模块对应的 .js 文件
- 调用 express.Router() 函数创建路由对象
- 向路由对象上挂载具体的路由- 使用 module.exports 向外共享路由对象
- 使用 app.use() 函数注册路由模块
// 路由模块 router.js
const express = require('express') // 1. 导入 express
const router = express.Router() // 2. 创建路由对象
// 3. 挂载具体的路由
router.get('/user/list', (req, res) => {<!-- -->res.send('Get user list.')})
router.post('/user/add', (req, res) => {<!-- -->res.send('Add new user.')})
// 4. 向外导出路由对象
module.exports = router
const express = require('express')
const router = require('./router') // 1. 导入路由模块
const app = express()
// 注意: app.use() 函数的作用,就是来注册全局中间件
// app.use('/files', express.static('./files'))
app.use('/api', router) // 2. 注册路由模块,若想使用静态资源一样可以加统一的访问前缀
app.listen(80, () => {<!-- -->console.log('http://127.0.0.1')})
3.Express 中间件
中间件(Middleware ),特指业务流程的中间处理环节
Express 中间件的调用流程
- 当一个请求到达 Express 的服务器之后,可以连续调用多个中间件,从而对这次请求进行预处理
Express 中间件的格式
- Express 的中间件,本质上就是一个 function 处理函数,Express 中间件的格式如下
- 注意:中间件函数的形参列表中,必须包含 next 参数,而路由处理函数中只包含 req 和 res
next 函数的作用
- next 函数是实现多个中间件连续调用的关键,它表示把流转关系转交给下一个中间件或路由
中间件初体验
全局生效的中间件:是客户端发起的任何请求,达到服务器之后,都会触发的中间件
- 通过app.use(中间件函数),即可定义一个全局生效的中间件
const express = require('express')
const app = express()
// 定义一个最简单的中间件函数
//mw指向的就是一个中间件函数
const mw = function (req, res, next) {<!-- -->
console.log('这是最简单的中间件函数')
// 把流转关系,转交给下一个中间件或路由
next()
}
// 将 mw 注册为全局生效的中间件
app.use(mw)
// 这是定义全局中间件的简化形式
// app.use((req, res, next) => {<!-- -->
// console.log('这是最简单的中间件函数')
// next()
// })
app.get('/', (req, res) => {<!-- -->
console.log('调用了 / 这个路由')
res.send('Home page.')
})
app.get('/user', (req, res) => {<!-- -->
console.log('调用了 /user 这个路由')
res.send('User page.')
})
app.listen(80, () => {<!-- -->
console.log('http://127.0.0.1')
})
中间件的作用
- 多个中间件之间,共享同一份 req和 res。基于这样的特性,我们可以在上游的中间件中,统一为 req 或 res 对象添加自定义的属性或方法,供下游的中间件或路由进行使用
const express = require('express')
const app = express()
//定义全局中间件的简化形式
app.use((req, res, next) => {<!-- -->
const time = Date.now() // 获取到请求到达服务器的时间
req.startTime = time
// 为 req 对象,挂载自定义属性,从而把时间共享给后面的所有路由!!!!!!!!!!
next()
})
app.get('/', (req, res) => {<!-- -->res.send('Home page.' + req.startTime)})
app.get('/user', (req, res) => {<!-- -->res.send('User page.' + req.startTime)})
app.listen(80, () => {<!-- -->console.log('http://127.0.0.1')})
定义多个全局中间件,按照顺序先后调用
const express = require('express')
const app = express()
// 定义第一个全局中间件
app.use((req, res, next) => {<!-- -->
console.log('调用了第1个全局中间件')
next()
})
// 定义第二个全局中间件
app.use((req, res, next) => {<!-- -->
console.log('调用了第2个全局中间件')
next()
})
app.get('/user', (req, res) => {<!-- -->res.send('User page.')})
app.listen(80, () => {<!-- -->console.log('http://127.0.0.1')})
局部生效的中间件:不使用 app.use() 定义的中间件叫做局部生效的中间件
定义多个局部中间件
const express = require('express')
const app = express()
// 1. 定义中间件函数
const mw1 = (req, res, next) => {<!-- -->
console.log('调用了局部生效的中间件')
next()
}
const mw2 = (req, res, next) => {<!-- -->
console.log('调用了第二个局部生效的中间件')
next()
}
// 2. 创建路由,可见mw1,mw2只会在对应有调用的中间件中生效,调用:在get中的url和method中加一个/多个参数
//以下两种方式等价
app.get('/', mw1, nw2, (req, res) => {<!-- -->res.send('Home page.')})
app.get('/user', [mw1, mw2],(req, res) => {<!-- -->res.send('User page.')})
app.listen(80, function () {<!-- -->console.log('Express server running at http://127.0.0.1')})
中间件的5个使用注意事项
- 一定要在路由之前注册中间件,如果直接匹配到路由就会直接响应了。
- 客户端发送过来的请求,可以连续调用多个中间件进行处理
- 执行完中间件的业务代码之后,不要忘记调用 next() 函数
- 为了防止代码逻辑混乱,调用 next() 函数后不要再写额外的代码
- 连续调用多个中间件时,多个中间件之间,共享req 和 res 对象
中间件的分类
为了方便大家理解和记忆中间件的使用,Express 官方把常见的中间件用法,分成了 5 大类
- 应用级别的中间件
- 路由级别的中间件
- 错误级别的中间件
- Express 内置的中间件
- 第三方的中间件
应用级别的中间件(就是一种叫法,没啥用) 通过 app.use() 或 app.get() 或 app.post() ,绑定到 app 实例上的中间件,叫做应用级别的中间件
路由级别的中间件 绑定到 express.Router() 实例上的中间件,叫做路由级别的中间件。它的用法和应用级别中间件没有任何区别。只不过,应用级别中间件是绑定到 app 实例上,路由级别中间件绑定到 router 实例上
const express = require('express')
const router = express.Router()
// 路由级别的中间件
router.use((req, res, next)=>{<!-- -->
console.log('Time:' + Date.now())
next()
})
module.experts = router
错误级别的中间件
错误级别中间件的作用:专门用来捕获整个项目中发生的异常错误,从而防止项目异常崩溃的问题。格式:错误级别中间件的 function 处理函数中,必须有 4 个形参,形参顺序从前到后,分别是 (err, req, res, next)。 注意:错误级别的中间件,必须注册在所有路由之后!
const express = require('express')
const app = express()
// 1. 定义路由
app.get('/', (req, res) => {<!-- -->
// 1.人为的制造错误
throw new Error('服务器内部发生了错误!')
res.send('Home page.')
})
// 2. 定义错误级别的中间件,捕获整个项目的异常错误,从而防止程序的崩溃
app.use((err, req, res, next) => {<!-- -->
console.log('发生了错误!' + err.message)
res.send('Error:' + err.message)
})
app.listen(80, function () {<!-- -->console.log('Express server running at http://127.0.0.1')})
Express内置的中间件
自 Express 4.16.0 版本开始,Express 内置了 3 个常用的中间件,极大提高了 Express 项目的开发效率和体验
- express.static() 快速托管静态资源的内置中间件,例如: HTML 文件、图片、CSS 样式等(无兼容性,任何版本都能用)
- express.json() 解析 JSON 格式的请求体数据(有兼容性,仅在 4.16.0+ 版本中可用)
- express.urlencoded(option) 解析 URL-encoded 格式的请求体数据(有兼容性,仅在 4.16.0+ 版本中可用)
const express = require('express')
const app = express()
// 通过 express.json() 这个中间件,解析表单中的 JSON 格式的数据
app.use(express.json())
// 通过 express.urlencoded() 这个中间件,来解析 表单中的 url-encoded 格式的数据
app.use(express.urlencoded({<!-- --> extended: false }))
app.post('/user', (req, res) => {<!-- -->
// 在服务器端,可以通过 req.body 来获取 JSON 格式的表单数据和 url-encoded 格式的请求体数据
// 默认情况下,如果不配置解析表单数据的中间件,则 req.body 默认等于 undefined
console.log(req.body)
res.send('ok')
})
app.post('/book', (req, res) => {<!-- -->
console.log(req.body)
res.send('ok')
})
// 调用 app.listen 方法,指定端口号并启动web服务器
app.listen(80, function () {<!-- -->
console.log('Express server running at http://127.0.0.1')
})
第三方的中间件
非 Express 官方内置的,由第三方开发出来的中间件。项目中,可以按需下载并配置第三方中间件,从而提高项目的开发效率
- 如:在 express@4.16.0 之前的版本中,经常使用 body-parser 这个第三方中间件,来解析请求体数据。使用步骤如下
- 运行 npm install body-parser安装中间件
- 使用 require导入中间件
- 调用 app.use() 注册并使用中间件
- 注意:Express 内置的 express.urlencoded,就是基于 body-parser 这个第三方中间件进一步封装出来的
const express = require('express')
const app = express()
// 1. 导入解析表单数据的中间件 body-parser
const parser = require('body-parser')
// 2. 使用 app.use() 注册中间件
app.use(parser.urlencoded({ extended: false }))
// app.use(express.urlencoded({ extended: false }))
app.post('/user', (req, res) => {
// 如果没有配置任何解析表单数据的中间件,则 req.body 默认等于 undefined
console.log(req.body)
res.send('ok')
})
app.listen(80, function () {console.log('Express server running at http://127.0.0.1')})
自定义中间件
自己手动模拟一个类似于 express.urlencoded这样的中间件,来解析 POST 提交到服务器的表单数据,实现步骤:
- 定义中间件
- 监听 req 的 data 事件
- 来获取客户端发送到服务器的数据。如果数据量比较大,无法一次性发送完毕,则客户端会把数据切割后,分批发送到服务器。所以 data 事件可能会触发多次,每一次触发 data 事件时,获取到数据只是完整数据的一部分,需要手动对接收到的数据进行拼接。
- 监听 req 的 end 事件
- 当请求体数据接收完毕之后,会自动触发 req 的 end 事件,可以在 req 的 end 事件中,拿到并处理完整的请求体数据
- Node.js 内置了一个 querystring 模块,专门用来处理查询字符串。通过这个模块提供的 parse() 函数,可以轻松把查询字符串,解析成对象的格式
- 使用 querystring模块解析请求体数据
- 将解析出来的数据对象挂载为 req.body
- 将自定义中间件封装为模块
// custom-body-parser.js
const qs = require('querystring') // 导入 Node.js 内置的 querystring 模块
const bodyParser = (req, res, next) => {
// 定义中间件具体的业务逻辑
// 1. 定义一个 str 字符串,专门用来存储客户端发送过来的请求体数据
let str = ''
// 2. 监听 req 的 data 事件,str 中存放的是完整的请求体数据
req.on('data', (chunk) => {
str += chunk
})
// 3. 监听 req 的 end 事件(请求体发送完毕后自动触发)
req.on('end', () => {
req.body = qs.parse(str) // 把字符串格式的请求体数据,解析成对象格式,不解析的话是 name=zs&gender=%6Eksskk
//将解析出来的数据挂载在req.body上,供下游中间件访问
next()
})
}
module.exports = bodyParser
const express = require('express')
const app = express()
// 导入自己封装的中间件模块,将自定义的中间件函数,注册为全局可用的中间件
app.use(require('./custom-body-parser'))
app.post('/user', (req, res) => {
res.send(req.body)
})
// 调用 app.listen 方法,指定端口号并启动web服务器
app.listen(80, function () {
console.log('Express server running at http://127.0.0.1')
})
4.使用 Express 写接口
浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域
接口的跨域问题
刚才编写的 GET 和 POST接口,存在一个很严重的问题:不支持跨域请求,解决接口跨域问题的方案主要有两种
- CORS(主流解决方案,推荐)
- JSONP(有缺陷:只支持 GET 请求)
使用 CORS 中间件解决跨域问题
CORS(Cross-Origin Resource Sharing,跨域资源共享)是 Express 的一个第三方中间件,由一系列 HTTP 响应头组成,这些 HTTP 响应头决定浏览器是否阻止前端 JS 代码跨域获取资源。可以很方便地解决跨域问题。使用步骤分为如下 3 步
- 运行 npm install cors 安装中间件
- 使用 const cors = require(‘cors’) 导入中间件
- 在路由之前调用 app.use(cors()) 配置中间件
注意点:
- CORS 在服务器端进行配置,客户端浏览器无须做任何额外的配置,即可请求开启了 CORS 的接口。
- CORS 在浏览器中有兼容性,只有支持 XMLHttpRequest Level2 的浏览器,才能正常访问开启了 CORS 的服务端接口(如:IE10+、Chrome4+、FireFox3.5+)
响应头:
响应头部可以携带一个Access-Control-Allow-Origin字段,语法如下:
- **Access-Control-Allow-Origin: 或 ***
Origin指定了允许访问该资源的外域 URL,可以控制哪些网页可以请求该服务器,而*表示所有网页均可
res.setHeader('Access-Control-Allow-Origin', 'http....')
2.Access-Control-Allow-Headers :
默认情况下,CORS 仅支持客户端向服务器发送如下的 9 个请求头
Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width 、Content-Type (值仅限于 text/plain、multipart/form-data、application/x-www-form-urlencoded)
如果客户端向服务器发送了额外的请求头信息,则需要在服务器端,通过 Access-Control-Allow-Headers 对额外的请求头进行声明,否则这次请求会失败!
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, X-custom-Header')
3.Access-Control-Allow-Methods:(更多的请求方式)
默认情况下,CORS 仅支持客户端发起 GET、POST、HEAD 请求。
如果客户端希望通过 PUT、DELETE 等方式请求服务器的资源,则需要在服务器端,通过 Access-Control-Alow-Methods来指明实际请求所允许使用的 HTTP 方法
res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE')
res.setHeader('Access-Control-Allow-Methods', '*') // 支持所有请求
CROS请求分类
客户端在请求 CORS 接口时,根据请求方式和请求头的不同,可以将 CORS 的请求分为两大类:
- 简单请求
- 同时满足以下两大条件的请求,就属于简单请求
请求方式:GET、POST、HEAD 三者之一 - HTTP 头部信息不超过以下几种字段:无自定义头部字段、Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width 、Content-Type(只有三个值application/x-www-form-urlencoded、multipart/form-data、text/plain)
- 预检请求
- 只要符合以下任何一个条件的请求,都需要进行预检请求
ⅰ请求方式为 GET、POST、HEAD 之外的请求 Method 类型
ⅱ请求头中包含自定义头部字段
ⅲ向服务器发送了 application/json 格式的数据 - 在浏览器与服务器正式通信之前,浏览器会先发送 OPTION 请求进行预检,以获知服务器是否允许该实际请求,这一次的 OPTION 请求称为预检请求。服务器成功响应预检请求后,才会发送真正的请求,并且携带真实数据。
简单请求的特点:客户端与服务器之间只会发生一次请求
预检请求的特点:客户端与服务器之间会发生两次请求,OPTION 预检请求成功之后,才会发起真正的请求
// apiRouter.js
const express = require('express')
const router = express.Router()
// GET 接口
router.get('/get', (req, res) => {
// 通过 req.query 获取客户端发送到服务器的数据
const query = req.query
res.send({
status: 0, // 0 表示处理成功,1 表示处理失败
msg: 'GET 请求成功!', // 状态的描述
data: query, // 需要响应给客户端的数据
})
})
// POST 接口
router.post('/post', (req, res) => {
// 通过 req.body 获取请求体中包含的 url-encoded 格式的数据
// 意在路由模块之前配置中间件url-encoded
const body = req.body
res.send({
status: 0,
msg: 'POST 请求成功!',
data: body,
})
})
// DELETE 接口
router.delete('/delete', (req, res) => {
res.send({
status: 0,
msg: 'DELETE请求成功',
})
})
module.exports = router
JSONP 接口(有缺陷只支持GET)
- 概念:浏览器端通过
实现 JSONP 接口的步骤:
- 获取客户端发送过来的回调函数的名字
- 得到要通过 JSONP 形式发送给客户端的数据
- 根据前两步得到的数据,拼接出一个函数调用的字符串
- 把上一步拼接得到的字符串,响应给客户端的
const express = require('express')
const app = express()
// 配置解析表单数据的中间件
app.use(express.urlencoded({ extended: false }))
// 必须在配置 cors 中间件之前,配置 JSONP 的接口
app.get('/api/jsonp', (req, res) => {
// 定义 JSONP 接口具体的实现过程
const funcName = req.query.callback // 1. 得到函数的名称
const data = { name: 'zs', age: 22 } // 2. 定义要发送到客户端的数据对象
const scriptStr = `${funcName}(${JSON.stringify(data)})` // 3. 拼接出一个函数的调用
res.send(scriptStr) // 4. 把拼接的字符串,响应给客户端
})
// 一定要在路由之前,配置 cors 这个中间件,从而解决接口跨域的问题
const cors = require('cors')
app.use(cors())
// 导入路由模块
const router = require('./16.apiRouter')
// 把路由模块,注册到 app 上
app.use('/api', router)
app.listen(80, () => {console.log('express server running at http://127.0.0.1')})
测试模块:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<button id="btnGET">GET</button>
<button id="btnPOST">POST</button>
<button id="btnDelete">DELETE</button>
<button id="btnJSONP">JSONP</button>
<script>
$(function () {
// 1. 测试GET接口
$('#btnGET').on('click', function () {
$.ajax({
type: 'GET',
url: 'http://127.0.0.1/api/get',
data: { name: 'cess', age: 18 },
success: function (res) {
console.log(res)
},
})
})
// 2. 测试POST接口
$('#btnPOST').on('click', function () {
$.ajax({
type: 'POST',
url: 'http://127.0.0.1/api/post',
data: { bookname: '开端', author: '祈祷君' },
success: function (res) {
console.log(res)
},
})
})
// 3. 为删除按钮绑定点击事件处理函数
$('#btnDelete').on('click', function () {
$.ajax({
type: 'DELETE',
url: 'http://127.0.0.1/api/delete',
success: function (res) {
console.log(res)
},
})
})
// 4. 为 JSONP 按钮绑定点击事件处理函数
$('#btnJSONP').on('click', function () {
$.ajax({
type: 'GET',
url: 'http://127.0.0.1/api/jsonp',
dataType: 'jsonp',
success: function (res) {
console.log(res)
},
})
})
})
</script>
</body>
</html>
四、http 模块
http 模块是 Node.js 官方提供的用来创建 web 服务器的模块
通过 http 模块提供的 http.createServer()
方法,就能方便的把一台普通的电脑,变成一台 Web 服务器,从而对外提供 Web 资源服务。
在 Node.js 中,不需要使用 IIS、Apache(针对php) 等第三方 web 服务器软件(普通的电脑常常安装这些),而是基于 Node.js 提供的 http 模块,通过几行简单的代码,就能轻松的手写一个服务器软件,从而对外提供 web 服务
导入 http 模块创建 Web 服务器:
const http = require("http")
服务器相关的概念
就是互联网上每台计算机的唯一地址,因此 IP 地址具有唯一性。如果把“个人电脑”比作“一台电话”,那么“IP地址”就相当于“电话号码”,只有在知道对方 IP 地址的前提下,才能与对应的电脑之间进行数据通信。 IP 地址的格式:通常用“点分十进制”表示成(a.b.c.d)的形式,其中,a,b,c,d都是 0~255 之间的十进制整数。例如:用点分十进表示的 IP地址(192.168.1.1) 注意
●互联网中每台 Web 服务器,都有自己的 IP 地址,如:可以在 Windows 的终端中运行 ping www.baidu.com 命令,即可查看到百度服务器的 IP 地址
●在开发期间,自己的电脑既是一台服务器,也是一个客户端,为了方便测试,可以在自己的浏览器中输入 127.0.0.1 这个 IP 地址,就能把自己的电脑当做一台服务器进行访问了
域名和域名服务器
尽管 IP 地址能够唯一地标记网络上的计算机,但IP地址是一长串数字,不直观,而且不便于记忆,于是人们又发明了另一套字符型的地址方案,即所谓的域名(Domain Name)地址。 IP地址和域名是一一对应的关系,这份对应关系存放在一种叫做域名服务器(DNS,Domain name server)的电脑中。使用者只需通过好记的域名访问对应的服务器即可,对应的转换工作由域名服务器实现。因此,域名服务器就是提供 IP 地址和域名之间的转换服务的服务器。 注意
●单纯使用 IP 地址,互联网中的电脑也能够正常工作。但是有了域名的加持,能让互联网的世界变得更加方便
●在开发测试期间, 127.0.0.1对应的域名是 localhost,都代表自己的这台电脑,在使用效果上没有任何区别
端口号
计算机中的端口号,就好像是现实生活中的门牌号一样。通过门牌号,外卖小哥可以在整栋大楼众多的房间中,准确把外卖送到你的手中。 同样的道理,在一台电脑中,可以运行成百上千个 web 服务。每个 web 服务都对应一个唯一的端口号。客户端发送过来的网络请求,通过端口号,可以被准确地交给对应的 web 服务进行处理。
注意
●每个端口号不能同时被多个 web 服务占用
●在实际应用中,URL 中的 80 端口可以被省略
创建最基本的 web 服务器
创建 web 服务器的基本步骤
- 导入 http 模块1. 创建 web 服务器实例1.
server.on()
为服务器实例绑定 request事件,监听客户端的请求1. 启动服务器
// 1. 导入 http 模块
const http = require('http')
// 2. 创建 web 服务器实例
const server = http.createServer()
// 3. 为服务器实例绑定 request 事件,监听客户端的请求
server.on('request', function (req, res) {<!-- -->
console.log('Someone visit our web server.')
})
// 4. 启动服务器
server.listen(8080, function () {<!-- -->
console.log('server running at http://127.0.0.1:8080')
})
req请求对象
只要服务器接收到了客户端的请求,就会调用通过 server.on() 为服务器绑定的 request 事件处理函数
res响应对象
在服务器 request 事件处理函数中,如果想访问与服务器相关的数据或属性,通过res.end(data)
方法响应。
server.on('request', (req, res) => {<!-- -->
// req.url 是客户端请求的 URL 地址
const url = req.url
// req.method 是客户端请求的 method 类型
const method = req.method
const str = `Your request url is ${<!-- -->url}, and request method is ${<!-- -->method}`
console.log(str)
// 调用 res.end() 方法,向客户端响应一些内容
res.end(str)
})
解决中文乱码问题
当调用 res.end() 方法,向客户端发送中文内容的时候,会出现乱码问题,此时,需要手动设置内容的编码格式
server.on('request', (req, res) => {<!-- -->
// 定义一个字符串,包含中文的内容
const str = `您请求的 URL 地址是 ${<!-- -->req.url},请求的 method 类型为 ${<!-- -->req.method}`
// 调用 res.setHeader() 方法,设置 Content-Type 响应头,解决中文乱码的问题
res.setHeader('Content-Type', 'text/html; charset=utf-8')
// res.end() 将内容响应给客户端
res.end(str)
})
实例
根据不同的 url 响应不同的 html 内容
步骤
- 获取请求的 url地址1. 设置默认的响应内容为 404 Not found1. 判断用户请求的是否为 / 或 /index.html 首页1. 判断用户请求的是否为 /about.html 关于页面1. 设置 Content-Type 响应头,防止中文乱码1. 使用 res.end() 把内容响应给客户端
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 = '<h1>404 Not found!</h1>'
// 3. 判断用户请求的是否为 / 或 /index.html 首页
// 4. 判断用户请求的是否为 /about.html 关于页面
if (url === '/' || url === '/index.html') {<!-- -->
content = '<h1>首页</h1>'
} else if (url === '/about.html') {<!-- -->
content = '<h1>关于页面</h1>'
}
// 5. 设置 Content-Type 响应头,防止中文乱码
res.setHeader('Content-Type', 'text/html; charset=utf-8')
// 6. 使用 res.end() 把内容响应给客户端
res.end(content)
})
server.listen(80, () => {<!-- -->
console.log('server running at http://127.0.0.1')
})