node.js入门

• Node.js 安装与使用

1. Node.Js官网

https://nodejs.org/en

Node.js是一个跨平台JavaScript运行环境，使开发者可以搭建服务器端的JavaScript应用程序。

概念：使用Node.js编写后端程序/支持前端工程化

1. Node作用

后端程序：提供接口和数据，网页资源等

前端工程化：对代码压缩，转译，整合（使用各种工具，提升效率）

1. Node.js 为何能执行 JS？

首先：浏览器能执行 JS 代码，依靠的是内核中的 V8 引擎（C++ 程序）

其次：Node.js 是基于 Chrome V8 引擎进行封装（运行环境）

区别：都支持 ECMAScript 标准语法，Node.js 有独立的 API

 

1. Node.js 安装

下载 node-v16.19.0.msi 安装程序

打开 cmd 终端（win+G，输入cmd），输入 node -v 命令查看版本号，如果有显示，则代表安装成功

1. 使用 Node.js

需求：新建 JS 文件，并编写代码后，在 node 环境下执行

命令：在 VSCode 集成终端中（打开集成终端的快捷键ctrl+`），输入 node xxx.js，回车即可执行

总结：

Node.js 有什么用？

 编写后端程序：提供数据和网页资源等

 前端工程化：翻译压缩整合代码等，提高开发效率

Node.js 为何能执行 JS 代码？

基于 Chrome 的 V8 引擎封装

Node.js 与浏览器环境的 JS 最大区别？

Node.js 环境中没有 BOM 和 DOM，但也是用 JS 语法

Node.js 如何执行代码？

在 VSCode 终端中输入：node xxx.js 回车即可执行（注意路径）

• fs 模块

1. fs 模块：封装了与本机文件系统进行交互的，方法/属性

1. 加载 fs 模块

const fs = require('fs')

1. 写入文件内容

fs.writeFile('文件路径t', '写入内容', err => {

//写入后的回调函数

})

1. 读取文件内容

fs.readFile('文件路径', (err, data) => {

读取后的回调函数

data是文件内容的Buffer数据流

})

代码举例：

// 1. 引入 fs 模块

const fs = require('fs')

// 2. 调用 writeFile 方法写入内容

// 语法:

// fs.writeFile('路径', '内容', 回调函数)

// fs.writeFile('text.txt', '我努力写入的世界', err => {

//   console.log(err)

// })

// 3. 调用 readFile 方法读取内容

// 语法:

// fs.readFile('路径', 回调函数)

fs.readFile('text.txt', (err, data) => {

  console.log(err) // null

  // Buffer 是数据流, 因为在磁盘上读取的数据就是由二进制组成的, 我们平时看到的数据都是有编码的

  // 硬盘中的文件可能是各种各样的数据: 文本 / 视频 / 音频

  // 将数据流转成字符串

  console.log(data.toString())

})

• path 模块-路径处理

问题：Node.js 代码中，相对路径是根据终端所在路径来查找的，可能无法找到你想要的文件

由于使用的是相对路径, 它相对的是命令执行的路径, 而不是当前文件所在的路径

建议：在 Node.js 代码中，使用绝对路径

path.join() 会使用特定于平台的分隔符，作为定界符，将所有给定的路径片段连接在一起

语法：

1. 加载 path 模块

const path = require('path')

1. 使用 path.join 方法，拼接路径

path.join(‘路径1’,’路径2’,…)

// 1. 引入 fs 和 path 模块

const fs = require('fs')

const path = require('path')

// 由于使用的是相对路径, 它相对的是命令执行的路径, 而不是当前文件所在的路径

// 最佳解决方案: 使用绝对路径

// fs.readFile('../text.txt', (err, data) => {

//   console.log(err) // null

//   console.log(data.toString())

// })

// __dirname: 内置全局变量, 表示当前文件所在的目录(绝对路径)

// console.log(__dirname)

// console.log(path.join(__dirname, 'a.txt'))

// console.log(path.join(__dirname, '../text.txt'))

fs.readFile(path.join(__dirname, '../text.txt'), (err, data) => {

  console.log(err) // null

  console.log(data.toString())

})

• 案例 - 前端项目压缩

1. 案例 - 压缩前端 html

// 导入模块

const fs = require('fs')

const path = require('path')

// 1.1 读取 public/index.html 内容

fs.readFile(path.join(__dirname, 'public/index.html'), (err, data) => {

  // 如果有错误就阻止往后执行

  if (err) return console.log(err)

  // console.log(data.toString())

  const htmlStr = data.toString()

  // 1.2 使用正则替换内容字符串里的，回车符\r 换行符\n

  // replace 替换, 支持正则

  // * 表示 0 次及以上

  // + 表示 1 次及以上

  const htmlResult = htmlStr.replace(/[\r\n]/g, '').replace(/\s+/g, ' ')

  // console.log(htmlResult)

  // 1.3 确认后，写入到 dist/index.html 内

  fs.writeFile(path.join(__dirname, 'dist/index.html'), htmlResult, err => {

    console.log(err)

  })

})

1. Url中的端口号

URL：统一资源定位符，简称网址，用于访问网络上的资源

端口号：标记服务器里对应服务程序（0-65535 的整数）

 

URL 中的端口号

作用： 标记区分服务器里不同的服务程序

Web 服务：一个程序，用于提供网上信息浏览功能

 

• http 模块 - 创建 Web 服务

 目标：使用 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 事件，对本次请求，做一些响应处理

// http请求是指 一次请求对应着一次响应

// 事件处理函数有两个参数

// 参数1：req请求对象，这一次用户请求的信息

// 参数2：res响应对象，这一次要响应给用户的信息

server.on('request', (req, res) => {

  res.end('hello, world') // 一次请求只能对应一次响应

})

// 3. 启动 Web 服务监听对应端口号

server.listen(3000, () => {

  // 服务器启动成功后的回调

  console.log('Web 服务启动了')

})

Web 服务-支持中文字符

 

步骤：给响应头添加内容类型，如截图：

• 案例 - 省份列表接口

/**

 * 目标：基于 Web 服务，开发-省份列表数据接口

 * 步骤：

 *  1. 创建 Web 服务

 *  2. 使用 req.url 获取请求的资源路径，读取 json 文件数据返回

 *  3. 其他请求的路径，暂时返回不存在的提示

 *  4. 运行 Web 服务，用浏览器请求地址查看效果

 */

// 1. 创建 Web 服务

const http = require('http')

const fs = require('fs')

const path = require('path')

const server = http.createServer()

server.on('request', (req, res) => {

  // 2. 使用 req.url 获取请求的资源路径，读取 json 文件数据返回

  // console.log('有人来请求了:', req.url)

  // 如果请求 /api/province 就去读取 json 文件数据

  if (req.url === '/api/province') {

    fs.readFile(path.join(__dirname, 'data/province.json'), (err, data) => {

      if (err) return console.log(err)

      // 不要忘了设置响应头

      res.setHeader('Content-Type', 'application/json')

      // 响应读到的 json 数据

      res.end(data.toString())

    })

  } else {

    // 其他情况响应找不到该资源

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

    res.end('找不到该资源')

  }

})

server.listen(3000, () => {

  console.log('Web 服务器已启动')

})