概要
フロント側から、フォームでデータを送り、Node.js側でJSONファイルを作成して、連想配列で保存していこうと思います。
ソースコード
Node.jsのソースコード
まずは、info.jsonファイルを作成して、データを一つ入れておきます。
info.json
[{"name":"fuku","text":"pass"}]
そして、info.jsonファイルに、ブラウザのフォームから送られてきた内容をJSONファイルに保存するAPIを作成していきます。
細かいコードの説明は、ソースコード内に記述していきます。
app.js
const express = require('express');
const cors = require('cors');
const app = express();
const fs = require('fs')
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
// CORSでhttp://localhost:8080からのリクエストを許可
app.use(cors({
origin: 'http://localhost:8080',
credentials: true
}));
// POSTメソッドでフォームの値を受け取る
app.post('/api/v1/quiz', (req, res) => {
try{
fsで、JSONファイルを指定して、JSONファイルにデータにアクションをかけることができる。
readFileメソッドは、指定したJSONファイル(今回はinfo.js)を取得することができる。
fs.readFile('info.json', 'utf8', (err, data) => {
エラーが出た場合returnする。
if (err) {
console.error(err);
return;
}
// ファイルをJSONパースして配列に変換する
let arr = JSON.parse(data);
// 新しいオブジェクトを作成して配列に追加する
arr.push({ name: req.body.name, text: req.body.text });
// 配列をJSON文字列に変換する
let newData = JSON.stringify(arr);
// writeFileメソッドで、JSONファイルに送られてきたデータを追加する。
fs.writeFile('info.json', newData, 'utf8', (err) => {
if (err) {
console.error(err);
return;
}
console.log('JSONデータを追加！');
});
});
}catch(e){
console.log("error")
}
});
3000番ポートでサーバーを起動できるようにする。
app.listen(3000, () => console.log('Server running on port 3000'));
フロント側の実装
最後に、JSONファイルにデータを送るための簡単なフォームを作成する。
今回は、フォームに「kenta」、「foo」と入力して、送信ボタンを押しましょう。
TestView.vue
<template>
//POSTメソッドで、Node.js上で作成したAPIにリクエストを送る
<form action="http://localhost:3000/api/v1/quiz" method="POST" >
<input type="text" name="name">
<input type="text" name="text">
<button type="submit">送信</button>
</form>
</template>
すると....
info.json
[{"name":"fuku","text":"pass"},{"name":"kenta","text":"foo"}]
このように、フォームに入力したデータがJSONファイルに連想配列で格納されました！
データの取得
次は、先ほど保存したデータをフロント側から取得したいと思います。
まずは、Node.jsにJSONファイルからデータを取得するAPIを作成していきます。
app.js
app.get('/api/v1/quiz', (req, res) => {
try{
//データを取りだす
const bufferData = fs.readFileSync('info.json')
// データを文字列に変換
const dataJSON = bufferData.toString()
//JSONのデータをJavascriptのオブジェクトに
const data = JSON.parse(dataJSON)
console.log(data)
res.send(data)
}catch(e){
console.log("JSONデータなし")
}
});
次に、フロント側でデータを取得するリクエストを送るボタンを作成して、リクエストを送るメソッドを追記します。
TestView.vue
<template>
<form action="http://localhost:3000/api/v1/quiz" method="POST" >
<input type="text" name="name">
<input type="text" name="text">
<button type="submit">送信</button>
</form>
<button @click="reception">JSONデータをもらう</button>
</template>
<script>
import axios from 'axios'
export default {
methods: {
reception(){
axios.get("http://localhost:3000/api/v1/quiz")
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error)
})
}
}
}
</script>
Axiosは、フロントからAPI通信を簡単な記述で行えるようにするライブラリです。
ちなみに、今回取得するJSONファイルの内のデータはこちらです。
info.json
[{"name":"fuku","text":"pass"},{"name":"kenta","text":"foo"},{"name":"yama","text":"debu"}]
これでJSONファイル内のデータをAPIを介して、取得する準備ができました。それでは、ボタンを押してみましょう。
すると...
このように、フロント側で取得することができました!