迪虎科技网站建设,网络营销策略名词解释,腾讯云 建网站,Asp.net网站开发分析目录 01_Node.js01.什么是 Node.js目标讲解小结 02.fs模块-读写文件目标讲解小结 03.path模块-路径处理目标讲解小结 04.案例-压缩前端html目标讲解小结 05.认识URL中的端口号目标讲解小结 06.http模块-创建Web服务目标讲解小结 07.案例-浏览时钟目标讲解小结 02_Node.js模块化… 目录 01_Node.js01.什么是 Node.js目标讲解小结 02.fs模块-读写文件目标讲解小结 03.path模块-路径处理目标讲解小结 04.案例-压缩前端html目标讲解小结 05.认识URL中的端口号目标讲解小结 06.http模块-创建Web服务目标讲解小结 07.案例-浏览时钟目标讲解小结 02_Node.js模块化知识点自测01.模块化简介目标讲解小结 02.ECMAScript标准-默认导出和导入目标讲解小结 03.ECMAScript标准-命名导出和导入目标讲解小结 04.包的概念目标讲解小结 05.npm软件包管理器目标讲解小结 06.npm安装所有依赖目标讲解小结 07.npm全局软件包-nodemon目标讲解小结 08.Node.js概念和常用命令总结目标讲解小结 01_Node.js
01.什么是 Node.js
目标
什么是 Node.js有什么用为何能独立执行 JS 代码演示安装和执行 JS 文件内代码
讲解 Node.js 是一个独立的 JavaScript 运行环境能独立执行 JS 代码因为这个特点它可以用来编写服务器后端的应用程序 Node.js 作用除了编写后端应用程序也可以对前端代码进行压缩转译整合等等提高前端开发和运行效率 Node.js 基于Chrome V8 引擎封装独立执行 JS 代码但是语法和浏览器环境的 V8 有所不同没有 document 和 window 但是都支持 ECMAScript 标准的代码语法 想要得到 Node.js 需要把这个软件安装到电脑在素材里有安装程序window 和 mac 环境的参考 PPT 默认下一步安装即可 Node.js 没有图形化界面需要使用 cmd 终端命令行利用一些命令来操控电脑执行某些程序软件输入node -v 检查是否安装成功 node -v需求新建 index.js 文件编写打印代码和 for 循环打印 3 个 6 /*** 目标编写 js 代码用 node 命令执行* 终端作用敲击命令调用对应程序执行* 终端打开目标文件-右键-在集成终端中打开* 命令node xxx.js 注意路径*/console.log(hello,Node.js)for (let i 0; i 10; i) {console.log(i)}Node.js 执行目标 JS 文件需要使用 node xxx.js 命令来执行我们可以借助 VSCode 集成终端使用好处可以快速切换到目标 JS 文件所在终端目录利用相对路径找到要执行的目标 JS 文件
小结 Node.js 有什么用 答案 编写后端程序提供数据和网页资源还可以作为前端工程化的工具翻译压缩整合代码等提高开发效率 Node.js 为何能执行 JS 代码 答案 基于 Chrome 的 V8 引擎封装 Node.js 与浏览器环境的 JS 最大区别 答案 Node.js 环境中没有 BOM 和 DOM但是也用 JS 语法 Node.js 如何执行代码 答案 在 终端中输入node xxx.js 回车即可执行注意路径
02.fs模块-读写文件
目标
了解模块概念使用 fs 模块封装的方法读写文件内容
讲解 模块类似插件封装了方法和属性供我们使用 fs 模块封装了与本机文件系统进行交互的方法和属性 fs 模块使用语法如下 加载 fs 模块得到 fs 对象 const fs require(fs)写入文件内容语法 fs.writeFile(文件路径, 写入内容, err {// 写入后的回调函数
})读取文件内容的语法 fs.readFile(文件路径, (err, data) {// 读取后的回调函数// data 是文件内容的 Buffer 数据流
})需求向 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 数据流转成字符串类型
})小结 什么是模块 答案 类似插件封装了方法和属性 fs 模块的作用 答案 读写本机文件内容
03.path模块-路径处理
目标
使用 path 模块来得到绝对路径
讲解 为什么在 Node.js 待执行的 JS 代码中要用绝对路径 Node.js 执行 JS 代码时代码中的路径都是以终端所在文件夹出发查找相对路径而不是以我们认为的从代码本身出发会遇到问题所以在 Node.js 要执行的代码中访问其他文件建议使用绝对路径 新建 file 文件夹编写待执行的 JS 代码访问外层相对路径下的文件然后在最外层终端路径来执行目标文件造成问题。 问题原因就是从代码文件夹出发使用../text.txt解析路径找不到目标文件报错了 解决方案使用模块内置变量 __dirname配合 path.join() 来得到绝对路径使用 const fs require(fs)
console.log(__dirname) // C:\Users\shenyang\WebstormProjects\untitled// 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())
})再次执行查看问题就被修复了以后在 Node.js 要执行的 JS 代码中访问其他文件的路径都建议使用绝度路径
小结 path.join() 方法有什么用 答案 按照所在本机系统的分隔符作为定界符来链接你传入的路径 __dirname 模块内置变量的值是多少 答案 动态获取当前文件所在文件夹的绝对路径
04.案例-压缩前端html
目标
压缩前端代码体验前端工程化的例子
讲解 前端工程化前端代码压缩整合转译测试自动部署等等工具的集成统称为了提高前端开发项目的效率 需求把准备好的 html 文件里的回车符\r和换行符\n去掉进行压缩写入到新 html 中 步骤 读取源 html 文件内容正则替换字符串写入到新的 html 文件中并运行查看是否能正常打开网页 代码如下 /*** 目标一压缩 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 换行符\nconst 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.认识URL中的端口号
目标
认识 URL 中端口号的作用以及 Web 服务的作用
讲解
URL 是统一资源定位符简称网址用于访问网络上的资源端口号的作用标记服务器里对应的服务程序值为0-65535 之间的任意整数注意http 协议默认访问的是 80 端口Web服务一个程序用于提供网上信息浏览功能注意0-1023 和一些特定的端口号被占用我们自己编写服务程序请避开使用
小结 端口号的作用 答案 标记区分服务器里不同的服务程序 什么是 Web 服务 答案 提供网上信息浏览的服务的一个程序
06.http模块-创建Web服务
目标
基于 Node.js 环境使用内置 http 模块创建 Web 服务程序
讲解 需求引入 http 模块使用相关语法创建 Web 服务程序响应返回给请求方一句提示 ‘helloworld’ 步骤 引入 http 模块创建 Web 服务对象监听 request 请求事件对本次请求做一些响应处理启动 Web 服务监听对应端口号运行本服务在终端进程中用浏览器发起请求 注意本机的域名叫做 localhost 代码如下 /*** 目标基于 http 模块创建 Web 服务程序* 1.1 加载 http 模块创建 Web 服务对象* 1.2 监听 request 请求事件设置响应头和响应体* 1.3 配置端口号并启动 Web 服务* 1.4 浏览器请求http://localhost:3000测试*/
// 1.1 加载 http 模块创建 Web 服务对象
const http require(http)
const server http.createServer()
// 1.2 监听 request 请求事件设置响应头和响应体
server.on(request, (req, res) {// 设置响应头-内容类型-普通文本以及中文编码格式res.setHeader(Content-Type, text/plain;charsetutf-8)// 设置响应体内容结束本次请求与响应res.end(欢迎使用 Node.js 和 http 模块创建的 Web 服务)
})
// 1.3 配置端口号并启动 Web 服务
server.listen(3000, () {console.log(Web 服务启动成功了)
})小结 如何访问本机里运行的 Web 服务 答案 http://localhost:Web服务的端口号/资源路径
07.案例-浏览时钟
目标
体验 Web 服务除了接口数据以外还能返回网页资源等
讲解 需求基于 Web 服务开发提供网页资源的功能了解下后端的代码工作过程 步骤 基于 http 模块创建 Web 服务使用 req.url 获取请求资源路径为 /index.html 的时候读取 index.html 文件内容字符串返回给请求方其他路径暂时返回不存在的提示运行 Web 服务用浏览器发起请求 代码如下 /*** 目标编写 web 服务监听请求的是 /index.html 路径的时候返回 dist/index.html 时钟案例页面内容* 步骤* 1. 基于 http 模块创建 Web 服务* 2. 使用 req.url 获取请求资源路径并读取 index.html 里字符串内容返回给请求方* 3. 其他路径暂时返回不存在提示* 4. 运行 Web 服务用浏览器发起请求*/
const fs require(fs)
const path require(path)
// 1. 基于 http 模块创建 Web 服务
const http require(http)
const server http.createServer()
server.on(request, (req, res) {// 2. 使用 req.url 获取请求资源路径并读取 index.html 里字符串内容返回给请求方if (req.url /index.html) {fs.readFile(path.join(__dirname, dist/index.html), (err, data) {res.setHeader(Content-Type, text/html;charsetutf-8)res.end(data.toString())})} else {// 3. 其他路径暂时返回不存在提示res.setHeader(Content-Type, text/html;charsetutf-8)res.end(你要访问的资源路径不存在)}
})
server.listen(8080, () {console.log(Web 服务启动了)
})小结 Web 服务程序都有什么功能 答案 提供数据和网页资源等等功能其他它的功能远不止于此
02_Node.js模块化
知识点自测 以下代码运行的结果是多少 const arr [10, 20, 30]
const result arr.map(val val 1).reduce((sum, val) sum val, 0)
console.log(result)A60 B63 答案 B选项正确 以下代码运行的结果是多少 const obj { username: shenyang, password: 777777 }
const { uname } obj
console.log(uname)Ashenyang Bundefined 答案 A选项正确
01.模块化简介
目标
了解模块化概念和好处以及 CommonJS 标准语法导出和导入
讲解 在 Node.js 中每个文件都被当做是一个独立的模块模块内定义的变量和函数都是独立作用域的因为 Node.js 在执行模块代码时将使用如下所示的函数封装器对其进行封装
而且项目是由多个模块组成的每个模块之间都是独立的而且提高模块代码复用性按需加载独立作用域 但是因为模块内的属性和函数都是私有的如果对外使用需要使用标准语法导出和导入才可以而这个标准叫 CommonJS 标准接下来我们在一个需求中体验下模块化导出和导入语法的使用 需求定义 utils.js 模块封装基地址和求数组总和的函数导入到 index.js 使用查看效果 导出语法 module.exports {对外属性名: 模块内私有变量
}导入语法 const 变量名 require(模块名或路径)
// Node.js 环境内置模块直接写模块名例如fspathhttp
// 自定义模块写模块文件路径例如./utils.js)变量名的值接收的就是目标模块导出的对象 代码实现 utils.js导出 /*** 目标基于 CommonJS 标准语法封装属性和方法并导出*/
const baseURL http://baidu.com
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)小结 Node.js 中什么是模块化? 答案 每个文件都是独立的模块 模块之间如何联系呢? 答案 使用特定语法导出和导入使用 CommonJS 标准规定如何导出和导入模块? 答案 导出module.exports {},导入require(模块名或路径) 模块名/路径如何选择? 答案 内置模块写名字。例如fspathhttp等。自定义模块写模块文件路径例如./utils.js
02.ECMAScript标准-默认导出和导入
目标
掌握 ECMAScript 标准语法中默认导出和导入的使用
讲解 CommonJS 规范是 Node.js 环境中默认的后来官方推出 ECMAScript 标准语法我们接下来在一个需求中体验下这个标准中默认导出和导入的语法要如何使用 需求封装并导出基地址和求数组元素和的函数导入到 index.js 使用查看效果 导出语法 export default {对外属性名: 模块内私有变量
}导入语法 import 变量名 from 模块名或路径变量名的值接收的就是目标模块导出的对象 注意Node.js 默认只支持 CommonJS 标准语法如果想要在当前项目环境下使用 ECMAScript 标准语法请新建 package.json 文件设置 type: ‘module’ 来进行设置 { “type”: module }代码实现 utils.js导出 /*** 目标基于 ECMAScript 标准语法封装属性和方法并默认导出*/
const baseURL http://baidu.com
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)package.json: 文件设置{type: module
}小结 ECMAScript 标准规定如何默认导出和导入模块? 答案 导出export default {} 导入import 变量名 from 模块名或路径 如何让 Node.js 切换模块标准为 ECMAScript 答案 运行模块所在文件夹新建 package.json 并设置 {“type”“module”}
03.ECMAScript标准-命名导出和导入
目标
掌握 ECMAScript 标准语法中命名导出和导入的使用
讲解 ECMAScript 标准的语法有很多常用的就是默认和命名导出和导入这节课我们来学习下命名导出和导入的使用 需求封装并导出基地址和数组求和函数导入到 index.js 使用查看效果 命名导出语法 export 修饰定义语句命名导入语法 import { 同名变量 } from 模块名或路径注意同名变量指的是模块内导出的变量名 代码示例 utils.js 导出 /*** 目标基于 ECMAScript 标准语法封装属性和方法并命名导出*/
export const baseURL http://baidu.com
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)与默认导出如何选择 按需加载使用命名导出和导入全部加载使用默认导出和导入
小结 Node.js 支持哪 2 种模块化标准? 答案 CommonJS 标准语法默认ECMAScript 标准语法 ECMAScript 标准命名导出和导入的语法? 答案 导出export 修饰定义的语句import { 同名变量 } from 模块名或路径 ECMAScript 标准默认导出和导入的语法 答案 导出export default {} 导入import 变量名 from 模块名或路径
04.包的概念
目标
了解 Node.js 环境中包的概念
讲解 包将模块代码其他资料整合成一个文件夹这个文件夹就叫包 包分类 项目包主要用于编写项目和业务逻辑软件包封装工具和方法进行使用 包要求根目录中必须有 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)小结 什么是包? 答案 将模块代码其他资料聚合成的文件夹 包分为哪 2 类呢? 答案 项目包编写项目代码的文件夹软件包封装工具和方法供开发者使用 package.json 文件的作用? 答案 记录软件包的名字作者入口文件等信息 导入一个包文件夹的时候导入的是哪个文件? 答案 默认 index.js 文件或者 main 属性指定的文件
05.npm软件包管理器
目标
掌握使用 npm 管理软件包
讲解 npm 简介链接 软件包管理器用于下载和管理 Node.js 环境中的软件包 npm 使用步骤 初始化清单文件 npm init -y 得到 package.json 文件有则跳过此命令 注意 -y 就是所有选项用默认值所在文件夹不要有中文/特殊符号建议英文和数字组成因为 npm 包名限制建议用英文和数字或者下划线中划线 下载软件包npm i 软件包名称 使用软件包 需求使用 npm 下载 dayjs 软件包到本地项目文件夹中引入到 index.js 中格式化日期打印运行观察效果 具体使用流程图
小结 npm 软件包管理器作用 答案 下载软件包以及管理版本 初始化项目清单文件 package.json 命令? 答案 npm init -y 下载软件包的命令 答案 npm i 软件包名字 下载的包会存放在哪里? 答案 当前项目下的 node_modules 中并记录在 package.json 中
06.npm安装所有依赖
目标
掌握 npm 安装所有依赖功能
讲解 我们拿到了一个别人编写的项目但是没有 node_modules项目能否正确运行 不能因为缺少了项目需要的依赖软件包比如要使用 dayjs 和 lodash 但是你项目里没有这个对应的源码项目会报错的 为何没有给我 node_modules 因为每个人在自己的本机使用 npm 下载要比磁盘间传递要快npm 有缓存在本机 如何得到需要的所有依赖软件包呢 直接在项目目录下运行终端命令npm i 即可安装 package.json 里记录的所有包和对应版本到本项目中的 node_modules 需求请在准备好的素材项目中安装项目所有需要的依赖软件包并运行 index.js 代码看是否正常
小结 当前项目中只有 package.json 没有 node_modules 怎么办? 答案 当前项目目录下打开终端执行 npm i 安装所有依赖软件包 为什么 node_modules 不进行传递? 答案 因为用 npm 下载有缓存在本机比磁盘之间传递要快
07.npm全局软件包-nodemon
目标
掌握本地软件包和全局软件包区别体验 nodemon 的使用
讲解 软件包区别 本地软件包当前项目内使用封装属性和方法存在于 node_modules全局软件包本机所有项目使用封装命令和工具存在于系统设置的位置 nodemon 作用替代 node 命令检测代码更改自动重启程序 使用 安装npm i nodemon -g -g 代表安装到全局环境中运行nodemon 待执行的目标 js 文件 需求使用 nodemon 命令来启动素材里准备好的项目然后修改代码保存后观察终端重启应用程序
小结 本地软件包和全局软件包区别? 答案 本地软件包作用在当前项目封装属性和方法全局软件包本地所有项目使用封装命令和工具 nodemon 作用? 答案 替代 node 命令检测代码更改自动重启程序 nodemon 怎么用? 答案 先确保安装 npm i nodemon -g使用 nodemon 执行目标 js 文件
08.Node.js概念和常用命令总结
目标
把上面学的模块化语法包的概念常用命令进行总结
讲解 Node.js 模块化把每个文件当做一个模块独立作用域按需加载使用特定标准语法导出和导入使用 CommonJS 标准一般应用在 Node.js 项目环境中 ECMAScript 标准一般应用在前端工程化项目中 Node.js 包把模块文件代码文件其他资料聚合成一个文件夹就是包 项目包编写项目需求和业务逻辑的文件夹 软件包封装工具和方法进行使用的文件夹一般使用 npm 管理 本地软件包作用在当前项目封装的属性/方法供项目调用编写业务需求全局软件包作用在所有项目一般封装的命令/工具支撑项目运行 Node.js 常用命令
小结 安装本地软件包的命令是什么 答案 npm i 软件包名 对以下 less 样式代码描述正确的是 .title {span {color: red;}
}A查找 class 名字叫 title 元素范围内所有 span 标签 B查找 class 名字叫 title 和 span 标签 答案 A选项正确 以下代码运行结果是多少 const arr [1, 2, 3, 4].map(val val * 2)
console.log(arr)A[undefined, undefined, undefined, undefined] B[2, 4, 6, 8] 答案 B选项正确 以下针对 axios 函数使用时的配置项描述正确的选项 axios({// 这里
})Aurl请求的方法method传递参数 Bdata传递查询参数params传递请求体参数 Curl请求的网址method请求的方法 Ddata传递请求体参数params传递请求体参数 答案 C选项正确
