2023-7-11

条件查询（含分页）

• 在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()注解的一些常用用法和示例：

1. 基本使用：

   @Select("SELECT * FROM table_name")
   List<POJO> selectAll();
   

   这个示例中，selectAll() 方法将执行一个简单的 SELECT 查询语句，从 “table_name” 表中检索所有的记录，并返回一个包含 POJO 对象的列表。

Vue项目的创建

创建项目，cmd使用vue create xxx命令

购物车案例

1. 创建表格table

<template>
  <div>
   <table>
     <tr>
       <th>
         <input type="checkbox">
       </th>
       <th>编号</th>
       <th>商品名称</th>
       <th>商品价格</th>
       <th>购买数量</th>
       <th>操作</th>
     </tr>
   </table>
  </div>
</template>

2. 给表格加边框

<style>
table,tr,th,td{
  border-collapse: collapse; /* 合并表格边框 */
  border:1px solid black;/* 设置表格边框宽度和颜色 */
  text-align: center;/* 内容居中*/
  padding:10px;/* 设置元素的内边距 */
}
</style>

3. 设置数据

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,
    }
  },
  }

4. 将数据映射到表格中

<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>

5. 实现总价的变化
   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);
    },
}

7. 删除全部商品时给出提示
   在template下的div中再增加一个div，使用v-if进行判断

<div v-if="books.length==0">购物车为空，快点去选你中意的商品吧！</div>

8. 全选或全不选

• 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 来获得选中的数据项。