【VueCliのプロジェクト】データをJSON Serverに保存する方法

#### 前回までのあらすじ
`npm install`でVueCLIをインストール。`vue create　プロジェクト名`でプロジェクトを作成。`npm install`で外部ライブラリをインストール。tailwindcssというフレームワークを導入（`postcss.config.js`や`tailwind.config.js`や`app.css`というファイルを作成して設定を行った）。詳しくは前の記事を見てください。

## データをJSON Serverに保存する

#### 実行環境

・開発サーバ：Cloud9の開発サーバ
・データサーバ：JSON Server

#### 今回の作成物
①保存ボタンを押す
②データを送る
③データを誘導する
④データをJSON Serverに保存する

＊今回は保存ボタンはmodal.vueというコンポーネントにあるという設定です。

## 保存ボタンを押す

modal.vueのtemplateの一部抜粋
```vue:
<form
    @submit.prevent="onSubmit"
>
    
    //inputなどの入力欄をここに用意しておく
    //今回は省略

    <button
        type="submit"
        class="btn btn-outline btn-success w-full mt-5"
        :class="{'btn-disabled': isPosting}"
    >
    保存する
    </button>
</form>
```
ここでは次のように情報が処理されます。
（１）buttonを押す
（２）formのonSubmitというイベントが発行される


## フォーム内容をJSON Serverに送る

ここで行いたい流れは以下のような形です。
modal.vueで送信 → 開発サーバ → JSON Server
modal.vueで受信 ← 開発サーバ ← JSON Server

ここで大事なのはstartからgoalまでちゃんとデータがたどり着くことです。
なので考えなければいけない点は、以下の２点です。
- **goalはどこか**
- **goal宛のデータだということをどうやって表現して送るか**
- **goalへデータを導くにはどうすればいいか**

### db.jsonファイルを作成（goal）

このファイルがデータを保存するgoalになります。

今回は本を保存するサイトだと仮定して、本のデータが送られてくることを想定します。
以下のように記入しましょう。

db.jsonファイル
```python
{
  "books": []
}
```
booksの配列の中にデータを待ち受けます。

### books宛にデータを送る

modalコンポーネントのtemplate部分にある送信ボタンを押すと、
onSubmit()というメソッドが呼び出されるように設定しました。

modalコンポーネントのscript部分のonSubmitは以下のようにしています。

modal.vueのscriptの一部抜粋
```python
import { postBook } from '@/services/bookService';

export default {

    // 中略...

    methods: {
        async onSubmit() {
    
        // 書籍データをJSON Serverに送信する
        const response = await postBook(this.title).catch((err) => {
            console.error(err.message);
        });
    
    },
}
```
ここでは次のような処理が行われます。
（１）postBookという関数を別ファイルからimportしている
（２）postBookという関数にtitleを引数として渡してサーバに情報を送っている
（３）postBookの処理が返ってくるまでawaitで待つ
（４）postBookの処理が返ってきたらその結果をresponseという変数に入れる
＊titleは入力欄から得た値を指します。

postBookという関数は以下のbookService.jsファイルを作成して定義します

bookService.jsファイル
```python
import axios from 'axios';

export const postBook = (title) => axios.post('/books', { title });
```
axiosはHTTP通信（データの更新・取得）を簡単に行うことができる、JavaScriptのライブラリです。axiosのpostメソッドで情報を送ろうということなのです。送るデータはtitleでしたね。これを`'/books'`宛に送ってねとお願いしているのです。

なので、直接的にデータを送っているのはaxiosのpostメソッドということになります。ここでどこ宛にデータを送るか決めているんですね。

### 送ったデータをJSON Serverに導く

前章ではaxios.postでデータを送るようにとリクエストできましたね。
このリクエストはどこに対して行っているかというと、Cloud9の開発サーバです。

開発サーバを経由してから、JSON Serverにデータが送られる仕組みなので、
開発サーバに対してのリクエストを活用して、そのリクエストを
JSON Serverに送るという設定をしないといけません。

そのため開発サーバに関するvue.config.jsファイルを変更してみましょう。
＊vue.config.jsファイルは前回のブログで作成しました。

vue.config.jsファイルを変更する

■BEFORE
```python
module.exports = {
  devServer: {
    public: process.env.C9_PID
      ? `${process.env.C9_PID}.vfs.cloud9.ap-northeast-1.amazonaws.com`
      : 'localhost:8080',
  },
};
```
↓

■AFTER
```python
module.exports = {
  devServer: {
    proxy: { '^/books': { target: 'http://localhost:3000' } },
    public: process.env.C9_PID
      ? `${process.env.C9_PID}.vfs.cloud9.ap-northeast-1.amazonaws.com`
      : 'localhost:8080',
  },
};
```
ここで追加されたのは以下の一行です。
`proxy: { '^/books': { target: 'http://localhost:3000' } },`
意味は、**/books**で始まるリクエストがあったら、そのリクエストを**localhost:3000**に渡してねということです。この**localhost:3000**こそがJSON ServerのAPIが待ち受けているURLです。

これで無事db.jsonファイルのbooks配列にデータを送ることができました。

## まとめ

この記事ではJSON Serverへデータを送るという構造を説明しました。

簡単にまとめちゃうと、

開発サーバに対してデータを送るリクエストをして、
開発サーバに送られたリクエストをJSONServerに送るように設定して、
db.jsonで待ち構えてたところにデータが入るという仕組みです。

難しいけど大丈夫よきっと。
だってつまりはデータ送って、「これここに届けてね」という設定をして、「ああここね」って保存してるだけだもん。