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 2147483645PCTINCREASE 0 FREELISTS 1 FREELIST GROUPS 1BUFFER_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 LOGGINGSTORAGE(INITIAL 65536 NEXT 1048576 MINEXTENTS 1 MAXEXTENTS 2147483645PCTINCREASE 0 FREELISTS 1 FREELIST GROUPS 1BUFFER_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文件贴出来，如果不知道项目的依赖的话，直接复制上去就好了。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.7.8</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.lhh</groupId><artifactId>record</artifactId><version>0.0.1-SNAPSHOT</version><name>record</name><description>record</description><properties><java.version>1.8</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><scope>runtime</scope><optional>true</optional></dependency><dependency><groupId>com.oracle.database.jdbc</groupId><artifactId>ojdbc8</artifactId><scope>runtime</scope></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><!--  mybatis plus--><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.1.2</version></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><configuration><excludes><exclude><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></exclude></excludes></configuration></plugin></plugins></build></project>

先连接一下数据库：这是在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<player> playersList();List<player> 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包中的接口名称，例如下面的代码

<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.lhh.record.mapper.playerMapper"><resultMap id="PlayerMap" type="com.lhh.record.entity.player"><id column="p_id" property="pId"/><result column="p_name" property="pName"/><result column="p_type" property="pType"/><result column="p_hp" property="pHp"/><result column="p_mp" property="pMp"/><result column="p_defense" property="pDefense"/><result column="p_attack" property="pAttack"/><result column="p_critical_hit" property="pCriticalHit"/><result column="p_miss" property="pMiss"/><result column="p_user_id" property="pUserId"/><result column="p_create_time" property="pCreateTime"/></resultMap><select id="playersList" resultType="com.lhh.record.entity.player">select * from "player"</select><!--oracle分页写法 <-->
<!--    SELECT * FROM "player" ORDER BY "p_id" ASC   这一条是查询所有数据根据p_id排序-->
<!--    ROWNUM rn FROM ( SELECT * FROM "player" ORDER BY "p_id" ASC ) t WHERE ROWNUM &lt; = #{pageSize}  限制输出的pageSize条数-->
<!--    rn>#{page}  从page那条记录开始输出--><select id="pagePlayer" resultType="com.lhh.record.entity.player">SELECT*FROM( SELECT t.*, ROWNUM rn FROM ( SELECT * FROM "player" ORDER BY "p_id" ASC ) t WHERE ROWNUM &lt;= #{pageSize} )WHERErn &gt; #{page}</select><select id="count" resultType="java.lang.Integer">select count(*) as count from "player"</select>
</mapper>

最主要的方法就是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 &lt;= #{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<player> pagePlayer(int page, int pageSize);/**** 查询总条数* @return int总条数*/int count();List<player> 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{@AutowiredplayerMapper playerMapper;@Overridepublic List<player> pagePlayer(int page, int pageSize) {int pageCount = (page-1)*pageSize;pageSize = page * pageSize;return playerMapper.pagePlayer(pageCount,pageSize);}@Overridepublic int count() {return playerMapper.count();}@Overridepublic List<player> 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 {@AutowiredPlayerServiceImpl playerService;@PostMapping (value = "/findPagePlayer")public Map<String, player> findPagePlayer(int page, int pageSize){Map playerMap = new HashMap();List<player> players = playerService.pagePlayer(page,pageSize);playerMap.put("player",players);int count = playerService.count();playerMap.put("playerCount",count);return playerMap;}@GetMapping(value = "/playerList")public Map<String,player> playerList(){Map playerList = new HashMap();List<player> players =  playerService.playerList();playerList.put("playerList",players);return playerList;}}

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

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

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

<template><div style="align-content: center"><el-button type="primary" @click="getPlayer">主要按钮</el-button><el-table :data="tableData" style="width: 750px" height="750"><el-table-column prop="pname" label="昵称" width="120"></el-table-column><el-table-column prop="ptype" label="类型" width="120"></el-table-column><el-table-column prop="php" label="生命" width="120"></el-table-column><el-table-column prop="pmp" label="蓝量" width="120"></el-table-column><el-table-column prop="pattack" label="攻击" width="120"></el-table-column><el-table-column prop="pdefense" label="防御" width="120"></el-table-column></el-table><div class="block"><span class="demonstration">显示总数</span><!-- @size-change 每页条数@current-change 当前页--><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":page-sizes="[2,5,10]":current-page="this.pages.pageCount":page-size="this.pages.pageSize"layout="total, prev, pager, next, sizes,jumper":total=total></el-pagination></div></div></template><script>
import axios from "axios";
export default {data() {return {tableData: [{}],tableList:[],total: 0,pages:{pageCount:1,//当前页面pageSize:5 //页面条数}}},created(){this.getPlayer()　　　　//打开页面执行点击事件},methods: {getPlayer() {const that = this;const page = this.pages.pageCountconst pageSize = this.pages.pageSizeconsole.log(pageSize)let formData = new FormData()formData.append('page',page)formData.append('pageSize',pageSize)this.$axios.post("http://localhost:8888/findPagePlayer",formData).then(res => {this.tableData = res.data.playerthis.total = res.data.playerCount})},handleSizeChange(val) {this.pages.pageSize = valthis.getPlayer()//this.pageList()console.log(`每页 ${val} 条`);},handleCurrentChange(val) {this.pages.pageCount = valthis.getPlayer()//this.pageList()console.log(`当前页: ${val}`);},}
}
</script>

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

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

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