springboot+vue是如何实现下拉框动态加载的

在 Spring Boot 后端中，可以使用 Spring MVC 接收前端发送的 AJAX 请求，并通过 Controller 层调用 Service 层获取需要加载的数据。前端可以使用 Vue.js 框架进行开发，通过 Vue.js 的生命周期钩子函数和 AJAX 请求来实现下拉框的动态加载。

下面是一个简单的示例，假设需要在前端加载一个部门的下拉框，为了简化代码，这里不涉及数据库操作，使用一个固定的部门列表：

1. 后端：定义一个部门实体类 `Department`，并创建一个获取所有部门列表的接口：

@RestController
@RequestMapping("/api")
public class DepartmentController {
    @GetMapping("/departments")
    public List<Department> getDepartments() {
        List<Department> departments = new ArrayList<>();
        departments.add(new Department(1L, "Sales"));
        departments.add(new Department(2L, "Marketing"));
        departments.add(new Department(3L, "Finance"));
        return departments;
    }
}

2. 前端：使用 Vue.js 实现下拉框的动态加载。在 Vue.js 中，可以使用 `created` 钩子函数在组件创建时发送 AJAX 请求获取部门列表，并将数据保存在组件的 `departments` 属性中。在页面中使用 `v-for` 指令遍历 `departments` 数组，创建下拉框的选项：

<template>
  <div>
    <label for="department">Department:</label>
    <select id="department" v-model="selectedDepartment">
      <option v-for="department in departments" :value="department">{{ department.name }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      departments: [],
      selectedDepartment: null
    };
  },
  created() {
    this.loadDepartments();
  },
  methods: {
    loadDepartments() {
      axios.get("/api/departments").then(response => {
        this.departments = response.data;
      });
    }
  }
};
</script>

在上述代码中，通过 `v-model` 指令将下拉框的选中值绑定到 `selectedDepartment` 属性上，可以通过该属性获取选中的部门对象。在 `created` 钩子函数中调用 `loadDepartments` 方法加载部门列表，该方法使用 `axios` 库发送 AJAX 请求，获取后端返回的部门列表数据，并保存在组件的 `departments` 属性中。在模板中使用 `v-for` 指令遍历 `departments` 数组，创建下拉框的选项，并使用 `:value` 绑定选项的值为部门对象本身。

需要注意的是，在使用 Vue.js 时，需要先安装 `axios` 库，可以通过以下命令进行安装：

npm install axios --save