发表于: 2023-04-11 20:42:08

0 239


//1、导入 fs 模块 来操作文件
const fs = require('fs')
//2、调用 fs.readFile()方法读取文件
//  参数1:读取文件的存放路径
//  参数2:读取文件时采用的编码格式,一般默认指定 utf8
//  参数3:回调函数,拿到读取失败和成功的结果 err dataStr
fs.readFile('./files/11.txt', 'utf8', function (err, dataStr) {
    if (err) {
        return console.log('读取文件失败!' + err.message);
    } else {
        console.log('读取文件成功!' + dataStr);
    }
})



// __dirname 表示 当前文件所处的目录
const fs = require('fs')
fs.readFile(__dirname + '/files/1.txt', 'utf-8', function(err, dataStr) {
    if(err) {
        return console.log('读取文件失败!' + err.message);
    }
    console.log('读取文件成功!' + dataStr);

})


//使用path.extname)方法,可以获取路径中的扩展名部分
const path = require('path')

const fpath = '/a/b/c/index.html' //文件存放路径

const fext = path.extname(fpath)
console.log(fext); // .html



// 使用path.join()方法,可以把多个路径片段拼接为完整的路径字符串
const path = require('path')
const fs = require('fs')

// 注意 ../ 会抵消前面的路径
// const pathStr = path.join('/a', '/b/c', '../', '/d', '/e')
// const pathStr1 = path.join('/a', '/b/c', '../../', '/d', '/e')
// console.log(pathStr);  //  \a\b\d\e
// console.log(pathStr1); //  \a\d\e

// fs.readFile(__dirname + './files/1.txt') 这里多个.会判断错误

fs.readFile(path.join(__dirname, './files/1.txt'), 'utf8', function (err, dataStr) {
    if(err) {
        return console.log(err.message);
    }
    console.log(dataStr);
})


// 使用path.basename()方法,可以获取路径中的最后一部分,经常通过这个方法获取路径中的文件名
const path = require('path')

//定义文件的存放路径
const fpath = '/a/b/c/index.html' //文件存放路径

// const fullName = path.basename(fpath)
// console.log(fullName); //  index.html

const nameWithout = path.basename(fpath, '.html')
console.log(nameWithout);  // index


// 1、导入fs文件系统模块
const fs = require('fs')

// 2、调用 fs.readFile() 读取文件的内容
fs.readFile('./files/成绩.txt', 'utf-8', function(err, dataSar) {
    // 判断读取是否成功
    if(err) {
        return console.log('读取文件失败!' + err.message);
    }
    // console.log('读取文件成功!' + dataSar);
   

    //4.1、先把成绩的数据,按照空格进行分割
    const arrOld = dataSar.split(' ')
    // console.log(arrOld);
    //4.2、循环分割的数字,对每一项数据,进行字符串替换操作
    const arrNew = []
    arrOld.forEach(item => {
        arrNew.push(item.replace('=', ':'))
    })
    // console.log(arrNew);
    //4.3、把新数组中的 每一项,进行合并,得到一个新的字符串
    const newStr = arrNew.join('\r\n')  //  \r\n代表回车换行的意思
    // console.log(newSta);

    //5、调用 fs.writeFiles(), 把处理完毕的成绩,写入到新文件中
    fs.writeFile('./files/成绩-ok.txt', newStr, function(err) {
        if(err) {
            return console.log('写入文件失败!' + err.message);
        }
        console.log('成绩写入成功!');
    })

})



<



!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,
        baby {
            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>

<script>
    window.onload = function () {
        //    定时器,每隔1秒执行1次
        setInterval(() => {
            var dt = new Date()
            var HH = dt.getHours()
            var mm = dt.getMinutes()
            var ss = dt.getSeconds()
 
            //    为页面上的元素赋值
            document.querySelector('#HH').innerHTML = padZero(HH)
            document.querySelector('#mm').innerHTML = padZero(mm)
            document.querySelector('#ss').innerHTML = padZero(ss)
        }, 1000)
    }
 
    //    补零函数
    function padZero(n) {
        return n > 9 ? n : '0' + n
    }
</script>

</body>
</html>



// 1.1 打入 fs模块
const { log } = require('console')
const fs = require('fs')
// 1.2 导入 path 模块
const path = require('path')

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

//2.1 调用fs.readFile()方法读取文件
fs.readFile(path.join(__dirname, '/node案例练习/01-时钟案例.html'), 'utf-8', (err, dataStr)=> {
    // 2.2 读取 html文件失败
    if(err) return console.log('读取文件失败!' + err.message);
    // 2.3 读取文件成功后,调用对应的三个方法,分别拆解css,js,html 文件
    // console.log('读取成功');
    resolveCss(dataStr)
    resolveJs(dataStr)
    resolveHtml(dataStr)

})

//3.1 定义处理 css 样式的方法
function resolveCss(htmlStr) {
    //3.2 使用正则提取需要的内容
    const r1 = regStyle.exec(htmlStr)
    // console.log(rl);
    //3.3 将提取出来的样式字符串,进行字符串的 replace 替换操作
    const newCss = r1[0].replace('<style>', '').replace('</style>', '')
    // console.log(newCss);
    //3.4 调用 fs.witeFile()方法 将提取的样式,写入到clock的目录中 时钟.css文件里面
    fs.writeFile(path.join(__dirname, '/clock/时钟.css'), newCss, function(err) {
        if(err) return console.log('写入 css 样式失败!' + err.message);
        console.log('写入css样式成功!');
    })
}



//4.1 定义处理 js 样式的方法
function resolveJs(htmlStr) {
    //4.2 使用正则提取需要的内容
    const r2 = regScript.exec(htmlStr)
    // console.log(rl);
    //4.3 将提取出来的样式字符串,进行字符串的 replace 替换操作
    const newJs = r2[0].replace('<script>', '').replace('</script>', '')
    // console.log(newCss);
    //4.4 调用 fs.witeFile()方法 将提取的样式,写入到clock的目录中 时钟.css文件里面
    fs.writeFile(path.join(__dirname, '/clock/时钟.js'), newJs, function(err) {
        if(err) return console.log('写入 js 样式失败!' + err.message);
        console.log('写入js样式成功!');
    })
}


//5.1 定义 html 样式的方法
function resolveHtml(htmlStr) {
    //5.2 将字符串调用 replace方法 把内嵌的 style 和 script 标签,替换为外联的link 和 script标签
    const newHtml = htmlStr.replace(regStyle, '<link rel="stylesheet" href="./时钟.css"/>')
    .replace(regScript, '<script src="./时钟.js"')
    //5.3 写入 时钟.html 这个文件
    fs.writeFile(path.join(__dirname, './clock/时钟.html'), newHtml, function(err) {
        if(err) return console.log('写入html样式失败!' + err.message);
        console.log('写入html文件成功!');
    })
}






返回列表 返回列表
评论

    分享到