Node.js 简介

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

作用：使用Node.js编写服务器端程序

  • 编写数据接口，提供网页资源浏览功能等等
  • 前端工程化：为后续学习vue和React等框架做铺垫

前端工程化：开发项目直到上线，过程中集成的所有工具和技术，Node.js是前端工程化的基础（因为Node.js可以主动读取前端代码内容）

  1. 浏览器能够执行JS代码，依靠的是内核中的V8引擎（C++程序）
  2. Node.js是基于Chrome V8引擎进行封装（运行环境）
  3. 区别是都支持ECMAScript标准语法，Node.js有独立的API，但是Node.js环境没有DOM和BOM等

image.png

Node.js 安装

Node.js下载：官网下载地址

注意事项：

  1. 安装在非中文路径下
  2. 无需勾选自动安装其他配套软件

成功验证：

  1. 在cmd终端，输入node -v命令查看版本号
  2. 显示版本号即为安装成功

image.png

Node.js 使用

操作：新建.js文件，编写代码后在node环境下执行

命令：在cmd终端当前目录下，输入node xxx.js，执行.js文件

1
2
3
4
console.log('Hello Node.js')
for (let i = 0; i < 5; i++) {
    console.log(i)
}

image.png

fs模块-读写文件

模块：类似插件，封装了方法/属性

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

语法：

  1. 加载 fs 模块对象
  2. 写入文件内容
  3. 读取文件内容

image.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 引入fs模块
const fs = require('fs')
// 调用writeFile 写入内容
fs.writeFile('hello.txt', 'Hello Node.js', err => {
  if (err) console.log(err)
  else {
    console.log('写入成功')
    // 调用readFile 读取内容
    fs.readFile('hello.txt', (err, data) => {
      if (err) console.log(err)
      else console.log(data.toString())
    })
  }
})
  • 这么写的原因是writeFile和readFile都是异步操作，所以无法确定谁会先执行完成。我试了几次都是先读取才写入，所以写了判断条件，写入完成才能读取。

image.png

path模块-路径处理

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

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

补充：__dirname 内置变量（获取当前模块目录-绝对路径）

  • windows： D:\备课代码\3-B站课程\03_Node.js与Webpack\03-code\03
  • mac： /Users/xxx/Desktop/备课代码/3-B站课程/03_Node.js与Webpack/03-code/03

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

语法：

  1. 加载 path 模块
  2. 使用 path.join 方法，拼接路径
1
2
3
4
5
6
7
8
9
const fs = require('fs')
console.log(__dirname) // 打印文件当前目录
const path = require('path') // 加载path模块
const pathStr = path.join(__dirname, 'hello.txt') // 拼接绝对地址
console.log(pathStr)
fs.readFile(pathStr, (err, data) => { // 读取文件
  if(err) console.log(err);
  else console.log((data.toString()));
})

http模块-创建Web服务

需求：创建 Web 服务并响应内容给浏览器

步骤：

  1. 加载 http 模块，创建 Web 服务对象
  2. 监听 request 请求事件，设置响应头和响应体
  3. 配置端口号并启动 Web 服务
  4. 浏览器请求 http://localhost:3000 测试（localhost：固定代表本机的域名）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 加载http模块，创建Web服务器对象
const http = require('http')
const server = http.createServer()
// 监听request请求事件，设置响应头和响应体
server.on('request', (req, res) => {
  // 设置响应头-内容类型-普通文本以及中文编码格式
  res.setHeader('Content-type', 'text/plain;charset=utf-8')
  // 设置响应体内容，结束本次请求与响应
  res.end('欢迎使用 Node.js 和 http 模块创建的 Web 服务')
})
// 配置端口号并启动Web服务
server.listen(3000, () => {
  console.log('Web服务启动成功')
})

image.png

image.png

访问本地网页资源

步骤：

  1. 基于http模块，创建Web服务器
  2. 使用req.url获取请求路径，然后响应请求资源的内容
  3. 运行Web服务，使用浏览器发起请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const fs = require('fs')
const path = require('path')
const http = require('http')
const server = http.createServer()
server.on('request', (req, res) => {
  // req是HTTP请求（request） res是HTTP响应（response）
  if(req.url === '/test05-xm14p.html'){ // 辨别地址，req.url获取请求资源路径
    fs.readFile(path.join(__dirname, '/test05-xm14p.html'), (err, data) => {
      // 响应头，设置text/html，这样才能识别html文件
      res.setHeader('Content-Type', 'text/html;charset=utf-8')
      res.end(data.toString())
    })
  }
  else {
    res.setHeader('Content-Type', 'text/html;charset=utf-8')
    res.end('您访问的资源路径不存在')
  }
})
// 配置端口号并启动Web服务
server.listen(3000, () => {
  console.log('Web服务启动成功')
})

image.png