How to develop Vue3+Spring Framework framework

1. Environment setup

To use Node.js and Java JDK on your computer, you need to install them first. We can then create a Vue3 project using Vue CLI:

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

Then, we need to create a Spring project using Spring Initializr:

• Access at start.spring.io/ Spring Initializr.

• Select project dependencies and other configuration options.

• Click the "Generate" button to download the generated project compressed package.

• Extract the project to a folder on your computer.

Now, we are ready to start practical development of Vue3 and Spring.

2. Create Vue3 components

Components in Vue3 are reusable code blocks used to build the UI interface of web applications. Using Vue3's component system, we can create multiple components and apply them to parent components.

We will create a simple Vue3 component to display the Spring Framework version number. Create a file called SpringVersion.vue and add the following code to it:

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>

In this component we have used the d477f9ce7bf77f53fbcf36bec1b69b7a tag to define the HTML content of the component. We use {{ version }} to display the version number obtained from Spring Framework. In the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag, we define the JavaScript code of the component. We use the fetch() method to get the version number of Spring Framework and store it in the version data property of the component. We also called the fetch() method in the mounted() life cycle hook.

3. Create Spring Controller

In Spring Framework, controller is a Java class used to handle Web requests. We will write a simple controller that returns the Spring Framework version number.

Create a file called SpringController.java and add the following code to it:

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

In this controller we use @RestController The annotation marks the class, indicating that the class is a controller. We also mark the version() method with the @GetMapping annotation to specify that it is the method that handles GET requests for the /spring/version path. This method returns the Spring Framework version number.

4. Configure the Spring project

Before we can run the Spring project, we need to perform some configurations. In order for Spring Boot and Spring MVC to handle web requests and responses, we need to configure them.

First, we need to put the SpringController.java file into the src/main/java/com/example/demo folder of the Spring project. Then, we need to add the @ComponentScan annotation in the DemoApplication.java file to tell Spring where to find the component. We also need to add a @CrossOrigin annotation to allow cross-origin requests.

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

Now, we have completed the configuration of the Spring project. We can start the Spring project with the following command:

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

5. Using Vue3 components and Spring controller

Now, we are ready to use SpringVersion in the Vue3 application Components and Spring controllers. We need to add the SpringVersion component to some parent component in the Vue3 application and introduce it in the component using the following code:

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

We can now retrieve it in the Vue3 application The version number of Spring Framework. We can use the following command to start the Vue3 application:

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

Visit http://localhost:8080 in the browser to see the version number of Spring Framework.

The above is the detailed content of How to develop Vue3+Spring Framework framework. For more information, please follow other related articles on the PHP Chinese website!