持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

上一篇我们编写了第一个登录页面，并实现其他页面的登录访问限制，只允许管理人员访问这个网站。这一篇我们实现人员管理界面展示。

我已经设置了公开权限，大家都可以访问，项目每天的进度基本上是和文章更新一致的，或者略快于文章，我也是边写边发的，有些代码在后续版本说不定就更改了。代码的字数意义不大，有需要的都可以去项目上直接看，这里我都换成了图片。

一、界面

我们选用bootstrap-table插件来展示表格数据

将数据从后台提取出来，然后显示到页面里即可。

这是个前后端分离的页面，这里使用json接口的方式来创造数据。

二、后台提取数据过程

后台提取过程是这样设计的，将模型取出后，再经过我们的判断来处理数据，最后将数据封装成字典，字典再存到列表里面，即可得到数据。

这个接口可以先自行运行测试一下，先用get方式看看能不能成功得到数据，处理完成之后再加入到前端页面的脚本中。

前端的表格是用的插件。这个插件可以极大简化我们对表格的处理过程。

Columns属性即是我们需要的数据列。前面设置的是表格的属性，比较有用的就是设置数据条数、行间隔色等功能，还可以指定样式。

数据列在这里可以用title赋予中文名称，sortable和searchable表示该列能否被排序和搜索 formatter属性可以自己定义显示的效果。

$table.bootstrapTable('refresh')可以刷新这个表格

$('#table').bootstrapTable('resetView')操作可以重置表格的列宽

一开始我的页面点击切换菜单按钮的时候，表格的标题宽度没有进行自适应，查询后发现需要在bootstrap-table.js中找到：

this.resetHeader();

padding += this.$header.outerHeight();

这两行，并注释掉，在给这个按钮在这个页面加点击事件来'resetView'即可，我的版本是在7160行附近。

这样我们对用户管理页面上的展示功能就实现了。