简单谈谈如何提高后台管理系统的易用性、可操作性和人性化程度

野性酷女 2021-09-14 07:42 794阅读 0赞

# 前言 #

笔者从学校做兼职到工作这些年已经开发了或者参与开发了十多套后台管理系统（后面简称BMS），而使用过的BMS就不计其数了。多数情况下，BMS主要面对的用户是公司内部人员，为了节约人力成本，BMS的开发通常没有前端工程师参与，或者前端工程师简单参与，这样就直接导致了BMS的易用性、可操作性和人性化程度都惨不忍睹，反正是自己人用嘛，凑合就行了。但是谁不希望自己做出来的系统能得到大家的肯定呢？然而现实往往是残忍的，工期在后面追着呢。在以下内容中，笔者根据多年经验总结，谈谈如何在保证进度的前提下，提高BMS的易用性、可操作性和人性化程度。由于篇幅原因，简单说说实现的原理，也算是抛砖引玉，让大家少走弯路。

# 开始 #

## 1、选一套美观、大气、易用、可扩展性高的模板 ##

放在第一条写是因为这条太重要了，这条走错，就只能一错到底，因为项目到中后期要更换模板是不可能 的。笔者曾经接手一套BMS，界面丑陋、漏洞百出，封装得特别死，想自己扩展功能非常麻烦，最奇葩的是，所有页面都是在主页通过在新的Tab标签里追加DOM方式打开，更多的就不说了，吐槽要适可而止。笔者推荐基于Bootstrap 3 的Metronic或者AdminLTE2，通过适当精简，很快就可以搭建一套优秀BMS前端框架。

## 2、列表页面 ##

