springboot+vue+element-ui+mybatisplus获取后端数据库表中书籍价格等,同时在前端表格中使用一个下拉列表框来选择书的成色(全新,九成新等),然后价格列根据所选成色自动进行相应的计算得出新的价格并显示出来的具体代码实现
时间: 2024-02-27 18:51:39 浏览: 77
书本信息管理系统,后端是Springboot,前端是Vue+ElementUI
好的,下面是具体的代码实现。
后端代码(使用SpringBoot和MyBatisPlus):
实体类Book.java
```java
public class Book {
private Long id;
private String name;
private Double originalPrice; // 原价
private Double currentPrice; // 现价
// 省略getter和setter方法
}
```
Mapper接口BookMapper.java
```java
@Repository
public interface BookMapper extends BaseMapper<Book> {
// 按书名查询书籍信息
List<Book> selectByName(String name);
}
```
Service实现类BookServiceImpl.java
```java
@Service
public class BookServiceImpl implements BookService {
@Autowired
private BookMapper bookMapper;
// 查询所有书籍信息
@Override
public List<Book> findAll() {
return bookMapper.selectList(null);
}
// 按书名查询书籍信息
@Override
public List<Book> findByName(String name) {
return bookMapper.selectByName(name);
}
}
```
Controller类BookController.java
```java
@RestController
@RequestMapping("/api/book")
public class BookController {
@Autowired
private BookService bookService;
// 查询所有书籍信息
@GetMapping("/findAll")
public List<Book> findAll() {
return bookService.findAll();
}
// 按书名查询书籍信息
@GetMapping("/findByName")
public List<Book> findByName(String name) {
return bookService.findByName(name);
}
}
```
前端代码(使用Vue和ElementUI):
Book.vue
```vue
<template>
<div>
<el-row>
<el-col :span="6">
<el-select v-model="selectedName" placeholder="请选择书名">
<el-option v-for="item in bookList" :key="item.id" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-col>
</el-row>
<el-table :data="bookList" style="margin-top: 20px;">
<el-table-column prop="name" label="书名"></el-table-column>
<el-table-column prop="originalPrice" label="原价"></el-table-column>
<el-table-column prop="currentPrice" label="现价"></el-table-column>
<el-table-column label="成色">
<template slot-scope="scope">
<el-select v-model="scope.row.quality" placeholder="请选择成色">
<el-option label="全新" value="1"></el-option>
<el-option label="九成新" value="0.9"></el-option>
<el-option label="八成新" value="0.8"></el-option>
<el-option label="七成新" value="0.7"></el-option>
<el-option label="六成新" value="0.6"></el-option>
</el-select>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
bookList: [], // 书籍列表
selectedName: '', // 选择的书名
}
},
mounted() {
this.findAll()
},
methods: {
// 查询所有书籍信息
findAll() {
this.$axios.get('/api/book/findAll').then(res => {
this.bookList = res.data
})
},
// 按书名查询书籍信息
findByName() {
this.$axios.get('/api/book/findByName', {
params: {name: this.selectedName}
}).then(res => {
this.bookList = res.data
})
},
},
watch: {
// 监听书籍列表变化,计算现价
bookList: {
handler: function (newVal, oldVal) {
newVal.forEach(item => {
item.currentPrice = item.originalPrice * item.quality
})
},
deep: true
}
}
}
</script>
```
这是一个简单的示例,具体实现还需要你根据自己的业务需求进行修改。
阅读全文