node.js腳本與js的數據通訊

背景

    最近在寫瀑布流視圖，要用到不少圖片，想拿到本地圖片的數據信息，因而乎就寫了Node腳本。就有了數據傳輸的問題。

解決

• err: 一、當時最早想到的是import與export，可是目前nodejs還不支持，據說快要支持了。 因此這個行不通。
• 最後實現方法爲經過node的fs這個對象來把數據拋到imgData.json文件中。

1. 爬蟲把數據寫入文件（json,js,xml,txt,log......）
2. js去導入這些文件（import,require,http）

代碼

一、拿到本地文件內的圖片信息

獲取圖片信息參考於 nodejs獲取本地文件夾下的圖片信息

//獲取項目工程裏的圖片
var fs = require('fs');//引用文件系統模塊
var image = require("imageinfo"); //引用imageinfo模塊

function readFileList(path, filesList) {
  var files = fs.readdirSync(path);
  files.forEach(function (itm, index) {
    var stat = fs.statSync(path + itm);
    if (stat.isDirectory()) {
      //遞歸讀取文件
      readFileList(path + itm + "/", filesList)
    } else {
      var obj = {};//定義一個對象存放文件的路徑和名字
      obj.path = path;//路徑
      obj.filename = itm//名字
      filesList.push(obj);
    }
  })
}
var getFiles = {
  //獲取文件夾下的全部文件
  getFileList: function (path) {
    var filesList = [];
    readFileList(path, filesList);
    return filesList;
  },
  //獲取文件夾下的全部圖片
  getImageFiles: function (path) {
    var imageList = [];
    this.getFileList(path).forEach((item) => {
      var ms = image(fs.readFileSync(item.path + item.filename))//獲取img對象
      let obj = ms
      obj.name = item.filename//獲取文件名
      ms.mimeType && (imageList.push(obj))
    });
    return imageList;
  }
};
//獲取文件夾下的全部圖片信息
var imglist=getFiles.getImageFiles("../../static/img/life/");
複製代碼

---

二、利用fs.appendFile把imglist拋到imgData.json中

注意 必定要先把imglist轉爲字符串拋過去，否則那邊拿到的只是[Object]這種。

//一、清空文件數據
fs.writeFile('../js/imgData.json', '', function(){console.log('清空成功')})
//二、把獲得的圖片對象拋到imgData.json文件中
fs.appendFile('../js/imgData.json', JSON.stringify(imglist), (err) => {
  if (err) throw err;
  console.log('數據已追加到文件');
});

複製代碼

三、取imgData.json

import imgData from '../js/imgData.json'
 console.log(82,imgData)
複製代碼