BMS的列表页面基本上是三种形式：  
（1）分页列表：推荐 Bootstrap Table插件（[http://bootstrap-table.wenzhixin.net.cn/][http_bootstrap-table.wenzhixin.net.cn]），笔者进行了适当的扩展，可参考[http://blog.csdn.net/lhtzbj12/article/details/77170489][http_blog.csdn.net_lhtzbj12_article_details_77170489] ，结合官方提供的插件（[http://bootstrap-table.wenzhixin.net.cn/extensions/][http_bootstrap-table.wenzhixin.net.cn_extensions]）可以轻易的实现自定义排序、显示/隐藏列、保持分页参数等功能。  
（2）树形列表：推荐jquery-treetable插件([http://ludo.cubicphuse.nl/jquery-treetable/][http_ludo.cubicphuse.nl_jquery-treetable]), 原皮肤挺丑的，删除一部分css后，就会使用Bootstrap表格样式。  
（3）表单页面：采用ajaxfileupload在提交表单前就将文件（图片）上传并做格式验证，笔者对这个插件进行了修改，解决了BUG ，可参考[http://blog.csdn.net/lhtzbj12/article/details/76407956][http_blog.csdn.net_lhtzbj12_article_details_76407956]；使用jquery.validate进行验证；统一用ajax进行提交，可参考[http://blog.csdn.net/lhtzbj12/article/details/65442537][http_blog.csdn.net_lhtzbj12_article_details_65442537]；简单表单页面在父页中弹出，复杂的表单页面跳走（后面内容会提到如何保持父页面状态）

## 3、弹出层 ##

告别alert吧！推荐使用Layer([http://layer.layui.com/][http_layer.layui.com])，你想要的效果，它基本上都可以满足，而且可以扩展皮肤，以便于与已有的模板风格保持一致。为了统一效果，每次弹出层都从第一层页面弹出，即在弹出的页面里再次弹出时，使用parent.layer.open，这两个弹出层之间是可以进行数据传递的。

## 4、下拉菜单 ##

推荐使用 Bootstrap-select([http://silviomoreto.github.io/bootstrap-select/][http_silviomoreto.github.io_bootstrap-select])，与Bootstrap兼容得最好的下拉菜单插件。

## 5、页面状态保持 ##

简单点说，就是用户彻底离开某页面（关掉浏览器）后，再回到这个页面时仍然保存着离开的样子，下面只是解析实现原理，具休实现需要根据实现情况，笔者在实际项目中都简单封装成插件，使用起来特别简单。  
（1）分页列表：如果使用了Boostraptable就可以官方的cookie插件实现将当前页数、分页显示数量、显示/隐藏列等保存至cookie，这个插件是有BUG，笔者已经修复  
（2）树形列表：在展开、收缩事件里将展开的id保存至cookie，页面加载，从cookie读取，将相应的节点展开  
（3）滚动条位置：刷新前或者离开前将滚动条位置保存至cookie，页面加载时，从cookie读取并滚动到相应位置  
（4）搜索条件：一般都放到一个form表单，点击搜索按钮时将所有条件保存至cookie，打开页面时获取并附值  
（5）复杂交互界面：打开页面时将数据整体读取保存到前端页面，所有对数据的操作都在前端进行，每次在更改数据时，都将更改后的数据保存到localStorage里，最终保存时再保存到服务器。如果未保存到服务器端就离开页面然后返回页面时，从localStorage里读取数据，询问用户是否继续编辑，笔者简单封装了插件，便于对localStorage进行操作，可参考[http://blog.csdn.net/lhtzbj12/article/details/78277436][http_blog.csdn.net_lhtzbj12_article_details_78277436]

## 6、高亮提示 ##

在列表页，编辑某条数据结束后，刷新列表时，改变被编辑数据Dom元素的背景颜色，并闪动若干次，如果因为调整了排序导致数据跳到了可视区域外，则设置滚动条位置，使其出现在可以区域内

## 7、长时间任务进度显示 ##

涉及到导入数据等操作时往往需要很长时间，来一个loading层显然不是最好的方式，笔者采用多线程+AJAX+Redis，将任务状态保存在Redis里，实现适时进度显示，并且，离开页面后再回到页面，进度条继续显示，进行中时，可以进行暂停、继续、停止，实现步骤如下：  
（1）前端：页面打开时，ajax请求，获取Redis里的任务状态，任务状态如果是“进行中”，则禁用【导入】按钮（不让开始新的任务），设置setTimeout，每隔2s再次请求；如果是“空闲”，则隐藏进度条，显示【导入】按钮；  
（2）点击【导入】按钮发出请求；服务器端开启新线程进行导入任务，循环读取数据，每一轮循环结束后，更新任务进度；前端每隔2s ajax请求任务进度，更新进度条；  
![这里写图片描述][SouthEast]  
（3）任务循环进行中，点击【暂停】，Redis里任务状态更新为“暂停”，循环里发现状态为“暂停”则在子循环里反复获取任务状态，如果为“暂停”则继续子循环，如果为“进行中”或者“停止”（点击【继续】、【停止】更新Redis里的任务状态），则跳出子循环；  
![这里写图片描述][SouthEast 1]  
（4）循环里出现异常时将任务状态更新为“意外中断”，前端发现任务中断后，显示【强制关闭】按钮，点击【强制关闭】后将任务状态设置为“停止”；  
![这里写图片描述][SouthEast 2]  
（5）大循环结束后，判断是否因为【停止】而结束循环，不是则将任务状态更新为“完成”；  
（6）前端发现状态为“停止”或者“完成”，显示“停止”或者“完成”的状态3秒后，ajax请求，将任务状态更新为“空闲”。  
补充：这里的前端进度实时显示最好是用websocket实现，但是受浏览器、服务器等条件限制，笔者将进度状态保存至redis，ajax请求任务状态时从redis获取。

# 总结 #

暂时写到这里，将来有时间的话将里面的插件和难点详细介绍。

[http_bootstrap-table.wenzhixin.net.cn]: http://bootstrap-table.wenzhixin.net.cn/
[http_blog.csdn.net_lhtzbj12_article_details_77170489]: http://blog.csdn.net/lhtzbj12/article/details/77170489
[http_bootstrap-table.wenzhixin.net.cn_extensions]: http://bootstrap-table.wenzhixin.net.cn/extensions/
[http_ludo.cubicphuse.nl_jquery-treetable]: http://ludo.cubicphuse.nl/jquery-treetable/
[http_blog.csdn.net_lhtzbj12_article_details_76407956]: http://blog.csdn.net/lhtzbj12/article/details/76407956
[http_blog.csdn.net_lhtzbj12_article_details_65442537]: http://blog.csdn.net/lhtzbj12/article/details/65442537
[http_layer.layui.com]: http://layer.layui.com/
[http_silviomoreto.github.io_bootstrap-select]: http://silviomoreto.github.io/bootstrap-select/
[http_blog.csdn.net_lhtzbj12_article_details_78277436]: http://blog.csdn.net/lhtzbj12/article/details/78277436
[SouthEast]: /images/20210809/f42963f337464083afba2de157e818c5.png
[SouthEast 1]: /images/20210809/8a2e645c7a654a2eb6babba2c987be59.png
[SouthEast 2]: /images/20210809/9f2767b49f9c4d49a6bb3f6e577a1bd4.png