node入门 ----基于黑马机构的课程

目录

01.什么是 Node.js

目标

讲解

02.fs模块-读写文件

目标

讲解

03.path模块-路径处理

目标

讲解

04.压缩前端html

目标

讲解

05.压缩前端JS

目标

讲解

07.http模块-创建Web服务

目标

讲解

讲解

08.案例-省份列表接口

目标

讲解

二.学习目标

01.模块化简介

目标

讲解

02.ECMAScript标准-默认导出和导入

目标

讲解

03.ECMAScript标准-命名导出和导入

目标

讲解

04.包的概念

目标

讲解

05.npm软件包管理器

目标

讲解

06.npm安装所有依赖

目标

讲解

07.Express快速搭建 Web 服务

目标

讲解

10.案例-获取省份列表接口

目标

讲解

---

01.什么是 Node.js

目标

什么是 Node.js，有什么用，为何能独立执行 JS 代码，演示安装和执行 JS 文件内代码

讲解

1. Node.js 是一个独立的 JavaScript 运行环境，能独立执行 JS 代码，因为这个特点，它可以用来编写服务器后端的应用程序
2. Node.js 作用除了编写后端应用程序，也可以对前端代码进行压缩，转译，整合等等，提高前端开发和运行效率
3. Node.js 基于Chrome V8 引擎封装，独立执行 JS 代码，但是语法和浏览器环境的 V8 有所不同，没有 document 和 window 但是都支持 ECMAScript 标准的代码语法
4. 想要得到 Node.js 需要把这个软件安装到电脑，在素材里有安装程序（window 和 mac 环境的）参考 PPT 默认下一步安装即可
5. Node.js 没有图形化界面，需要使用 cmd 终端命令行（利用一些命令来操控电脑执行某些程序软件）输入，node -v 检查是否安装成功
6. 官网：https://nodejs.org/zh-cn/

Node.js 常用命令：

02.fs模块-读写文件

目标

了解模块概念，使用 fs 模块封装的方法读写文件内容

讲解

1. 模块：类似插件，封装了方法和属性供我们使用
2. fs 模块：封装了与本机文件系统进行交互的，方法和属性
3. fs 模块使用语法如下：
   • 加载 fs 模块，得到 fs 对象

const fs = require('fs')

• • 写入文件内容语法：

fs.writeFile('文件路径', '写入内容', err => {
  // 写入后的回调函数
})

（1）fs.readFile()的语法格式

使用fs.readFile()方法，可以读取指定文件中的内容，语法格式如下：

fs.readFile(path[, options], callback)

【ps：被中括号包起来的参数均为可选参数项】

path：必选参数，字符串，表示文件路径。

options：可选参数，表示以什么编码格式来读取文件。

callback：必选参数，文件读取完成后，通过回调函数拿到读取的结果。

示例代码：

1. 需求：向 test.txt 文件写入内容并读取打印

/**
 * 目标：使用 fs 模块，读写文件内容
 * 语法：
 * 1. 引入 fs 模块
 * 2. 调用 writeFile 写入内容
 * 3. 调用 readFile  读取内容
 */
// 1. 引入 fs 模块
const fs = require('fs')
// 2. 调用 writeFile 写入内容
// 注意：建议写入字符串内容，会覆盖目标文件所有内容
fs.writeFile('./text.txt', '欢迎使用 fs 模块读写文件内容', err => {
  if (err) console.log(err)
  else console.log('写入成功')
})
// 3. 调用 readFile  读取内容
fs.readFile('./text.txt', (err, data) => {
  if (err) console.log(err)
  else console.log(data.toString()) // 把 Buffer 数据流转成字符串类型
})

03.path模块-路径处理

目标

使用 path 模块来得到绝对路径

讲解

1. 为什么在 Node.js 待执行的 JS 代码中要用绝对路径：

