Springboot+Element_分页+显示+搜索+完整版

显示效果

新建项目时选择的依赖

文件的目录结构

一、准备工作

1、配置文件

2、pom增加PageHelper

3、在idea中建立数据库连接，

4、新建peom表（如已建好，则忽略本条）

二、新建前端页面index.html（未连后端程序）

1 导包

2 新建index.html

3 打开element官网，找到相关的组件

4 复制相关代码到index.html中，并进行调整。

三、只查询所有，不分页

1、pojo

2、mapper

3、service

4、controller

5、前端页面index2.html

四、查询并分页

1、service

2、controller

3、前端页面index4.html

显示效果

新建项目时选择的依赖

文件的目录结构

一、准备工作

1、配置文件

注意：数据库的相关参数换成自己的。

spring.datasource.url=jdbc:mysql://localhost:3306/heima
spring.datasource.username=root
spring.datasource.password=123

# 应用服务 WEB 访问端口
server.port=8080
#下面这些内容是为了让MyBatis映射
#指定Mybatis的Mapper文件
mybatis.mapper-locations=classpath:mappers/*xml
#指定Mybatis的实体目录
mybatis.type-aliases-package=com.example.mybatis.entity

#数据库连接
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/heima
spring.datasource.username=root
spring.datasource.password=123
#开启mybatis的日志输出
mybatis.configuration.logimpl=org.apache.ibatis.logging.stdout.StdOutImpl
#开启数据库表字段
#实体类属性的驼峰映射
mybatis.configuration.map-underscore-to-camel-case=true

2、pom增加PageHelper

        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.4.2</version>
        </dependency>

3、在idea中建立数据库连接，

4、新建peom表（如已建好，则忽略本条）

use heima;

-- 诗人表
create table peom(
                     id int unsigned primary key auto_increment comment 'ID',
                     author varchar(100)  comment '姓名',
                     gender varchar(4) comment '性别, 1:男, 2:女',
                     dynasty varchar(100)  comment '朝代',
                     title varchar(100)  comment '头衔',
                     style varchar(100)  comment '风格'
) comment '诗人表';
-- 测试数据
insert into peom(id,author,gender, dynasty, title, style) VALUES (null,'陶渊明','1','东晋末至南朝宋初期','诗人和辞赋家','古今隐逸诗人之宗');
insert into peom(id,author,gender, dynasty, title, style) VALUES (null,'王维','1','唐代','诗佛','空灵、寂静');
insert into peom(id,author,gender, dynasty, title, style) VALUES (null,'李商隐','2','唐代','诗坛鬼才','无');
insert into peom(id,author,gender, dynasty, title, style) VALUES (null,'李白','1','唐代','诗仙','豪放飘逸的诗风和丰富的想象力');
insert into peom(id,author,gender, dynasty, title, style) VALUES (null,'李清照','2','宋代','女词人','婉约风格');
insert into peom(id,author,gender, dynasty, title, style) VALUES (null,'杜甫','1','唐代','诗圣','反映社会现实和人民疾苦');
insert into peom(id,author,gender, dynasty, title, style) VALUES (null,'苏轼','1','北宋','文学家、书画家，诗神','清新豪健的诗风和独特的艺术表现力');

二、新建前端页面index.html（未连后端程序）

1 导包

2 新建index.html

加入依赖的包链接

<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>

<script src="js/element.js"></script>
<link rel="stylesheet" href="js/element.css">

3 打开element官网，找到相关的组件

Element - The world's most popular Vue UI framework

4 复制相关代码到index.html中，并进行调整。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自带数据显示</title>
    <link rel="stylesheet" href="js/element.css">
</head>
<body>

<div id="app">
    <h1 align="center">诗人信息</h1>
    <el-table
            :data="tableData.filter(data => !search || data.author.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%">
        <el-table-column
                label="id"
                prop="id">
        </el-table-column>
        <el-table-column
                label="姓名"
                prop="author">
        </el-table-column>
        <el-table-column
                label="朝代"
                prop="dynasty">
        </el-table-column>
        <el-table-column
                label="头衔"
                prop="title">
        </el-table-column>
        <el-table-column
                label="风格"
                prop="style">
        </el-table-column>
        <el-table-column
                align="right">
            <template slot="header" slot-scope="scope">
                <el-input
                        v-model="search"
                        size="mini"
                        placeholder="输入关键字搜索"/>
            </template>
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
            </template>
        </el-table-column>
    </el-table>
    <p align="center">
    <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 5, 10, 20]"
            :page-size="pageSize"
            :total="total">
    </el-pagination>
    </p>
</div>

<!-- 引入组件库 -->
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/axios-0.18.0.js"></script>


<script>
    new Vue({
        el:"#app",
        data: {
            search: '',
            currentPage: 1,
            pageSize: 10,
            total: 100,
            tableData: [ {"id":1,"author":"陶渊明","gender":"1","dynasty":"东晋末至南朝宋初期","title":"诗人和辞赋家","style":"古今隐逸诗人之宗"},
                       {"id":2,"author":"李商隐","gender":"1","dynasty":"唐代","title":"诗坛鬼才","style":"无"},
                       {"id":3,"author":"李白","gender":"1","dynasty":"唐代","title":"诗仙","style":"豪放飘逸的诗风和丰富的想象力"},
                       {"id":4,"author":"陶渊明","gender":"1","dynasty":"东晋末至南朝宋初期","title":"诗人和辞赋家","style":"古今隐逸诗人之宗"},
                       {"id":5,"author":"李商隐","gender":"1","dynasty":"唐代","title":"诗坛鬼才","style":"无"},
                       {"id":6,"author":"李白","gender":"1","dynasty":"唐代","title":"诗仙","style":"豪放飘逸的诗风和丰富的想象力"},
                       {"id":7,"author":"陶渊明","gender":"1","dynasty":"东晋末至南朝宋初期","title":"诗人和辞赋家","style":"古今隐逸诗人之宗"},
                       {"id":8,"author":"李商隐","gender":"1","dynasty":"唐代","title":"诗坛鬼才","style":"无"},
                       {"id":9,"author":"libai","gender":"1","dynasty":"唐代","title":"诗仙","style":"豪放飘逸的诗风和丰富的想象力"}
                   ]
        },
        methods: {
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            handleSizeChange(val) {
                this.pageSize = val;
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                console.log(`当前页: ${val}`);
            }
        }

    })


</script>

</body>
</html>

三、只查询所有，不分页

1、pojo

package com.example.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Peom {
    private Integer id;
    private String author;
    private String gender;
    private String dynasty;
    private String title;
    private String style;
}

package com.example.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
//问：这段代码有什么用？
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Result {
    private Integer code;//响应码，1 代表成功; 0 代表失败
    private String msg;  //响应信息 描述字符串
    private Object data; //返回的数据


    public static Result success(){
        return new Result(1,"success",null);
    }

    public static Result success(Object data){
        return new Result(1,"success",data);
    }

    public static Result error(String str){
        return new Result(0,str,null);
  
    }


}


package com.example.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.util.List;

/**
 * 分页查询结果封装类
 */
