springboot+vue+element-ui+mybatisplus获取后端数据库表中书籍价格等,在数据库中有参考价和销售价,在前端表格中使用一个下拉列表框来选择书的成色(全新,九成新等),然后价销售格列根据下拉框所选成色与参考价格自动进行相应的计算得销售价格并显示出来的具体代码实现
时间: 2024-02-27 22:55:48 浏览: 81
图书管理系统(使用了vue作为前端框架、Springboot作为后端框架,数据库为mysql).zip
首先,在前端页面中,需要使用ElementUI提供的下拉框组件来实现下拉选择成色的功能。代码如下:
```html
<el-select v-model="selectedCondition" placeholder="请选择成色">
<el-option label="全新" value="new"></el-option>
<el-option label="九成新" value="nine"></el-option>
<!-- 其他成色选项 -->
</el-select>
```
接着,在表格中,需要使用自定义列来实现销售价格的计算和显示。代码如下:
```html
<el-table-column label="销售价格" prop="salePrice">
<template slot-scope="scope">
<div>{{ calculateSalePrice(scope.row.referencePrice, selectedCondition) }}</div>
</template>
</el-table-column>
```
其中,`calculateSalePrice`是一个自定义方法,用来计算销售价格。具体实现如下:
```javascript
methods: {
calculateSalePrice(referencePrice, condition) {
let discount = 1.0;
switch(condition) {
case 'new': discount = 1.0; break;
case 'nine': discount = 0.9; break;
// 其他成色的折扣
}
return referencePrice * discount;
}
}
```
最后,在后端代码中,需要使用MyBatisPlus提供的ORM功能来获取数据库表中的书籍价格等信息。具体实现如下:
```java
@Service
public class BookService {
@Autowired
private BookMapper bookMapper;
public List<Book> getBookList() {
return bookMapper.selectList(null);
}
}
```
其中,`BookMapper`是一个继承自`BaseMapper`的接口,用来对数据库表进行操作。在`selectList`方法中,传入`null`作为查询条件,表示查询所有的书籍信息。你可以在`Book`实体类中定义参考价和销售价等属性,并且使用注解来映射数据库中的字段。例如:
```java
@Data
public class Book {
@TableId(type = IdType.AUTO)
private Long id;
private String name;
private Double referencePrice;
private Double salePrice;
// 其他属性
}
```
以上就是使用SpringBoot+Vue+ElementUI+MyBatisPlus实现获取后端数据库表中书籍价格等,并根据下拉框所选成色自动计算销售价格并在前端表格中显示的具体代码实现。
阅读全文