Vue.js - 로컬 파일에 JSON 개체를 씁니다.
얼마 전에 Vue.js를 배우기 시작했고 얼마 지나지 않아 Javascript는 로컬 파일 시스템과 상호작용하는 옵션이 제한되어 있다는 것을 염두에 두지 않고 더 큰 프로젝트를 시작했습니다.vue-cli를 통해 프로젝트를 셋업했기 때문에 웹 사이트를 시작해야 합니다.npm start.
상기 프로젝트는 JSON 파일용 비주얼 에디터로 구성되어 있습니다.저장 버튼을 구현하고 싶었을 때 로컬 머신에 JSON 파일을 쓰기/저장(그리고 향후 읽기)하는 것은 매우 어려운 작업이라는 것을 깨달았습니다.
노드의 것을 이미 사용해 보았습니다.fs동작할 거라고 생각하고 있습니다.노드와 함께 기동하기 때문입니다.또, 외부 라이브러리도 몇개인가 시험해 보았습니다.write-json-filenpm lib.
나는 아이디어가 부족해서 그것을 작동시키기 위해 필요한 거의 모든 것을 할 수 있는 지경에 이르렀다.
세 가지 방법이 있습니다.
로컬 스토리지에 쓰기
Blob을 생성하고 이벤트를 호출하여 다운로드
전자 앱으로 포장하여 노드 사용
fs파일을 저장하는 모듈
이 3가지 케이스에 대한 샘플을 여기서 보여 드릴 수 있습니다.
index.displaces를 표시합니다.
<!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/vue@2.5.13/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을 생성하고 이벤트를 호출하여 다운로드
save File 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 앱으로 랩하여 노드 사용fs파일을 저장하는 모듈
save File 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
이것이 Vue 프로젝트에서 JSON 파일을 편집하는 방법입니다.이 경우 파일을 실행하면 새 data.json 파일이 생성되고 각 JSON 개체에 가격이 추가됩니다.
const fs = require("fs");
let cars = [
{
Name: "chevrolet chevelle malibu",
Miles_per_Gallon: 18,
Cylinders: 8,
Displacement: 307,
Horsepower: 130,
Weight_in_lbs: 3504,
Acceleration: 12,
Year: "1970-01-01",
Origin: "USA"
},
{
Name: "buick skylark 320",
Miles_per_Gallon: 15,
Cylinders: 8,
Displacement: 350,
Horsepower: 165,
Weight_in_lbs: 3693,
Acceleration: 11.5,
Year: "1970-01-01",
Origin: "USA"
}
];
cars.forEach(car => {
car.price = 12000;
});
let data = JSON.stringify(cars);
fs.writeFileSync("data.json", data);
언급URL : https://stackoverflow.com/questions/48611671/vue-js-write-json-object-to-local-file
'programing' 카테고리의 다른 글
| Vuex에서 서로 변환하지 않고 동일한 개체를 두 변수로 복사하려면 어떻게 해야 합니까? (0) | 2022.07.08 |
|---|---|
| Android Get Current 타임스탬프? (0) | 2022.07.08 |
| 문자열을 반환하는 Spring MVC @Response Body 메서드에서 HTTP 400 오류로 응답하는 방법 (0) | 2022.07.08 |
| 계산된 속성 내의 $el에 액세스합니다. (0) | 2022.07.08 |
| 스프링 JPA 특정 컬럼 선택 (0) | 2022.07.08 |