Vue3+Spring Framework框架怎麼開發

一、環境搭建

在電腦上使用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。

• 選擇專案依賴項和其他設定選項。

• 點選「Generate」按鈕，下載產生的項目壓縮套件。

• 將項目解壓縮到電腦上的資料夾。

現在，我們已經準備好了開始Vue3和Spring開發實戰了。

二、建立Vue3元件

Vue3中的元件是建構Web應用程式UI介面所使用的可重複使用程式碼區塊。使用Vue3的元件系統，我們可以建立多個元件，並將它們應用於父元件。

我們將建立一個簡單的Vue3元件來顯示Spring Framework的版本號碼。建立一個名為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>

在該元件中，我們使用了d477f9ce7bf77f53fbcf36bec1b69b7a標籤來定義元件的HTML內容。我們使用{{ version }}來顯示從Spring Framework取得到的版本號碼。在3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤中，我們定義了元件的JavaScript程式碼。我們使用fetch()方法來取得Spring Framework的版本號，並將其儲存在元件的version資料屬性中。我們也在mounted()生命週期鉤子中呼叫了fetch()方法。

三、建立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 註解標記類，表示該類是一個控制器。我們也使用@GetMapping註解標記version()方法，以指定它是處理/spring/version路徑的GET請求的方法。此方法傳回Spring Framework的版本號。

四、設定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

五、使用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 Framework的版本號碼。我們可以使用下列指令啟動Vue3應用程式：

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

在瀏覽器中存取http://localhost:8080，即可看到Spring Framework的版本號碼。

以上是Vue3+Spring Framework框架怎麼開發的詳細內容。更多資訊請關注PHP中文網其他相關文章！