node-js 第 01 天

1. 课程安排

目前咱们已经学习了html css js

也学会了使用一些js插件,

并且具备了可以从后台接口获取数据的能力

那接下来几天框架前置课的学习, 我们可以为后面Vue课程的学习打下一个良好的基础。

阶段说明, 总共3天:

  • nodejs基础+核心模块
  • npm ( 包管理工具) + es6模块化
  • yarn (包管理工具) + webpack ​

2. 学习目标

  • 了解nodejs的基本介绍 + 能够安装nodejs环境 + 能够掌握nodejs的基本使用步骤
  • 掌握npm ( 包管理工具 ) 和 es6模块化
  • 了解前端构建工具 - webpack

3. nodejs基本介绍

3.1 为什么要学习nodejs?

① 为什么要学习服务端的开发?

  1. 通过学习Node.js开发理解服务器开发Web请求和响应过程了解服务器端如何与客户端配合

  2. 作为前端开发工程师(FE - front-end engineer)需要具备一定的服务端开发能力

  3. 全栈工程师的必经之路

② 服务器端开发语言有很多,为什么要选择nodejs ?

  1. 降低编程语言切换的成本(nodejs实质上用的还是javascript)
  2. NodeJS是前端项目的基础设施,不仅仅是做服务端开发, 前端项目中用到的大量工具都是基于Node的, 比如: webpack …
  3. nodejs在处理高并发上有得天独厚的优势, 大型项目经常会用Node做web服务器上层的中间件, web服务器上层网关
  4. 对于前端工程师,面试时可能对于nodejs有一定的要求

问题小结:

  1. 现阶段为什么要学习nodejs开发?
  2. 服务器开发有很多,为什么要选择nodejs呢?

3.2 浏览器与javaScript

js的组成部分

思考问题:为什么浏览器能够执行js代码?

浏览器内核

渲染引擎:负责解析html和css

js引擎:负责解析javascript代码

不同的浏览器使用不同的JavaScript引擎

  • Chrome 浏览器 => V8
  • Firefox 浏览器 => OdinMonkey(奥丁猴)
  • Safri 浏览器 => JSCore
  • IE 浏览器 => Chakra(查克拉)
  • 其中,Chrome 浏览器的 V8 解析引擎性能最好!

不同的浏览器使用不同的渲染引擎

  • Chrome 浏览器 => webkit, blink
  • Firefox 浏览器 => Gecko
  • Safri 浏览器 => webkit
  • IE 浏览器 => Trident

联想记忆: JS引擎 类比 车的发动机; 渲染引擎 类比 车的车载系统

为什么JS可以操作"网页内容"和"浏览器"?

API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数、对象…。

每个浏览器都内置了操作DOM、BOM 这样的 API ,因此,浏览器中的JavaScript 才可以调用它们。

浏览器中的JavaScript运行环境

总结:

  • 运行环境指的是代码正常运行所需的必要环境。
  • 浏览器是javascript的运行环境。

思考: 是不是只要一个软件的运行环境中有JS引擎, 就可以执行JS代码?

3.3 nodejs简介

什么是nodejs?

Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境

通俗的理解:用node这个软件可以独立执行JS文件代码, 脱离浏览器软件,Node.js 为 JavaScript 代码的正常运行,提供的必要的环境。

Node.js 的官网地址: https://nodejs.org/zh-cn/

注意:

① 浏览器是 JavaScript 的前端运行环境。

② Node.js 是 JavaScript 的后端运行环境。

③ Node.js 中无法调用 DOM 和 BOM 等 浏览器内置 API。

nodejs与浏览器的区别?

相同点:nodejs与浏览器都是javascript的运行环境,都能够解析js程序。

不同点:nodejs无法使用DOM和BOM的操作,浏览器无法执行nodejs中的文件操作等功能

问题小结:

  1. 在nodejs端,可以使用BOM和DOM的方法么?

  2. 我们学习nodejs,学习什么内容?

Node.js可以做什么?

Node.js 作为一个 JavaScript 的运行环境,仅仅提供了基础的功能和API。

然而,基于Node.js 提供的这些基础功能,很多强大的工具和框架如雨后春笋,层出不穷。

所以学会了Node.js ,可以让前端程序员胜任更多的工作和岗位:

