Vue+axios 整合 layui+laypage实现真分页_梁云亮的博客-程序员秘密

技术标签: Vue  真分页  layui+laypage  Vue+axios  Vue整合laypage真分页  

说明

  • Vue数据绑定
  • axios请求服务器端数据
  • layui提供表格样式
  • laypage提供分页

整合效果

在这里插入图片描述

代码

创建项目,导入

在这里插入图片描述

服务器端代码

  • 数据库脚本
CREATE TABLE `tb_dept`  (
  `deptno` tinyint(2) UNSIGNED NOT NULL  COMMENT '部门编号',
  `dname` varchar(14) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '部门名称',
  `loc` varchar(13) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '部门地址',
  PRIMARY KEY (`deptno`) USING BTREE
) ENGINE = InnoDB  CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;
  • Maven依赖
<dependency>
    <groupId>junit</groupId>
    <artifactId>junit</artifactId>
    <version>4.12</version>
</dependency>
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>8.0.18</version>
</dependency>
<dependency>
    <groupId>javax</groupId>
    <artifactId>javaee-api</artifactId>
    <version>8.0.1</version>
</dependency>
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.62</version>
</dependency>
  • Dept.java
public class Dept {
    
    private Integer deptno;
    private String dname;
    private String loc;

    //……getter/setter、默认构造方法、全参构造方法
}
  • PageBean.java
public class PageBean<T> {
    
    /**
     * 每页显示的条数
     */
    private long pageSize = 10;
    /**
     * 当前的页码
     */
    private long pageNum;
    /**
     * 一共有多少条记录
     */
    private long total;
    /**
     * 一共有多少页
     */
    private long pages;
    /**
     * 每一页所显示的数据
     */
    private List<T> records;

    //……getter/setter、默认构造方法、全参构造方法
}
  • DBUtil.java
public final class DBUtil {
    
    private static final String url = "jdbc:mysql://localhost:3306/db_test?useSSL=false&serverTimezone=GMT%2B8";//连接字符串
    private static final String name = "root";    //用户名
    private static final String pass = "root"; //密码

    static {
    // 1、加载驱动
        try {
    
            Class.forName("com.mysql.cj.jdbc.Driver");
        } catch (ClassNotFoundException e) {
    
            throw new ExceptionInInitializerError(e);
        }
    }

    public static Connection getConnection() throws SQLException {
    
        return DriverManager.getConnection(url, name, pass);
    }
     public static void free(ResultSet rs, Statement stmt, Connection conn) {
    
        try {
     // 建议采用这种形式来释放资源,因为finally里面的一定会被释放
            if (rs != null) {
    
                rs.close();
            }
        } catch (SQLException e) {
    
            e.printStackTrace();
        } finally {
    
            try {
    
                if (stmt != null) {
    
                    stmt.close();
                }
            } catch (SQLException e) {
    
                e.printStackTrace();
            } finally {
    
                if (conn != null) {
    
                    try {
    
                        conn.close();
                    } catch (SQLException e) {
    
                        e.printStackTrace();
                    }
                }
            }
        }
    }
}
  • DeptService.java
public class DeptService {
    
    public List<Dept> getAll() throws SQLException {
    
        List<Dept> depts = new ArrayList<>();
        Connection conn = DBUtil.getConnection();
        String sql = "select * from tb_dept";
        PreparedStatement ps = conn.prepareStatement(sql);
        ResultSet rs = ps.executeQuery();
        while (rs.next()) {
    
            depts.add(new Dept(rs.getInt("deptno"), rs.getString("dname"), rs.getString("loc")));
        }
        return depts;
    }

    public List<Dept> getWithPage(Integer pageNum, Integer pageSize) throws SQLException {
    
        List<Dept> depts = new ArrayList<>();
        Connection conn = DBUtil.getConnection();
        String sql = "select * from tb_dept limit ?,?";
        PreparedStatement ps = conn.prepareStatement(sql);
        ps.setInt(1, (pageNum - 1) * pageSize);
        ps.setInt(2, pageSize);
        ResultSet rs = ps.executeQuery();
        while (rs.next()) {
    
            depts.add(new Dept(rs.getInt("deptno"), rs.getString("dname"), rs.getString("loc")));
        }
        DBUtil.free(rs,ps,conn);
        return depts;
    }

    public int count() throws SQLException {
    
        Connection conn = DBUtil.getConnection();
        String sql = "select count(*) from tb_dept";
        PreparedStatement ps = conn.prepareStatement(sql);
        ResultSet rs = ps.executeQuery();
        rs.next();
        int res = rs.getInt(1);
        DBUtil.free(rs,ps,conn);
        return res;
    }
}
  • DeptServlet
@WebServlet(urlPatterns = "/dept")
public class DeptServlet extends HttpServlet {
    

