了解layui

官方链接：layui.sandbean.com/doc/index.h…

首先这个非常好用，也提高了开发的效率

编写html页面

这里的table表格是空的

使用layui

page为true开启分页，limit为一页显示几条数据，limits为按几条数据显示的数组。

数据接口使用express写
//查看导航页面数据
router.get("/query", (req, res) => {
  //先进行了判断，如果有值，那就取出，没值就置空
  let isSearch = req.query.search ? req.query.search : '';
  // console.log(isSearch);
  const { page, limit } = req.query
  // console.log(req.query);
  const offset = (page - 1) * limit
  //查询数据总条数
  var counts;
  //SELECT * FROM nav WHERE nav_name LIKE '%${isSearch}%'
  const sqlcount = `SELECT count(*) AS counts FROM nav  WHERE nav_name LIKE '%${isSearch}%';`
  db.query(sqlcount, (err, results) => {
    if (err) {
      return err;
    }
    counts = results[0].counts
  })
  //查询数据
  /**
   * SELECT * FROM nav limit 5
   * SELECT * FROM nav LIMIT 2,5 （数据开始的下标，截取的长度）
   * page = 1 ,limit = 5          下标0   (1-1)，  长度为5(0,1,2,3,4)
   * page = 2 ,limit = 5          下标5， (2-1)*5  长度为5(5,6,7,8,9)
   * page = 3 ,limit = 5          下标10，(3-1)*5 长度为(10,11,12,13,14)nav_name LIKE '%${search}%'
   */

  //查询导航名称
  /**
   * nav_name
   * selsect * from navlimit = search limit 0,5;
   */
  const sql = `SELECT * FROM nav WHERE nav_name LIKE '%${isSearch}%' LIMIT ${offset},${limit} ;`
  db.query(sql, (err, results) => {
    if (err) {
      return res.send({
        code: 1,
        msg: err.msg
      })
    }
    if (results.length) {

      return res.send({

        code: 0,
        msg: "数据查询成功",
        data: results,
        count: counts,
      })
    } else {
      return res.send({
        code: 1,
        msg: "数据信息查询失败"
      })
    }
  })
})

数据库数据

页面渲染结果