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

您可以使用JPA的@Repository注解将数据访问层的类标记为Spring bean，然后在这个类中定义一个方法，该方法使用JPQL查询语句从数据库中获取分类信息。然后，您可以在Vue中定义一个下拉框组件，该组件使用Axios从后端REST API获取分类信息，并将其显示在下拉框中。

以下是一个示例代码，仅供参考：

在数据访问层的类中：

@Repository
public class CategoryRepositoryImpl implements CategoryRepository {

    @PersistenceContext
    private EntityManager entityManager;

    @Override
    public List<Category> findAll() {
        String jpql = "SELECT c FROM Category c";
        TypedQuery<Category> query = entityManager.createQuery(jpql, Category.class);
        return query.getResultList();
    }
}

在控制器层的类中：

@RestController
@RequestMapping("/api")
public class CategoryController {

    @Autowired
    private CategoryRepository categoryRepository;

    @GetMapping("/categories")
    public List<Category> getCategories() {
        return categoryRepository.findAll();
    }
}

在Vue中的代码：

<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').then(response => {
      this.categories = response.data;
    });
  },
};
</script>

上述代码中，我们使用Axios从后端REST API获取分类信息，并将其保存到Vue组件的categories数组中。然后，我们使用Vue的v-for指令将每个分类名称显示在下拉框中。当用户选择一个分类时，Vue会将其ID保存到selectedCategory变量中。