    private DeptService deptService = new DeptService();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
        String op = req.getParameter("op");
        PrintWriter out = resp.getWriter();
        switch (op) {
    
            case "getAll":
                try {
    
                    getAll(out);
                } catch (SQLException e) {
    
                    e.printStackTrace();
                }
                break;
            case "getWithPage":
                try {
    
                    getWithPage(req, out);
                } catch (SQLException e) {
    
                    e.printStackTrace();
                }
                break;
            default:
                break;
        }
        out.flush();
    }

    private void getWithPage(HttpServletRequest req, PrintWriter out) throws SQLException {
    
        int pageNum = Integer.parseInt(req.getParameter("pageNum"));
        int pageSize = Integer.parseInt(req.getParameter("pageSize"));
        List<Dept> depts = deptService.getWithPage(pageNum, pageSize);
        PageBean<Dept> pageBean = new PageBean<>();
        pageBean.setPageNum(pageNum);
        pageBean.setPageSize(pageSize);
        pageBean.setRecords(depts);

        int count = deptService.count();
        pageBean.setTotal(count);
        pageBean.setPageSize(count % pageSize == 0 ? count / pageSize : count / pageSize + 1);
        out.write(JSON.toJSONString(pageBean));
    }

    private void getAll(PrintWriter out) throws SQLException {
    
        List<Dept> depts = deptService.getAll();
        PageBean<Dept> pageBean = new PageBean<>();
        pageBean.setRecords(depts);
        out.write(JSON.toJSONString(pageBean));
    }
}

前端页面代码(★★★★★)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    <body>
        <table class="layui-table" id="app">
            <thead>
                <tr>
                    <th>部门编号</th>
                    <th>部门名称</th>
                    <th>部门地址</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="dept in deptList">
                    <td>{
   {dept.deptno}}</td>
                    <td>{
   {dept.dname}}</td>
                    <td>{
   {dept.loc}}</td>
                </tr>
            </tbody>
        </table>
        <div id="laypage"></div>


        <script src="layui/layui.js"></script>
        <script src="layui/jquery.js"></script>
        <script src="js/vue.js"></script>
        <script src="js/axios.min.js"></script>
        <script type="text/javascript">
            let vm = new Vue({
      
                el: "#app",
                data: {
       //函数对象:用来接收数据(数据承载模型)
                    deptList: [],
                    pageNum: 1, //设置首页页码
                    pageSize: 10,  //设置一页显示的条数
                    total: 0,    //总条数
                    pages: 1 //一共多少页
                },
                methods: {
      
                    getData: function () {
      
                        axios.get('dept', {
      
                            params: {
      
                                op: 'getWithPage',
                                pageNum: this.pageNum,
                                pageSize: this.pageSize
                            }
                        }).then(res => {
      
                            this.deptList = res.data.records;
                            this.total = res.data.total;  //设置总条数
                            this.pages = res.data.pages;
                            console.info(res);
                            if (this.pageNum == 1) {
      
                                this.showPage();
                            }
                        }).catch(error => {
      
                            console.log(error);
                        });
                    },
                    showPage: function () {
      
                        layui.use('laypage', function () {
      
                            let laypage = layui.laypage;
                            //执行一个laypage实例
                            laypage.render({
      
                                elem: 'laypage',  //注意laypage是 ID,不用加 # 号
                                count: vm.total, //数据总数,从服务端得到
                                limit: vm.pageSize,   //每页条数设置
                                limits: [10, 20, 30],			//可选每页显示条数
                                curr: 1,                      //起始页
                                groups: 3,                     //连续页码个数
                                prev: '上一页',               //上一页文本
                                next: '下一页',                //下一页文本
                                first: 1,                    //首页文本
                                last: vm.pages,                   //尾页文本
                                layout: ['prev', 'page', 'next', 'limit', 'refresh', 'skip'],
                                jump: function (obj, first) {
        //触发分页后的回调
                                    //obj包含了当前分页的所有参数,第一次加载first为true
                                    console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
                                    console.log(obj.limit); //得到每页显示的条数
                                    vm.pageNum = obj.curr;  //改变当前页码
                                    vm.pageSize = obj.limit;
                                    //首次不执行,一定要加此判断,否则初始时会无限刷新
                                    if (!first) {
      
                                        vm.getData();  //加载数据
                                    }
                                }
                            });
                        });
                    }
                },
                created: function () {
      
                    this.getData();
                }
            });
        </script>
    </body>
</html>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lianghecai52171314/article/details/106260858

智能推荐

intellij idea 插件 ideaVim 用法_weixin_33883178的博客-程序员秘密

intellij idea 插件 ideaVim - Genji_ - 博客园http://www.cnblogs.com/nova-/p/3535636.html IdeaVim插件使用技巧 - - ITeye技术网站http://kidneyball.iteye.com/blog/1828427 Ctrl+Alt+V  --打开或关闭Idea Vim 当打开idea vim后,当前编...

【操作系统】CPU寄存器详解_公子无缘的博客-程序员秘密_cpu 寄存器

