### 新建模板文件 比如我们想在views目录下的tplay文件夹下新建一个index.html,这个index.html主要完成列表功能 ~~~ <div class="tplay-body"> </div> ~~~ 我们只要写一对div标签,并定义其class="tplay-body",这样我们的一个页面就初步建成了,剩下的就是在这对div标签里书写需要的html代码。 ### 建一个Layui数据表格 ~~~ <div class="tplay-body"> <table id="tplay-admin" lay-filter="tplay-admin"> </table> </div> ~~~ > 注意:数据表格的id和lay-filter千万不要忘记,后面会有大作用 > 之后在页面的底部加入js代码 ~~~ <script type="text/javascript"> layui.use(['table', 'apiconfig'], function(){ var $ = layui.$ //引入jq扩展模块 ,table = layui.table //引入layui的表格模块 ,config = layui.apiconfig; //引入config扩展模块 table.render({ elem: '#tplay-admin' //表格 id ,url: config.domain+'/admin/system/index' //配置文件里的domain配置+接口地址 ,page: true //开启分页 ,limit:15 //默认每页条数 ,cols: [[ {type: 'checkbox', fixed: 'left'} ,{field: 'key', title: 'key'} ,{field: 'name', title: '名称'} ,{field: 'value', title: '值'} ,{field: 'create_time', title: '创建时间'} ]] ,skin: 'line' }); }); </script> ~~~ 这样就完成了一个数据表格的搭建,其实这些都是layui的使用,不明白的可参考layui的开发文档[layui开发文档](http://www.layui.com/doc/) > 当然了,我们刚建好的这个html文件还是不能直接被访问到的,我们需要在/public/admin/api/routes.json文件中给这个html文件配置访问路由后才可被访问。