vue+springboot+mybatis下拉列表显示从会员卡表里查询到的名字
时间: 2023-07-30 18:12:56 浏览: 72
好的,下面是实现的步骤:
1. 在 Vue 组件中添加下拉列表:
```html
<template>
<div>
<select v-model="selectedName">
<option v-for="name in nameList" :value="name">{{ name }}</option>
</select>
</div>
</template>
```
其中,`selectedName` 是选中的名字,`nameList` 是从后端查询到的名字数组。
2. 在 Vue 组件中调用后端接口获取名字数组:
```js
<script>
import axios from 'axios'
export default {
data() {
return {
nameList: [],
selectedName: ''
}
},
mounted() {
axios.get('/api/getNames').then(response => {
this.nameList = response.data
})
}
}
</script>
```
这里使用了 axios 库发送 GET 请求,获取名字数组。
3. 在后端编写接口,查询会员卡表,提取名字数组:
```java
@RestController
@RequestMapping("/api")
public class CardController {
@Autowired
private CardMapper cardMapper;
@GetMapping("/getNames")
public List<String> getNames() {
List<Card> cardList = cardMapper.getAllCards();
List<String> nameList = new ArrayList<>();
for (Card card : cardList) {
String name = card.getName();
if (!nameList.contains(name)) {
nameList.add(name);
}
}
return nameList;
}
}
```
这里使用了 Spring Boot 框架和 MyBatis ORM 框架,其中 `CardMapper` 是自动生成的 Mapper 接口,用于查询会员卡表中的数据。
以上就是在 Vue + Spring Boot + MyBatis 中实现下拉列表显示从会员卡表里查询到的名字的步骤。