寄存器是 CPU 内部用来存放数据的一些小型存储区域,用来暂时存放参与运算的数据和运算结果以及一些 CPU 运行需要的信息。本文将归纳下面几中寄存器:目录一 通用寄存器二 标志寄存器三指令寄存器四 段寄存器五 控制寄存器六 调试寄存器七 描述符寄存器八 任务寄存器九 MSR寄存器一 通用寄存器 最常用的,也是最基础的有8个通用寄存器(注意一般看到的EAX、ECX也是指的这类寄存器再32位CPU上的拓展,另...

android studio : Could not find org.jetbrains.kotlin:kotlin-stdlib-jre7:1.5.31_Mars-xq的博客-程序员秘密

插件版本配置:仓库配置:ext.kotlin_version = '1.5.31'repositories { maven{ url 'https://maven.aliyun.com/repository/google'} maven{ url 'https://maven.aliyun.com/repository/gradle-plugin'} maven{ url 'https://maven.aliyun.com/repository/public'} ma

[USACO09OCT]热浪Heat Wave 洛谷 1339 最短路_A_loud_name的博客-程序员秘密

题目大意单源最短路···········分析写dij就好了, 但是 我写了dij+堆优化版本的。学习了如何使用c++的优先队列。ps:家里的键盘很恶心啊:f5、f7、f11太小了,按不到。 ps:c++的模板正在补全中。code//dij+堆优化版本#include<iostream>#include<cstring>#include<cstdio>#include<cmath>#i

【操作系统】用户态线程和内核态线程有什么区别?_吻雨_Beta的博客-程序员秘密_用户线程和内核线程

本文内容转载于“拉勾教育”的讲义,详细可看拉勾教育的课程。本人学习之余做做笔记,顺便当个搬运工。目录用户态线程和内核态线程有什么区别?什么是用户态和内核态?系统调用过程线程模型用户态线程内核态线程用户态线程和内核态线程之间的映射关系总结用户态线程和内核态线程有什么区别?这是一个组合型的问题,由很多小问题组装而成,比如:用户态和内核态是什么?用户级线程和内核级线程是一个怎样的对应关系?内核响应系统调用是一个怎样的过程?什么是用户态和内核态?Kernel

随便推点

vscode代码索引_VSCode 配置文件的变量索引_weixin_39646725的博客-程序员秘密

VS Code 的配置文件可以使用一些预设好的变量,更加方便的配置task和debugging。本文将简述一部分自带的变量,这些变量的基本解析格式 ${变量名}。预设变量${workspaceFolder} - VS Code 中打开的文件夹目录 (通常是项目的位置)${workspaceFolderBasename} - 没有任何斜杠 (/)的 VS Code 中打开的文件夹目录${file} ...

vs2010 c++项目创建简易教程_启迪小天才的博客-程序员秘密_vs2010怎么创建一个c项目

VS2010 C++输出hello worldVisual Studio是微软公司推出的开发环境,是目前流行的Windows平台应用程序开发环境。下面通过“hello world”程序介绍如何在Microsoft Visual Studio2010(VS2010)【更高版本的如小括号提示】集成开发环境中创建一个简单的C++程序。1、创建项目与源文件step1:打开VS2010,在VS2010主窗口的主菜单栏中选中文件(File),然后选择新建(New),单击项目(Project),如图所示。ste

操作系统之文件管理(一)_Ssaty.的博客-程序员秘密_操作系统文件管理代码

第1关:移动文件请通过Python编程,将一个目录下的文件全部移动到另一个目录下。import osimport shutildef movefiles(sourceDir, targetDir): # 请在此添加代码,补全函数movefiles 实现将sourceDir下文件移动到targetDir下的功能 #-----------Begin---------- if not os.path.exists(targetDir): os.mkdir(tar

英语歌曲:Home(家)_北京小辉的博客-程序员秘密

Another summer day 又一个夏天 Has come and gone away 来了又走 In Paris or Rome… 在巴黎或者罗马 But I wanna go home 但是我只想回家… uhmMay be surrounded by 可能被成千上万的人 A million people I 所拥戴追逐 但我 Still feel al

一元四次方程c语言程序编写,一元高次方程数值解法C程序实现探讨..doc_墨村拓哉的博客-程序员秘密

一元高次方程数值解法C程序实现探? 一元高次方程作为方程的一部分,对我们后续的学习起着相当重要的作用求解一元高次方程的根在计算数学方面既是难点也是重点。一元三次方程和一元四次方称有一般解法,但是比较复杂,且超过了一般的知识范围5次以及5次以上的代数方程,没有一般的公式解法。文我们了解了系数在有理数域且只有有理根的一元高次方程的解法技巧一元二次方程根式解的推敲了一元三次、四次方程的根式解;最后介绍了...

《Java代码审计》作者柯俊师傅告诉你为什么要学Java代码审计,不看是你的损失!..._Ms08067安全实验室的博客-程序员秘密

出品|MS08067实验室(www.ms08067.com)李柯俊:国内某知名企业实验室高级web研究员,《java代码审计:入门篇》作者,曾在freebuf、 安全客发表多篇高质量技术...

推荐文章

热门文章

相关标签