nodejs 时钟案例 - 个人学习记录

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (254)

Mysql (58)

DedeCms (33)

jQuery (67)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

nodejs

打开边栏(ESC) 关闭边栏(ESC)

1,时钟效果图

from clipboard

2,html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟首页</title>
    <style>
        .box {
            width: 400px;
            height: 250px;
            border: 5px solid black;
            margin: 100px auto;
            line-height: 250px;
            text-align: center;
            font-size: 70px;
            font-weight: 700;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box"></div>

    <script>
        setInterval(function () {
            function getTimer() {
                var time = new Date();
                var h = time.getHours();
                h = h < 10 ? '0' + h : h;
                var m = time.getMinutes();
                m = m < 10 ? '0' + m : m;
                var s = time.getSeconds();
                s = s < 10 ? '0' + s : s;
                return h + ':' + m + ':' + s;
            }
            var box = document.querySelector('.box');
            box.innerHTML = getTimer();
        })
    </script>
</body>
</html>

3，Node.js拆分时钟案例要求

from clipboard

4，拆分实现步骤

from clipboard

5. 拆分实现步骤

步骤1 - 导入需要的模块并创建正则表达式

// 1.1 导入 fs 模块
const fs = require('fs');
// 1.2 导入 path 模块
const path = require('path');

// 1.3 定义正则表达式，分别匹配 <style></style> 和 <script></script> 标签
//     其中 \/ 表示对(/)进行转义；\s 表示匹配空白字符；\S 表示匹配非空白字符；* 表示匹配任意次
//     所以 [\s\S]* 表示匹配任意字符
const regStyle = /<style>[\s\S]*<\/style>/;
const regScript = /<script>[\s\S]*<\/script>/;

步骤2 - 使用 fs 模块读取需要被处理的 html 文件

// 2.1 调用 fs.readFile() 方法读取 html 文件
//     E: \Code2022\Nodejs\day01\素材\index.html
//     E: \Code2022\Nodejs\day01\code
fs.readFile(path.join(__dirname, '../素材/index.html'), 'utf8', function (err, dataStr) {
    // 2.2 读取 HTML 文件失败
    if (err) {
        return console.log('读取HTML文件失败！' + err.message);
    }
    // 2.3 读取 HTML 文件成功后，调用相应的方法，拆解出 css、js 和 html 文件
    resolveCSS(dataStr);
    resolveJS(dataStr);
    resolveHTML(dataStr);
})

步骤3 - 自定义 resolveCSS 方法

// 3.1 定义处理 css 样式的方法
function resolveCSS(htmlStr) {
    // 3.2 使用正则提取页面中的 <style></style> 标签
    const r1 = regStyle.exec(htmlStr);
    // 3.3 将提取出来的样式字符串，进行字符串的 replace 替换操作，替换前后的 style 标签
    const newCSS = r1[0].replace('<style>', '').replace('</style>', '');
    // 3.4 调用 fs.writeFile() 方法，将提取的样式，写入到 clock 目录下的 index.css 文件中
    fs.writeFile(path.join(__dirname, './clock/index.css'), newCSS, function (err) {
        if (err) {
            return console.log('写入 CSS 样式失败！' + err.message);
        }
        console.log('写入 CSS 样式成功！');
    })
}

步骤4 - 自定义 resolveJS 方法

// 4.1 定义处理 js 样式的方法
function resolveJS(htmlStr) {
    // 4.2 使用正则提取页面中的 <script></script> 标签
    const r2 = regScript.exec(htmlStr);
    // 4.3 将提取出来的脚本字符串，进行 replace 替换操作，替换前后的 script 标签
    const newJS = r2[0].replace('<script>', '').replace('</script>', '');
    // 4.4 调用 fs.writeFile() 方法，将提取的样式，写入到 clock 目录下的 index.js 文件中
    fs.writeFile(path.join(__dirname, './clock/index.js'), newJS, function (err) {
        if (err) {
            return console.log('写入 JS 样式失败！' + err.message);
        }
        console.log('写入 JS 样式成功！');
    })
}

步骤5 - 自定义 resolveHTML 方法

// 5.1 定义处理 html 结构的方法
function resolveHTML(htmlStr) {
    // 5.2 将字符串调用 replace 方法，将内嵌的 style 和 script 标签，替换成外联的 link 和 script 标签
    const newHTML = htmlStr
        .replace(regStyle, '<link rel="stylesheet" href="./index.css">')
        .replace(regScript, '<script src="./index.js"></script>');

    // 5.3 写入 index.html 文件
    fs.writeFile(path.join(__dirname, './clock/index.html'), newHTML, function (err) {
        if (err) {
            return console.log('写入 HTML 样式失败！' + err.message);
        }
        console.log('写入 HTML 样式成功！');
    })
}

6. 拆分注意点
fs.writeFile() 方法只能用来创建文件，不能用来创建路径（目录）
例如，当删除目录结构中的clock目录时，会出现以下错误：
from clipboard