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

深入浅出Node.js-1(node.js入门）

news 来源：原创 2025/5/7 0:56:23

全新专栏带你快速掌握node.js

Node.js入门

html,css,js 30年了

nodejs环境 09年出现 15年

nodejs为我们解决了2个方面的问题：

【锦上添花】让我们前端工程师拥有了后端开发能力（开接口，访问数据库） - 大公司BFF（50+）
【✔️】前端工程化（Webpack，vit）

Node.js基本概念

Node.js中文官网

什么是Node.js

作用：

使用 Node.js 编写后端程序 / 支持前端工程化

后端程序：提供接口和数据，网页资源等

前端工程化：对代码压缩，转译，整合（使用各种工具，提升效率）

Node.js 为何能执行 JS？

首先：浏览器能执行 JS 代码，依靠的是内核中的 V8 引擎（C++ 程序）

其次：Node.js 是基于 Chrome V8 引擎进行封装（运行环境）

区别：都支持 ECMAScript 标准语法，Node.js 有独立的 API

注意：Node.js 环境没有 DOM 和 BOM 等

Node.js 安装

nvm

nvm是一个nodejs版本管理工具，它可以在我们电脑中安装多个node版本，并且可以随意切换版本

nvm官网：nvm文档手册 - nvm是一个nodejs版本管理工具 - nvm中文网

要求：使用nvm安装node 16.19.0（指定版本：为了兼容后期学习的项目）

# ✨安装node 16.19.0版本
nvm install 16.19.0# ✨查看node版本列表(带*号的表示当前使用的版本)
nvm ls# ✨切换node版本
nvm use 16.19.0

成功验证：打开 cmd 终端，输入 node -v 命令查看版本号如果有显示，则代表安装成功

使用 Node.js

修改终端默认执行程序

为了防止某些电脑默认使用的是PowerShell执行js报错，我们需要调整一下如下设置为`Command Prompt`

需求：使用nodejs执行一个js文件，使用console.log()打印三个五角星

步骤：

新建 index.js 文件，编写打印代码和 for 循环打印 3 个五角星
命令：在 VSCode 集成终端中（ctrl+shift+` 打开），输入 node index.js，回车即可执行，并查看结果

注意：node 文件路径

console.log('Hello, World')
for (let i = 0; i < 3; i++) {console.log('☆')
}

Node.js 执行目标 JS 文件，需要使用 node index.js 命令来执行（我们可以借助 VSCode 集成终端使用，好处：可以快速切换到目标 JS 文件所在终端目录，利用相对路径找到要执行的目标 JS 文件

准备node项目

在vs code中编写node代码，默认是没有提示的，通过如下步骤创建一个可以有语法提示的node项目，方便接下来的学习。减轻学习负担

创建一个空白文件夹，例如：mynode
使用vs code打开 mynode文件夹
按ctrl + shift + `打开终端
在终端中输入：npm install @types/node 后在此项目中编写nodejs代码就有提示了

注意：由于npm的镜像源在国外，需要切到国内才速度快

切换命令：npm set registry=https://repo.huaweicloud.com/repository/npm/

fs模块-读写文件

模块：类似插件，封装了方法和属性供我们使用

fs 模块：是Node.js的内置模块，封装了与本机文件系统进行交互的，方法和属性

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 数据流转成字符串类型
})

path模块-路径处理

为什么在 Node.js 待执行的 JS 代码中要用绝对路径：

Node.js 执行 JS 代码时，代码中的路径都是以终端所在文件夹出发查找相对路径，而不是以我们认为的从代码本身出发，会遇到问题，所以在 Node.js 要执行的代码中，访问其他文件，建议使用绝对路径

新建 03 文件夹编写待执行的 JS 代码，访问外层相对路径下的文件，然后在最外层终端路径来执行目标文件，造成问题

问题原因：就是从代码文件夹出发，使用../text.txt解析路径，找不到目标文件，报错了！

解决方案：使用模块内置变量 __dirname配合 path.join() 来得到绝对路径使用

const fs = require('fs')
console.log(__dirname) // D:\备课代码\2_node_3天\Node_代码\Day01_Node.js入门\代码\03// 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 代码中访问其他文件的路径，都建议使用绝度路径

案例-压缩前端html

目标：压缩前端代码，让浏览器加载网页更快（体验前端工程化）

前端工程化：对代码压缩，转译，整合，测试，自动部署等等