@Data
@NoArgsConstructor
@AllArgsConstructor
public class PageBean {

    private Long total;//总记录数
    private List rows;//数据列表

}

2、mapper

package com.example.mapper;

import com.example.pojo.Peom;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

@Mapper
public interface PeomMapper {

    @Select("select * from peom")
    public List<Peom> list();
    
}

3、service

package com.example.service;

import com.example.pojo.Peom;

import java.util.List;

public interface PeomService {

    public List<Peom> list();
   

}

package com.example.service.impl;

import com.example.mapper.PeomMapper;
import com.example.pojo.Peom;
import com.example.service.PeomService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
//全部查询，不分页
@Service
public class PeomServcieImpl implements PeomService {

    @Autowired
   private PeomMapper peomMapper;

    @Override
    public List<Peom> list() {
        return peomMapper.list();
    }
}

4、controller

package com.example.controller;

import com.example.pojo.Result;
import com.example.service.PeomService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class PeoController {

  @Autowired
    PeomService peomService;

    @GetMapping("/peom")
    public Result findAll(){
        return Result.success(peomService.list());
    }

}

5、前端页面index2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>查询出所有</title>
  <link rel="stylesheet" href="js/element.css">
</head>
<body>

<div id="app">
  <h1 align="center">诗人信息</h1>
  <el-table
          :data="tableData.filter(data => !search || data.author.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%">
    <el-table-column
            label="id"
            prop="id">
    </el-table-column>
    <el-table-column
            label="姓名"
            prop="author">
    </el-table-column>
    <el-table-column
            label="朝代"
            prop="dynasty">
    </el-table-column>
    <el-table-column
            label="头衔"
            prop="title">
    </el-table-column>
    <el-table-column
            label="风格"
            prop="style">
    </el-table-column>
    <el-table-column
            align="right">
      <template slot="header" slot-scope="scope">
        <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
  <p align="center">
    <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 5, 10, 20]"
            :page-size="pageSize"
            :total="total">
    </el-pagination>
  </p>