Node.js 执行 JS 代码时，代码中的路径都是以终端所在文件夹出发查找相对路径，而不是以我们认为的从代码本身出发，会遇到问题，所以在 Node.js 要执行的代码中，访问其他文件，建议使用绝对路径

1. 

   

   问题原因：就是从代码文件夹出发，使用../text.txt解析路径，找不到目标文件，报错了！
2. 解决方案：使用模块内置变量 __dirname配合 path.join() 来得到绝对路径使用

const fs = require('fs')
console.log(__dirname) // D:\备课代码\2_node_3天\Node_代码\Day01_Node.js入门\代码\03
​
// 1. 加载 path 模块
const path = require('path')
// 2. 使用 path.join() 来拼接路径
const pathStr = path.join(__dirname, '..', 'text.txt')
console.log(pathStr)
​
fs.readFile(pathStr, (err, data) => {
  if (err) console.log(err)
  else console.log(data.toString())
})

1. 再次执行查看问题就被修复了！以后在 Node.js 要执行的 JS 代码中访问其他文件的路径，都建议使用绝度路径

04.压缩前端html

目标

压缩前端代码，体验前端工程化的例子

讲解

1. 前端工程化：前端代码压缩，整合，转译，测试，自动部署等等工具的集成统称，为了提高前端开发项目的效率
2. 需求：把准备好的 html 文件里的回车符（\r）和换行符（\n）去掉进行压缩，写入到新 html 中
3. 步骤：
   1. 读取源 html 文件内容
   2. 正则替换字符串
   3. 写入到新的 html 文件中，并运行查看是否能正常打开网页
4. 代码如下：

/**
 * 目标一：压缩 html 里代码
 * 需求：把 public/index.html 里的，回车/换行符去掉，写入到 dist/index.html 中
 *  1.1 读取 public/index.html 内容
 *  1.2 使用正则替换内容字符串里的，回车符\r 换行符\n
 *  1.3 确认后，写入到 dist/index.html 内
 */
const fs = require('fs')
const path = require('path')
// 1.1 读取 public/index.html 内容
fs.readFile(path.join(__dirname, 'public', 'index.html'), (err, data) => {
  const htmlStr = data.toString()
  // 1.2 使用正则替换内容字符串里的，回车符\r 换行符\n
  const resultStr = htmlStr.replace(/[\r\n]/g, '')
  // 1.3 确认后，写入到 dist/index.html 内
  fs.writeFile(path.join(__dirname, 'dist', 'index.html'), resultStr, err => {
    if (err) console.log(err)
    else console.log('压缩成功')
  })
})

05.压缩前端JS

目标

体验前端工程化，压缩，转译，整合代码

讲解

1. 需求：把准备好的 JS 文件代码的回车符，换行符，打印语句去掉，并插入到之前 html 内容之后
2. 步骤：
   1. 读取 js 文件内容
   2. 正则表达式替换回车符，换行符，打印语句为空字符串
   3. 拼接 html 代码和 js 代码，写入到新的 html 文件中
3. 代码如下：

/**
 * 目标二：压缩 js 里代码，并整合到 html 中一起运行
 *  2.1 读取 public/index.js 内容
 *  2.2 使用正则替换内容字符串里的，回车符\r 换行符\n 打印语句console.log('xxx');
 *  2.3 确认后，拼接 html 内容写入到 dist/index.html 内
 */
const fs = require('fs')
const path = require('path')
fs.readFile(path.join(__dirname, 'public', 'index.html'), (err, data) => {
  const htmlStr = data.toString()
  const resultStr = htmlStr.replace(/[\r\n]/g, '')
​
  // 2.1 读取 public/index.js 内容
  fs.readFile(path.join(__dirname, 'public', 'index.js'), (err, data) => {
    const jsStr = data.toString()
    // 2.2 使用正则替换内容字符串里的，回车符\r 换行符\n 打印语句console.log('xxx');
    const jsResultStr = jsStr.replace(/[\r\n]/g, '').replace(/console.log\('.+?'\);/g, '')
    const result = `<script>${jsResultStr}</script>`
    console.log(result)
​
    // 2.3 确认后，拼接 html 内容写入到 dist/index.html 内
    fs.writeFile(path.join(__dirname, 'dist', 'index.html'), resultStr + result, err => {
      if (err) console.log(err)
      else console.log('压缩成功')
    })
  })
​
​
})

