Vue3+Spring 프레임워크 프레임워크를 개발하는 방법

1. 환경 설정

컴퓨터에서 Node.js와 Java JDK를 사용하려면 먼저 설치해야 합니다. 그런 다음 Vue CLI를 사용하여 Vue3 프로젝트를 생성할 수 있습니다:

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

그런 다음 Spring 초기화를 사용하여 Spring 프로젝트를 생성해야 합니다:

• start.spring.io/에서 Spring 초기화에 액세스합니다.

• 프로젝트 종속성 및 기타 구성 옵션을 선택하세요.

• 생성된 프로젝트 압축 패키지를 다운로드하려면 "생성" 버튼을 클릭하세요.

• 컴퓨터의 폴더에 프로젝트를 추출하세요.

이제 Vue3 및 Spring의 실제 개발을 시작할 준비가 되었습니다.

2. Vue3 구성 요소 만들기

Vue3의 구성 요소는 웹 애플리케이션의 UI 인터페이스를 구축하는 데 사용되는 재사용 가능한 코드 블록입니다. Vue3의 컴포넌트 시스템을 사용하면 여러 컴포넌트를 생성하고 이를 상위 컴포넌트에 적용할 수 있습니다.

Spring Framework 버전 번호를 표시하는 간단한 Vue3 구성 요소를 만들어 보겠습니다. SpringVersion.vue라는 파일을 만들고 다음 코드를 추가합니다. 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()方法。

三、创建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:8080rrreee

이 구성 요소에서는 <template> 태그를 사용하여 HTML 콘텐츠를 정의했습니다. 구성 요소의. Spring Framework에서 얻은 버전 번호를 표시하려면 {{ version }}를 사용합니다. <script> 태그에서는 구성 요소의 JavaScript 코드를 정의합니다. fetch() 메서드를 사용하여 Spring Framework 버전 번호를 가져와서 구성 요소의 version 데이터 속성에 저장합니다. 또한 mounted() 수명 주기 후크에서 fetch() 메서드를 호출했습니다. 🎜🎜3. Spring 컨트롤러 만들기🎜🎜Spring Framework에서 컨트롤러는 웹 요청을 처리하는 데 사용되는 Java 클래스입니다. Spring Framework 버전 번호를 반환하는 간단한 컨트롤러를 작성하겠습니다. 🎜🎜SpringController.java라는 파일을 만들고 여기에 다음 코드를 추가합니다. 🎜rrreee🎜이 컨트롤러에서는 클래스에 @RestController 주석을 표시합니다. 클래스는 컨트롤러입니다. 또한 @GetMapping 주석으로 version() 메서드를 표시하여 /spring/version에 대한 GET 요청을 처리하는 메서드임을 지정합니다. > 경로. 이 메서드는 Spring Framework 버전 번호를 반환합니다. 🎜🎜4. Spring 프로젝트 구성🎜🎜Spring 프로젝트를 실행하기 전에 몇 가지 구성을 수행해야 합니다. Spring Boot와 Spring MVC가 웹 요청과 응답을 처리하려면 이를 구성해야 합니다. 🎜🎜먼저 SpringController.java 파일을 Spring 프로젝트의 src/main/java/com/example/demo 폴더에 넣어야 합니다. 그런 다음 DemoApplication.java 파일에 @ComponentScan 주석을 추가하여 Spring에게 구성 요소를 찾을 수 있는 위치를 알려야 합니다. 또한 교차 도메인 요청을 허용하려면 @CrossOrigin 주석을 추가해야 합니다. 🎜rrreee🎜이제 Spring 프로젝트 구성이 완료되었습니다. 다음 명령을 사용하여 Spring 프로젝트를 시작할 수 있습니다. 🎜rrreee🎜 5. Vue3 구성 요소 및 Spring 컨트롤러 사용 🎜🎜이제 Vue3 애플리케이션에서 SpringVersion 구성 요소와 Spring 컨트롤러를 사용할 준비가 되었습니다. Vue3 애플리케이션의 일부 상위 컴포넌트에 SpringVersion 컴포넌트를 추가하고 다음 코드를 사용하여 이를 컴포넌트에 도입해야 합니다. 🎜rrreee🎜 이제 Vue3 애플리케이션 버전 번호에서 Spring Framework를 검색할 수 있습니다. 다음 명령을 사용하여 Vue3 애플리케이션을 시작할 수 있습니다. 🎜rrreee🎜 브라우저에서 http://localhost:8080를 방문하여 Spring Framework의 버전 번호를 확인하세요. 🎜

위 내용은 Vue3+Spring 프레임워크 프레임워크를 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!