Let’s talk about how to upload Vue in Spring Boot

With the rapid development of front-end technology, more and more developers use Vue as the preferred framework for front-end development. In the process of using Vue for front-end development, it is often necessary to deploy and run the front-end code through the back-end framework. As a very popular back-end framework, Spring Boot is also used by more and more developers. So, how to upload Vue in Spring Boot?

1. Build REST API through Spring Boot

In Spring Boot, we can implement Vue upload by building REST API. The specific implementation steps are as follows:

1. Create a Spring Boot project and add related dependencies, such as Spring Boot, Spring Web, Spring Data, etc.
2. Create a RestController in the Spring Boot project, and then add a POST method to the Controller to receive files uploaded by the Vue front end. The code is similar to the following:

@RestController
public class VueFileController {
    
    @PostMapping(value = "/uploadVue")
    @ResponseBody
    public String uploadVue(@RequestParam("file") MultipartFile file) {
        // 上传Vue文件的逻辑代码
    }
    
}

Here we use Spring Boot's annotations @RestController and @PostMapping, which respectively indicate that this is a REST API Controller, and this Controller handles POST requests. In addition, we use the @RequestParam annotation to specify the parameter name of the file uploaded by the front end in the HTTP request, and then receive the file uploaded by the Vue front end through the MultipartFile object. In the logic code for uploading files, we can save files, process files and other operations based on business logic.

3. In the front-end Vue project, use tools such as Axios to construct an HTTP POST request, and pass the file uploaded by the Vue front-end to the back-end as a parameter. The code is similar to the following (assuming we have installed Axios):

axios.post('/uploadVue', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(response => {
  console.log(response);
});

where formData is a FormData object. We can get the file through Vue's input component and then save the file to formData. Finally, we can send a POST request through Axios, passing formData as a parameter to the backend.

2. Build a file server through Spring Boot

In addition to uploading Vue through the REST API, we can also build a file server through Spring Boot to upload Vue. The specific implementation steps are as follows:

1. In the Spring Boot project, create a Controller to process files uploaded by the Vue front end.
2. Add a GET method in the Controller to return the file upload page. The code is similar to the following:

@Controller
public class UploadController {
    
    @GetMapping(value = "/uploadVue")
    public String uploadVue() {
        return "uploadVue.html";
    }
    
}

Here we use Spring Boot's annotations @Controller and @GetMapping, which respectively indicate that this is a normal Controller, and this Controller handles GET requests. In the uploadVue method, we return an uploadVue.html page to display the Vue front-end file upload form.

3. In the Spring Boot project, create a file processor to process files uploaded by the Vue front end. The code is similar to the following:

@Component
public class VueFileHandler {

    @Value("${vue.upload.directory}")
    private String directory;
    
    public void handleFile(MultipartFile file) throws IOException {
        String path = directory + "/" + file.getOriginalFilename();
        FileOutputStream outputStream = new FileOutputStream(path);
        outputStream.write(file.getBytes());
        outputStream.close();
    }
    
}

Here we use Spring Boot's annotation @Component, indicating that this is a Bean that can be injected into other components. We encapsulate the file upload logic into the handleFile method, and specify the location where the Vue file is stored on the server through the @Value annotation.

4. In the front-end Vue project, create a Vue component to display the form for uploading files and upload the files in the form to the back-end server. The code is similar to the following:

<template>
  <div>
    <form @submit.prevent="submitForm">
      <input type="file" v-on:change="getFile($event)">
      <button type="submit">上传文件</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null
    }
  },
  methods: {
    getFile(event) {
      this.file = event.target.files[0];
    },
    submitForm() {
      let formData = new FormData();
      formData.append('file', this.file);
      axios.post('/uploadVue', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log(response);
      });
    }
  }
}
</script>

In this code, we obtain the file through Vue's input component and save the file to the data attribute. We then send a POST request via Axios, passing the file as a parameter to the backend.

Summary:

Uploading Vue in Spring Boot can be achieved by building a REST API or building a file server. The implementation of REST API is relatively simple, but requires front-end developers to manually construct HTTP requests. The implementation of the file server requires front-end developers to use Vue's input component to obtain files and upload the files to the back-end server. The above two methods are very commonly used, and you can choose according to actual needs.

The above is the detailed content of Let’s talk about how to upload Vue in Spring Boot. For more information, please follow other related articles on the PHP Chinese website!