07.http模块-创建Web服务

目标

基于 Node.js 环境，使用内置 http 模块，创建 Web 服务程序

讲解

1. 需求：引入 http 模块，使用相关语法，创建 Web 服务程序，响应返回给请求方一句提示 ‘hello，world’
2. 步骤：
   1. 引入 http 模块，创建 Web 服务对象
   2. 监听 request 请求事件，对本次请求，做一些响应处理
   3. 启动 Web 服务监听对应端口号
   4. 运行本服务在终端进程中，用浏览器发起请求
3. 注意：本机的域名叫做 localhost
4. 代码如下：

/**
 * 目标：使用 http 模块，创建 Web 服务
 * Web服务：一个程序，用于提供网上信息浏览服务
 * 步骤：
 *  1. 引入 http 模块，创建 Web 服务对象
 *  2. 监听 request 事件，对本次请求，做一些响应处理
 *  3. 启动 Web 服务监听对应端口号
 *  4. 运行本服务在终端，用浏览器访问 http://localhost:3000/ 发起请求（localhost 是本机域名）
 * 注意：终端里启动了服务，如果想要终止按 ctrl c 停止即可
 */
// 1. 引入 http 模块，创建 Web 服务对象
const http = require('http')
const server = http.createServer()
// 2. 监听 request 事件，对本次请求，做一些响应处理
server.on('request', (req, res) => {
  res.end('hello, world') // 一次请求只能对应一次响应
})
// 3. 启动 Web 服务监听对应端口号
server.listen(3000, () => {
  console.log('Web 服务启动了')
})

让 Web 服务，返回中文字符，浏览器正确解析加载

讲解

1. 需求：让 Web 服务返回中文字符，浏览器能正确加载解析
2. 步骤：给 Web 服务程序添加响应头，设置内容类型和正确的编码格式，重启 Web 服务测试访问即可

res.setHeader('Content-Type', 'text/html;charset=utf-8')

1. 编码：编码是信息从一种形式或格式转换为另一种形式的过程，指的把文字在计算机里的二进制数据，用什么形式展示出来
2. utf-8编码：是一种关系映射表，也叫 utf-8 编码表，可以把中文，英文等等很多字符准确的展示出来

08.案例-省份列表接口

目标

基于 Web 服务，编写代码，把省份列表数据响应给请求方

讲解

1. 需求：基于 Web 服务，开发提供省份列表数据的接口，了解下后端的代码工作过程
3. 步骤：
   1. 基于 http 模块，创建 Web 服务
   2. 使用 req.url 获取请求资源路径，并读取 province.json 理论省份数据返回给请求方
   3. 其他路径，暂时返回不存在的提示
   4. 运行 Web 服务，用浏览器发起请求测试，看是否可以获取到省份列表数据
4. 代码如下：

/**
 * 目标：基于 Web 服务，开发-城市列表数据接口
 * 步骤：
 *  1. 判断 req.url 资源路径+查询字符串，路径前缀匹配/api/city
 *  2. 借助 querystring 模块的方法，格式化查询参数字符串
 *  3. 读取 city.json 城市数据，匹配省份名字下属城市列表
 *  4. 返回城市列表，启动 Web 服务测试
 */
