[初心者向け]VueとExpressを使ってパラメーターの受け渡しをしてみよう

はじめまして、PMをやっているtatsukenと申します。はじめまして
研修の一環でvue.js、expressを書くことがあったので、そのことを中心にまとめていきたいと思います.
# はじめに
Vue.jsでaxiosを使ってパラメーターをpostしexpressで作った、apiで受取るというところまでやりたいと思います。
##必要な環境
* vue-cli
    * 環境構築は[こちらの記事](https://qiita.com/anieca/items/746de52509f7dd422019)を御覧ください
* express/express-generator
    * 環境構築は[こちらの記事](https://qiita.com/etet-etet/items/1c65b934dbe7fc33490b)を御覧ください

##Vue.jsの実装
* まず[こちらの記事](https://qiita.com/anieca/items/746de52509f7dd422019)を参考にしてサーバーを立ち上げてください。
* [http://localhost:8080](http://localhost:8080/#/)にアクセスして、このような画面が表示されれば成功です。
<img width="1133" alt="スクリーンショット 2019-06-25 20.11.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239954/6a5d06ee-07a7-5f48-2030-d604ba4c3378.png">
* 次に[axios](https://www.npmjs.com/package/axios)をインストール
    * `npm install axios -s`

###画面を作る
* 次に`src/components/HelloWorld.vue`をいかのように書き換えてください

```HelloWorld.vue
<template>
  <div class="hello">
    <form action>
      <input type="text" placeholder="text" v-model="text">
      <input type="submit" value="decide" @click="submitClick">
    </form>
  </div>
</template>
```
画面はこのようになっています
<img width="1113" alt="スクリーンショット 2019-06-25 20.36.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239954/cba61f1a-1414-bc41-d3d5-37171fe55edf.png">
### HelloWorld.vueの`</template>`以下に`<script>`を追加
```HelloWorld.vue
<script>
import Axios from "axios";
export default {
  name: "HelloWorld",
  data() {
    return {
      text: null
    };
  },
  methods: {
    submitClick() {
      alert(this.text)
    }
  }
};
</script>
```
このようにinputに文字を入力してその文字がalertに表示されれば成功です
<img width="665" alt="スクリーンショット 2019-06-25 20.42.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239954/8cd9857b-411d-7b70-f87e-7531dedc2c48.png">
###`<script></script>`を書き換え
次に`<script></script>`を以下のように書き換えてください

```HelloWorld.vue
<script>
import Axios from "axios";
export default {
  name: "HelloWorld",
  data() {
    return {
      text: null
    };
  },
  methods: {
    submitClick() {
      const body = {
        text: this.text
      };
      Axios.get(`http://localhost:3000/hoge/${this.text}`)
        .then(res => {
          console.log(res.data.name)
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
```
##Expressの実装
- まず[こちらの記事](https://qiita.com/etet-etet/items/1c65b934dbe7fc33490b)を参考にサーバーを立ち上げてください
- [http://localhost:3000/](http://localhost:3000/)にアクセスして以下のようになれば成功です
<img width="671" alt="スクリーンショット 2019-06-25 20.54.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239954/9c7551bd-16ef-c13f-7f09-ab1bd12c8dec.png">

### 簡単なapiを作ってみる
* `アプリ名/app.js`に以下のことを追記しましょう

```app.js
app.get('/hoge', (req, res) => {
  res.json({
    name: "hoge"
  })
});
```
* そして[http://localhost:3000/hoge](http://localhost:3000/hoge)にアクセスして以下のように表示されれば成功です。

![スクリーンショット 2019-06-25 21.03.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239954/962417f6-2838-7f6e-c83c-69e9967ab14a.png)
###apiを書き換える

```app.js
app.get('/hoge/:name', (req, res) => {
  let data = req.params
  console.log(data.name);
  res.json({
    name: data.name
  })
});
```
これでコードを書く部分はすべて終了です。
###動かしてみる
* [http://localhost:8080](http://localhost:8080/#/)にアクセスし任意の文字を入力し送信してください。

* Expressを動かしているconsole上にfrontから送信した文字が表示されていれば成功です
<img width="378" alt="スクリーンショット 2019-06-25 21.25.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239954/7a219bcc-e1c5-08d6-e876-07f8c2957402.png">
<img width="325" alt="スクリーンショット 2019-06-25 21.25.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239954/210ea4d6-a05f-a091-5bfb-1319f3daedc0.png">

#最後に
初心者向けにVue.jsからExpressのapiへのパラメーターの受け渡しを行いました。
これから始める方の手助けになれば幸いです。
なにか間違いがあればご連絡ください。