SSMP整合案例(16) vue java联合实现分页条件查询终结篇

news2024/9/29 11:40:47

那么之后我们就要处理按条件查询了
简单说就是我们在分页时条件也要一起带过去
在这里插入图片描述
其实我们之前写的App组件中他们已经被定义上了

我们看到App.vue的这个位置
在这里插入图片描述
我们用了 formData
其中对应了三个条件

然后我们在 src的App组件下找到 getPages 中定义data的部分然后改成

let data = {
  page: this.page.pageCount,
  pageSize: this.page.pageSize,
  type: this.formData.type,
  name: this.formData.name,
  description: this.formData.description
}

在这里插入图片描述
我们先将这三个值当做参数传给请求

然后我们再发送请求就可以看到这些条件参数了但是目前我们并没有后端处理这些条件
在这里插入图片描述
然后我们看到之前我们给查询按钮绑定的事件叫 queryGet

我们将 queryGet 改成

queryGet() {
	this.page.pageCount = 1;
	this.getPages();
},

我们因为查询条件改变了就先将当前页调成1 因为不一定能查出多少页的数据了
然后调用我们的查询方法getPages

然后我们就要在我们java项目改了
打开java项目在启动类同目录下的 controller 下的BookController类
将getPage函数修改如下

@GetMapping("/page")
public ResultUtil getPage(@RequestParam int page,int pageSize,String type,String name,String description) {
    book book = new book();
    book.setType(type.isEmpty()?-1:Integer.parseInt(type));
    book.setName(name);
    book.setDescription(description);
    IPage<book> BookPage = IBookService.getPage(page, pageSize,book);
    int state = BookPage != null?200:500;
    String message = BookPage != null?"操作成功":"系统异常";
    ResultUtil ResultUtil = new ResultUtil(state,BookPage,message);
    return ResultUtil;
}

简单说我们新接受了三个参数就是我们刚刚新加的type name description
这里 type要给字符串因为我们前端处理时默认值是个空字符串如果你直接int去接肯定是有问题的
然后我们到后面起判断 type.isEmpty() 判断 type是不是一个空字符串
如果是给 -1 如果不是将字符串转为数字用这三个值再创建一个 book属性类对象

但是我们这里改了那么我们service层显然也要改
在同目录下找到 service 下的IBookService
将其中getPage改成

IPage<book> getPage(int page,int pageSize,book book);

其中就是我们刚才改的传的这个 book对象
然后我们接口都改了实现类自然也要改
将 service 下的 impl下的bookServiceI类中的 getPage 函数代码更改如下

@Override
public IPage<book> getPage(int page, int pageSize,book bookData) {
    LambdaQueryWrapper<book> Query = new LambdaQueryWrapper<book>();
    Query.eq(bookData.getType() != -1,book::getType,bookData.getType());
    Query.like(!bookData.getName().isEmpty(),book::getName,bookData.getName());
    Query.like(!bookData.getDescription().isEmpty(),book::getDescription,bookData.getDescription());
    IPage<book> pageDate = new Page(page,pageSize);
    bookDao.selectPage(pageDate,Query);
    return pageDate;
}