springboot + vue 实现oracle数据库中的分页功能

        个人想要记录一些比较常用的网页端功能。所以写这一篇博客记录一下。

        话不多说，开始吧。

        首先是，数据库的设计，没什么设计，就是一张表而已，用做分页功能的记录就足够了。不过要说的是oracle数据库与mysql数据的分页功能不同，oracle数据里面是不支持limit语法的，所以一开始就让我有点懵，不过涉猎一番之后，还是有办法写出于mysql数据库类似的sql语句。

        创建一个oracle数据表：player

CREATE TABLE "C##GAME"."player" 
   (	"p_id" NUMBER(*,0) NOT NULL ENABLE, 
	"p_name" VARCHAR2(38) NOT NULL ENABLE, 
	"p_type" VARCHAR2(38) NOT NULL ENABLE, 
	"p_hp" NUMBER(38,0) NOT NULL ENABLE, 
	"p_mp" NUMBER(38,0), 
	"p_defense" NUMBER(38,0), 
	"p_attack" NUMBER(38,0), 
	"p_critical_hit" NUMBER(38,0), 
	"p_miss" FLOAT(126), 
	"p_user_id" NUMBER(38,0), 
	"p_create_time" DATE, 
	 PRIMARY KEY ("p_id")
  USING INDEX PCTFREE 10 INITRANS 2 MAXTRANS 255 COMPUTE STATISTICS 
  STORAGE(INITIAL 65536 NEXT 1048576 MINEXTENTS 1 MAXEXTENTS 2147483645
  PCTINCREASE 0 FREELISTS 1 FREELIST GROUPS 1
  BUFFER_POOL DEFAULT FLASH_CACHE DEFAULT CELL_FLASH_CACHE DEFAULT)
  TABLESPACE "GAME"  ENABLE, 
	 CONSTRAINT "p_user_id" FOREIGN KEY ("p_user_id")
	  REFERENCES "C##GAME"."user" ("user_id") ON DELETE SET NULL ENABLE
   ) SEGMENT CREATION IMMEDIATE 
  PCTFREE 10 PCTUSED 40 INITRANS 1 MAXTRANS 255 
 NOCOMPRESS LOGGING
  STORAGE(INITIAL 65536 NEXT 1048576 MINEXTENTS 1 MAXEXTENTS 2147483645
  PCTINCREASE 0 FREELISTS 1 FREELIST GROUPS 1
  BUFFER_POOL DEFAULT FLASH_CACHE DEFAULT CELL_FLASH_CACHE DEFAULT)
  TABLESPACE "GAME" ;

CREATE OR REPLACE EDITIONABLE TRIGGER "C##GAME"."Z_Z" BEFORE INSERT ON "C##GAME"."player" REFERENCING OLD AS "OLD" NEW AS "NEW" FOR EACH ROW 
begin 
	select "z_z".nextval into :new."p_id" from dual; 
end;
ALTER TRIGGER "C##GAME"."Z_Z" ENABLE

        这个表中是后面是写了一个触发器，用于id的自增，oracle数据库的自增不像mysql那样可以直接选择自增选项。得要自己写一个触发器实现主键自增。

        创建完了之后就是这个样子的：

        这些数据自己填一下就好了。

        数据库表创建好了，那就是开始后端的Springboot项目的创建了，创建项目的话，这里的就不一一详细的写了，我把pom文件贴出来，如果不知道项目的依赖的话，直接复制上去就好了。

    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        2.7.8
         
    
    com.lhh
    record
    0.0.1-SNAPSHOT
    record
    record
    
        1.8
    
    
        
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.springframework.boot
            spring-boot-devtools
            runtime
            true
        
        
            com.oracle.database.jdbc
            ojdbc8
            runtime
        
        
            org.projectlombok
            lombok
            true
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        

        
        
            com.baomidou
            mybatis-plus-boot-starter
            3.1.2
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
                
                    
                        
                            org.projectlombok
                            lombok
                        
                    
                
            
        
    

        先连接一下数据库：这是在application.yml文件里面配置的

  

        我创建了两个配置文件一个是application.yml，用于连接数据库；另外一个是application.properties文件，用于配置端口，mybatis-plus扫描mapper文件的路径等等，其实可以配置在一个文件里面，但是我习惯了，所以暂时就先这样吧。下面是application.properties文件的配置：

        之后在创建一些实体类包，Service包，mapper包，controller包等，最终的整个项目的目录就是这个样子的。

        

        目录创建完了，开始写代码，先在mapper中创建一个playerMapper接口文件,代码如下

package com.lhh.record.mapper;

import com.lhh.record.entity.player;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;
import org.springframework.web.bind.annotation.RequestBody;

import java.util.List;

@Mapper
@Repository
public interface playerMapper {

    List playersList();
    
    List pagePlayer(@Param(value = "page") int page, @Param(value = "pageSize") int pageSize);

