Vue3+Spring Frameworkフレームワークの開発方法-Vue.js-php.cn

Vue3+Spring Frameworkフレームワークの開発方法

WBOY

リリース： 2023-05-24 10:41:55

転載

1442 人が閲覧しました

1. 環境設定

Node.js と Java JDK をコンピューターで使用するには、まずそれらをインストールする必要があります。次に、Vue CLI を使用して Vue3 プロジェクトを作成できます:

rubyCopy code$ npm install -g @vue/cli
$ vue create vue-spring-demo

ログイン後にコピー

次に、Spring Initializr を使用して Spring プロジェクトを作成する必要があります:

start.spring.io にアクセスします。 / Spring Initializr.
プロジェクトの依存関係とその他の構成オプションを選択します。
[生成] ボタンをクリックして、生成されたプロジェクトの圧縮パッケージをダウンロードします。
プロジェクトをコンピューター上のフォルダーに抽出します。

これで、Vue3 と Spring の実践的な開発を開始する準備が整いました。

2. Vue3 コンポーネントの作成

Vue3 のコンポーネントは、Web アプリケーションの UI インターフェイスを構築するために使用される再利用可能なコードブロックです。 Vue3 のコンポーネントシステムを使用すると、複数のコンポーネントを作成し、それらを親コンポーネントに適用できます。

Spring Framework のバージョン番号を表示する単純な Vue3 コンポーネントを作成します。 SpringVersion.vue というファイルを作成し、次のコードを追加します。

htmlCopy code<template>
  <div>
    <h3>Spring Framework Version:</h3>
    <p>{{ version }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      version: &#39;&#39;,
    };
  },
  mounted() {
    fetch(&#39;/spring/version&#39;)
      .then(response => response.text())
      .then(data => (this.version = data))
      .catch(error => console.error(error));
  },
};
</script>

ログイン後にコピー

このコンポーネントでは、<template> タグを使用して HTML を定義しています。コンポーネントの内容。 {{ version }} を使用して、Spring Framework から取得したバージョン番号を表示します。 <script> タグでは、コンポーネントの JavaScript コードを定義します。 fetch() メソッドを使用して Spring Framework のバージョン番号を取得し、それをコンポーネントの version データプロパティに保存します。また、mounted() ライフサイクルフックの fetch() メソッドも呼び出しました。

3. Spring コントローラーの作成

Spring Framework では、コントローラーは Web リクエストを処理するために使用される Java クラスです。 Spring Framework のバージョン番号を返す単純なコントローラーを作成します。

SpringController.java という名前のファイルを作成し、次のコードをそれに追加します。

javaCopy codeimport org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class SpringController {
    @GetMapping("/spring/version")
    public String version() {
        return org.springframework.core.SpringVersion.getVersion();
    }
}

ログイン後にコピー

このコントローラーでは、@RestController 注釈マークを使用します。クラス。クラスがコントローラーであることを示します。また、version() メソッドに @GetMapping アノテーションを付けて、/spring/version パスの GET リクエストを処理するメソッドであることを指定します。このメソッドは Spring Framework のバージョン番号を返します。

4. Spring プロジェクトの設定

Spring プロジェクトを実行する前に、いくつかの設定を行う必要があります。 Spring Boot と Spring MVC が Web リクエストとレスポンスを処理できるようにするには、それらを設定する必要があります。

まず、SpringController.java ファイルを Spring プロジェクトの src/main/java/com/example/demo フォルダーに配置する必要があります。次に、DemoApplication.java ファイルに @ComponentScan アノテーションを追加して、コンポーネントの場所を Spring に伝える必要があります。また、クロスオリジンリクエストを許可するには、@CrossOrigin アノテーションを追加する必要があります。

javaCopy codeimport org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.web.bind.annotation.CrossOrigin;
@SpringBootApplication
@ComponentScan("com.example.demo")
@CrossOrigin(origins = "*")
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

ログイン後にコピー

これで、Spring プロジェクトの構成が完了しました。次のコマンドで Spring プロジェクトを開始できます:

shellCopy code$ cd vue-spring-demo
$ ./mvnw spring-boot:run

ログイン後にコピー

5. Vue3 コンポーネントと Spring コントローラーの使用

これで、Vue3 アプリケーションで SpringVersion を使用する準備が整いました。コンポーネントと Spring コントローラー。 SpringVersion コンポーネントを Vue3 アプリケーションの親コンポーネントに追加し、次のコードを使用してコンポーネントに導入する必要があります。

<template>
  <div>
    <spring-version></spring-version>
  </div>
</template>
<script>
import SpringVersion from &#39;./components/SpringVersion.vue&#39;;
export default {
  components: {
    SpringVersion,
  },
};
</script>

ログイン後にコピー

これで、Vue3 アプリケーションで取得できるようになります。 Spring フレームワークの数。次のコマンドを使用して Vue3 アプリケーションを開始できます。

shellCopy code$ cd vue-spring-demo
$ npm run serve

ログイン後にコピー

ブラウザで http://localhost:8080 にアクセスして、Spring Framework のバージョン番号を確認します。

以上がVue3+Spring Frameworkフレームワークの開発方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。