Node.js - fs.path模块

首先我有话说，是谁说的学完ajax就可以去vue了，太天真了我，学会js钻出来个ajax，学完ajax钻出来个node.js这一步步的，当然node不会学到太深入把表面的认识一下就可以了，这之后可能更新速度要慢一点了，因为这几天会把时间花在论文上，马上要进入答辩了，虽然我现在那是有非常的浓厚的兴趣想见识一下node的姿态啊。进入正题吧

今天首先介绍一下什么是node.js？

node.js是一个基于Chrome V8引擎的js运行环境，注意是一个运行环境，浏览器是js前端的运行环境，而我们node就是js后端的运行环境，并且在node.js中无法调用DOM、BOM以及ajax的一些api。

怎么来学习node.js呢？

就跟我们js学习一样，先基础语法再webapi。node是先js基础语法，然后再node.js内置api（fs、path、http等）再去第三方的api（express、mysql等）

怎么用node来执行js？

通过终端来实现，win+r打开cmd然后cd进入js文件所在的目录在执行node js文件名.js

更简便方法，直接进入这个目录然后按住shift+右键鼠标找到打开shellpower直接可运行node。当然我实在vscode上可以直接运行终端还多方便的

进入我们今天第一个学习目标，fs文件系统模块，这是一个操作文件的模块。想要使用它必须先得导入，当然在这些node内置的api都是安装node的时候就有的你只需要导入即可

在这个模块里面有两个方法第一个是读取指定文件内容

fs.readFile（path【，options】，callback）

path：文件的路径 

options： 以什么样的编码来读取文件

callback：读取后的回调函数

const fs = require('fs')
fs.readFile('./file/read.txt', 'utf-8', function(err, dataStr) {
    console.log(err);
    console.log(dataStr);
})


 

 

const fs = require('fs')
fs.readFile('./file/errread.txt', 'utf8', (err, dataStr) => {
    if (!err) {
        return console.log('读取成功' + dataStr);
    } 
    return console.log('读取失败' + err.message);
})

其中在这里面err=null表示读取成功且此时dataStr就为里面的内容，否则就读取失败

既然有读取那就有写入，写入文件内容

fs.writeFile(path,data[,options],callback)

path：写入文件的地址 注意 ：这个地址可以拿来创建文件但不能创建目录

data：写入的数据

const fs = require('fs')
fs.writeFile('./file/write.txt', 'hello fswrite', err => console.log(err))


const fs = require('fs')
fs.writeFile('./fileerr/write1.txt', '写入成功',err => {
    if(!err) {
     return   console.log('写入成功' + err);
    }
    return console.log('写入失败' + err.message);
})

在这里面其实是有问题的，因为node是采取的动态拼接地址，也就是如果你的地址是以./或者…/开头的相对地址的话，那么到时候执行它是以你执行node的地址拼接上你写入的这个地址，你想想是不是会有bug产生，而且这个时候你就算补全执行也是没得用的。

面对这种情况有两张解决方法，一种是对你要操作的地址采用绝对路径的方式

一种是通过__dirname这个属性可以获得当前文件所在的目录然后再通过我下面讲的内容组合起来就可以完美解决

只不过在这之前先看到一个案例，将一个txt文件横向排列以等号形式建立的一个成绩文本转换成纵向排列以键值对建立的文本怎么来操作

小红=99 小白=100 小黄=70 小黑=66 小绿=88

// 将成绩案例转到file里面的ok.txt 同时将里面的横向排列转为纵向排列
// 1.读取文件

const fs = require('fs')
fs.readFile('./成绩.txt', 'utf-8', (err, dataStr) => {
    if(!err) {
        // console.log(dataStr);
        // 2.处理数据将其转换为数组换成引号再添加换行转义字符
        const arrOld = dataStr.split(' ')
        const arrNew = []
        arrOld.forEach(item => {
            arrNew.push(item.replace('=', ':'))
        })
        // console.log(arrNew);
        const str = arrNew.join('\n')
        console.log(str);
        // 3.写入文件
        return fs.writeFile('./file/ok.txt', str, err => {
            if (err) {
                return console.log('加入文件失败');
            } 
            return console.log('加入文件成功');
        })
    }
    return console.log('查找文件失败');
})

第二个模块path模块

这个模块是拿来处理路径的模块，同样的也要先导入

第一个方法路径拼接

path.join（path）

可以将多个目录拼接起来

const path = require('path')
const pathStr = path.join('/a', '/b/c', '../', '/d', 'e')
console.log(pathStr);
const fs = require('fs')
fs.readFile(path.join(__dirname, 'file/ok.txt'), 'utf-8', (err, dataStr) => {
    if (err) {
        return console.log('读取失败');
    }
    return console.log('读取成功\n' + dataStr);
})
path里面还有一个方法是获取路径中的文件名

path.basename（path[,ext]）

ext: 扩展名 如果写了扩展名那么找到这个文件名后输出格式将没有扩展名

const path = require('path')
let fileName = path.basename(path.join(__dirname, '/file/ok.txt'))
console.log(fileName);
let fileName1 = path.basename(path.join(__dirname, '/file/ok.txt'), '.txt')
console.log(fileName1);


 

 与这个功能大概类似的还有一个可以获取文件的扩展名

path.extname(path)

接下来看到一个案例，给定一个index.html，里面可以实现数字时钟的效果，其css html js代码都在里面，要做的是把css、js抽离出来通过外联的方式引入进来

// 1.导入所需要的包

const fs = require('fs')
const path = require('path')
// 1.1创建两个正则把style和script标签找出来
const regStyle = /<style>[\d\D]*<\/style>/
const regScript = /<script>[\s\S]*<\/script>/
// 2.fs读取这个文件
fs.readFile(path.join(__dirname, './index.html'), 'utf-8', (err, dataStr) => {
    if(err) {
        return console.log('读取文件失败');
    }
    // 2.1读取成功用正则把匹配到的字符串放到对应的文件里面
    let styleStr = regStyle.exec(dataStr)
    // console.log(styleStr[0]);
    styleStr[0] = styleStr[0].replace('<style>','').replace('</style>','')
    fs.writeFile(path.join(__dirname,'/clock/index.css'),styleStr[0], err => {
        if (err) {
            return console.log('写入文件失败' + err.message);
        }
        return console.log('写入文件成功'); 
                                                                                                                                                                         
    })                                                                                                                                                                                                                                                                                                                                                                                         
    // 2.2script标签放入文件
    let scriptStr = regScript.exec(dataStr)
    // console.log(scriptStr[0]);
    scriptStr[0] = scriptStr[0].replace('<script>', '').replace('</script>', '')
    fs.writeFile(path.join(__dirname , '/clock/index.js'), scriptStr[0], err => {
        if (err) {
            return console.log('写入失败' + err.message);
        }
        return console.log('写入成功');
    })
    // 2.3修改html代码部分
    let newHtml = dataStr.replace(regStyle, '<link rel="stylesheet" href="./clock/index.css">').replace(regScript, '<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./clock/index.js"></script>')
    fs.writeFile(path.join(__dirname, './index.html'), newHtml, err => {
        if (err) {
            return console.log('写入html失败');
        }
        return console.log('写入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>index首页</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>

  <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>

<!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>index首页</title>
  <link rel="stylesheet" href="./clock/index.css">
</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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./clock/index.js"></script>
</body>

</html>