コラム

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

今回はSpringBootのアプリケーションを作成し、Vue.jsプロジェクトのアプリケーションからAjaxを使用してデータをJSON形式で送信するというサンプルを作成したいと思います。

開発環境

Windows10 Enterprise
npm 8.1.2
node 16.13.2
Java1

SpringBootプロジェクト

プロジェクト作成

以前の記事の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

src/main/java/com/example/vuejsaxios/の下にacディレクトリを作成します。
acディレクトリにGoodsController.javaを作成します。このクラスがAjax通信を受信するRestControllerになります。

・Goods.java

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;
    }
}

商品情報を管理するクラスです。GoodsController.javaで利用されます。

・GoodsController.java

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;
	}
}


商品情報をPostで受け取り、受け取った商品情報をそのまま返信するRESTメソッドを持ったRESTコントローラです。

ビルド・起動

準備が出来たらSpringBootを起動して、正常に動作するかブラウザでアクセスしてみたいと思います。

axios-springディレクトリに移動し次のコマンド実行

./mvnw clean spring-boot:run

・確認

確認はAdvanced REST clientを使用して確認します。該当ページからアプリを立ち上げます。

Methodを「POST」、RequestURLを「http://localhost:8080/goods/recieve」、Headersに「context-type」を追加し
値を「application/json」にします。

Bodyタブに移動し送信する文字列をJSON形式で作成します。

SENDボタンを押下後、下にスクロースし上記の画像の様な結果になっていれば正常に起動しています。

Vue.jsプロジェクト

プロジェクト作成

以前の記事のVue.jsでSpringBootからAjaxでデータ取得と同様ですのでそちらを見て下さい。

実装

・ディレクトリ構成

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

・App.vue

<template>
  <SendGoods/> 
</template>

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

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

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

SendGoods.vueコンポーネントをインポートして表示する。

・SendGoods.vue

<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>

① 送信する商品情報テキストボックスです。goodsとバインドしています。
② 送信結果の商品情報を表示します。ここで正常にデータが渡せているか確認します。
③ 商品情報の入力値を保管する変数です。
④ postした後の結果データを保管する変数です。
⑤ 送信処理を行います。定義したgoods変数をそのまま渡します。配列の場合もそのまま渡せば大丈夫です。
結果データをrevGoods変数に代入します。

SpringBoot内にVue.jsプロジェクト配置

以前の記事のVue.jsでSpringBootからAjaxでデータ取得と同様ですのでそちらを見て下さい。

起動したらブラウザでhttp://localhost:8080/にアクセスします。
実行イメージは以下の様になります。

以上でVue.jsでSpringBootへAjaxでデータ送信するサンプルの説明を終わります。
今回使用したソースは此方から取得できます。

この記事をシェアする
  • Facebookアイコン
  • Twitterアイコン
  • LINEアイコン

お問い合わせ ITに関するお悩み不安が少しでもありましたら、
ぜひお気軽にお問い合わせください

お客様のお悩みや不安、課題などを丁寧に、そして誠実にお伺いいたします。

お問い合わせ
お電話でのお問い合わせ 03-5820-1777(平日10:00〜18:00)
よくあるご質問