    int count();

}

        playerList用于查询所有的数据，暂时不用管用不上。

        第二个接口pagePlayer就是用于实现分页的方法，需要前端传两个参数过来，一个是当前页面page，一个是页面大小pageSize;

        第三个接口count()则是查询数据的总条数，用于在前端计算可以产生多少页。

        mapper接口写完，就在resources资源目录下mapper包中创建一个playerMapper.xml文件。用于写需要的sql语句，对应上上面写的mapper接口方法，id中填写的就是src目录下mapper包中的接口名称，例如下面的代码

    
        
        
        
        
        
        
        
        
        
        
        
    
    
        select * from "player"
    
    
    



    
        SELECT
        *
        FROM
        ( SELECT t.*, ROWNUM rn FROM ( SELECT * FROM "player" ORDER BY "p_id" ASC ) t WHERE ROWNUM <= #{pageSize} )
        WHERE
        rn > #{page}
    

    
        select count(*) as count from "player"
    

        最主要的方法就是pagePlayer下面的sql语句，因为oracle是没有limit语句的，得用rownum函数，rownum函数是返回编号的函数，第一条就返回1，所以返回前十条就rownum<=10,这里就是暂时解析一下这条语句，如果想要了解rownum函数，还是请自行百度吧。回到语句里，从里面到外面说 select * from “play” order by "p_id" asc 就是根据查询所有的数据并根据“p_id”进行升序排序，asc就是升序，desc就是降序。第一步是进行排序，第二根据查询出来已经排好序的数据看做是一个新的表t，在查询t表中的所有数据，t表就是原来的play表，就是已经升序好了。而中间那层语句：

SELECT t.*, ROWNUM rn FROM ( SELECT * FROM "player" ORDER BY "p_id" ASC ) t WHERE ROWNUM <= #{pageSize}

        就是查询t表的所有数据以及rownum函数（返回的是一个编号）在后面加个rn,表示用rn的名称代替rownum函数，where后面，rownum<=#{pageSize}就是表示rownum函数返回的编号要小于前端的提交的页面大小，不过这里的pageSzie不是真正的页面大小，需要java代码中进行计算，后面会说到，还有就是这里的"<"的符号表示小于号，如果不懂，可以去百度一下mybatis的大于号小于号的写法，这里不在多说了。

        继续说where后面小于等于pageSzie,也就是说从第一条到pageSize参数的那条，例如pageSize=10,就是说从第一条到第十条；而此时的rn返回的数据是第一条数据后面对应rn就是1，而第十条对应的rn就是10了，如图所示：

        最后再说最后一层吧，就是查询已经限制十条数据了的t表的所有数据并再进一步的进行做输出限制，而后面的where条件语句rn>#{page}就是从page+1条开始输出，例如，page=1，就是从第二条开始到pageSize（假设pageSize=10）的条数，就是从2条开始到第10条了，这样子就可以进行限制从第几条到第几条的输出了。这样可以根据前端传进来的参数进行分页输出条数了。

        对了，光顾着解释sql语句了，其实第一步的话应该从创建表的实体类开始的，根据上面的目录，在entity下创建一个player的实体类，类名头字母应该是要大写的，这里忘了改了，还是得规范一下代码，不然的话读起来会非常难受的。player类里面的代码为：

package com.lhh.record.entity;

import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.sql.Date;

@Data
@AllArgsConstructor
@NoArgsConstructor
@TableName(value = "\"player\"")
public class player {

    @TableId(value = "\"p_id\"")
    private long pId;

    @TableField(value = "\"p_name\"")
    private String pName;

    @TableField(value = "\"p_type\"")
    private String pType;

    @TableField(value = "\"p_hp\"")
    private long pHp;

    @TableField(value = "\"p_mp\"")
    private long pMp;

    @TableField(value = "\"p_defense\"")
    private long pDefense;

    @TableField(value = "\"p_attack\"")
    private long pAttack;

    @TableField(value = "\"p_critical_hit\"")
    private long pCriticalHit;

    @TableField(value = "\"p_miss\"")
    private float pMiss;

    @TableField(value = "\"p_user_id\"")
    private long pUserId;

    @TableField(value = "\"p_create_time\"")
    private Date pCreateTime;

}

        这里我用了lombok，不然的话就要自己写getter、setter方法，不了解lombok的话，就去了解一下吧，还是挺好用的。

        我们继续一层一层往下，接下来就是Service层了，不多说先贴代码：

package com.lhh.record.service;


import com.lhh.record.entity.player;

import java.util.List;

public interface PlayerService {


    /***
     * 分页查询
     * @param page 从第几条开始显示
     * @param pageSize 页面大小，显示几条数据
     * @return pageSize条数的数据
     */
    List pagePlayer(int page, int pageSize);

    /***
     * 查询总条数
     * @return int总条数
     */
    int count();

    List playerList();
}

        先写一个playerService接口，然后需要playerServiceImpl类来实现这些方法，代码为：

package com.lhh.record.service;


import com.lhh.record.entity.player;
import com.lhh.record.mapper.playerMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.sql.Date;
import java.util.List;

@Service
public class PlayerServiceImpl implements PlayerService{

    @Autowired
    playerMapper playerMapper;



    @Override
    public List pagePlayer(int page, int pageSize) {
        int pageCount = (page-1)*pageSize;
        pageSize = page * pageSize;
        return playerMapper.pagePlayer(pageCount,pageSize);
    }

    @Override
    public int count() {
        return playerMapper.count();
    }

    @Override
    public List playerList() {
        return playerMapper.playersList();
    }
}

        这里主要看pagePlayer这个方法，接收从前端传来的page（当前页面），pageSize（页面大小），这里处理了一下pageCount传到最后的sql语句里面的#{page}参数，就是说这里的pageCount 就是等于sql语句了page了，而这个我们第一页的话肯定是从第一条开始，但是数据库下表是从0开始的是，所以说前端传来的page需要减去1，再乘以当前页面大小pageSize,就是从第几条开始了，例如前端传来（page，pageSize）为 （1,10），那么传到sql语句里面的数值就是page = （1-1）* 10 = 0，说明是从第一条开始（这里面page为0就是下标为0 的第一条）,然后是pageSize = 1*10 = 10,就是从0~10条的数据了，如果是（2,10），那么就是page = （2-1）* 10 就是=10，从第十条开始到pageSize = 2 * 10 = 20 到第二十条了。所以这方法里面进行这个操作的。

        而count方法则是查询总条数，用于分页可以分多少页；而第三个方法暂时用不上，所以不用看了。

        写完了Service就开始最后一个controller层的编写了，前端传过来的参数就是从这里接收，然后一步一步往下传的，所以如果接收不到参数，那么就不可能进行后面的操作了。而需要先创建一个playerController类，代码为：

package com.lhh.record.controller;


import com.lhh.record.entity.player;
import com.lhh.record.service.PlayerServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletRequest;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
@CrossOrigin
public class PlayerController {

    @Autowired
    PlayerServiceImpl playerService;


    @PostMapping (value = "/findPagePlayer")
    public Map findPagePlayer(int page, int pageSize){

        Map playerMap = new HashMap();
        List players = playerService.pagePlayer(page,pageSize);
        playerMap.put("player",players);
        int count = playerService.count();
        playerMap.put("playerCount",count);
        return playerMap;

    }

    @GetMapping(value = "/playerList")
    public Map playerList(){
        Map playerList = new HashMap();
        List players =  playerService.playerList();
        playerList.put("playerList",players);
        return playerList;
    }

}

        第二个接口不用看，主要是第一个，我返回了一个map，前端只要找到了player，就可以取到数据了，而我把count（也就是总条数）也添加进了这个map里面，只要找到键值对的键playerCount就可以获取到总条数了。

        大概整个后端都还是比较详细的说明了，但是前端的话就不会那么详细了，本人是做后端，对于前端的一些东西可能就是只有了解一些，应该是不会特别详细的说明前端了，前端是用vue做的，至于创建vue项目，网上也有挺多资料的，大家也可以参考，我这里可能只会贴上前端分页功能的页面代码了，因为就是一个分页功能，所以是比较简陋，如果说是遇到报错的，可能大家需要自己去查找原因了。当然也可以留言，但是我不一定有时间及时回复的，所以还是靠自己解决bug吧。

        好了，话不多说！开始贴代码，就是一个分页的页面：

        主要是getPlayer方法传参数调接口，主要是传参数（pageCount,pageSize）,调用http://localhost:8888/findPagePlayer接口，调用之后将查询出来的数据，赋值到tableData上，而total主要用于存储接收的总条数，前面也说过了，返回的使用个map，可以通过键player找到列表数据，可以通过键playerCount找到总条数并赋值。

        下面的两个方法是使用分页功能组件自带的，分别表示在当前页面和页面条数改变是会触发，将改变的数值再一次传到方法getPlayer里面，进行再一次的请求，然后返回对应的数据，在页面进行显示，最终的效果图是这样的

        我这里面访问的页面url是这样：http://localhost:8080/#/player;大家得根据自己实际情况访问前端的url,我这里前端写的不太详细，如果是新手的话，还得需要自己去创建项目，怎么访问都要自己去弄明白来的，这里就只贴出一个最后的效果图以及一些简单的说明

        第二页：

        每页十条：

        好了，这篇文章也是写了挺久的了，虽然对于我来时可能不需要那么详细的说明了，一开始我就是想记录一下那一条sql语句的，没想到写着写着就把所有的东西都写上去了，也行吧，方便一些刚入门，或者是对oracle数据库不太熟悉的有一些参考吧 。