天天看點
傳回

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)      
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>
html node.js 寫入檔案
上一篇: 實驗7:VTP實驗
下一篇: hdu 4419 矩形面積并

繼續閱讀