网站开发教学网站成都建站网站

当前位置： 首页 > news >正文

网站开发教学网站,成都建站网站,怎么做网站背景图,小型企业网站建站一、Node.js入门 1、什么是Node.js 定义#xff1a;是跨平台JS运行环境#xff08;可以独立执行JS的环境#xff09;作用#xff1a; 编写数据接口#xff0c;提供网页资源功能等等前端工程化#xff1a;为后续学Vue和React等框架做铺垫 2、Node.js为何能执行JS#xff…一、Node.js入门 1、什么是Node.js 定义是跨平台JS运行环境可以独立执行JS的环境作用 编写数据接口提供网页资源功能等等前端工程化为后续学Vue和React等框架做铺垫 2、Node.js为何能执行JS 3、如何执行Node.js代码? 在VSCode终端中输入node xxx.js回车即可执行注意路径 二、 fs模块-读写文件 1、定义 类似插件封装了与本机文件系统进行交互的方法/属性 2、语法 3、案例读写文件 /*** 目标基于 fs 模块读写文件内容* 1. 加载 fs 模块对象* 2. 写入文件内容* 3. 读取文件内容/ // 1. 加载 fs 模块对象 const fs require(fs) // 2. 写入文件内容 fs.writeFile(./test.txt, hello, Node.js, (err) {if (err) console.log(err)else console.log(写入成功) }) // 3. 读取文件内容 fs.readFile(./test.txt, (err, data) {if (err) console.log(err)// data 是 buffer 16 进制数据流对象// .toString() 转换成字符串else console.log(data.toString()) }) 三、path模块-路径处理 1、会出现的问题 Node.js中相对路径是根据终端所在路径来查找的可能无法找到你想要的文件。 2、处理方法 1使用内置变量_dirname该变量的值是终端路径 2利用path.join()方法传入参数拼接的路径参数 3、案例路径处理实例 /** 目标在 Node.js 环境的代码中应使用绝对路径* 原因代码的相对路径是以终端所在文件夹为起点而不是 Vscode 资源管理器* 容易造成目标文件找不到的错误/ const fs require(fs) // 1. 引入 path 模块对象 const path require(path) // 2. 调用 path.join() 配合 dirname 组成目标文件的绝对路径 console.log(dirname) fs.readFile(path.join(__dirname, ../test.txt), (err, data) {if (err) console.log(err)else console.log(data.toString()) })四、压缩前端html 1、需求 把回车符和换行符去掉后重新写入到新html文件中 2、步骤 1读取源html文件内容 2正则替换字符串 3写入到新的html文件中 3、案例 /** 目标1压缩 html 代码* 需求把回车符 \r换行符 \n 去掉写入到新 html 文件中* 1.1 读取源 html 文件内容* 1.2 正则替换字符串* 1.3 写入到新的 html 文件中/ // 1.1 读取源 html 文件内容 const fs require(fs) const path require(path) fs.readFile(path.join(dirname, public/index.html), (err, data) {if (err) console.log(err)else {const htmlStr data.toString()// 1.2 正则替换字符串const resultStr htmlStr.replace(/[\r\n]/g, )console.log(resultStr)// 1.3 写入到新的 html 文件中fs.writeFile(path.join(dirname, dist/index.html), resultStr, err {if (err) console.log(err)else console.log(写入成功)})} }) 五、http:url端口号、web服务程序 1、URL端口号 定义标记服务器里不同功能的服务程序 端口号范围0-65535之间的任意整数 2、常见的服务程序 3、创建Web服务 /** 目标基于 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 服务启动成功了) }) 4、案例将一个html网页通过web服务加载 /*** 目标基于 Web 服务开发提供网页资源的功能* 步骤* 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 服务启动成功了) }) 六、 Node.js模块化 1、什么是模块化 概念项目是由很多个模块文件组成的 好处提高代码复用性按需加载独立作用域 使用需要标准语法导出和导入进行使用 2、CommonJS标准 需求定义utils.js模块封装基地址和数组总和函数 3、案例 utils.js /** 目标基于 CommonJS 标准语法封装属性和方法并导出/ const baseURL http://hmajax.itheima.net 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) 4、ECMAScript标准-默认导出和导入 需求封装并导出基地址和求数组元素的函数   utils.js /** 目标基于 ECMAScript 标准语法封装属性和方法并默认导出/ const baseURL http://hmajax.itheima.net const getArraySum arr arr.reduce((sum, item) sum item, 0)// 默认导出 export default {url: baseURL,arraySum: getArraySum } package.json {type: module } index.js /** 目标基于 ECMAScript 标准语法默认导入工具属性和方法使用/ // 默认导入 import obj from ./utils.js console.log(obj) const result obj.arraySum([10, 20, 30]) console.log(result) 5、ECMAScript标准-命名导出和导入 按需导出时使用 模块 utils.js /** 目标基于 ECMAScript 标准语法封装属性和方法并命名导出/ export const baseURL http://hmajax.itheima.net export const getArraySum arr arr.reduce((sum, item) sum item, 0)配置文件 package.json {type: module } 唯一接口 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) 七、包 1、包的概念 将模块、代码其他资料聚合成一个文件夹 2、包分类 项目包编写项目代码的文件夹软件包封装工具和方法供开发者使用 要求根目录中必须要有package.json文件记录包的清单信息注意导入软件包时引入的默认时index.js模块文件/main属性指定的模块文件 3、实例 utils是一个软件包 arr.js和str.js均为软件包封装的工具index.js是utils工具包唯一出口作用把所有工具模块方法集中起来统一向外暴露server.js导入utils软件包使用里面封装的工具函数。 arr.js /** 目标封装数组常用的方法/ // 数组求和函数 const getArraySum arr arr.reduce((sum, item) sum item, 0)module.exports {getArraySum } str.js /** 目标封装校验用户名和密码长度的函数* 要求用户名最少 8 位密码最少为 6 位/const checkUserName username {return username.length 8 }const checkPassWord password {return password.length 6 }module.exports {checkUser: checkUserName,checkPwd: checkPassWord } index.js /** 本文件是utils 工具包的唯一出口* 作用把所有工具模块方法集中起来统一向外暴露/ const { getArraySum } require(./lib/arr.js) const { checkUser, checkPwd } require(./lib/str.js)// 统一导出所有函数 module.exports {getArraySum,checkUser,checkPwd }server.js /** 目标导入 utils 软件包使用里面封装的工具函数*/ const obj require(./utils) console.log(obj) const result obj.getArraySum([10, 20, 30]) console.log(result) 八、npm包管理器 1、npm包 1定义 npm是Node.js标准的软件包管理器 2使用 初始化清单文件npm init -y得到package.json文件有则跳过下载软件包npm i 软件包名称使用软件包 3总结 2、npm-安装所有依赖 1问题项目中不包含node_modules不能正常运行。原因是缺少以来的本地软件包因为自己用npm下载比拷贝作者上传包快得多。 2解决方法npm i 下载pakage.json中记录的所有软件包 3总结 3、全局软件包nodemon 1软件包区别 本地软件包当前项目内使用封装属性和方法存在于node_modules 全局软件包本机所有项目使用封装命令和工具存在于系统设置的位置 nodemon作用替代node命令检测代码更改自动重启程序 2使用 i.安装npm i nodemon -g代表安装到全局 ii.运行nodemon待执行的目标js文件 e.g nodemon server.jsnode server.js 代码修改需要手动启动 3案例启动准备好的项目修改代码保存后观察自动重启应用程序 4总结 九、黑马Node.js总结