关于javascript:Nodejs-fspath模块

首先我有话说，是谁说的学完 ajax 就能够去 vue 了，太天真了我，学会 js 钻出来个 ajax，学完 ajax 钻出来个 node.js 这一步步的，当然 node 不会学到太深刻把外表的认识一下就能够了，这之后可能更新速度要慢一点了，因为这几天会把工夫花在论文上，马上要进入问难了，尽管我当初那是有十分的浓重的趣味想见识一下 node 的姿势啊。进入正题吧

1.

明天首先介绍一下什么是 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 上能够间接运行终端还多不便的

2.

进入咱们明天第一个学习指标，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('查找文件失败');
})

2.

第二个模块 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)

3.

接下来看到一个案例，给定一个 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 src="./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 src="./clock/index.js"></script>
</body>

</html>