const qs = require('querystring')
const fs = require('fs')
const path = require('path')
const http = require('http')
const server = http.createServer()
server.on('request', (req, res) => {
  // 省份列表接口
  if (req.url === '/api/province') {
    fs.readFile(path.join(__dirname, 'data/province.json'), (err, data) => {
      res.setHeader('Content-Type', 'application/json;charset=utf-8')
      res.end(data.toString())
    })
    // 1. 判断 req.url 资源路径+查询字符串，路径前缀匹配/api/city
  } else if (req.url.startsWith('/api/city')) {
    // 城市列表接口
    // 2. 借助 querystring 模块的方法，格式化查询参数字符串
    // req.url: '/api/city?pname=辽宁省'
    // 以?分隔符分割，拿到'pname=辽宁省'查询参数字符串
    const str = req.url.split('?')[1]
    // 把查询参数字符串 转成 JS 对象结构
    const query = qs.parse(str)
    // 获取前端发来的省份名字
    const pname = query.pname
    // 3. 读取 city.json 城市数据，匹配省份名字下属城市列表
    fs.readFile(path.join(__dirname, 'data/city.json'), (err, data) => {
      // 把 JSON 文件内对象格式字符串，转成对象结构
      const obj = JSON.parse(data.toString())
      // 省份名字作为 key，去obj对象里取到对应城市列表 value 值
      const cityList = obj[pname]
      // 4. 返回城市列表，启动 Web 服务测试
      // 响应的是 JSON 字符串内容
      res.setHeader('Content-Type', 'application/json;charset=utf-8')
      res.end(JSON.stringify(cityList))
    })
  } else {
    res.setHeader('Content-Type', 'text/html;charset=utf-8')
    res.end('你要访问的资源路径不存在')
  }
})
server.listen(3000, () => {
  console.log('Web 服务启动了')
})

二.学习目标

1. 了解 Node.js 模块化的概念和好处
2. 了解 Node.js 中软件包的概念和引入
3. 掌握 Node.js 的 npm 软件包管理器使用
4. 了解 Node.js 中本地软件包与全局软件包区别
5. 了解 基于 Express 搭建 Web 服务
6. 掌握同源策略和跨域概念，以及开发环境和生产环境的解决方案

01.模块化简介

目标

了解模块化概念和好处，以及 CommonJS 标准语法导出和导入

讲解

1. 在 Node.js 中每个文件都被当做是一个独立的模块，模块内定义的变量和函数都是独立作用域的，因为 Node.js 在执行模块代码时，将使用如下所示的函数封装器对其进行封装

2. 

   而且项目是由多个模块组成的，每个模块之间都是独立的，而且提高模块代码复用性，按需加载，独立作用域

   

   但是因为模块内的属性和函数都是私有的，如果对外使用，需要使用标准语法导出和导入才可以，而这个标准叫 CommonJS 标准，接下来我们在一个需求中，体验下模块化导出和导入语法的使用
3. 需求：定义 utils.js 模块，封装基地址和求数组总和的函数，导入到 index.js 使用查看效果

   • 

   • 导出语法：

module.exports = {
  对外属性名: 模块内私有变量
}

• • 导入语法：

const 变量名 = require('模块名或路径')
// Node.js 环境内置模块直接写模块名（例如：fs，path，http）
// 自定义模块：写模块文件路径（例如：./utils.js)

• • 变量名的值接收的就是目标模块导出的对象
  • 代码实现
    • utils.js：导出

/**
 * 目标：基于 CommonJS 标准语法，封装属性和方法并导出
 */
const baseURL = 'http://hmajax.itheima.net'
const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)
​
// 导出
module.exports = {
  url: baseURL,
  arraySum: getArraySum
}
index.js：导入使用
/**
 * 目标：基于 CommonJS 标准语法，导入工具属性和方法使用
 */
// 导入
const obj = require('./utils.js')
console.log(obj)
const result = obj.arraySum([5, 1, 2, 3])
console.log(result)

02.ECMAScript标准-默认导出和导入

目标

掌握 ECMAScript 标准语法中，默认导出和导入的使用

讲解