</div>

<!-- 引入组件库 -->
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/axios-0.18.0.js"></script>


<script>
  new Vue({
    el:"#app",
    data: {
      search: '',
      currentPage: 1,
      pageSize: 10,
      total: 100,
      tableData: []
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      handleSizeChange(val) {
        this.pageSize = val;
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
      },

      findAll() {
    
        var url = `/peom`
        axios.get(url)
                .then(res =>{
                  this.tableData = res.data.data;
                  console.log(tableData);
                        })
                 .catch(error=>{
                    console.error(error);
                 })

      }

    },
    created(){
      this.findAll();
    }

  })


</script>

</body>
</html>

四、查询并分页

1、service

package com.example.service;

import com.example.pojo.PageBean;
import com.example.pojo.Peom;

import java.util.List;

public interface PeomFenyeService {

    public PageBean list(Integer page, Integer pageSize);
}

package com.example.service.impl;


import com.example.mapper.PeomMapper;
import com.example.pojo.PageBean;
import com.example.pojo.Peom;
import com.example.service.PeomFenyeService;
import com.example.service.PeomService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

// 分页查询
@Service
public class PeomServiceB implements PeomFenyeService {

    @Autowired
   private PeomMapper peomMapper;

    @Override
    public PageBean list(Integer page,Integer pageSize) {
      //问：PageHelper.startPage(page, pageSize); 请解释一下

        // 设置分页参数
        PageHelper.startPage(page, pageSize);
        // 执行分页查询
        List<Peom> peomList = peomMapper.list();
       //   System.out.println(peomList);

        // 获取分页结果
        PageInfo<Peom> p = new PageInfo<>(peomList);
        //封装PageBean

        PageBean pageBean = new PageBean(p.getTotal(), p.getList());
        return pageBean;

    }
}

PeomServcieImpl 取消注释为service（因为只能注入一个）

package com.example.service.impl;

import com.example.mapper.PeomMapper;
import com.example.pojo.Peom;
import com.example.service.PeomService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
//全部查询，不分页
//@Service
public class PeomServcieImpl implements PeomService {

    @Autowired
   private PeomMapper peomMapper;

    @Override
    public List<Peom> list() {
        return peomMapper.list();
    }
}

2、controller

package com.example.controller;

import com.example.pojo.Result;
import com.example.service.PeomService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class PeoController {

//全部注释掉，因为PeomService 没有被注入，不是service组件了。不注释掉会报错
  /*  @Autowired
    PeomService peomService;

    @GetMapping("/peom")
    public Result findAll(){
        return Result.success(peomService.list());
    }
*/
}

package com.example.controller;

import com.example.pojo.PageBean;
import com.example.pojo.Result;
import com.example.service.PeomFenyeService;
import com.example.service.PeomService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class PeomFenyeController {


    @Autowired
    PeomFenyeService peomFenyeService;

    @GetMapping("/peom/{page}/{pageSize}")

    public Result findAll(@PathVariable  Integer page,
                          @PathVariable  Integer pageSize){
        PageBean pageBean =  peomFenyeService.list(page,pageSize);
        return Result.success(pageBean);
    }


}

3、前端页面index4.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>查询出所有并分页控件显示</title>
  <link rel="stylesheet" href="js/element.css">
</head>
<body style="align:center">

<div id="app" style="width: 80%;align:center">
  <h1 align="center">诗人信息</h1>
  <el-table
          :data="tableData.filter(data => !search || data.author.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%;align:center;font-size: 20px">
    <el-table-column
            label="id"
            prop="id">
    </el-table-column>
    <el-table-column
            label="姓名"
            prop="author">
    </el-table-column>
    <el-table-column
            label="朝代"
            prop="dynasty">
    </el-table-column>
    <el-table-column
            label="头衔"
            prop="title">
    </el-table-column>
    <el-table-column
            label="风格"
            prop="style">
    </el-table-column>
    <el-table-column
            align="right">
      <template slot="header" slot-scope="scope">
        <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
  <p align="center">
    <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 5, 10, 20]"
            :page-size="pageSize"
            :total="total">
    </el-pagination>
  </p>
</div>

<!-- 引入组件库 -->
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/axios-0.18.0.js"></script>