① 基于 Express/Koa/Egg 等框架(http://www.expressjs.com.cn/),可以快速构建Web 应用

② 基于 Electron框架(https://electronjs.org/),可以构建跨平台的桌面应用

③ 基于 restify 框架(http://restify.com/),可以快速构建API 接口项目

④ 读写和操作数据库、创建实用的命令行工具辅助前端开发、etc…

总之:

Node.js 是大前端时代的“大宝剑”,有了Node.js 这个超级 buff 的加持,前端程序员的行业竞争力会越来越强!

Node.js怎么学?

浏览器中的 JavaScript 学习路径:
JavaScript 基础语法 + 浏览器内置API(DOM + BOM) + 第三方库(Echarts、AntD 等)

Node.js 的学习路径:
JavaScript 基础语法 + Node.js 内置 API 模块(fs、path、http等)+ 第三方框架(Express、Electron等)

4. nodejs环境的安装

如果希望通过Node.js 来运行 Javascript 代码,则必须在计算机上安装Node.js 环境才行。

安装包可以从Node.js 的官网首页直接下载,进入到Node.js 的官网首页(https://nodejs.org/zh-cn/),点 击绿色的按钮,下载所需的版本后,双击直接安装即可。

4.1 版本说明

  • LTS 为长期稳定版,对于追求稳定性的企业级项目来说,推荐安装LTS 版本的 Node.js。
  • Current 为新特性尝鲜版,对于热衷于尝试新特性的用户来说,推荐安装Current 版本的 Node.js。但是,Current 版本 中可能存在隐藏的Bug 或安全性漏洞,因此不推荐在企业级项目中使用Current 版本的 Node.js。

4.2 安装nodejs

windows安装步骤

一路“next”即可,尽量不要更改安装路径,如果非要更改,千万注意:

安装完毕之后,没有桌面快捷方式,需要打开终端(命令行)测试。

在终端输入命令 node –v 后,按下回车键,即可查看已安装的 Node.js 的版本号。

使用快捷键(Windows徽标键+ R)打开运行面板,输入cmd 后直接回车,即可打开终端。

mac安装步骤

  1. 选择安装包

  1. 如图

  1. 点击继续

  1. 点击继续

  1. 点击同意

  1. 点击继续

  1. 点击安装

  1. 使用指纹或者输入密码进行安装

能够看到如图,说明安装成功了。

  1. 打开终端测试node是否安装成功

  1. 输入node -v查看node安装的版本

测试是否安装成功

打开终端,在终端输入命令node –v 后,按下回车键,即可查看已安装的Node.js 的版本号。

4.3 终端的使用

终端(英文:Terminal)是专门为开发人员设计的,用 于实现人机交互的一种方式。

nodejs和普通的程序运行不一样,需要在终端中使用node命令来使用。

不管什么操作系统(windows、mac、linux),都内置了终端。

本机常用的终端:cmd、powershell、vscode中的终端(powershell)

windows终端和mac电脑的终端打开方式稍微有些不同。

windows打开终端的方式

  1. window + R: 输入cmd或powershell回车
  2. 在任意的文件夹下,按住shift键不松手,鼠标右键 (好处:可以在任意的文件夹下打开命令窗口)

  1. 使用vscode集成的终端,在js文件或者在文件夹上右键

shift + Escape

mac打开终端的方式

  1. 在文件夹上右键,可以打开当前文件夹的终端

  2. 在vscode中使用

4.4 终端常见操作

终端命令

  • ls =》 list 查看 ,查看当前文件夹下所有的目录列表
  • cd =》 切换到某个文件夹下, change directory
  • cd …/ =》 退回上级文件夹
  • clear/cls 清屏

常用快捷键

在 Windows 的命令行中,我们可以通过如下快捷键,来提高命令行的操作效率:
① 使用 ↑ 键,可以快速定位到上一次执行的命令
② 使用 tab 键,能够快速补全路径
③ 使用 esc 键,能够快速清空当前已输入的命令

5. nodejs基本使用

在 Node.js 中需要通过终端才能执行 JavaScript 代码

① 打开终端

② 输入 node 要执行的js文件的路径,即可通过Node.js,来执行存放于.js 文件中的代码

  • 创建js文件 01-helloNode.js

  • 写js代码:console.log('hello nodejs')

  • 打开终端

  • 执行命令:node helloNode.js

注意:在nodejs中是无法使用DOM和BOM的内容的,因此document, window等内容是无法使用的。

6. node核心模块(★)

1. fs模块

fs模块是nodejs中最常用的一个模块,因此掌握fs模块非常的有必要,fs模块的方法非常多,用到了哪个查哪个即可。

文档地址:http://nodejs.cn/api/fs.html

在nodejs中,提供了fs模块,这是node的核心模块

注意:fs模块需要先导入才能使用。

const fs = require("fs");

1.1 读取文件

语法:fs.readFile(path[, options], callback)

//参数1: 文件的路径
//参数2: 编码,如果设置了,返回读取到的文件内容(文本字符串),如果没有设置,会返回一个buffer对象
//参数3: 回调函数
fs.readFile("data.txt", "utf8",function(err, data){
  /*
    回调函数的参数1:错误对象,如果读取失败,err会包含错误信息,如果读取成功,err是null
  	回调函数的参数2:读取成功后的数据
  */
  console.log(err);
  console.log(data);
});

关于Buffer对象

1. Buffer对象是Nodejs用于处理二进制数据的(其实任意的数据在计算机底层都是二进制数据,因为计算机只认识二进制)。
4. Buffer对象可以调用toString()方法转换成字符串。

1.2 写文件

语法:fs.writeFile(file, data[, options], callback)

//参数1:写入的文件名(如果文件不存在,会自动创建)
//参数2:写入的文件内容(注意:写入的内容会覆盖以前的内容)
//参数3:写文件后的回调函数
fs.writeFile("2.txt", "hello world, 我是一个中国人", function(err){
  if(err) {
    return console.log("写入文件失败", err);
  }
  console.log("写入文件成功");
});

注意:

  1. 写文件的时候,会把原来的内容给覆盖掉

  2. 文件不存在会自动创建

  3. 文件夹不存在不会自动创建,会报错

1.3 练习-考试成绩整理

目标:

成绩.txt中的数据: 小红=99 小白=100 小黄=70 小黑=66 小绿=88

整理成为下列各式并保存成成绩-ok.txt

小红:99

小白:100

小黄:70

小黑:66

小绿:88

// 1. 引入fs模块
const fs = require('fs')

// 2. 读取 成绩.txt 中的数据
fs.readFile('成绩.txt', 'utf-8', (err, data)=>{
   if(err){
      return console.log('读取失败', err)
   }
   // 2.1 获取读取的内容并转化
   let newData = data.split(' ').map((item)=>{
       return item.replace('=', ':')
   }).join('\n')

   // 2.2 把新的内容写入 成绩-ok 文件
   fs.writeFile('成绩-OK.txt', newData, (err)=>{
      if (err) {
         return console.log('成绩写入失败', err)
      } 
      console.log('成绩写入成功!')
   })
})

1.4 fs 模块-路径动态拼接的问题

在使用 fs 模块操作文件时,如果提供的操作路径是以./ 或 …/ 开头的相对路径时,很容易出现路径动态拼接错误的问题。
原因:代码在运行的时候,会以执行node 命令时所处的目录,动态拼接出被操作文件的完整路径。
解决方案:在使用fs 模块操作文件时,直接提供绝对路径,不要提供./ 或 …/ 开头的相对路径,从而防止路径动态拼接的问题。

注意:使用__dirname 获取当前文件所在文件夹的绝对路径

const fs = require('fs');
// 拼接要读取文件的绝对路径
let filepath = __dirname +'/hello.txt'
fs.readFile(filepath, 'utf-8', (err, data) => {
    // 判断是否读取成功
    if (err) return console.log(err);
    console.log(data); 
});

2. path路径模块

2.1 什么是path路径模块?

path 模块是 Node.js 官方提供的、用来处理路径的模块。它提供了一系列的方法和属性,用来满足用户对路径的处理 需求。
例如:
⚫ path.join() 方法,用来将多个路径片段拼接成一个完整的路径字符串
⚫ path.basename() 方法,用来从路径字符串中,将文件名解析出来

如果要在 JavaScript 代码中,使用 path 模块来处理路径,则需要使用如下的方式先导入它:

const path = require('path')

2.2 路径拼接

path.join()的语法格式

使用 path.join() 方法,可以把多个路径片段拼接为完整的路径字符串,语法格式如下:

path.join([...paths])

参数解读:
⚫ …paths 路径片段的序列
⚫ 返回值:

path.join()的代码示例

使用 path.join() 方法,可以把多个路径片段拼接为完整的路径字符串:

const path = require('path');

console.log( path.join('a', 'b', 'c') ); //      a/b/c
console.log( path.join('a', '/b/', 'c') ); //    a/b/c
console.log( path.join('a', '/b/', 'c', 'index.html') ); //       a/b/c/index.html
console.log( path.join('a', 'b', '../c', 'index.html') ); //      a/c/index.html
console.log(__dirname); // node自带的全局变量,表示当前js文件所在文件夹的绝对路径
// 拼接成绩.txt的绝对路径
console.log( path.join(__dirname, '成绩.txt') ); // ------ 最常用的


path.resolve()方法也可以用来拼接路径。

path.resolve(__dirname, ‘成绩.txt’)

path.resolve()和 path.join()的区别:

path.join()是返回多个路径片段拼接后的结果。
path.resolve()是返回多个路径片段拼接后的绝对路径(如果拼接后的路径不是绝对路径,会把终端的当前目录拼接上)。

2.3 获取路径中的文件扩展名

path.extname()的语法格式

使用 path.extname() 方法,可以获取路径中的扩展名部分,语法格式如下:

path.extname(path)

参数解读:
⚫ path 必选参数,表示一个路径的字符串
⚫ 返回: 返回得到的扩展名字符串

path.extname()的代码示例

使用 path.extname() 方法,可以获取路径中的扩展名部分

// 找字符串中,最后一个点及之后的字符
console.log( path.extname('index.html') ); // .html
console.log( path.extname('a.b.c.d.html') ); // .html
console.log( path.extname('asdfas/asdfa/a.b.c.d.html') ); // .html
console.log( path.extname('adf.adsf') ); // .adsf

3. http模块

3.0 服务器相关的概念

客户端和服务器

web服务器

IP地址

域名和域名服务器:

端口号:

本地IP和本机域名

在浏览器输入url,回车发生了什么

前置知识: 当我们在浏览器中输入了www.baidu.com的时候,发生了什么?

  • ip地址 域名 端口三者之间的关系?

    • ip地址:

      • 任何一台设备(计算机, 手机, …)想要接入到网络中(互联网,局域网),就会被分配一个唯一的ip地址

      • 通过这个ip地址就能找到这台设备

    • 域名:

      • 比如 www.jd.com 就是域名 ,方便记忆
      • 我们购买了云服务器之后, 服务器会有一个IP地址, 我们可以通过域名解析让域名指向当前IP
      • 域名和ip地址绑定后,通过域名就可以找到对应的ip地址, 从而访问到该服务器
    • 端口:

      • 一台计算机能运行很多程序, 一般一个程序会占用一个或者多个端口

      • http协议的默认端口是80

      • https协议的默认端口是443

      • 数据库的默认端口3306

  • 浏览器与服务器的交互过程

    1. 根据相关域名, 去查询dns服务器,得到对应的ip地址
    2. 根据IP地址, 找到对应的计算机
    3. 根据端口找到对应的服务器程序
    4. 根据url请求具体的信息
    5. 服务器根据请求进行处理
    6. 浏览器接收到了服务器的响应, 把结果响应出来

3.1 什么是http模块

http 模块是 Node.js 官方提供的、用来创建web 服务器的模块。它提供了一系列的方法和属性,例如:

⚫ http.createServer() 方法,用来创建一个web 服务器,从而对外提供web 资源
⚫ http.request() 方法,用来发起 http 网络请求,请求其它web 服务器上的资源

如果要在 JavaScript 代码中使用 http 模块,则需要先导入它:

const http = require('http')

3.2 创建最基本的web服务器

创建web服务器的基本步骤

① 导入 http 模块
② 创建 web 服务器实例
③ 启动服务器
④ 为服务器实例绑定request 事件,监听客户端的请求

创建web实现

// ① 导入 http 模块 
const http = require('http');

// ② 创建 web 服务器实例 
const server = http.createServer();

// ④ 启动服务器
server.listen(3000, () => {
    console.log('my server start work');
});

// ③ 为服务器实例绑定 request 事件,监听客户端的请求 
// 当客户端发送请求到服务器的时候,会触发这个事件
server.on('request', () => {
    // 这里要处理客户端的请求
    console.log('hello html');
});

端口号

计算机中的端口号,就好像是现实生活中的门牌号一样。通过门牌号,外卖小哥可以在整栋大楼众多的房间中,准确把外卖 送到你的手中。
同样的道理,在一台服务器中,可以运行成百上千个web 服务。此时,通过端口号,客户端发送过来的网络请求,可以被准 确地交给端口号对应的web 服务进行处理。

3.3 request对象详解

文档地址:http://nodejs.cn/api/http.html#http_request_method

常见属性:

headers: 所有的请求头信息
method: 请求的方式
url: 请求的地址

注意:在发送请求的时候,可能会出现两次请求的情况,这是因为谷歌浏览器会自动增加一个favicon.ico的请求。

小结:request对象中,常用的就是method和url两个参数

3.4 response对象详解

文档地址:http://nodejs.cn/api/http.html#http_class_http_serverresponse

常见的属性和方法:

res.write(data): 给浏览器发送响应体,可以调用多次,从而提供连续的请求体
res.end();   通知浏览器,所有响应头和响应主体都已被发送,即服务器将其视为已完成。
res.end(data); 结束请求,并且响应一段内容,相当于res.write(data) + res.end()
res.statusCode: 响应的的状态码 200 404 500
res.statusMessage: 响应的状态信息, OK Not Found ,会根据statusCode自动设置。
res.setHeader(name, value); 设置响应头信息, 比如content-type
res.writeHead(statusCode, statusMessage, options); 设置响应头,同时可以设置状态码和状态信息。

注意:必须先设置响应头,才能设置响应。

解决中文乱码问题

当调用 res.end() 方法,向客户端发送中文内容的时候,会出现乱码问题,此时,需要手动设置内容的编码格式:

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

3.5 案例:根据不同的url响应不同的html内容

const http = require('http')
const server = http.createServer()
server.on('request', (req, res) => {
    /******** 获取请求的url地址 ********/
    const url = req.url
    /******** 根据url,准备不同的内容 ********/
    let content = '404 not found'

    if (url === '/index.html' || url === '/') {
        content = '欢迎访问首页'
    } else if (url === '/about.html') {
        content = '欢迎访问关于页'
    }

    /******** 响应数据给客户端 ********/
    res.setHeader('Content-Type', 'text/html;charset=utf-8;')
    res.end(content)
})
server.listen(80, () => {
    console.log('running ok')
})

4. 实现静态WEB服务器

4.1 核心思路和实现步骤

1657334639913

4.2 响应内容

server.on('request', function(req, res) {
  // 获取请求的url地址
  let url = req.url
  // 拼接文件的路径
  let fpath = path.join(__dirname, 'public', url)
  // 读取文件的内容,响应给客户端
    fs.readFile(fpath, function(err, data) {
      if(err) {
        res.setHeader('Content-Type', 'text/html;charset=utf-8')
        res.end('<h1>404 您访问的资源不存在~</h1>')
        return 
      }
      res.end(data)
    })
})

4.3 根据不同的url,设置不同的响应头

把不同文件的响应头类型,保存到一个对象中:

const obj = {
    '.ico': 'image/x-icon',
    '.png': 'image/png',
    '.jpg': 'image/jpeg',
    '.svg': 'image/svg+xml',
    '.gif': 'image/gif',
    '.html': 'text/html',
    '.css': 'text/css',
    '.js': 'application/javascript'
}
server.on('request', (req, res) => {
    // .....
    // 拿到url中的扩展名, 设置本次请求对应响应头内容格式信息
    const extName = path.extname(req.url)
    res.setHeader('Content-Type', `${obj[extName]}; charset=utf-8`)
    // ....
});

4.4 小优化

访问localhost和localhost/index.html的效果一致:

// 获取请求的url地址
// let url = req.url
let url = req.url === '/' ? 'index.html' : req.url
// 拼接文件的路径
let fpath = path.join(__dirname, 'public', url)

Q.E.D.