1. CommonJS 规范是 Node.js 环境中默认的，后来官方推出 ECMAScript 标准语法，我们接下来在一个需求中，体验下这个标准中默认导出和导入的语法要如何使用
2. 需求：封装并导出基地址和求数组元素和的函数，导入到 index.js 使用查看效果
3. 导出语法：

export default {
  对外属性名: 模块内私有变量
}

1. 导入语法：

import 变量名 from '模块名或路径'

1. 变量名的值接收的就是目标模块导出的对象
2. 注意：Node.js 默认只支持 CommonJS 标准语法，如果想要在当前项目环境下使用 ECMAScript 标准语法，请新建 package.json 文件设置 type: 'module' 来进行设置

{ “type”: "module" }

1. 代码实现：
   • utils.js：导出

/**
 * 目标：基于 ECMAScript 标准语法，封装属性和方法并"默认"导出
 */
const baseURL = 'http://hmajax.itheima.net'
const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)
​
// 默认导出
export default {
  url: baseURL,
  arraySum: getArraySum
}

• • index.js：导入

/

**
 * 目标：基于 ECMAScript 标准语法，"默认"导入，工具属性和方法使用
 */
// 默认导入
import obj from './utils.js'
console.log(obj)
const result = obj.arraySum([10, 20, 30])
console.log(result)

03.ECMAScript标准-命名导出和导入

目标

掌握 ECMAScript 标准语法中，命名导出和导入的使用

讲解

1. ECMAScript 标准的语法有很多，常用的就是默认和命名导出和导入，这节课我们来学习下命名导出和导入的使用
2. 需求：封装并导出基地址和数组求和函数，导入到 index.js 使用查看效果
3. 命名导出语法：

export 修饰定义语句

1. 命名导入语法：

import { 同名变量 } from '模块名或路径'

1. 注意：同名变量指的是模块内导出的变量名
2. 代码示例：
   • utils.js 导出

/**
 * 目标：基于 ECMAScript 标准语法，封装属性和方法并"命名"导出
 */
export const baseURL = 'http://hmajax.itheima.net'
export const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)
​

• • index.js 导入

/**
 * 目标：基于 ECMAScript 标准语法，"命名"导入，工具属性和方法使用
 */
// 命名导入
import {baseURL, getArraySum} from './utils.js'
console.log(obj)
console.log(baseURL)
console.log(getArraySum)
const result = getArraySum([10, 21, 33])
console.log(result)

1. 与默认导出如何选择：
   • 按需加载，使用命名导出和导入
   • 全部加载，使用默认导出和导入

04.包的概念

目标

了解 Node.js 环境中包的概念

讲解

1. 包：将模块，代码，其他资料整合成一个文件夹，这个文件夹就叫包
2. 包分类：
   • 项目包：主要用于编写项目和业务逻辑
   • 软件包：封装工具和方法进行使用
3. 包要求：根目录中，必须有 package.json 文件（记录包的清单信息）

   • 

   • 包使用：在引入一个包文件夹到代码中，默认引入的是包文件节下的 index.js 模块文件里导出的对象，如果没有 index.js 文件，则会引入 package.json 里 main 属性指定的文件模块导出的对象
   • 需求：封装数组求和函数的模块，封装判断用户名和密码长度函数的模块，形成一个软件包，并导入到 index.js 中使用查看效果
   • 代码示例：
     • utils/lib 相关代码在素材里准备好了，只需要自己在 utils/index.js 统一出口进行导出

/**
 * 本文件是，utils 工具包的唯一出口
 * 作用：把所有工具模块方法集中起来，统一向外暴露
 */
const { getArraySum } = require('./lib/arr.js')
const { checkUser, checkPwd } = require('./lib/str.js')
​
// 统一导出所有函数
module.exports = {
  getArraySum,
  checkUser,
  checkPwd
}

• • • index.js 导入软件包文件夹使用（注意：这次导入的是包文件夹，不是模块文件）

