条件查询(含分页)
- 在Controller中定义searchBill方法
@PostMapping("searchBill")
public ResponseData searchBill(@RequestBody PlanDesignInfoQueryDto queryDto){
return ResponseData.ok(planDesignInfoService.searchBill(queryDto));
}
- 在Service层定义接口searchBill
public interface PlanDesignInfoService {
IPage<PlanDesignInfo> searchBill(PlanDesignInfoQueryDto queryDto);
}
- 在ServiceImpl实现该接口
@Service
public class PlanDesignInfoServiceImpl implements PlanDesignInfoService{
@Autowired
private PlanDesignInfoMapper planDesignInfoMapper;
@Override
public IPage<PlanDesignInfo> searchBill(PlanDesignInfoQueryDto queryDto) {
Page<PlanDesignInfo> page=new Page<>();
//每页数据
page.setSize(queryDto.getSize());
page.setCurrent(queryDto.getCurrent());
QueryWrapper<PlanDesignInfo> queryWrapper=new QueryWrapper<>();
if(!StringUtils.isBlank(queryDto.getPlanDesignName())){
queryWrapper.like("plan_design_name","安徽");
}
if(queryDto.getSpecId()!=null){
queryWrapper.eq("spec_id",queryDto.getSpecId());
}
if(!StringUtils.isBlank(queryDto.getDesigner())){
queryWrapper.like("designer",queryDto.getDesigner());
}
if (CollectionUtils.isNotEmpty(queryDto.getCreateTime())){
queryWrapper.between("create_time",queryDto.getCreateTime().get(0),queryDto.getCreateTime().get(1));
}
return planDesignInfoMapper.selectPage(page,queryWrapper);
}
}
MyBatisPlus分页查询不生效的解决办法
配置MyBatisPlusConfig文件
package cn.edu.guet.ahydcad.config;
import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
@Configuration
public class MyBatisPlusConfig {
@Bean
public PaginationInterceptor paginationInterceptor() {
PaginationInterceptor page = new PaginationInterceptor();
page.setDialectType("mysql");
return page;
}
}
Mapper自定义方法找不到的解决办法
在mapper中自定义的方法上边使用@Select注解
@Select()
在使用 MyBatis 的 Mapper 接口中,@Select()
是一个注解,用于标识查询操作的方法。这个注解可以放在接口的方法上,指示该方法执行一个 SELECT 语句。
下面是@Select()
注解的一些常用用法和示例:
-
基本使用:
@Select("SELECT * FROM table_name") List<POJO> selectAll();
这个示例中,
selectAll()
方法将执行一个简单的 SELECT 查询语句,从 “table_name” 表中检索所有的记录,并返回一个包含POJO
对象的列表。
Vue项目的创建
创建项目,cmd使用vue create xxx命令
购物车案例
- 创建表格table
<template>
<div>
<table>
<tr>
<th>
<input type="checkbox">
</th>
<th>编号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</table>
</div>
</template>
- 给表格加边框
<style>
table,tr,th,td{
border-collapse: collapse; /* 合并表格边框 */
border:1px solid black;/* 设置表格边框宽度和颜色 */
text-align: center;/* 内容居中*/
padding:10px;/* 设置元素的内边距 */
}
</style>
- 设置数据
export default {
data() {
return {
books: [
{id: 1, name: '数学分析', price: 12, num: 1},
{id: 2, name: '高等代数', price: 16, num: 1},
{id: 3, name: '概率论', price: 15, num: 1},
{id: 4, name: '数值分析', price: 10, num: 1},
{id: 5, name: '软件工程', price: 2, num: 1},
{id: 6, name: '计算机网络', price: 6, num: 1},
],
totalPrice:0,
}
},
}
- 将数据映射到表格中
<tr v-for="book in books" :key="book.id">
<td>
<input type="checkbox">
</td>
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>¥{{book.price.toFixed(2)}}</td>
<td>
<button v-on:click="book.num--">-</button>
<span>{{book.num}}</span>
<button v-on:click="book.num++">+</button>
</td>
<td>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td colspan="3">总价:</td>
<td colspan="3">{{totalPrice}}</td>
</tr>
- 实现总价的变化
books数据增加一个checkbox属性用于确认选中状态
books: [
{id: 1, checkbox:true, name: '数学分析', price: 12, num: 1},
{id: 2, checkbox:true, name: '高等代数', price: 16, num: 1},
{id: 3, checkbox:true, name: '概率论', price: 15, num: 1},
{id: 4, checkbox:true, name: '数值分析', price: 10, num: 1},
{id: 5, checkbox:true, name: '软件工程', price: 2, num: 1},
{id: 6, checkbox:true, name: '计算机网络', price: 6, num: 1},
],
input输入框绑定属性
<input type="checkbox" v-model="book.checkbox">
删除data中的totalPrice属性,用computed声明
/**
1. computed属性用于声明一个计算属性。计算属性是根据其他依赖的属性进行计算得出
的值,并且具有缓存机制,只有依赖发生变化时才会重新计算。
*/
computed:{
totalPrice:{
get(){
let sum=0;
for(let book of this.books){
if(book.checkbox) {
sum+=book.num*book.price;
}
}
return sum;
}
},
}
6. 实现删除功能
<tr v-for="(book,index) in books" :key="book.id">
<a href="#" @click="del(index)">删除</a>
</td>
</tr>
methods中实现删除操作
methods:{
del(index){
/**
* splice(index) 方法的作用是从数组中删除一个或多个元素
* 第一个参数是要开始删除元素的索引,第二个参数指定要删除的元素数量。
* 如果不指定该参数,则删除从指定 index 到数组末尾的所有元素。
* 所以如果只想删除一行,第二个参数应该设置为 1
*/
this.books.splice(index,1);
},
}
- 删除全部商品时给出提示
在template下的div中再增加一个div,使用v-if
进行判断
<div v-if="books.length==0">购物车为空,快点去选你中意的商品吧!</div>
- 全选或全不选
- data属性中增加
selectAll
属性,并将checkbox
属性设置为false
//全选框状态
selectAll: false,
books: [
{id: 1, checkbox:false, name: '数学分析', price: 12, num: 1},
{id: 2, checkbox:false, name: '高等代数', price: 16, num: 1},
{id: 3, checkbox:false, name: '概率论', price: 15, num: 1},
{id: 4, checkbox:false, name: '数值分析', price: 10, num: 1},
{id: 5, checkbox:false, name: '软件工程', price: 2, num: 1},
{id: 6, checkbox:false, name: '计算机网络', price: 6, num: 1},
],
- 在表格的复选框中使用
v-model
指令将其与selectAll
进行双向数据绑定,实现选中状态的同步。同时绑定toggleSelectAll
函数
<input type="checkbox" v-model="selectAll" @change="toggleSelectAll">
- 使用计算属性
selectedBooks
来绑定所有选中的数据项。当获取selectedBooks
时,我们过滤出所有checkbox
属性为true
的项作为选中项;当设置selectedBooks
时,我们根据传入的选中项,更新所有数据项的checkbox
属性。
computed:{
selectedBooks: {
get() {
// 当选中项与数据项匹配时,返回所有选中项
return this.books.filter(book => book.checkbox);
},
set(value) {
// 设置所有数据项的选中状态与全选复选框一致
this.books.forEach(book => {
book.checkbox = value.includes(book);
});
}
}
},
映射数据部分也要相应改变
toggleSelectAll
的方法,用于切换全选复选框的状态,并根据全选状态更新所有数据项的选中状态。
methods:{
toggleSelectAll() {
// 切换全选复选框的状态时,更新所有数据项的选中状态
this.selectedBooks = this.selectAll ? this.books : [];
}
},
通过这种方式,当点击全选复选框时,表格中的所有复选框会随之选中或取消选中,并且可以通过访问 selectedBooks
来获得选中的数据项。