Node学习（九）05-管理系统之英雄列表分页——分页的sql查询语句 & 服务端get接口写法、ajax请求数据之get请求写法 & Math.ceil()函数-返回大于或等于一个给定数字的最小整数

Node学习（九）05-管理系统之英雄列表分页——分页的sql查询语句 & 服务端get接口写法、ajax请求数据之get请求写法 & Math.ceil()函数-返回大于或等于一个给定数字的最小整数

七、分页

7.1 分页原理

必须的两个条件：

• 分页的页码（当前是第几页） — page
• 每页显示多少条 — pageNum

查询的SQL为：

-- 第一页
-- select * from heroes limit 0, 5

-- 第二页
-- select * from heroes limit 5, 5

-- 第三页
-- select * from heroes limit 10, 5

-- 第page页
select * from heroes limit (page-1) * pageNum, pageNum

分页效果

7.2 修改getHeroes接口，将SQL换成通用的sql

app.js

// 1. 取出所有的英雄
app.get('/getHeroes', (req, res) => {
    
    
    let page = 1; // 当前的页码
    let pageNum = 5;  // 每页显示多少条
    // let sql = `select * from heroes limit ${(page-1) * pageNum}, ${pageNum}`;
    let sql = 'select * from heroes limit ' + (page-1) * pageNum + ',' + pageNum;

    db(sql, null, (err, result) => {
    
    
        if (err) throw err;
        // 接口响应，响应查询到的结果
        res.send(result);
    });
});

执行 git add . 和 git commit -m '修改getHeroes接口，使用通用的SQL'

7.3 基本实现分页

分页请求

前端index.html中，使用分页插件 twbs-pagination 。

做法：

修改前端代码，基本实现分页：

1. 向接口 getHeroes 发送请求的时候，要传递page参数，默认是1即可

2. 封装向接口 getHeroes 发送请求的代码为loadData函数，并且先调用一次

3. 将分页的代码封装成page函数，当点击页码的时候，修改params参数，并再次调用loadData

4. 在loadData中，当处理完当前页的数据之后，调用一次page

5. 为了不重复调用page函数，所以加入flag开关控制

到目前为止，无论点击哪个页码，服务器总是返回第1页的数据，是因为服务器接口，并没有接受page参数，所以修改getHeroes接口：

执行 git add . 和 git commit -m '基本实现了分页'

7.4 修改getHeroes接口，获取总页数

查询总页数的SQL： select count(*) c from heroes [where ...]

修改接口：

注：

Math.ceil()   // 函数返回大于或等于一个给定数字的最小整数。

Math.ceil(null) ，// 返回整数 0 
Math.ceil(0.95)  // 1
Math.ceil(4)  // 4
Math.ceil(7.004)  // 8
Math.ceil(-7.004) // -7  // 如果是负数的话，那么获得整数就是舍去掉小数部分的整数了

1

2

前端index.html中，修改代码：

执行 git add . 和 git commit -m '完成分页，加入总页数'

7.5 模糊搜索

前端点击 “查找” 的时候，获取输入框搜索的关键字。然后将它发送给服务器：

<script>
    /  模糊搜索
    $('.btn-default').click(function (e) {
    
    
        e.preventDefault();
        // 获取到关键字。并使用trim方法去掉两边的空格
        var serach = $('#search').val().trim();
        flag = true;
        params.page = 1;
        params.keywords = serach;
        loadData();
    });
</script>在这里插入代码片

搜索的时候，肯定先显示搜索到的第一页，所以设置page=1。并且要设置上搜索的关键字。设置完毕，从新发送请求，即调用loadData();

服务端，修改查询的SQL即可：

执行 git add . 和 git commit -m '模糊搜索，差一个分页页码'