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

已于 2024-06-05 14:56:50 修改
阅读量1k 收藏 5
点赞数 4
文章标签： spring boot java spring
于 2024-05-17 10:50:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wyhwust/article/details/138997960
版权

目录

显示效果

新建项目时选择的依赖

文件的目录结构

一、准备工作

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(@Param("author")String author, @Param("style") 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>

网页设计王老师
关注
专栏目录
springboot使用elementUI分页对数据进行crud.zip
01-11
springboot使用elementUI分页对数据进行crud,完美的crud
SpringBoot集成element-ui
m0_67402236的博客
04-08 2097
想使用前后端分离 集成element-ui，但又不想使用纯JS怎么办？ 在springboot中集成element-ui: SpringBoot集成element-ui
ElementUI + SpringBoot
weixin_37741651的博客
12-17 1275
ElementUI+SprintBootRedis 安装新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 Red...
SpringBoot+vue+ElementUi(案例)
m0_61309742的博客
03-14 1646
import QS from 'qs' /* 解码器 */查询、分页、添加、删除、修改、绑定下拉列表功能。//将axios和qs放入到vue的原型链中。//引入ElementUI。配置启动App.vue页面。
史上最全springboot+vue3+element-plus代码实现web登录页面（附件有代码）
04-15
SpringBoot_demo是一个包含Spring Boot、Vue.js和Element Plus框架实现的Web登录页面示例项目。这个项目展示了如何将这三个技术栈结合，构建一个完整的前端到后端的应用。下面将详细介绍这些关键技术及其在登录页面...
springboot+mybatisplus+vue2+mysql+elementUI实现分页查询
05-28
在本项目中，"springboot+mybatisplus+vue2+mysql+elementUI实现分页查询" 是一个基于现代Web开发技术栈构建的简单但功能完整的应用实例，旨在展示如何利用这些工具进行前后端交互，实现数据的分页查询。下面将详细...
基于SpringBoot + vue + Element-UI 搭建的个人博客系统.zip
08-18
通过学习和实践这个项目，你可以掌握完整的前后端开发流程，了解微服务架构下的个人博客系统如何构建，并提升你在SpringBoot、Vue.js和Element-UI方面的技术能力。同时，这也是一个很好的实战项目，可以帮助你更好地...
毕设新项目基于SpringBoot+Vue的web网页版聊天室系统完整源码+项目说明+数据库（含前端+后端）.zip
最新发布
07-02
搭建FastDFS文件服务器用于保存图片，使用EasyExcel导出数据，使用Vue.js结合Element UI进行显示弹窗和数据表格分页等功能，以及整个系统的界面进行UI设计，并且使用MyBatis结合数据库MySQL进行开发。最后使用了...
【Springboot学习笔记】SpringBoot+Mybatis+Thymeleaf+Layui数据表单从零开始实现按条件模糊分页查询的方法
WEN_Windy的博客
08-25 7384
【Springboot学习笔记】SpringBoot+Mybatis+Thymeleaf+Layui数据表单从零开始实现按条件模糊分页查询的方法目录1.搭建环境1.1直接从网上下载SpringBoot样例网站程序1.2使用IDEA新建SpringBoot样例网站运行SpringBoot样例网站合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列...
springboot+mybatisplus+vue+elementUI分页.rar
10-29
springboot+mybatisplus+vue+elementUI实现后台分页，资源齐全，前后台代码都有，数据库语句也有
springboot+shiro+mybatis+mysql+element简单整合用户登录页面
06-26
springboot+shiro+mybatis+mysql+element简单整合用户登录页面前后台不分离 只引入资源文件
vue+element+springboot+shiro权限控制
12-07
vue+element+springboot+shiro权限控制,mysql数据库 登录帐号/密码 admin:111111
【推荐】一套开源通用后台管理系统（SpringBoot+ ElementUI）.zip
10-07
这套Base Admin是一套简单通用的后台管理系统，主要功能有：权限管理、菜单管理、用户管理，系统设置、实时日志，实时监控，API加密，以及登录用户修改密码、配置个性菜单等。 前端：layui java后端：SpringBoot + Thymeleaf + WebSocket + Spring Security + SpringData-Jpa + MySql 后台系统： 1、这或许是最美的Vue+Element开源后台管理UI 2、带工作流的SpringBoot后台管理项目，一个企业级快速开发解决方案
前后端分离项目
热门推荐
贝西奇谈
04-06 1万+
前后端分离项目 博客地址：https://blog.csdn.net/beixishuo 一、解读前后端分离 1、前后端不分 前后端不分，jsp是一个典型写法，jsp和java代码结合起来，刚开始，确实提高了开发效率，但时间长了，大伙发现jsp存在的问题，对于后端程序员来说不懂前端， 所以开发流程一般是这样的：前端设计页面–>后端把页面改造成jsp(把后台数据塞到jsp页面)–>后端发...
springBoot——文件上传结合ElementUi
一路向北
09-12 1344
1.编写文件上传的表单 ref:表达的引用 action：文件上传的地址 show-file-list:是否显示已选中的图片 :on-preview：点击放大图片时钩子函数，调用具体的方法 :before-remove：文件上传之前调用的方法，用于验证文件格式等信息 :on-remove:移除文件时的钩子函数 :before-remove：移除文件之前要执行的函数 :auto-upload:是否自动上传文件，一般设置为false :data:上传文件时同时附带表单中的其他数据 multi
Spring Boot Vue Element入门实战（十一）后端SpringBoot服务搭建
岁月不饶人，我亦未曾饶过岁月
09-24 1141
本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766 从本章开始将进入后台方面的介绍，包括spring boot，数据库，redis缓存，swagger，Mybatis等集成，以及前后台完成融合，最后完成前后台部署。 准备工作： JDK 1.8+ Maven 3.0+ Tomcat 8 Mysql 5.6+ Redis 5.0+ 环境变量配置 （一）新建sp...
vue+springboot项目练习(四、使用Element框架)
qq_44751671的博客
11-21 659
使用Element框架来改变前端样式，3.5element -puls使用ts来引入实在搞不明白，退一步选择使用老版本element-ui来引入 一、安装引入Element Element的官网https://element.eleme.cn/#/zh-CN
ElementUI+springboot 项目实战前后端分离（用户管理系统的开发）
共勉
01-01 5922
前端设计使用ElementUI进行编写，后端使用springboot微服务架构，简单实现一个基于vue+springboot的增删改查案例
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值