SpringBoot+MP+ElementUI【分页】

SpringBoot+MP+ElementUI【分页】

其余的增删改操作：p45/p46/p47/p48：springboot2

依赖

<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.4.3</version>
</dependency>

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>druid-spring-boot-starter</artifactId>
    <version>1.2.6</version>
</dependency>

配置

spring:
  datasource:
    druid:
      driver-class-name: com.mysql.cj.jdbc.Driver
      url: jdbc:mysql://localhost:3306/ssm_db?serverTimezone=UTC
      username: root
      password: 1234
mybatis-plus:
  global-config:
    db-config:
      table-prefix: tb_1
      id-type: auto #通过id自增长
  configuration:
    log-impl: org.apache.ibatis.logging,stdout.StdOutImpl  #开启MP运行日志

mp分页要使用mp提供的拦截器

创建拦截器，增加分页功能

@Configuration
public class MPConfig{
    @Bean
    public MybatisInterceptor mybatisInterceptor(){
        MybatisInterceptor mybatisInterceptor = new MybatisInterceptor();
        mybatisInterceptor.addInnerInterceptor(new PaginationInnerInterceptor());
        return mybatisInterceptor;
    }
}

执行分页得到的是一个ipage对象，通过ipage对象可以得到一些数据，当前页每页记录数或查询到的数据；

@Test
void testGetPage(){
	Ipage ipage = new IPage(1,5);
	bookMapper.selectPage(ipage,null); //
}

条件查询

普通的条件查询

@Test
void testGetBy(){
    QueryWrapper<Book> qw = new QueryWrapper<>();
    qw.like("name","spring");
    bookMapper.selectList(qw);
}

lambda格式【推荐】

支持动态拼写查询条件

@Test
void testGetBy(){
    String name = "spring";
    LambdaQueryWrapper<Book> lqw = new LambdaQueryWrapper<>();
    lqw.like(name!=null,book::getName,name);
    bookMapper.selectList(lqw);
}

业务层Service开发

get、remove、update、save、page

使用mp提供的通用接口（IService）和业务层通用实现类（ServiceImpl<M,T>）；不满足时可以重载或追加，重载时尽量不要覆盖原始操作

public interface IBookService extends Iservice<Book> {
    
}

@Service
public class IBookServiceImpl extends ServiceImpl<BookMapper,Book> implements IBookService {
    
}

@Test
void testGetPage(){
	Ipage<Book> ipage = new IPage<Book>(1,5);
	iBookService.page(ipage,null); //
}

表现层标准开发

@GetMapping("{currentPage}/{pageSize}")
public IPage<Book> getPage(@PathVariable int currentPage,@PathVariable int pageSize){
    return bookMapper.getPage(currentPage,pageSize);
}

public interface IBookService extends IService<Book>{
    IPage<Book> getPage(int currentPage,int pageSize);
}

@Service
public class IBookServiceImpl extends ServiceImpl<BookMapper,Book> implements IBookService{
    @Autowired
    private BookMapper bookMapper;
    @Override
    public IPage<Book> getPage(int currentPage,int pageSize){
        Page Page = new Page(currentPage,pageSize);
        bookMapper.selectPage(Page,null);
        return Page;
    }
}

统一返回格式

前后端数据协议

Result类提供不同构造方法，表现层new Result()返回出Result类

后端统一异常处理器

前端返回异常消息处理，当后台报错时，可能返回的数据为，与正常状态下后端返回的统一格式（msg、data、code）不一致

{
    "timestamp":"2021-09-15T03:27:31.038+00:00",
    "status":500,
    "error": "Internal Server Error",
    "path": "/books"
}

创建异常处理器拦截所有异常

注解可以写不同的异常类型

国际化，后台提供成功的和失败的返回数据

@RestControllerAdvice
public class ProjectExceptionAdvice{
    @ExceptionHandler(Exception.class)
    public void doException(Exception e){
        //记录日志，通知运维开发等
        return New Result(false,null,"服务器故障，请联系管理员");
    }
}

@PostMapping
public Result save(@RequestBody Book book) throws IOException{
    Boolean flag = bookService.insert(book);
    return new Result(flag,flag?"添加成功":"添加失败");
}

//添加
handleAdd(){
    //发送ajax请求
    axios.post("/books",this.formData).then((res)=>{
        if(res.data.flag){
            this.dialogFormVisible =false;
            this.$message.success(res.data.msg);
        }else {
            this.$message.error(res.data.msg);
        }
    }).finally(()=>{
        this.getA1ll();
    });
}

elementUI分页组件

一般都是分页查询，不用列表查询getAll()

<el-table :data="dataList">
    <el-table-column type="name" lable="图书名称" align="center"></el-table-column>
    <el-table-column type="type" lable="图书类别" align="center"></el-table-column>
