Vue查询数据库获取分类下拉框

在Vue中查询数据库获取分类下拉框，需要借助于后端技术实现。下面以Spring Boot和MySQL为例，提供一个简单的实现方案。

1. 创建Category实体类

首先，我们需要创建一个Category实体类，用于映射数据库中的分类表。可以使用JPA或者MyBatis等框架来实现，这里以JPA为例：

@Entity
@Table(name = "category")
public class Category {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    // getter和setter方法省略
}

2. 创建CategoryRepository接口

接下来，我们需要创建一个CategoryRepository接口，用于定义查询分类数据的方法。可以使用Spring Data JPA来实现，代码如下：

public interface CategoryRepository extends JpaRepository<Category, Long> {
    @Query("SELECT c FROM Category c")
    List<Category> findAllCategories();
}

3. 创建CategoryController类

再接下来，我们需要创建一个CategoryController类，用于接收前端请求并返回分类数据。代码如下：

@RestController
@RequestMapping("/api/categories")
public class CategoryController {
    @Autowired
    private CategoryRepository categoryRepository;

    @GetMapping("/list")
    public List<Category> getCategoryList() {
        return categoryRepository.findAllCategories();
    }
}

4. 在Vue中调用接口获取分类数据

最后，在Vue中调用接口获取分类数据并显示在下拉框中。可以使用axios来发送请求，代码如下：

<template>
  <div>
    <select v-model="selectedCategory">
      <option v-for="category in categories" :value="category.id">{{ category.name }}</option>
    </select>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      categories: [],
      selectedCategory: null,
    };
  },
  mounted() {
    axios.get('/api/categories/list')
      .then(response => {
        this.categories = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  },
};
</script>

上面的代码中，我们通过axios发送了一个GET请求，请求后端接口/api/categories/list，获取分类数据并将其赋值给categories数组。然后，使用v-for指令遍历categories数组，将每个分类显示在下拉框中。当用户选择某个分类时，selectedCategory变量的值会发生改变。