网站每年要交钱吗,做公司网站需要多少钱,北京业之峰装饰公司官网,南通公司建站模板01.Node.js 讲解
什么是 Node.js#xff0c;有什么用#xff0c;为何能独立执行 JS 代码#xff0c;演示安装和执行 JS 文件内代码 Node.js 是一个独立的 JavaScript 运行环境#xff0c;能独立执行 JS 代码#xff0c;因为这个特点#xff0c;它可以用来编写服务器后端…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 检查是否安装成功
/*** 目标编写 js 代码用 node 命令执行* 终端作用敲击命令调用对应程序执行* 终端打开目标文件-右键-在集成终端中打开* 命令node xxx.js 注意路径*/
for (let i 0; i 3; i) {console.log(i)
} 02.fs模块 读写文件 模块类似插件封装了方法和属性供我们使用 fs 模块封装了与本机文件系统进行交互的方法和属性
/*** 目标使用 fs 模块读写文件内容* 语法* 1. 引入 fs 模块* 2. 调用 writeFile 写入内容* 3. 调用 readFile 读取内容*/
const fs require(fs) // 引入 fs 模块fs.readFile(./text.txt,(err,data){ // 调用 readFile 读取内容 data 是文件内容的 Buffer 数据流if (err) {console.log(err) } else {// 读取出来的数据默认是Buffer数据流得toString转成字符串用户能看懂console.log(data.toString()) }
})
// fs.writeFile(写入的文件,写入的内容,回调函数err)
// 写入的数据新的替换旧的 会覆盖原文件的所有内容没有这个文件则自动创建这个文件
fs.writeFile(./text11.txt,我是鸿蒙6期的~~~,err{ // 写入内容console.log(恭喜写入成功)
}) 03.path 模块绝对路径
Node.js 执行 JS 代码时代码中的路径都是以终端所在文件夹出发查找相对路径而不是以我们认为的从代码本身出发会遇到问题所以在 Node.js 要执行的代码中访问其他文件建议使用绝对路径path模块内置变量 __dirname配合 path.join() 来得到绝对路径使用
/*** 目标读取 test.txt 文件内容* 注意代码中使用绝对路径* 原因Node.js 执行时会以终端所在文件夹作为相对路径去拼接代码中路径使用导致找不到目标文件* 解决使用 path.join() 和 __dirname 来填写要查找的目标文件绝对地址*/const fs require(fs)
const path require(path) // 引入path模块
fs.readFile(path.join(__dirname,..,text.txt),(err,data){ // 读取if (err) {console.log(err) } else {console.log(data.toString()) }
})
04.案例 压缩前端的html
/*** 目标一压缩 html 里代码* 需求把 public/index.html 里的回车/换行符去掉写入到 dist/index.html 中* 1.1 读取 public/index.html 内容* 1.2 使用正则替换内容字符串里的回车符\r 换行符\n* 1.3 确认后写入到 dist/index.html 内*/
// 读取public里面的index.html→格式化压缩→压缩完的代码写入到dist里面的newIndex.html
// 读取文件fs模块路径path
const fs require(fs)
const path require(path)
// 读取原html文件
// fs.readFile文件回调函数
fs.readFile(path.join(__dirname, public, index.html), (err, data) {if (err) console.log(err)// else console.log(data.toString()) const htmlStr data.toString() // 代码→去掉回车换行\r\n→用正则找到\r\n替换成空字符const newStr htmlStr.replace(/[\r\n]/g, ) // g表示替换所有的\r\nconsole.log(newStr)// 写入到新的html文件// fs.writeFile文件路径要写入的内容回调函数fs.writeFile(path.join(__dirname, dist, newIndex.html), newStr, (err) {if (err) console.log(err)else console.log(恭喜压缩成功)})
}) 05.案例 压缩前端的js压缩 js 里代码并整合到 html 中一起运行
/*** 目标二压缩 js 里代码并整合到 html 中一起运行* 2.1 读取 public/index.js 内容* 2.2 使用正则替换内容字符串里的回车符\r 换行符\n 打印语句console.log(xxx);* 2.3 确认后拼接 html 内容写入到 dist/index.html 内*/
const fs require(fs)
const path require(path)
// 读取html文件
fs.readFile(path.join(__dirname, public, index.html), (err, data) {if (err) console.log(err)// else console.log(data.toString())const htmlStr data.toString()const newStr htmlStr.replace(/[\n\r]/g, ) //已经去掉\r\n的html代码// console.log(newStr) // 读取html成功// 读取js代码fs.readFile(path.join(__dirname, public/index.js), (err, data) {if (err) console.log(err)// else console.log(data.toString())// 有script标签再放js代码const myjs data.toString()//代码→去掉\r\n;去掉log输出→把html和js拼一起写入到新html文件const jsStr myjs.replace(/[\r\n]/g, ).replace(/console.log\(.?\);/g, )// console.log(jsStr) const newjs script${jsStr}/script //带script标签的js// 把html文件和js一起写到其他文件夹// fs.writeFile文件路径写入的内容回调函数把html代码和js代码凭借到一起fs.writeFile(path.join(__dirname, ./dist/new.html), newStr newjs, (err) {if (err) console.log(err)else console.log(成功)})})
}) 06.URL 端口号
/*** 目标了解端口号的作用* 端口号用于区分服务器中的不同服务程序* 取值范围0-65535* 注意0-1023 和一些特定端口号是被占用的我们自己编写服务程序请避开使用* 1. URL 是统一资源定位符简称网址用于访问网络上的资源2. 端口号的作用标记服务器里对应的服务程序值为0-65535 之间的任意整数3. 注意http 协议默认访问的是 80 端口4. Web服务一个程序用于提供网上信息浏览功能5. 注意0-1023 和一些特定的端口号被占用我们自己编写服务程序请避开使用 * * */
07.http模块-创建Web服务
/*** 目标使用 http 模块创建 Web 服务* Web服务一个程序用于提供网上信息浏览服务* 步骤* 1. 引入 http 模块创建 Web 服务对象* 2. 监听 request 事件对本次请求做一些响应处理* 3. 启动 Web 服务监听对应端口号* 4. 运行本服务在终端用浏览器访问 http://localhost:3000/ 发起请求localhost 是本机域名* 注意终端里启动了服务如果想要终止按 ctrl c 停止即可*/
// 1.引入 http 模块创建 Web 服务对象
const http require(http)
// 创建web服务
const server http.createServer()
// 发请求返回响应结果
// server.on(request事件,回调函数)
server.on(request,(req,res){// 设置响应头内容类型普通 html 文本编码格式为 utf-8res.setHeader(Content-Type,text/html;charsetutf-8)res.end(你好欢迎访问)// res.end(hallo)
})// 启动 Web 服务监听对应端口号
// server.listen(端口号回调函数)
server.listen(6656,(){console.log(web 服务已启动)})
08.web服务 - 支持中文字符
/*** 目标Web 服务支持中文字符* 问题返回响应内容为中文字符浏览器无法正确显示* 原因Web 服务没有设置响应头指定说明内容类型和编码格式* 解决设置响应头内容类型让请求方能正确解析* 语法res.setHeader(Content-Type, text/html;charsetutf-8)*/const http require(http)
const server http.createServer()
server.on(request, (req, res) {res.end(你好亲爱的世界)
})
server.listen(3000, () {console.log(Web 服务启动了)
})
09.案例 - 省份列表接口
/*** 目标基于 Web 服务开发-省份列表数据接口* 步骤* 1. 创建 Web 服务* 2. 使用 req.url 获取请求的资源路径读取 json 文件数据返回* 3. 其他请求的路径暂时返回不存在的提示* 4. 运行 Web 服务用浏览器请求地址查看效果*/
const fs require(fs)const http require(http)
const path require(path)// 创建web服务
const server http.createServer()// 3.发请求监听请求返回响应结果
server.on(request,(req,res){
if(req.url /api/provin){// console.log(查询地址成功) // 读取json文件里面的内容响应给用户→ 中文 → 支持中文 → 设置响应头内容类型fs.readFile(path.join(__dirname,data/province.json),(err,data){res.setHeader(content-type,application/json;charsetutf-8)res.end(data.toString()) //响应给用户})
}else{// console.log(请求地址错误查无此地址)res.setHeader(content-type,text/html;charsetutf-8)res.end(不好意思您访问的资源不存在) //响应给用户
}
})// 4.监听某个端口号
server.listen(3333,(){console.log(服务器启动成功)}) 10.案例 - 城市列表接口
/*** 目标基于 Web 服务开发-城市列表数据接口* 步骤* 1. 判断 req.url 资源路径查询字符串路径前缀匹配/api/city* 2. 借助 querystring 模块的方法格式化查询参数字符串* 3. 读取 city.json 城市数据匹配省份名字下属城市列表* 4. 返回城市列表启动 Web 服务测试*/
const fs require(fs)
const path require(path)
const http require(http)
// const { queryObjects } require(v8)
const qs require(querystring)
// 创建web服务
const server http.createServer()// 03.发请求监听请求返回响应结果
server.on(request,(req,res){//判断条件url是否以/api/city开头→是以这个开头的拿到pname的值去查找数据if(req.url.startsWith(/api/city)){console.log(地址正确)const str req.url.split(?)[1]const pname qs.parse(str).pname// console.log(pname)fs.readFile(path.join(__dirname,data/city.json),(err,data){const result JSON.parse(data.toString())[pname] // 数组不能直接返回数组返回jsonres.setHeader(content-type,application/json;charsetutf-8)res.end(JSON.stringify(result))})}else{res.setHeader(content-type,application/json;charsetutf-8)res.end(资源不存在)}
})// 04.监听某个端口
server.listen(3333,(){console.log(服务启动成功)})11.案例-浏览时钟
/*** 目标编写 web 服务监听请求的是 /index.html 路径的时候返回 dist/index.html 时钟案例页面内容* 步骤* 1. 基于 http 模块创建 Web 服务* 2. 使用 req.url 获取请求资源路径并读取 index.html 里字符串内容返回给请求方* 3. 其他路径暂时返回不存在提示* 4. 运行 Web 服务用浏览器发起请求*/
const http require(http)
const fs require(fs)
const path require(path)
// 创建web服务
const server http.createServer()// 发请求监听请求返回响应结果
server.on(request,(rep,res){if(rep.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{res.setHeader(content-type,text/html;charsetutf-8)res.end(访问的资源不存在)}
})//
server.listen(3333,(){console.log(服务启动成功)
})
