网站首页模板设计图,济宁网络,十大app软件下载入口,网站地址栏小图标什么是Node.js
Node.js 是一个免费的、开源的、跨平台的 JavaScript 运行时环境,使开发者可以搭建服务器端的JavaScript应用程序
概念: 使用Node.js编写后端程序 // 支持前端工程化
后端程序#xff1a;提供接口和数据 #xff0c;网页资源
前端工程化:对代码压缩提供接口和数据 网页资源
前端工程化:对代码压缩转译整合测试 自动部署使用各种工具提升效率
Node.js为何能执行js?
浏览器能执行js代码依靠的是内核中的v8引擎(c程序)
Node.js是基于Chrome V8引擎 进行封装(运行环境) 区别:都支持ECMAScript标准语法Node.js有独立的api (Node环境没有DOM和Bom)
Node.js安装
https://nodejs.org/dist/v18.17.0/ 下一步安装
注意:
1: 安装在非中文路径下
2.无需勾选安装其他的配置软件
检测是否安装成功
windowsr 打开cmd中断 输入node -v 命令 查看版本号
使用node.js
新建js文件编写代码在node环境下运行
在vscode集成终端中输入node xxx.js 回车执行
console.log(hello)
for(let i 0;i3;i){console.log(6)
}fs模块-读写文件
模块类似插件封装了方法/属性
fs模块封装了与本机文件系统进行交互的 方法/属性
加载fs模块
const fs require(fs)写入文件内容
fs.writeFile(文件路径,写入内容,err{//写入后的回调函数
})读取文件内容
fs.readFile(文件路径,(err,data){//写入后的回调函数//data文件内容的Buffer数据流
})path模块–路径处理
在node.js中使用绝对路径
__dirname 模块内置变量(获取当前模块目录名)
案例-压缩前端 html
压缩前端代码让浏览器加载网页更快
前端工程化:对代码压缩转译整合测试 自动部署使用各种工具提升效率
需求把回车符 和换行符去掉 进行压缩写入到新html中
读取html文件内容正则替换字符串写入到新的html文件中
public/index.html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv classboxulli111/lili222/lili333/li/ul/div
/body/htmlpublic/index,js
console.log(123);
for (let i 0; i 4; i) {console.log(i);
}build.js
/*
需求把public/index.html里的回车符和换行符去掉进行压缩写入到新dist/index.html中- 读取html文件内容
- 正则替换字符串
- 写入到新的html文件中需求压缩js里的代码并整合到html中一起运行
1.读取js文件内容
2.正则替换内容
3.拼接html内容写入到 dist/index.html
*/const fs require(fs)
const path require(path)// 把public / index.html里的回车符和换行符去掉进行压缩写入到新dist / index.html中
fs.readFile(path.join(__dirname, public, index.html), (err, data) {const htmlStr data.toString()// console.log(htmlStr);// 正则替换字符串const resultStr htmlStr.replace(/[\r\n]/g, )// console.log(resultStr);fs.readFile(path.join(__dirname, public, index.js), (err, data1) {const jsStr data1.toString()// console.log(jsStr);// 正则替换字符串const jsResultStr jsStr.replace(/[\r\n]/g, ).replace(/console.log\(.\);/g, )// console.log(jsResultStr);// 写入到新的html文件中fs.writeFile(path.join(__dirname, dist, index.html), resultStr jsResultStr, err {if (err) { console.log(err); }else { console.log(压缩成功); }})})
})URL中的端口号
URL 统一资源定位符简称网址用于访问网络上的资源
端口号:标记服务器里对应服务程序0-65535的整数
http://xxxx.com:88/api/loginhttp模块–创建web服务
基于http模块编写程序返回给请求方 ‘hello world’
引入http模块创建web服务对象监听request请求事件对本次请求做一些响应处理启动web服务监听对应端口号运行本服务在终端用浏览器发起请求
案例:基于web服务开发提供省份列表数据的接口了解后端的代码工作过程
test01.js
/*1.基于http模块创建web服务2.使用req.url 获取请求资源路径并获取province.json 里省份数据返回给请求方3.其他路径暂时返回不存在的提示4.运行web服务用浏览器发起请求
*/
// 1. 基于http模块创建web服务
const fs require(fs)
const path require(path)
const http require(http)
const server http.createServer()// 2. 监听request请求事件对本次请求做一些响应处理
server.on(request, (req, res) {// console.log(req.url);if (req.url /api/province) {fs.readFile(path.join(__dirname, data/province.json), (err, data) {res.setHeader(Content-Type, application/json;charsetutf-8)res.end(data.toString())})} else {res.setHeader(Content-Type, text/html;charsetutf-8)res.end(您请求的资源不存在)}
})server.listen(3000, () {console.log(web 服务启动了);
})
参数查询 test02.js
/* 1.基于http模块创建web服务2.判断req.url资源路径 查询字符串 路径前缀匹配 /api/city3.借助 querystring 模块的方法格式化查询字符串 ?pname 北京{pname:北京}4.获取city.json 里省份下的城市列表4.返回城市列表 运行web服务用浏览器发起请求
*/
// 1. 基于http模块创建web服务
const qs require(querystring)
const fs require(fs)
const path require(path)
const http require(http)
const server http.createServer()// 2. 监听request请求事件对本次请求做一些响应处理
server.on(request, (req, res) {// console.log(req.url);// 使用req.url 获取请求资源路径并获取province.json 里省份数据返回给请求方if (req.url /api/province) {fs.readFile(path.join(__dirname, data/province.json), (err, data) {res.setHeader(Content-Type, application/json;charsetutf-8)res.end(data.toString())})// startsWith()返回布尔值表示参数字符串是否在原字符串的头部。} else if (req.url.startsWith(/api/city)) {// /api/city?pname 北京// 以?分隔符分隔 拿到pname北京 // 把查询参数字符串 转成js对象结构const str req.url.split(?)[1]// console.log(str);const query qs.parse(str)console.log(query);// 拿到省份名字const pname query.pname// 读取city.json 城市数据匹配省份名字下的城市列表fs.readFile(path.join(__dirname, data/city.json), (err, data) {const obj JSON.parse(data.toString())// 省份名字作为key去obj对象里取到对应的城市const cityList obj[pname]res.setHeader(Content-Type, application/json;charsetutf-8)res.end(JSON.stringify(cityList))})} else {res.setHeader(Content-Type, text/html;charsetutf-8)res.end(您请求的资源不存在)}
})server.listen(3000, () {console.log(web 服务启动了);
})
test03.js
const qs require(querystring)
const fs require(fs)
const path require(path)
const http require(http)
const server http.createServer()
server.on(request, (req, res) {if (req.url /api/province) {fs.readFile(path.join(__dirname, data/province.json), (err, data) {res.setHeader(Content-Type, application/json;charsetutf-8)res.end(data.toString())})} else if (req.url.startsWith(/api/city)) {const str req.url.split(?)[1]const query qs.parse(str)// console.log(query);const pname query.pnamefs.readFile(path.join(__dirname, data/city.json), (err, data) {const obj JSON.parse(data.toString())const cityList obj[pname]res.setHeader(Content-Type, application/json;charsetutf-8)res.end(JSON.stringify(cityList))})} else if (req.url /index.html) {fs.readFile(path.join(__dirname, dist/index.html), (err, data) {res.setHeader(Content-Type, application/json;charsetutf-8)res.end(data.toString())})}})
server.listen(3000, () {console.log(web服务开启了);
})基于express软件包创建web服务
/*
基于express本地软件包 开发web服务 返回资源给请求方
*/
// 1.下载express软件包
// 2.导入并创建web服务对象
const express require(express)
const server express()// 3.监听请求的方法和资源路径
server.get(/, (req, res) {res.send(您好 欢迎使用express)
})server.get(/province, (req, res) {res.send(省份已查询到)
})// 4/监听任意的请求方法和请求的资源路径
server.all(*, (req, res) {res.status(404)res.send(您访问的资源路径不存在)
})// 5监听端口号 启动web服务
server.listen(3000, () {console.log(web服务已启动)
})
