[Vue] Complete code of Vue docking SpringBoot interface

To call the SpringBoot interface in Vue, you need to first create a Vue project and add the axios library to initiate requests. Then write the front-end page in Vue and call the SpringBoot interface.

The following is a sample code. The front-end page needs to call the back-end interface to display SpringBoot back-end data through Vue.

Install the axios library in Vue:

npm install axios --save

Write front-end page code in Vue:

<template>
  <div>
    <h2>员工列表</h2>
    <table>
      <thead>
        <tr>
          <th>员工ID</th>
          <th>员工姓名</th>
          <th>员工部门</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="employee in employees" :key="employee.id">
          <td>{
    
    { employee.id }}</td>
          <td>{
    
    { employee.name }}</td>
          <td>{
    
    { employee.department }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "EmployeeList",
  data() {
    return {
      employees: [],
    };
  },
  created() {
    this.getEmployees();
  },
  methods: {
    getEmployees() {
      axios.get("http://localhost:8080/api/employees").then((response) => {
        this.employees = response.data;
      });
    },
  },
};
</script>

Write interface code in SpringBoot:

@RestController
@RequestMapping("/api")
public class EmployeeController {
  @Autowired
  private EmployeeRepository employeeRepository;

  @GetMapping("/employees")
  public List<Employee> getAllEmployees() {
    return employeeRepository.findAll();
  }
}

Add dependent libraries in SpringBoot:

xml

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

This is the complete code for a simple Vue docking SpringBoot interface.