/**
 * 目标：导入 utils 软件包，使用里面封装的工具函数
 */
const obj = require('./utils')
console.log(obj)
const result = obj.getArraySum([10, 20, 30])
console.log(result)

05.npm软件包管理器

目标

掌握使用 npm 管理软件包

讲解

1. npm 简介链接： 软件包管理器，用于下载和管理 Node.js 环境中的软件包
2. npm 使用步骤：
   1. 初始化清单文件： npm init -y （得到 package.json 文件，有则跳过此命令）
   2. 注意 -y 就是所有选项用默认值，所在文件夹不要有中文/特殊符号，建议英文和数字组成，因为 npm 包名限制建议用英文和数字或者下划线中划线
   3. 下载软件包：npm i 软件包名称
   4. 使用软件包
3. 需求：使用 npm 下载 dayjs 软件包到本地项目文件夹中，引入到 index.js 中格式化日期打印，运行观察效果
4. 具体使用流程图：

查看源：npm config get registry

06.npm安装所有依赖

目标

掌握 npm 安装所有依赖功

讲解

1. 我们拿到了一个别人编写的项目，但是没有 node_modules，项目能否正确运行？
2. 不能，因为缺少了项目需要的依赖软件包，比如要使用 dayjs 和 lodash 但是你项目里没有这个对应的源码，项目会报错的

3. 

4. 为何没有给我 node_modules？
5. 因为每个人在自己的本机使用 npm 下载，要比磁盘间传递要快（npm 有缓存在本机）
6. 如何得到需要的所有依赖软件包呢？
7. 直接在项目目录下，运行终端命令：npm i 即可安装 package.json 里记录的所有包和对应版本到本项目中的 node_modules

07.Express快速搭建 Web 服务

目标

基于 express 本地软件包，快速搭建 Web 服务

讲解

1. Express定义链接: 基于 Node.js 平台，快速，开放，极简的 Web 开发框架

2. 概念：使用 express 本地软件包，快速搭建 Web 服务（基于 http 模块）
3. 功能：开发 Web 服务，提供数据接口，提供网页资源供浏览器使用
4. 需求：基于 express 编写 Web 服务，对 get 请求方法和 / 路径监听，有人请求返回一段提示字符串
5. 使用：
   1. 下载 express 本地软件包到项目中
   2. 导入 express 创建 Web 服务对象
   3. 监听请求方法和请求路径，返回一段提示字符串
   4. 对其他请求方法和请求路径，默认返回 404 提示
   5. 监听端口号，启动 Web 服务，在浏览器请求测试
6. 代码如下：

/**
 * 目标：基于 express 本地软件包，开发 Web 服务，返回资源给请求方
 */
// 1. 下载 express 软件包
// 2. 导入并创建 Web 服务对象
const express = require('express')
const server = express()
​
// 3. 监听请求的方法和请求的资源路径
server.get('/', (req, res) => {
  res.send('你好，欢迎使用 Express')
})
​
// 4. 监听任意请求的方法和请求的资源路径
server.all('*', (req, res) => {
  res.status(404)
  res.send('你要访问的资源路径不存在')
})
​
// 5. 监听端口号，启动 Web 服务
server.listen(3000, () => {
  console.log('Web 服务已启动')
})

10.案例-获取省份列表接口

目标

基于 express 的 Web 服务，编写提供省份列表数据的接口

讲解

1. 需求：基于 express，开发提供省份列表数据的接口
2. 步骤：监听 get 请求方法的 /api/province 路径，并读取 province.json 里省份数据返回给请求方
4. 核心代码：

// 监听 get 请求方法，监听资源路径 /api/province，就读取 province.json 省份数据返回
server.get('/api/province', (req, res) => {
  fs.readFile(path.join(__dirname, 'data/province.json'), (err, data) => {
    res.send(data.toString())
  })
})