layui的table模块显示数据库的信息

1.先写连接数据库接口在index.js中

注意：接口中必须返回data数据，服务器发送给浏览器的数据就是json类型，无需再进行json转换，layui中的table接受的数据必须是json类型，所以无需进行json类型的转换


// 查询所有普通用户的接口，并返回所有数据
app.get("/alluser", function(req, res) {
    usersDB(`select * from user`, function(data) {
        res.json({ "data": data });
        console.log("返回的数据库数据2", data);
    })
})


2 .在html只用写入一个table表格，利用layui中的table模块 动态把数据显示在table表格中

<table id="demo" lay-filter="test"></table>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>

这里的link和script指的是layui文件夹里边自带的css和js，layui文件夹需要在官网中下载然后放到项目中。官网：Layui - 经典开源模块化前端 UI 框架

使用table模块之前，必须加载引入table模块，才能出来相应的效果


layui.use(['table', 'jquery'], function() {
            var table = layui.table,
                $ = layui.jquery;
 })


table模块中通过table.render() 方法 来渲染表格，并且指定html中的table容器。


table.render({
                elem: "#demo",
                url: "/alluser",
                parseData: function(res) {
                    return {
                        "code": 0,
                        "data": res.data
                    }
                },
                cols: [
                    [{
                        field: 'id',
                        title: "id",
                        sort: true
                    }, {
                        field: 'username',
                        title: "姓名",
                        sort: true
                    }, {
                        field: 'password',
                        title: "密码",
                        sort: true
                    }, {
                        field: 'age',
                        title: "年龄",
                        width: 100,
                        sort: true
                    }, {
                        field: 'sex',
                        title: "性别",
                        width: 70
                    }, ]
                ]

            })

table.render()参数：

  • elem：指定原始table容器的选择器，也就是table标签的id值，必填项
  • url：异步解耦相关参数，必填项。url的值可以是一个死的json数据文件，也可以是接口路径(数据库接口路径)，不论是json文件还是接口，其数据类型必须是 {"code":0,"data":[{数据}]}
  • cols：表头，是一个二维数组，必填
    cols表头的参数：
  • field:字段名，对应数据库中的字段名
  • title：标题名称，就是显示在table中的标题名字
  • width:每一个字段的宽度
  • 更多参数去layui官方文档查看：table 数据表格文档 - Layui
  • parseData：是一个回调函数，如果返回的数据不符合table组件规定的数据格式，就需要用到parseData回调函数
•  parseData: function(res) {
              return {
                   "code": 0,
                   "data": res.data
        }
     }
  • return就是返回给table标签的内容(自己理解的，不准确)
  • 回调函数的参数就是url接口返回的数据。
  • 在回调函数中必须设置code为0，不然就报错 ” 返回的数据不符合规范，正确的成功状态码应为："code": 0 “。
  • 设置data，就是返回给table组件的数据，类型必须是数组嵌套对象类型 [{ }],这里用数据库接口就必须用到res.data调用"/alluser"接口返回的数据。