[Vue.js]Vue.jsでSpringBootへAjaxでデータ送信

axios-spring/
           ├─ src/
　　　　　　     ├─ main/
                      ├─ java/com/example/vuejsaxios/
                                                   ├─ ac/GoodsController.java ←作成する
                                                   ├─ ac/Goods.java ←作成する
                                                   ├─ VuejsaxiosApplication.java
                      ├─ resource/
                                ├─ static/
                                ├─ templates
                                ├─ application.properties
                ├─ test/
           ├─ target/
           ├─ HELP.md
           ├─ mvnw
           ├─ mvnw.cmd
           ├─ pom.xml

package com.example.vuejsaxios.ac;

/**
 * 商品情報クラス
 */
public class Goods{
    private String code;
    private String name;
	private String category;
	
	public Goods(){
	}
	
	public Goods( String code, String name, String category){
		this.code = code;
		this.name = name;
		this.category = category;
	}

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
	
	public String getCategory() {
        return category;
    }

    public void setCategory(String category) {
        this.category = category;
    }
}

package com.example.vuejsaxios.ac;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestBody;

@RestController
@RequestMapping("/goods")
@CrossOrigin
public class GoodsController {

	/**
	* 商品情報受信
	* @return 結果
	*/
	@RequestMapping(value = "/recieve", method = RequestMethod.POST) 
	public Goods recieve( @RequestBody Goods goods ){
		return goods;
	}
}

./mvnw clean spring-boot:run

axios-sample/
           ├─ node_modules/
           ├─ public/
           ├─ src/
                ├─ App.vue
                ├─ main.js
　　　　　　     ├─ assets/
                ├─ components/
                            ├─ SendGoods.vue ←作成
           ├─ babel.config.js
           ├─ package.json
           ├─ package-lock.json
           ├─ README.md

<template>
  <SendGoods/> 
</template>

<script>
import SendGoods from './components/SendGoods.vue'

export default {
  name: 'App',
  components: {
    SendGoods
  }
}
</script>

<style>
...省略
</style>

<template>
	<div class="view-div">
		<h2>商品情報送信</h2>
		<center>
		<table> ①
			<tr>
				<td>商品コード</td>
				<td><input type="text" v-model="goods.code"></td>
			</tr>
			<tr>
				<td>商品名</td>
				<td><input type="text" v-model="goods.name"></td>
			</tr>
			<tr>
				<td>商品カテゴリ</td>
				<td><input type="text" v-model="goods.category"></td>
			</tr>
		</table>
		</center><br/>
		<button v-on:click="send">送信</button><br/><br/>
	</div>
	
	<div class="view-div">
		<h2>結果表示</h2>
		<center>
		<table>　②
			<tr>
				<td>商品コード</td>
				<td>{{ revGoods.code }}</td>
			</tr>
			<tr>
				<td>商品名</td>
				<td>{{ revGoods.name }}</td>
			</tr>
			<tr>
				<td>商品カテゴリ</td>
				<td>{{ revGoods.category }}</td>
			</tr>
		</table>
		</center>
	</div>
</template>

<script>
import * as axios from 'axios'　

export default {
	components: {
	},
	name: 'SendGoods',
	data: () => ({
		goods : {code:'',name:'',category:''},　③
		revGoods: {code:'',name:'',category:''}　④
	}),
	methods: {
		send: function(){　⑤
			axios.post('/goods/recieve', this.goods).
				then(response => {
					this.revGoods = response.data
				})
		}
	}
}
</script>