前端-Node.js

1. 什么是Node.jsNode.js是一个跨平台JavaScript运行环境使开发者可以搭建服务器端的JavaScript应用程序。作用使用Node.js编写服务端程序。编写数据接口提供网页资源浏览功能等等。前端工程化为后续学习Vue和React等框架做铺垫。2. 前端工程化开发项目直到上线过程中集成的所有工具和技术。打包工具webpack静态模块的打包工具对前端代码进行转换压缩以及整合等处理。格式化工具多人协同开发代码风格统一。压缩工具为了前端项目体积更小运行更快。转换工具转成原生的CSS对JS的高版本功能进行降级处理。脚手架工具所有的准备过程在脚手架工具。自动化部署》离不开Node.jsNode.js可以主动的来读取本地前端的代码内容然后对前端代码进行一些相应的后续处理3. Node.js为何能执行JS首先浏览器能制定JS代码依靠的是内核中的V8引擎C程序。其次Node.js是基于Chrome V8引擎进行封装运行环境。4. Node.js的安装node-v16.19.0.msi 傻瓜安装cmd: node -v5. fs模块-读写文件fs模块、path模块模块类似插件封装了方法/属性fs模块封装了与本机文件系统进行交互的方法/属性语法1.加载fs模块对象2.写入文件内容3.读取文件内容const fs require(fs) // fs是模块标识符模块的名字 const path require(path) // path是模块标识符模块的名字 fs.writeFile(文件路径写入内容err { //写入的回调函数 }) 示例1 fs.writeFile(./test.txt,hello Node.js,err { if(err) { console.log(err) }else{ console.log(写入成功) } }) fs.readFile(文件路径(err, data) { //读取后的回调函数 // data是文件内容的Buffer数据流 }) 示例2 fs.readFile(./test.txt, (err, data) { //读取后的回调函数 //data是文件内容的Buffer 16进制数据流对象 // .toString() 转换成字符串 if(err){ console.log(err) }else{ console.log(data.toString()) const htmlStr data.toString() // g全局匹配 不写只匹配一次 const resultStr htmlStr.replace(/[\r\n]/g, ) console.log(resultStr) } })path模块-路径问题-解决兼容性问题问题Node.js代码中相对路径是根据终端所在路径来查找的可能无法找到你想要的文件建议在Node.js代码中使用绝对路径补充__dirname内置变量获取当前模块目录-绝对路径两个下划线window: D:\备课代码\03-code/03mac: /Users/xxx/Desktop/备课代码/03-code/03注意 path.join(__dirname, ../test.txt) 会使用特定于平台的分隔符作为定界符将所有给定的路径片段连接在一起。语法1.加载path模块2.使用path.join方法拼接路径。6. 案例1压缩前端html需求 把回车符 \r 和换行符 \n 去掉后写入到新html文件中。步骤1. 读取源html文件内容2. 正则替换字符串3. 写入到新html文件中7. URL中的端口号URL统一资源定位符简称网址用于访问服务器里的资源。端口号标记服务器里不同功能的服务程序。端口范围0~65535之间的任意整数举例 http://news/baidu.com:80/api/provicehttp: 协议news/baidu.com 域名80 端口号api/provice 资源路径注意 http协议默认访问80端口。常见的服务程序Web服务程序用于提供网上信息浏览功能注意 0-1023和一些特定端口号被占用我们自己编写服务程序请避开使用。8 http模块-创建web服务http模块需求创建web服务并响应内容给浏览器步骤1.加载http模块创建web服务对象2.监听request请求时间设置响应头和响应体3.配置端口号并启动web服务4.浏览器请求http://localhost:3000测试代码实现9. 案例2浏览时钟需求 基于web服务开发提供网页资源的功能网页 -------------基于时钟网页 http://localhost:8080/index.html------------------ 服务器网页------------响应时钟网页内容 html标签css样式js等字符串-------------服务器步骤1. 基于http模块创建web服务2.使用req.url获取请求资源路径判断并读取index.html里字符串内容返回给请求方3.其他路径暂时返回不存在的提示。4.运行web服务用浏览器发起请求测试。10. Node.js模块化什么是模块化定义 CommonJS模块是为了Node.js打包JavaScript代码的原始方法。Node.js还支持浏览器和其他JavaScript运行时使用的ECMAScript模块标准。在Node.js中每个文件都被视为一个单独的模块。概念项目是由多个模块文件组成的。好处提高代码复用性按需加载独立作用域。使用 需要标准语法导出和导入进行使用。js代码[ fs、path、http 、query、String、utils.js]11. CommonJS标准-导入和导出需求定义utils.js模块封装基地址和求数组综合的函数使用1.导出 module.exports {}2.导入require(模块名或路径)模块名或路径内置模块直接写名字例如 fs、path 、http自定义模块写模块文件路径例如 ./utils.js使用示例12 ECMAScript标准-默认导出和导入需求 封装并导出基地址和求数组元素和的函数默认标准使用1.导出 export default {}2.导入 import 变量名 from 模块名或路径注意Node.js默认支持CommonJS标准语法如需要使用ECMAScript标准语法在运行模块所在文件夹新建package.json文件并设置{type:module}使用示例13 ECMAScript标准-命名导出和导入需求 封装并导出基地址和求数组元素和的函数命名标准使用1. 导出 export 修饰定义语句2.导入 import [同名变量] from 模块名或路径如何选择按需加载,使用命名导出和导入。全部加载使用默认导出和导入。使用示例总结1.Node.js支持哪2种模块化标准① CommonJS标准语法默认② ECMAScript标准语法2.ECMAScript标准命名导出和导入的语法① . 导出 export 修饰定义语句②.导入 import [同名变量] from 模块名或路径3.ECMAScript标准默认导出和导入的语法① 导出 export default {}② 导入 import 变量名 from 模块名或路径14 包的概念包 将模块代码其他资料聚合成一个文件夹包分类① 项目包主要用于编写项目和业务逻辑编写项目代码的文件夹② 软件包封装工具和方法供开发者进行使用。要求 根目录中必须有package.json文件记录包的清单信息记录软件包的名字作者入口文件等信息注意导入软件包时引入的默认是index.js模块文件 / main属性指定的模块文件。默认是index.js文件或者main属性指定的文件需求封装数组求和和函数的模块判断用户名和密码长度函数的模块形成一个软件包。15. npm-软件包管理器定义 npm简介npm是Node.js标准的软件包管理器下载软件包以及管理版本下载的包会存放在当前项目下的node_modules中并记录在package.json中在2017年1月时npm仓库中就已经超过3.5W个软件包这使其成为世界上最大的单一语言代码仓库并且可以确定几乎有可用于一切的软件包。它起初是作为下载和管理Node.js包依赖的方式但其现在也已成为前端JavaScript中使用的工具。使用① 初始化清单文件 npm init -y (得到package.json文件有则略过此命令)② 下载软件包 npm i 软件包名称 | npm i 软件包名称版本号③ 使用软件包需求 使用dayjs软件包来格式化日期时间使用示例16 npm 按照所有依赖问题 项目中不包含node_mudules,能否正常运行不能缺少依赖的本地软件包为什么不同时复制过来呢原因 因为自己用npm 下载依赖比磁盘传递拷贝要快得多。解决 项目终端输出命名 npm i下载package.json中记录的所有软件包。17 npm-全局软件包nodemon软件包区别① 本地软件包 作用在当前项目内使用封装属性和方法存在于node_modules② 全局软件包本机所有项目使用封装命令和工具存在于系统设置的位置nodemon作用 替代node命令检测代码更改自动重启程序。使用① 安装npm i nodemon -g -g代表安装到全局环境中② 运行nodemon 待执行的目标js文件。需求启动准备好的项目修改代码保存后观察自动重启应用程序。nodemon怎么用① 先确保安装 npm i nodemon -g② 使用 nodemon 执行目标 js文件18 总结