<script>
  new Vue({
    el:"#app",
    data: {
      search: '',
      currentPage: 1,
      pageSize: 4,
      total: null,
      tableData: []
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.findAll();
        console.log(`每页 ${val} 条`);

      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.findAll();
        console.log(`当前页: ${val}`);

      },

      findAll() {

      var url = `/peom/${this.currentPage}/${this.pageSize}`

        axios.get(url)
                .then(res =>{
                  this.tableData = res.data.data.rows;
                  this.total=res.data.data.total;
                  console.log(this.tableData);
                  console.log(this.total);
                })
                .catch(error=>{
                  console.error(error);
                })

      }

    },
    created(){
      this.findAll();
    }

  })


</script>

</body>
</html>

五、分页+搜索（两个搜索条件必须填）：实现了条件查询功能（以下代码有一处错误，导致不能正确显示查询结果，请尝试调试，并写出调试的思路和过程。）

1、mapper

//带条件的查询
    @Select("select * from peom where author like concat('%',#{author},'%') and style like concat('%',#{style},'%')")
    public List<Peom> list_chaxun(String author,  String style);

2、service

 public PageBean list_chaxun(Integer page, Integer pageSize,String author,String style);

  @Override
    public PageBean list_chaxun(Integer page,Integer pageSize,String author,String style) {


        // 设置分页参数
        PageHelper.startPage(page, pageSize);
        // 执行分页查询
        List<Peom> peomList = peomMapper.list_chaxun(author,style);
        //   System.out.println(peomList);

        // 获取分页结果
        PageInfo<Peom> p = new PageInfo<>(peomList);
        //封装PageBean

        PageBean pageBean = new PageBean(p.getTotal(), p.getList());
        return pageBean;

    }

3、controller

   @GetMapping("/peom1/{page}/{pageSize}")
    public Result findAll_chaxun(@PathVariable  Integer page,
                                 @PathVariable  Integer pageSize,
                                String author,
                                String style){
        PageBean pageBean =  peomFenyeService.list_chaxun(page,pageSize,author,style);
        return Result.success(pageBean);
    
    }

4、index5.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询出所有并分页控件显示</title>
    <link rel="stylesheet" href="js/element.css">
</head>
<body style="align:center">

<div id="app" style="width: 80%;align:center">
    <h1 align="center">诗人信息</h1>
<p align="center">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="姓名">
            <el-input v-model="formInline.author" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="风格">
            <el-input v-model="formInline.style" placeholder="风格"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
</p>
    <el-table
            :data="tableData.filter(data => !search || data.author.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%;align:center;font-size: 20px">
        <el-table-column
                label="id"
                prop="id">
        </el-table-column>
        <el-table-column
                label="姓名"
                prop="author">
        </el-table-column>
        <el-table-column
                label="朝代"
                prop="dynasty">
        </el-table-column>
        <el-table-column
                label="头衔"
                prop="title">
        </el-table-column>
        <el-table-column
                label="风格"
                prop="style">
        </el-table-column>
        <el-table-column
                align="right">
            <template slot="header" slot-scope="scope">
                <el-input
                        v-model="search"
                        size="mini"
                        placeholder="输入关键字搜索"/>
            </template>
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
            </template>
        </el-table-column>
    </el-table>
    <p align="center">
        <el-pagination
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[3, 5, 10, 20]"
                :page-size="pageSize"
                :total="total">
        </el-pagination>
    </p>
</div>

<!-- 引入组件库 -->
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/axios-0.18.0.js"></script>


<script>
    new Vue({
        el:"#app",
        data: {
            search: '',
            currentPage: 1,
            pageSize: 4,
            total: null,
            tableData: [],
            formInline: {
                author: '',
                style: ''
            }
        },
        methods: {
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.findAll();
                console.log(`每页 ${val} 条`);

            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.findAll();
                console.log(`当前页: ${val}`);

            },
            onSubmit() {

 var url = `/peom1/${this.currentPage}/${this.pageSize}?author=${encodeURIComponent(this.formInline.author)}&style=${encodeURIComponent(this.formInline.style)}`

                console.log(this.formInline.author);
                console.log(this.formInline.style);


                axios.get(url)
                    .then(res =>{
                        this.tableData = res.data.data.rows;
                        this.total=res.data.data.total;
                        console.log(this.tableData);
                        console.log(this.total);
                    })
                    .catch(error=>{
                        console.error(error);
                    })

            },

            findAll() {

                var url = `/peom/${this.currentPage}/${this.pageSize}`

                axios.get(url)
                    .then(res =>{
                        this.tableData = res.data.data.rows;
                        this.total=res.data.data.total;
                        console.log(this.tableData);
                        console.log(this.total);
                    })
                    .catch(error=>{
                        console.error(error);
                    })

            }

        },
        created(){
            this.findAll();
        }

    })


