web-dev-qa-db-ja.com

Vue.js-ローカルオブジェクトへのJSONオブジェクトの書き込み

しばらく前にVue.jsを学び始め、しばらくしてから、Javascriptにはローカルファイルシステムとやり取りするためのオプションが限られていることを念頭に置かずに、より大きなプロジェクトを開始しました。 vue-cliを介してプロジェクトを設定したため、npm startを介してWebサイトを開始する必要があります。

このプロジェクトは、JSONファイル用のビジュアルエディターで構成されています。保存ボタンを実装したいと思ったとき、ローカルマシンへのJSONファイルの書き込み/保存（および将来的には読み取り）を行うことは非常に難しいタスクであると認識しました。

ノードのfsライブラリを使用してみましたが、ノードで起動されるため、動作すると思いました。私もいくつかの外部ライブラリを試しましたwrite-json-file npm lib。

私はアイデアを失い、それを機能させるために必要なことはほとんど何でもするところまで来ています。

javascriptjsonnode.jsvue.jsvuejs2
7
Phero

これを行うには3つの方法があります。

  1. ローカルストレージに書き込む

  2. Blobを作成し、イベントを呼び出してダウンロードします

  3. Electronアプリにラップし、node fsモジュールを使用してファイルを保存します

これらの3つのケースのサンプルをここに表示できます

index.html

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue test</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
    <form>
        <input type="text" v-model="name"/>{{name}}<br/>
        <input type="text" v-model="last"/>{{last}}<br/>
        <input type="text" v-model="index"/>{{index}}<br/>
        <select v-model="grade">
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
        </select>
        {{grade}}
        <button type="button" v-on:click="add()">Add To Table</button>
        <button type="button" v-on:click="saveFile()">saveFile</button>
    </form>
    <table border="1">
        <thead><td>Name</td><td>Last Name</td><td>Index</td><td>Grade</td></thead>
        <tbody>
        <tr v-for="x in arr">
            <td>{{x.first}}</td>
            <td>{{x.lastn}}</td>
            <td>{{x.index}}</td>
            <td>{{x.grade}}</td>
        </tr>
        </tbody>
    </table>
</div>
<script src="test.js"></script>
</body>
</html>

test.js（ローカルストレージへの書き込み）

new Vue ({
  el: '#vue-app',
  data: {
      name: '',
      last: '',
      index: 0,
      grade: 0,
      arr: []
  },

  methods: {
      add: function (e) {
          this.arr.Push({first: this.name, lastn: this.last, index: this.index, grade: this.grade});
          console.log(1);
      },
      saveFile: function() {
        const data = JSON.stringify(this.arr)
        window.localStorage.setItem('arr', data);
        console.log(JSON.parse(window.localStorage.getItem('arr')))
  }
});

Blobを作成し、イベントを呼び出してダウンロードします

saveFile funcの変更のみ

saveFile: function() {
    const data = JSON.stringify(this.arr)
    const blob = new Blob([data], {type: 'text/plain'})
    const e = document.createEvent('MouseEvents'),
    a = document.createElement('a');
    a.download = "test.json";
    a.href = window.URL.createObjectURL(blob);
    a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
    e.initEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    a.dispatchEvent(e);
}

Electronアプリにラップし、node fsモジュールを使用してファイルを保存します

SaveFile funcの変更

saveFile: function() {
    const data = JSON.stringify(this.arr)
    const fs = require('fs');
    try { fs.writeFileSync('myfile.txt', data, 'utf-8'); }
    catch(e) { alert('Failed to save the file !'); }
}

次に Electron を使用してラップします

electron ./index.html

23
yue you