springboot + vue 实现oracle数据库中的分页功能_vue+springboot+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文件贴出来，如果不知道项目的依赖的话，直接复制上去就好了。

<?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 mapper
        PUBLIC "-//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} )
        WHERE
        rn &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 <= #{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{
 
    @Autowired
    playerMapper playerMapper;
 
 
 
    @Override
    public List<player> 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<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 {
 
    @Autowired
    PlayerServiceImpl 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.pageCount
      const pageSize = this.pages.pageSize
      console.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.player
        this.total = res.data.playerCount
      })
    },
 
    handleSizeChange(val) {
      this.pages.pageSize = val
      this.getPlayer()
      //this.pageList()
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pages.pageCount = val
      this.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,我这里前端写的不太详细，如果是新手的话，还得需要自己去创建项目，怎么访问都要自己去弄明白来的，这里就只贴出一个最后的效果图以及一些简单的说明

        第二页：

        每页十条：

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