【项目业务逻辑】前后端分离项目中实现条件分页查询

周努力.

已于 2023-05-28 20:50:46 修改

阅读量466

点赞数 1

文章标签：前端 spring boot vue.js

于 2023-05-28 20:45:12 首次发布

本文链接：https://blog.csdn.net/weixin_61492871/article/details/130917018

版权

本文介绍了在一个前后端分离的项目（以谷粒学院为例）中，如何使用Vue和SpringBoot实现条件查询和分页查询。前端通过Vue组件和Axios发送Ajax请求，调用后端接口。后端使用SpringBoot接收请求，处理条件并利用Page对象进行分页查询。文章强调了前后端数据交互的关键点和后端条件组装的灵活性。

摘要由CSDN通过智能技术生成

业务难点：

1、前后端分离项目（项目以谷粒学院为例）

2、条件查询

3、分页查询

完成步骤：

项目架构由前端Vue+后端SpringBoot分离开发，前端通过Axios框架向后端服务器接口发送Ajax请求，实现service层调用，具体操作如下：

首先定义前端发送请求方法，并在Vue界面中引用该JS方法：

    //课程列表
    getListCoursePage(current,limit,courseQuery) {
        return request({
            url: `/eduservice/course/${current}/${limit}`,
            method: 'post',
            data: courseQuery
        })
    },

接下来，前端Vue页面，通过在methods中定义方法，然后在created内在页面一显示就进行调用该方法，代码如下：

data() {
    //定义数据变量和初始值
    return {
      list: null,
      page: 1,
      limit: 10,
      total: 0,
      courseQuery: {},
    };
  },

methods: { //创建具体的方法，调用teacher.js定义的方法
        //讲师列表的方法
        getList(){
            course.getListCoursePage(this.page,this.limit,this.courseQuery)
                .then(response => {
                    //response接口返回的数据
                    this.list = response.data.list
                    this.total = response.data.total
                })//成功后调用
                .catch(error => {
                    console.log(error)
                })//失败后调用
        },
    }

created(){//页面渲染之前执行，调用methods定义的方法
        this.getList()
    },

这样前端页面以及发送请求部分就搞定，接下来就是后端服务器接口部分，具体代码以及注释如下：

//条件查询带分页
    @PostMapping("/${current}/${limit}")
    public R getCourseList(@PathVariable("current") Long current, 
                           @PathVariable("limit") Long limit,
                           @RequestBody CourseQuery courseQuery){
        //分页查询首先要记得创建分页Page条件
        Page<EduCourse> pageCourse = new Page<>(current, limit); 

        //取出前端页面带来的具体条件（先不管是否为空，可能无条件）
        String title = courseQuery.getTitle();
        Integer status = courseQuery.getStatus();

        QueryWrapper<EduCourse> wrapper = new QueryWrapper<>();

        //根据是否存在相应的属性，对wrapper条件进行具体拼接（这段代码可以进行进一步的优化）
        if (!StringUtils.isEmpty(title)){
            wrapper.eq("title",title);
        }
        if (!StringUtils.isEmpty(status)){
            wrapper.eq("status",status);
        }

        //通过service调用page方法，传入条件，我们的pageCourse内执行后会缓存好查询出来的数据
        courseService.page(pageCourse,wrapper);
        
        //得到查询结果
        List<EduCourse> list = pageCourse.getRecords();

        //向前端返回数据
        return R.ok().data("list",list);
    }

注意：在条件分页查询中，前端传入的数据需要带有当前页，每页最多展示的数据，以及条件，具体的条件我们后端开发过程中，为了方便，前端可以传入一个对象，后端用vo来进行封装接收，这是我们开发中常见的一种思想。