需求：把public\index.html中回车符（\r）和换行符（\n）去掉，写入到新 dist\index.html 中

步骤：

使用fs.readFile读取public\index.html中的内容
正则替换index.html中字符串 /[\r\n]/g
将替换后的新内容写入到新dist\index.html中完成代码压缩

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>时钟案例</title><style>html,body {margin: 0;padding: 0;height: 100%;background-image: linear-gradient(to bottom right, red, gold);}.box {width: 400px;height: 250px;background-color: rgba(255, 255, 255, 0.6);border-radius: 6px;position: absolute;left: 50%;top: 40%;transform: translate(-50%, -50%);box-shadow: 1px 1px 10px #fff;text-shadow: 0px 1px 30px white;display: flex;justify-content: space-around;align-items: center;font-size: 70px;user-select: none;padding: 0 20px;-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, .2)));}</style>
</head>
<body><div class="box"><div id="HH">00</div><div>:</div><div id="mm">00</div><div>:</div><div id="ss">00</div></div>
</body>
</html>

/* 职责：将 public/index.html压缩代码：
1.使用fs.readFile读取public\index.html中的内容
2.正则替换index.html中字符串/rn]/g
3.将替换后的新内容写入到新dist\index.html中完成代码压缩
*/const { readFile,writeFile } = require("fs");
const path = require("path");// 1. 读取未压缩的index.html内容
let indexPath = path.join(__dirname, 'public/index.html')readFile(indexPath, (err, data) => {if (err) {console.log(err);} else {// console.log(data.toString())let unzipHtml = data.toString()// 2.正则替换index.html中字符串/rn]/gconst reg = /[\r\n]/gconst zipHtml = unzipHtml.replace(reg, '')// console.log(zipHtml)// 3.将替换后的新内容写入到新dist\index.html中完成代码压缩let targetPath = path.join(__dirname, 'dist/index.html')writeFile(targetPath,zipHtml,(err)=>{if(err){console.log(err);                }else{console.log('写入成功');}})}
})

案例-压缩前端JS

需求：把准备好的 JS 文件代码的回车符，换行符，打印语句去掉，并插入到之前 html 内容之后

步骤：

读取 public/index.js 内容
使用正则替换内容字符串里的\r \n 和console.log('xxx')

1. /[\r\n]/g
2. /console.log$'.+?'$;/g

拼接 html 内容写入到 dist/index.html 内

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>时钟案例</title><style>html,body {margin: 0;padding: 0;height: 100%;background-image: linear-gradient(to bottom right, red, gold);}.box {width: 400px;height: 250px;background-color: rgba(255, 255, 255, 0.6);border-radius: 6px;position: absolute;left: 50%;top: 40%;transform: translate(-50%, -50%);box-shadow: 1px 1px 10px #fff;text-shadow: 0px 1px 30px white;display: flex;justify-content: space-around;align-items: center;font-size: 70px;user-select: none;padding: 0 20px;-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, .2)));}</style>
</head>
<body><div class="box"><div id="HH">00</div><div>:</div><div id="mm">00</div><div>:</div><div id="ss">00</div></div>
</body>
</html>

window.addEventListener('load', function () {console.log('测试-网页加载完成了');clock();setInterval(clock, 1000);
});
function clock() {console.log('测试-时钟函数调用了');let dt = new Date();let HH = dt.getHours();let mm = dt.getMinutes();let ss = dt.getSeconds();console.log(dt, HH, mm, ss);document.querySelector('#HH').innerHTML = padZero(HH);document.querySelector('#mm').innerHTML = padZero(mm);document.querySelector('#ss').innerHTML = padZero(ss);
};
function padZero(n) {console.log('时间测试');return n > 9 ? n : '0' + n;
}

/*** 目标二：压缩 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')
fs.readFile(path.join(__dirname, 'public', 'index.html'), (err, data) => {const htmlStr = data.toString()const resultStr = htmlStr.replace(/[\r\n]/g, '')// 2.1 读取 public/index.js 内容fs.readFile(path.join(__dirname, 'public', 'index.js'), (err, data) => {const jsStr = data.toString()// 2.2 使用正则替换内容字符串里的，回车符\r 换行符\n 打印语句console.log('xxx');const jsResultStr = jsStr.replace(/[\r\n]/g, '').replace(/console.log\('.+?'\);/g, '')const result = `<script>${jsResultStr}</script>`console.log(result)// 2.3 确认后，拼接 html 内容写入到 dist/index.html 内fs.writeFile(path.join(__dirname, 'dist', 'index.html'), resultStr + result, err => {if (err) console.log(err)else console.log('压缩成功')})})})

http模块-创建Web服务

什么是Web服务?

Web 服务：是一种通过网络进行通信和交换数据的技术

大白话：一个程序，用来提供网上信息浏览功能

我们前端可以使用 Node.js来构建一个 Web 服务来与客户端进行数据交换

【前置知识】端口号

vision

http://8.138.119.204:80

创建3000端口的Web服务

基于 Node.js 环境，使用内置 http 模块，创建 Web 服务程序

需求：引入 http 模块，使用相关语法，创建 Web 服务程序，响应返回给请求方一句提示 ‘hello，world’

步骤：

引入 http 模块，创建 Web 服务对象
监听 request 请求事件，对本次请求，做一些响应处理
启动 Web 服务监听对应端口号
运行本服务在终端进程中，用浏览器发起请求 http://localhost:3000/

注意：

本机的域名叫做 localhost 或者 127.0.0.1
一个端口只能有一个服务监听，如果前一个服务器未关闭，则第二次启动会报错

/*** 目标：使用 http 模块，创建 Web 服务* Web服务：一个程序，用于提供网上信息浏览服务* 步骤：*  1. 引入 http 模块，创建 Web 服务对象*  2. 监听 request 事件，对本次请求，做一些响应处理*  3. 启动 Web 服务监听对应端口号*  4. 运行本服务在终端，用浏览器访问 http://localhost:3000/ 发起请求（localhost 是本机域名）* 注意：终端里启动了服务，如果想要终止按 ctrl c 停止即可*/
// 1. 引入 http 模块，创建 Web 服务对象
const http = require('http')
const server = http.createServer()
// 2. 监听 request 事件，对本次请求，做一些响应处理
server.on('request', (req, res) => {res.end('hello, world') // 一次请求只能对应一次响应
})
// 3. 启动 Web 服务监听对应端口号
server.listen(3000, () => {console.log('Web 服务启动了')
})

Web服务-支持中文字符

让 Web 服务，返回中文字符，浏览器正确解析加载

步骤：给 Web 服务程序添加响应头，设置内容类型和正确的编码格式，重启 Web 服务测试访问即可

res.setHeader('Content-Type', 'text/html;charset=utf-8')

编码：编码是信息从一种形式或格式转换为另一种形式的过程，指的把文字在计算机里的二进制数据，用什么形式展示出来

案例-省份列表接口

需求：基于 Web 服务，开发提供省份列表数据的接口，了解下后端的代码工作过程

步骤：

1. 基于 http 模块，创建 Web 服务

1. 使用 req.url 获取请求资源路径，并读取 province.json 理论省份数据返回给请求方

1. 其他路径，暂时返回不存在的提示

1. 运行 Web 服务，用浏览器发起请求测试，看是否可以获取到省份列表数据

代码如下：

["北京","天津","河北省","山西省","内蒙古自治区","辽宁省","吉林省","黑龙江省","上海","江苏省","浙江省","安徽省","福建省","江西省","山东省","河南省","湖北省","湖南省","广东省","广西壮族自治区","海南省","重庆","四川省","贵州省","云南省","西藏自治区","陕西省","甘肃省","青海省","宁夏回族自治区","新疆维吾尔自治区","台湾","香港特别行政区","澳门特别行政区"
]

/* 这个web服务提供的服务有：1. 当浏览器或者axios发送了 http://localhost:3000/api/province请求，就响应省份的json数据给客户端拆解流程：1. 准备一个json文件2. 准备一个web服务（http）3. request事件里面做出响应-> fs.readFile读取准备的json文件数据-> 设置响应头Content-Type-> res.end()响应
*/const { readFile } = require('fs')
const http = require('http')
const path = require('path')const server = http.createServer()server.on('request', (req, res) => {// 1. 如何判断客户端请求上来的路径地址是什么？// req.url存储的是请求的url的路径+参数//    console.log(req.url)if (req.url == '/api/province') {// 2. 读取json文件内容响应readFile(path.join(__dirname,'/data/province.json'),(err,data)=>{if(err){res.end('接口500')}else{let jsonStr = data.toString()res.setHeader('Content-Type','application/json')res.end(jsonStr)}})}else{res.end('资源没有找到404')}   
})server.listen(3000, () => {console.log('web服务已经启动，请使用http://localhost:3000来访问');
})

案例-城市列表接口

需求：基于刚刚的 Web 服务，开发提供城市列表数据的接口，了解下后端代码的工作过程

前置知识：字符串.startsWith() 和querystring模块

步骤：

1. 判断 req.url 资源路径+查询字符串，路径前缀匹配 /api/city

1. 借助 querystring 模块的方法，格式化查询字符串

1. 读取 city.json 城市数据，匹配省份名字下属城市列表

1. 返回城市列表，启动 Web 服务测试

代码如下：

{"北京": ["北京市"],"天津": ["天津市"],"河北省": ["石家庄市","唐山市","秦皇岛市","邯郸市","邢台市","保定市","张家口市","承德市","沧州市","廊坊市","衡水市"],"山西省": ["太原市","大同市","阳泉市","长治市","晋城市","朔州市","晋中市","运城市","忻州市","临汾市","吕梁市"],"内蒙古自治区": ["呼和浩特市","包头市","乌海市","赤峰市","通辽市","鄂尔多斯市","呼伦贝尔市","巴彦淖尔市","乌兰察布市","兴安盟","锡林郭勒盟","阿拉善盟"],"辽宁省": ["沈阳市","大连市","鞍山市","抚顺市","本溪市","丹东市","锦州市","营口市","阜新市","辽阳市","盘锦市","铁岭市","朝阳市","葫芦岛市"],"吉林省": ["长春市","吉林市","四平市","辽源市","通化市","白山市","松原市","白城市","延边朝鲜族自治州"],"黑龙江省": ["哈尔滨市","齐齐哈尔市","鸡西市","鹤岗市","双鸭山市","大庆市","伊春市","佳木斯市","七台河市","牡丹江市","黑河市","绥化市","大兴安岭地区"],"上海": ["上海市"],"江苏省": ["南京市","无锡市","徐州市","常州市","苏州市","南通市","连云港市","淮安市","盐城市","扬州市","镇江市","泰州市","宿迁市"],"浙江省": ["杭州市","宁波市","温州市","嘉兴市","湖州市","绍兴市","金华市","衢州市","舟山市","台州市","丽水市"],"安徽省": ["合肥市","芜湖市","蚌埠市","淮南市","马鞍山市","淮北市","铜陵市","安庆市","黄山市","滁州市","阜阳市","宿州市","巢湖市","六安市","亳州市","池州市","宣城市"],"福建省": ["福州市","厦门市","莆田市","三明市","泉州市","漳州市","南平市","龙岩市","宁德市"],"江西省": ["南昌市","景德镇市","萍乡市","九江市","新余市","鹰潭市","赣州市","吉安市","宜春市","抚州市","上饶市"],"山东省": ["济南市","青岛市","淄博市","枣庄市","东营市","烟台市","潍坊市","济宁市","泰安市","威海市","日照市","莱芜市","临沂市","德州市","聊城市","滨州市","菏泽市"],"河南省": ["郑州市","开封市","洛阳市","平顶山市","安阳市","鹤壁市","新乡市","焦作市","濮阳市","许昌市","漯河市","三门峡市","南阳市","商丘市","信阳市","周口市","驻马店市"],"湖北省": ["武汉市","黄石市","十堰市","宜昌市","襄阳市","鄂州市","荆门市","孝感市","荆州市","黄冈市","咸宁市","随州市","恩施土家族苗族自治州"],"湖南省": ["长沙市","株洲市","湘潭市","衡阳市","邵阳市","岳阳市","常德市","张家界市","益阳市","郴州市","永州市","怀化市","娄底市","湘西土家族苗族自治州"],"广东省": ["广州市","韶关市","深圳市","珠海市","汕头市","佛山市","江门市","湛江市","茂名市","肇庆市","惠州市","梅州市","汕尾市","河源市","阳江市","清远市","东莞市","中山市","潮州市","揭阳市","云浮市"],"广西壮族自治区": ["南宁市","柳州市","桂林市","梧州市","北海市","防城港市","钦州市","贵港市","玉林市","百色市","贺州市","河池市","来宾市","崇左市"],"海南省": ["海口市", "三亚市", "三沙市"],"重庆": ["重庆市"],"四川省": ["成都市","自贡市","攀枝花市","泸州市","德阳市","绵阳市","广元市","遂宁市","内江市","乐山市","南充市","眉山市","宜宾市","广安市","达州市","雅安市","巴中市","资阳市","阿坝藏族羌族自治州","甘孜藏族自治州","凉山彝族自治州"],"贵州省": ["贵阳市","六盘水市","遵义市","安顺市","铜仁市","黔西南布依族苗族自治州","毕节市","黔东南苗族侗族自治州","黔南布依族苗族自治州"],"云南省": ["昆明市","曲靖市","玉溪市","保山市","昭通市","丽江市","普洱市","临沧市","楚雄彝族自治州","红河哈尼族彝族自治州","文山壮族苗族自治州","西双版纳傣族自治州","大理白族自治州","德宏傣族景颇族自治州","怒江傈僳族自治州","迪庆藏族自治州"],"西藏自治区": ["拉萨市","昌都地区","山南地区","日喀则地区","那曲地区","阿里地区","林芝地区"],"陕西省": ["西安市","铜川市","宝鸡市","咸阳市","渭南市","延安市","汉中市","榆林市","安康市","商洛市"],"甘肃省": ["兰州市","嘉峪关市","金昌市","白银市","天水市","武威市","张掖市","平凉市","酒泉市","庆阳市","定西市","陇南市","临夏回族自治州","甘南藏族自治州"],"青海省": ["西宁市","海东市","海北藏族自治州","黄南藏族自治州","海南藏族自治州","果洛藏族自治州","玉树藏族自治州","海西蒙古族藏族自治州"],"宁夏回族自治区": ["银川市", "石嘴山市", "吴忠市", "固原市", "中卫市"],"新疆维吾尔自治区": ["乌鲁木齐市","克拉玛依市","吐鲁番地区","哈密地区","昌吉回族自治州","博尔塔拉蒙古自治州","巴音郭楞蒙古自治州","阿克苏地区","克孜勒苏柯尔克孜自治州","喀什地区","和田地区","伊犁哈萨克自治州","塔城地区","阿勒泰地区"],"台湾省": ["台北市","高雄市","台南市","台中市","金门县","南投县","基隆市","新竹市","嘉义市","新北市","宜兰县","新竹县","桃园县","苗栗县","彰化县","嘉义县","云林县","屏东县","台东县","花莲县","澎湖县","连江县"],"香港特别行政区": ["香港岛", "九龙", "新界"],"澳门特别行政区": ["澳门半岛", "离岛"]
}

/* 这个web服务提供的服务有：1. 当浏览器或者axios发送了 http://localhost:3000/api/province请求，就响应省份的json数据给客户端拆解流程：1. 准备一个json文件2. 准备一个web服务（http）3. request事件里面做出响应-> fs.readFile读取准备的json文件数据-> 设置响应头Content-Type-> res.end()响应
*/const { readFile } = require('fs')
const http = require('http')
const path = require('path')
const qs = require('querystring')const server = http.createServer()server.on('request', (req, res) => {// 1. 如何判断客户端请求上来的路径地址是什么？// req.url存储的是请求的url的路径+参数//    console.log(req.url)if (req.url == '/api/province') {// 2. 读取json文件内容响应readFile(path.join(__dirname, '/data/province.json'), (err, data) => {if (err) {res.end('接口500')} else {let jsonStr = data.toString()res.setHeader('Content-Type', 'application/json')res.end(jsonStr)}})}else if (req.url.startsWith('/api/city')) {// 城市数据的提供// 1. 获取请求pname的值// req.url  // /api/city?pname=辽宁省let queryString = req.url.split('?')[1]  //pname=辽宁省const queryObj = qs.parse(queryString)  // {pname:'辽宁省'}// console.log(queryObj.pname);// 2. 根据pname的值从city.json中获取指定的省份的城市响应readFile(path.join(__dirname, 'data/city.json'), (err, data) => {if (err) {res.end('500 server error')} else {// 字符串const cityJsonString = data.toString()// 必须将cityJsonString 转换js对象const cityObj = JSON.parse(cityJsonString)let cityArr = cityObj[queryObj.pname] // ['广州市','深圳市','''']res.setHeader('Content-Type', 'application/json;')res.end(JSON.stringify(cityArr))}})}else {res.end('资源没有找到404')}
})server.listen(3000, () => {console.log('web服务已经启动，请使用http://localhost:3000来访问');
})

案例-浏览时钟

需求：基于 Web 服务，开发提供网页资源的功能，了解下后端的代码工作过程

步骤：

1. 基于 http 模块，创建 Web 服务

1. 使用 req.url 获取请求资源路径为 /index.html 的时候，读取 index.html 文件内容字符串返回给请求方

1. 其他路径，暂时返回不存在的提示

1. 运行 Web 服务，用浏览器发起http://localhost:3000/index.html请求查看结果是否为倒计时页面

代码如下：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>时钟案例</title>  <style>    html,    body {      margin: 0;      padding: 0;      height: 100%;      background-image: linear-gradient(to bottom right, red, gold);    }    .box {      width: 400px;      height: 250px;      background-color: rgba(255, 255, 255, 0.6);      border-radius: 6px;      position: absolute;      left: 50%;      top: 40%;      transform: translate(-50%, -50%);      box-shadow: 1px 1px 10px #fff;      text-shadow: 0px 1px 30px white;      display: flex;      justify-content: space-around;      align-items: center;      font-size: 70px;      user-select: none;      padding: 0 20px;      -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, .2)));    }  </style></head><body>  <div class="box">    <div id="HH">00</div>    <div>:</div>    <div id="mm">00</div>    <div>:</div>    <div id="ss">00</div>  </div></body></html><script>window.addEventListener('load', function () {    clock();  setInterval(clock, 1000);});function clock() {    let dt = new Date();  let HH = dt.getHours();  let mm = dt.getMinutes();  let ss = dt.getSeconds();  console.log(dt, HH, mm, ss);  document.querySelector('#HH').innerHTML = padZero(HH);  document.querySelector('#mm').innerHTML = padZero(mm);  document.querySelector('#ss').innerHTML = padZero(ss);};function padZero(n) {    return n > 9 ? n : '0' + n;}</script>

/*** 目标：编写 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;charset=utf-8')res.end(data.toString())})} else {// 3. 其他路径，暂时返回不存在提示res.setHeader('Content-Type', 'text/html;charset=utf-8')res.end('你要访问的资源路径不存在')}
})
server.listen(8080, () => {console.log('Web 服务启动了')
})

深入浅出Node.js-1(node.js入门）

全新专栏带你快速掌握node.js Node.js入门 html,css,js 30年了 nodejs环境 09年出现 15年 nodejs为我们解决了2个方面的问题： 【锦上添花】让我们前端工程师拥有了后端开发能力（开接口，访问数据库） - 大公司BFF（5…...

编程日记 2025/5/7 0:56:23

当年执行 python manage runserver命令时 1. 先执行 runserver 中的 handle方法 2. 执行 self.run()方法 3. 执行 self.inner_run() 3.1 inner_run 下 run方法的封装 3.1.1 接着看 handle 怎么来的封装了一个方法接着找返回函数 3.1.2在 basehttp 下 3.1.3 get_wsgi_appl…...

编程日记 2025/5/7 0:23:15

MySQL 存储引擎

InnoDB InnoDB是MySQL的默认存储引擎，自MySQL 5.5版本起开始使用。它提供了具有提交、回滚和崩溃恢复能力的事务安全（ACID兼容）存储引擎。主要特性： 事务支持：完全支持ACID（原子性、一致性、隔离性、持久…...

编程日记 2025/5/6 23:33:14

React知识盲点——组件通信、性能优化、高级功能详解（大纲）

组件通信 React 组件通信详解在 React 中，组件通信是一个核心概念，主要指的是如何让不同的组件共享和传递数据。React 提供了多种机制来实现组件间的数据传递和状态共享。以下是几种常见的组件通信方式，包括：父子组件通信&…...

编程日记 2025/5/6 23:37:35

Maven 详细配置：Maven 项目 POM 文件解读

Maven 是 Java 开发领域中广泛使用的项目管理和构建工具，通过其核心配置文件——POM（Project Object Model）文件，开发者能够定义项目的基本信息、依赖关系、插件配置以及构建生命周期等关键要素。POM 文件不仅是 Maven 项目的核心…...

编程日记 2025/5/6 23:22:36

selenium

pythonselenium selenium是一个第三方库，python有很多库； 1、什么是ui自动化? 通过模拟手工操作用户ui页面的方式，用代码去实现自动化操作和验证的行为。 2、ui自动化的优点？ （1）解决重复性的功能测试…...

编程日记 2025/5/7 0:10:20

网络安全：设备原理与操作

设备型号概述网络安全企业有哪些？ 国外：思科，Juniper，惠普，3Com，。。。。国内：华为，中性，锐捷，蓝盾，绿盟，山石网科，36…...

编程日记 2025/5/6 23:47:39

pytorch中nn.Conv2d详解及参数设置原则

文章目录基础参数1. in_channels (输入通道数)2. out_channels (输出通道数)3. kernel_size (卷积核大小)4. stride (步幅)5. padding (填充)6. dilation (膨胀)7. groups (分组卷积)8. bias (偏置) 如何设置参数？1. **in_channels 和 out_channels（输入…...

编程日记 2025/5/6 23:53:29

select下拉框，首次进入页面没有显示value的情况

bug场景： 类似这种bug情况排查如下： 首先理解含义 options就是存放键值对的，id就是key，对上了它就自动把label显示而且如果你用来当作key和label的字段，与后端返回的不一致，还可以进行更改其次排查接…...

编程日记 2025/5/6 23:40:28

接口项目操作图-thinkphp6-rabbitmq

一、用户开户流程用户首次需要联系商务开通账户，需要提供手机号及来访问的IP。开好户之后，平台方将提供用户访问的key值及header头部参数的公钥加密文件、body访问参数以及返回数据的公私钥加解密文件。二、用户请求流程用户将拿到的key值进行rsa公钥…...

编程日记 2025/5/7 0:15:54

thinkphp6.0常用设计模式实例

单例模式 (Singleton) 场景：确保一个类只有一个实例，并提供一个全局访问点。实际业务：数据库连接、日志记录器、配置管理等。 ThinkPHP 6.0 实现： namespace app\common;class DatabaseConnection {private static $instance …...

编程日记 2025/5/6 23:18:29

微服务保护——Sentinel

什么是微服务保护？ 微服务保护是一系列用于保障微服务架构稳定、可靠运行的策略与技术手段，在复杂的分布式微服务系统里，它能避免局部故障引发连锁反应，从而维持整个系统的可用性，主要涵盖以下几个关键部分&#xff1a…...

编程日记 2025/5/7 0:15:54

php 多进程那点事，用 swoole 如何解决呢？

在 PHP 中，多进程的处理通常会遇到一些挑战，比如资源共享、进程间通信、性能优化等。Swoole 是一个高性能的协程和多进程框架，旨在为 PHP 提供异步、并发、协程等功能，解决了传统 PHP 环境中的多进程管理问题。通过使用 Swoole&am…...

编程日记 2025/5/1 8:47:43

STM32+ADC+DMA快速循环转换

测试平台：STM32F405RGT6 uint32_t AD_Buf[100]{0}; HAL_ADC_Start_DMA(&hadc2,(uint32_t *)AD_Buf,100); while(1) {printf("AD_Buf:%d\n",AD_Buf[0]); }...

编程日记 2025/4/22 2:30:26

移动电商的崛起与革新：以开源AI智能名片2+1链动模式S2B2C商城小程序为例的深度剖析

摘要：本文旨在探讨移动电商的崛起背景、特点及其对传统电商模式的革新影响，并以开源AI智能名片21链动模式S2B2C商城小程序为具体案例，深入分析其在移动电商领域的创新实践。随着移动互联网技术的飞速发展，移动电商已成为电商行业的…...

编程日记 2025/5/6 3:43:51

QT实现端口扫描暂停和继续功能 3

上篇QT给端口扫描工程增加线程2-CSDN博客为按钮pushButton_Stop添加clicked事件，功能为暂停扫描，并在暂停后显示继续按钮，点击继续按钮之后继续扫描 1.更新UI 添加继续按钮点击转到槽则会自动声明 2. 更新 MainWindow.h 需要新增的部分…...

编程日记 2025/5/2 7:50:08

C_字符数组存储汉字字符串及其索引

字符串就是字符数组，可以定义一个char类型的数组来存储字符串。如果要存储多个字符串则可以定义一个char类型的二维数组。存储多个汉字字符串的话，可以考虑用char类型的二维数组。不过要注意，一个汉字在内存中占用的字节数确实大于一个…...

编程日记 2025/5/5 9:07:52

Linux标准IOday1

1:思维导图 2:将 student.c这个练习题，改成链表后实现头文件link.h #ifndef __STRUCT_H__ #define __STRUCT_H__ #include <stdio.h> #include <stdlib.h> typedef struct Student{char name[20];double math;double chinese;double english;double…...

编程日记 2025/5/6 10:30:50

SEO内容优化：如何通过用户需求赢得搜索引擎青睐？

在谷歌SEO优化中，内容一直是最重要的因素之一。但要想让内容真正发挥作用，关键在于满足用户需求，而不是简单地堆砌关键词。谷歌的算法越来越智能化，更注重用户体验和内容的实用性。了解目标用户的需求。通过工具如Google Trends…...

编程日记 2025/5/4 13:28:13

API调用淘宝京东商品详情接口示例参考，json格式数据示例

以下是API调用淘宝和京东商品详情接口的JSON格式数据示例： 淘宝商品详情接口JSON数据示例淘宝商品详情接口（通常称为item_get或类似的名称）是淘宝开放平台提供的一个API接口，允许开发者根据商品的ID（Item ID&#x…...

编程日记 2025/4/29 5:01:44

css实现垂直文本

效果知识 writing-mode: <value>; 可选值 horizontal-tb: 默认值。文本从左到右（或从右到左）排列，然后从上到下。vertical-rl: 文本从上到下排列，然后从右到左。适用于垂直书写的方向，如日语和中文。vertica…...

编程日记 2025/5/1 22:03:00

【AI日记】25.01.07

【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】【读书与思考】 AI 参加：kaggle 比赛 Forecasting Sticker Sales 读书书名：国家为什么会失败阅读原因：2024 年诺贝尔经济学奖得主的力作，之前我已经读过他另一…...

编程日记 2025/5/5 0:07:20

logback日志

一、使用两个以上spring环境变量做三目操作 <springProperty name"application_name" scope"context" source"spring.application.name"/><springProperty name"trace_app_name" scope"context" source"sprin…...

编程日记 2025/5/2 10:48:38

Android NDK开发入门3之基本语法

JNI语法基础函数生成语法： extern “ C” 作⽤：避免编绎器按照C的⽅式去编绎C函数 1、C不⽀持函数的重载，编译之后函数名不变； 2、C⽀持函数的重载（这点与Java⼀致），编译之后函数名会改变…...

编程日记 2025/5/4 5:13:44

unity学习9：unity的Asset 导入和导出

目录 1 Assets 资产/资源 1.1 编辑器里Assets 和explorer文件夹里一一对应 1.2 在编辑器里操作，和文件夹内操作，多数相同还是有些不同 2 往Assets里导入零散文件 2.1 往Assets里导入零散文件 2.2 把fbx文件导入到hierarcy /scene 里，…...

编程日记 2025/5/2 8:51:06

Unity学习笔记（七）使用状态机重构角色攻击

前言本文为Udemy课程The Ultimate Guide to Creating an RPG Game in Unity学习笔记攻击状态重构首先我们重构攻击状态的动画之前的动画，我们是使用状态(isAttacking)攻击次数(comboCounter)完成动画的过渡，这样虽然能完成功能，但是如…...

编程日记 2025/5/4 15:47:49

【整理集合大全】MySQL(4) 数据库增删改查SQL语句

查看数据库 show databases; 使用数据库 use 数据库名;创建数据库 CREATE DATABASE 数据库名;删除数据库 DROP DATABASE 数据库名;创建表 create table 表名(列名1 类型(长度) [约束],列名2 类型(长度) [约束],…… );长度区别 int类型带长度：不影响存取值&…...

编程日记 2025/5/3 11:27:25

Flutter 鸿蒙化 flutter和鸿蒙next混和渲染

前言导读这一个节课我们讲一下PlatformView的是使用我们在实战中有可能出现了在鸿蒙next只加载一部分Flutter的情况我们今天就讲一下这种情况具体实现要使用到我们的PlatformView 效果图具体实现：一、Native侧使用 DevEco Studio工具打开 platform_view_example\oho…...

编程日记 2025/5/3 9:34:41

Flask返回浏览器无乱码方法

# -*- coding: utf-8 -*- from flask import Flask, request, jsonify, Response import os import json import re from datetime import datetime import logging import sys import crawling_web_knowledgeapp Flask(__name__)app.json.ensure_ascii False # 解决中文乱码…...

编程日记 2025/4/27 10:48:00