</el-table>


<div class="pagination-container">
    <el-pagination
                   class="pagination"
                   @Current-change="handleCurrentChange"
                   :current-page="pagination.currentPage"
                   :Page-size = "pagination.pageSIze"
                   :total="pagination.tatal"
                   layout="total.prev,pager,next,jumper">
    </el-pagination>
</div>

data: {
    dataList:[],
    pagination: {
        currentPage: 1,
        pageSize:10,
        total:0
    }
}

res.data.data中的第一个data是response对象中的属性，表示服务器返回的数据；第二个data是服务器返回的数据中的字段名，表示具体的数据。

getAll(){
    axios.get("/books/"+this.pagination.currentPage+"/"+this.pagination.pageSize).then((res)=>{
        this.pagination.currentPage=res.data.data.size;
        this.pagination.pageSize=res.data.data.size;
        this.pagination.total=res.data.data.total;
        this.dataList = res.data.data.records;
    })
}
handleCurrentChange(currentPage){
    this.pagination.currentPage=currentPage;
    this.getAll();
}

当把最后一页的数据全删了，但是不跳转到新的最后一页，展示一个空页面

但是一次删的数量大于size，可以有其他的解决方案，分析业务需求，可以跳到第一页等

@GetMapping("{currentPage}/{pageSize}")
public Result getPage(@PathVariable int currentSize,@PathVariable int pageSize){
    IPage<Book> page = bookService.getPage(currentSize,pageSize);
    if(currentPage > page.getPages()){
        page = bookService.getPage((int)page.getPages(),pageSize);
    }
    return new Result(true,page);
}

elementUI+条件查询

分页+条件

<div class="filter-container">
    <el-input placeholder="图书类别" class="filter-item" v-model="pagination.type"></el-input>
    <el-input placeholder="图书名称" class="filter-item" v-model="pagination.name"></el-input>
    <el-input placeholder="图书描述" class="filter-item" v-model="pagination.desc"></el-input>
    <el-button @click="getA1l()" class="dalfBut">査询</el-button>
    <el-button type="primary" class="butT" @click="handlecreate()">新建</e1-button>
</div>

data: {
    dataList:[],
    pagination: {
        currentPage: 1,
        pageSize:10,
        total:0,
        type:"",
        name:"",
        desc:""
    }
}

/books/1/10?type=?&name=?&desc=?

html

getAll(){
    param = "?type="+this.pagination.type;
    param += "&name="+this.pagination.name;
    param += "&desc="+this.pagination.desc;
    axios.get("/books/"+this.pagination.currentPage+"/"+this.pagination.pageSize+param).then((res)=>{
        this.pagination.currentPage=res.data.data.size;
        this.pagination.pageSize=res.data.data.size;
        this.pagination.total=res.data.data.total;
        this.dataList = res.data.data.records;
    })
}

controller

@GetMapping("{currentPage}/{pageSize}")
public Result getPage(@PathVariable int currentSize,@PathVariable int pageSize,Book book){
    IPage<Book> page = bookService.getPage(currentSize,pageSize,book);
    if(currentPage > page.getPages()){
        page = bookService.getPage((int)page.getPages(),pageSize,book);
    }
    return new Result(null != page,page);
}

js

@GetMapping("{currentPage}/{pageSize}")
public IPage<Book> getPage(@PathVariable int currentPage,@PathVariable int pageSize){
    return bookMapper.getPage(currentPage,pageSize);
}

Service

public interface IBookService extends IService<Book>{
    IPage<Book> getPage(int currentPage,int pageSize);
    IPage<Book> getPage(int currentPage,int pageSize,Book book);
}

@Service
public class IBookServiceImpl extends ServiceImpl<BookMapper,Book> implements IBookService{
    @Autowired
    private BookMapper bookMapper;
    
    @Override
    public IPage<Book> getPage(int currentPage,int pageSize){
        Page Page = new Page(currentPage,pageSize);
        bookMapper.selectPage(Page,null);
        return Page;
    }
    
    @Override
    public IPage<Book> getPage(int currentPage,int pageSize,Book book){
        Page Page = new Page(currentPage,pageSize);
        LambdaQueryWrapper<Book> lqw = new LambdaQueryWrapper<Book>();
        lwq.like(String.isNotEmpty(book.getName()),Book::getName,book.getName());
        lwq.like(String.isNotEmpty(book.getType()),Book::getType,book.getType());
        lwq.like(String.isNotEmpty(book.getDesc()),Book::getDesc,book.getDesc());
        return bookMapper.selectPage(Page,lwq);
    }
}

判断拼接，具体看业务情况

param = "?query";
param = "&type="+this.pagination.type;
param += "&name="+this.pagination.name;
param += "&desc="+this.pagination.desc;
console.log(param);