</script>

</body>
</html>

六、分页+搜索（两个搜索条件可填可不填）

sql语句不写在mapper接口文件中，而是写在专门的xml文件中。

1、mapper

package com.example.mapper;

import com.example.pojo.Peom;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;

import java.util.List;

@Mapper
public interface PeomMapper {


    public List<Peom> list();

//带条件的查询

    public List<Peom> list_chaxun(@Param("author") String author, @Param("style") String style);



}

2、xml文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.mapper.PeomMapper">
    <!-- 查询 -->
    <select id="list" resultType="com.example.pojo.Peom">
        select * from peom
    </select>
    <!-- 条件分页查询 -->
    <select id="list_chaxun" resultType="com.example.pojo.Peom">
        select * from peom
               <where>
                    <if test="author != null and author != ''">
                        author like concat('%',#{author},'%')
                    </if>
                    <if test="style != null and style != ''">
                      and  style like concat('%',#{style},'%')
                    </if>
                </where>
    </select>

</mapper>

3、controller

package com.example.controller;

import com.example.pojo.PageBean;
import com.example.pojo.Result;
import com.example.service.PeomFenyeService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@Slf4j
@RestController
@RequestMapping("/peoms")
public class PeomXmlController {
    @Autowired
    private PeomFenyeService peomFenyeService;
    //条件分页查询
    @GetMapping("/{page}/{pageSize}")
    public Result page(@PathVariable Integer page,
                       @PathVariable Integer pageSize,
                       String author, String style) {
        //记录日志
        log.info("分页查询，参数：{},{},{},{},{},{}", page, pageSize,author, style);
        //调用业务层分页查询功能
        PageBean pageBean = peomFenyeService.list_chaxun(page, pageSize, author, style);
        //响应
        return Result.success(pageBean);
    }

}

4、前端页面index6.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>xml方式写sql</title>
  <link rel="stylesheet" href="js/element.css">
</head>
<body style="align:center">

<div id="app" style="width: 80%;align:center">
  <h1 align="center">诗人信息</h1>
  <p align="center">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="formInline.author" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="风格">
        <el-input v-model="formInline.style" placeholder="风格"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </p>
  <el-table
          :data="tableData.filter(data => !search || data.author.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%;align:center;font-size: 20px">
    <el-table-column
            label="id"
            prop="id">
    </el-table-column>
    <el-table-column
            label="姓名"
            prop="author">
    </el-table-column>
    <el-table-column
            label="朝代"
            prop="dynasty">
    </el-table-column>
    <el-table-column
            label="头衔"
            prop="title">
    </el-table-column>
    <el-table-column
            label="风格"
            prop="style">
    </el-table-column>
    <el-table-column
            align="right">
      <template slot="header" slot-scope="scope">
        <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
  <p align="center">
    <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 5, 10, 20]"
            :page-size="pageSize"
            :total="total">
    </el-pagination>
  </p>
</div>

<!-- 引入组件库 -->
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/axios-0.18.0.js"></script>


<script>
  new Vue({
    el:"#app",
    data: {
      search: '',
      currentPage: 1,
      pageSize: 4,
      total: null,
      tableData: [],
      formInline: {
        author: '',
        style: ''
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.findAll();
        console.log(`每页 ${val} 条`);

      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.findAll();
        console.log(`当前页: ${val}`);

      },
      onSubmit() {

        var url = `/peoms/${this.currentPage}/${this.pageSize}?author=${encodeURIComponent(this.formInline.author)}&style=${encodeURIComponent(this.formInline.style)}`

        console.log(this.formInline.author);
        console.log(this.formInline.style);


        axios.get(url)
                .then(res =>{
                  this.tableData = res.data.data.rows;
                  this.total=res.data.data.total;
                  console.log(this.tableData);
                  console.log(this.total);
                })
                .catch(error=>{
                  console.error(error);
                })

      },

      findAll() {

        var url = `/peoms/${this.currentPage}/${this.pageSize}`

        axios.get(url)
                .then(res =>{
                  this.tableData = res.data.data.rows;
                  this.total=res.data.data.total;
                  console.log(this.tableData);
                  console.log(this.total);
                })
                .catch(error=>{
                  console.error(error);
                })

      }

    },
    created(){
      this.findAll();
    }

  })


</script>

</body>
</html>