分页查询_pageresult是什么依赖-CSDN博客

本文链接：https://blog.csdn.net/weixin_44490884/article/details/117265659

springboot+vue+mybatis+axios+pagehelper分页查询

前言

此项目注重逻辑，前端样式不太美观，并且需要从官网上下载vue.js、axios.js文件

运行截图

在这里插入图片描述

项目目录结构

在这里插入图片描述

访问路径

http://localhost:8008/main.html

一、创建数据库

-- ----------------------------
-- Table structure for placesvr
-- 数据太多，只复制了部分
-- ----------------------------
DROP TABLE IF EXISTS `placesvr`;
CREATE TABLE `placesvr` (
  `id` int NOT NULL,
  `name` varchar(255) DEFAULT NULL,
  `vrurl` varchar(255) DEFAULT NULL,
  `coverurl` varchar(255) DEFAULT NULL,
  `ctime` varchar(255) DEFAULT NULL,
  `author` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

INSERT INTO `placesvr` VALUES ('1', '华山', 'url1', '/cover/huashancover.jpeg', '2019-05-16', '明明就');
INSERT INTO `placesvr` VALUES ('3', '塔县', 'url2', '/cover/taxiancover.jpeg', '2017-05-16', '明明就');
INSERT INTO `placesvr` VALUES ('4', '大唐不夜城彩灯', 'url3', '/cover/tangdengcover.jpeg', '2014-07-15', '王小王');
INSERT INTO `placesvr` VALUES ('5', '老君山', 'url4', '/cover/laojuncover.jpeg', '2019-08-07', '屈依晨');
INSERT INTO `placesvr` VALUES ('6', '青海翡翠湖', 'url5', '/cover/feicunhucover.jpeg', '2019-12-01', '孔离');
INSERT INTO `placesvr` VALUES ('7', '龙门石窟', 'url6', '/cover/kucover.jpeg', '2017-12-25', '李白');
INSERT INTO `placesvr` VALUES ('8', '丽江古城', 'url7', '/cover/lichengcover.jpeg', '2019-06-15', '小白');
INSERT INTO `placesvr` VALUES ('9', '黄鹤楼', 'url8', '/cover/loucover.jpeg', '2014-02-03', '小新');
INSERT INTO `placesvr` VALUES ('10', '香格里拉', 'url9', '/cover/xiangcover.jpeg', '2019-11-10', '李婉');

二、引入依赖

 <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.4</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.23</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.20</version>
            <scope>provided</scope>
        </dependency>
        <!--分页插件-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.3.0</version>
        </dependency>

三、项目配置

#application.yml
server:
  port: 8008

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: 123456
    url: jdbc:mysql://localhost:3306/vrdemo?useUnicode=true&characterEncoding=utf-8&allowMultiQueries=true&useSSL=false&serverTimezone=GMT%2b8

mybatis:
  mapper-locations: classpath:mapper/*.xml
  type-aliases-package: edu.mm.vrdemo.javabean.VR

# pagehelper
pagehelper:
  helperDialect: mysql
  reasonable: true
  supportMethodsArguments: true
  params: count=countSql

四、编写entity层

VR.java

@Data
@ToString
@NoArgsConstructor
@AllArgsConstructor
public class VR {
    private int id;
    private String name;
    private String vrurl;
    private String coverurl;
    private String ctime;
    private String author;
}

PageResult.java

/**
 * @author 屈明明
 * @packagename edu.mm.vrdemo.javabean
 * @create 2021-05-24 17:30
 * 分页返回结果
 */
@Data
@ToString
@NoArgsConstructor
@AllArgsConstructor
public class PageResult {
    /**
     * 当前页码
     */
    private int pageNum;
    /**
     * 每页数量
     */
    private int pageSize;
    /**
     * 记录总数
     */
    private long totalSize;
    /**
     * 页码总数
     */
    private int totalPages;
    /**
     * 数据模型
     */
    private List<?> content;
}

PageRequest.java

/**
 * @author 屈明明
 * @packagename edu.mm.vrdemo.javabean
 * @create 2021-05-24 17:30
 * 分页请求
 */
@Data
@ToString
@NoArgsConstructor
@AllArgsConstructor
public class PageRequest {
    private int pageNum;//当前页码
    private int pageSize;//每页数量
}

五、编写工具类

public class PageUtils {
    /**
     * 将分页信息封装到统一的接口
     */
    public static PageResult getPageResult(PageRequest pageRequest, PageInfo<?> pageInfo) {
        PageResult pageResult = new PageResult();
        pageResult.setPageNum(pageInfo.getPageNum());
        pageResult.setPageSize(pageInfo.getPageSize());
        pageResult.setTotalSize(pageInfo.getTotal());
        pageResult.setTotalPages(pageInfo.getPages());
        pageResult.setContent(pageInfo.getList());
        return pageResult;
    }
}

六、编写mapper层

@Mapper
public interface VRMapper {
    public List<VR> selectPage();//分页查询
}

七、编写xxxmapper.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="edu.mm.vrdemo.mapper.VRMapper">
    <select id="selectPage" resultType="edu.mm.vrdemo.javabean.VR">
        select * from placesvr
    </select>
</mapper>

八、编写service层

@Service
public class VRService {
    @Autowired
    public VRMapper vrMapper;
    /**
     * 调用分页插件完成分页
     */
    private PageInfo<VR> getPageInfo(PageRequest pageRequest) {
        int pageNum = pageRequest.getPageNum();
        int pageSize = pageRequest.getPageSize();
        PageHelper.startPage(pageNum, pageSize);
        List<VR> pageData = vrMapper.selectPage();
        return new PageInfo<VR>(pageData);
    }
    public PageResult findPage(PageRequest pageRequest) {
        return PageUtils.getPageResult(pageRequest, getPageInfo(pageRequest));
    }
}

九、编写controller层

@Controller
@RequestMapping("/vr/")
public class VRController {
    @Autowired
    public VRService vrService;
    @PostMapping("findPage")
    @ResponseBody
    public Object findPage(@RequestBody PageRequest pageQuery) {
        return vrService.findPage(pageQuery);
    }
}

十、前端页面

main.html如下

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
    <title>主页</title>
</head>
<body>
<script src="js/vue.min.js"></script>
<script src="js/axios.js"></script>
<div id="app2" style="background:white">
    <table>
        <thead>
        <th>id</th>
        <th>景区</th>
        <th>封面</th>
        <th>作者</th>
        <th>上传时间</th>
        <th colspan="3">操作</th>
        </thead>
        <tbody>
        <tr v-for="item in pageList">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td><a :href="item.vrurl">
                <img :src="item.coverurl" style="width:20px;height: 20px">
            </a></td>
            <td>{{item.author}}</td>
            <td>{{item.ctime}}</td>
            <td><input type="button" value="删除"></td>
            <td><input type="button" value="修改"></td>
            <td><input type="button" value="详情"></td>
        </tr>
        </tbody>
    </table>
    <!--分页-->
    <div class="page-bar">
        <ul>
            <li v-show="pageNum>0"><a @click="prev">上一页</a></li>
            <li v-for="item in indexs">
                <a @click="findByPage(item)">{{item}}</a>
            </li>
            <li v-show="pageNum<totalPages"><a @click="next">下一页</a></li>
            <li style="cursor:not-allowed;"><a>共<i>{{totalPages}}</i>页</a></li>
        </ul>
    </div>
</div>
<hr>
<script>
    var app2 = new Vue({
        el: "#app2",
        data: {
            pageList:[],
            totalPages:'',//总页数
            totalSize:'',//记录数
            pageNum:1,//当前页码
            pageSize:5
        },
        created: function () {
            this.findByPage(1);
        },
        methods: {
            findByPage:function(index){
                let url = "vr/findPage";
                let page=index;
                let param={"pageNum":page,"pageSize":5};
                let that=this;
                axios.post(url,param)
                    .then(function (response) {
                       that.pageList= response.data.content;
                       that.totalPages= response.data.totalPages;
                       that.totalSize=response.data.totalSize;
                       that.pageNum=response.data.pageNum;
                        //console.log(response);
                    }, function (err) {
                        console.log(err);
                    })
            },
            prev:function(){
                this.pageNum--;
                this.findByPage(this.pageNum);
            },
            next:function(){
                this.pageNum++;
                this.findByPage(this.pageNum);
            },
        computed: {
            //分页
            indexs: function () {
                let left = 1;
                let right = this.totalPages;
                let ar = [];
                while (left <= right) {
                    ar.push(left);
                    left++;
                }
                return ar;
            }
        }
    })
</script>
</body>
</html>

最后，关注我，不迷路！！