目標
シンプルな機能を実装します。ボタンをクリックすると、フロントエンドとバックエンドの相互作用を事前に理解できるように、現在時刻が表示されます。< /span>
バックエンド: 時間インターフェイスを実装します
フロントエンド: ボタンを実装してバックエンド インターフェイスを呼び出し、インターフェイスから返されたデータを表示します
1. 技術スタック
バックエンド: Java+Springboot+Maven
フロントエンド: Vue+axios+proxy
エディタ: Visual Studio Code
2. バックエンドの実装
-
JDK21、Windows 固有のインストール
-
Spring Initializr ](https://start.spring.io/;) は、Spring Boot プロジェクトを生成するためのオンライン ツールで、Spring Boot アプリケーションの基本構造を迅速に初期化して構成するのに役立ちます。
-
Spring Initializr で jdk を選択した後、クリックしてデモの圧縮パッケージをダウンロードし、解凍して開くと Spring Boot プロジェクトが作成されます。
-
プロジェクト ビルド ツール、Maven をダウンロードし、Windows 用のバイナリ zip アーカイブをダウンロードするだけです
Mavenがダウンロードされているか確認する
mvn -version
コード部分
src/main/java/com/example/demo のデフォルトの Java ファイルを変更して、現在のインターフェイスを取得します。関連する依存関係を pom.xml に必ず追加してください。
package com.example.demo;
import java.text.SimpleDateFormat;
import java.util.Date;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@SpringBootApplication
public class BTimeApplication {
public static void main(String[] args) {
SpringApplication.run(BTimeApplication.class, args);
}
}
@RestController
class TimeController {
@GetMapping("/api/current-time")
public String getCurrentTime() {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
return "Current time: " + sdf.format(new Date());
}
}
走る
根目录下编译项目并构建可执行的jar文件
mvn clean install
target目录下，运行 Spring Boot 应用程序
java -jar your-application.jar
http://localhost:8080/api/current-time を開いて現在時刻を確認します。
3. フロントエンドの実装
-
ノードをダウンロード ノードが存在するかどうかを確認します
node -v -
Vue CLIをインストールする
npm install -g @vue/cli -
Vue の axios または fetch API を使用してネットワーク リクエストを行う
npm install axios -
新しい Vue プロジェクトを作成する
vue create my-vue-app -
デフォルトでは vue3 が選択されています
? Please pick a preset: (Use arrow keys) Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) Manually select features
コード部分
my-vue-app/src/App.vue を次のコードに置き換えます
<template>
<div class="hello">
<button @click="fetchCurentTime">Get current time</button>
<p>{
{
currentTime}}</p>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
currentTime:"",
};
},
methods: {
fetchCurentTime() {
axios
.get("/api/current-time")
.then((response) => {
this.currentTime = response.data;
})
.catch((error)=> {
console.error("Failed to fetch time:",error)
});
},
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
走る
进入项目目录
cd my-vue-app
运行开发服务器
npm run serve
以下に示すように、http://localhost:8081/ を開きます。
4. 質問
-
Vue のデフォルト ポートも 8080 ですが、バックエンド サービスが 8080 を占有しているため、Vue はデフォルト ポートを 1 つ増やします。そのため、開発サーバーの実行後は 8081 が表示されることがわかります。
-
フロントエンド Web ページを開いた後、インターフェイス呼び出しが失敗したことがわかりました。これは、クロスドメインの問題と呼ばれることがよくあります。クロスドメインの問題には 3 つのタイプがあります (ドメイン名、ポート、プロトコル)。ここでは、フロントエンドとバックエンドのサービス ポートの不一致によって引き起こされるクロスドメインの問題。フロントエンドにプロキシを追加することで問題を解決できます。
将所有以 /api 开头的请求代理到这个target地址次のコードを vue.config.js ファイルに追加します。
devServer: { proxy: { '/api': { target: 'http://localhost:8080', // 后端服务的地址 ws: true, changeOrigin: true } } }もう一度実行すると、期待どおりの結果が得られます。
-
別のマシンから Web サイトにアクセスする場合は、まずローカル IP アドレスを知る必要があります。通常、ipv4 は localhost に対応します。
管理者として cmd を開き、「ipconfig」と入力し、そして返された ipv4 が必要なものです
http://ipv4:8081 を使用して、他のマシンでも通常どおり Web サイトにアクセスすることもできます。
5. まとめ
この小さな機能を実装することで、フロントエンドとバックエンドが axios に基づいて通信でき、クロスドメインの問題はプロキシや cors を通じて解決できることがわかりました。