论如何把后台管理系统写出花
前两天看segmentfault的时候，突然间，想写篇文章总结一下那些年自己写过的后台管理系统。作为我前端的入门项目，我对后台管理系统的感情还是挺深的。本着以下几点原因，写了此文。
对后台管理系统做一个综合全面的总结（嗯，这会是我以后项目总结的开端）。
也算是给新入门的一个基本概念和学习范围吧（~大神请自动忽略~）。
知识在于分享，也是希望和大家交流下，如何把后台管理系统写得能更具工程化，模块化，更有效率。
后台管理系统多为PC端，所以css3和HTML5的技术运用不多，会根据产品需求进行优雅降级和渐进增强。下面先上一张图，罗列下后台管理系统涉及到的方方面面，欢迎大家补充。
语言
html+js+css+php mysql c++
后台管理系统常用框架：bootstrap
常用类库：jquery，jquery UI（里面有很多好用的函数和小组件）
整体实现：
前端页面HTML+css+js ，用php做cgi层调后台接口，数据渲染。
页面结构：
头部，侧边栏导航条，面包屑等公共部分抽离成页面片，表格，表单，列表等抽离成小组件。所以后台管理系统的页面就有各个小积木拼接而成。
最常见的操作：
增删改查：后台管理系统的标配。主要是操作DOM，调接口，只是操作成功后，如果想有更好的用户体验，不要刷新页面，用js动态改DOM即可，其余感觉没啥好说的。
批量操作：批量操作本身并没有技术难点，但是在用户体验上，个人认为，有很多讲究。例如：全选，单选，多选，不选时的处理；单个或多个校验不合法时的提示和处理；部分成功，部分失败时的提示和处理；全部成功的处理；
查询：这是后台管理系统的标配。常见2种处理方法，1.get方法，参数全部拼到URL上，个人推荐这种，可以存为书签；2.post方法，URL始终不会改变，大家都知道post方法较安全，但是这种无法保存为书签，f5刷新页面时无法保存查询条件。（若是各位看官有别的实现方法，欢迎赐教）
导出：一般是导出Excel表格。用PHPExcel类库。
需要加上头信息：
header('Content-Type: application/vnd.ms-excel'); header(sprintf('Content-Disposition: attachment;filename="%s.xls"',$filename)); header('Cache-Control: max-age=0');导入：一般也是导入Excel表格。用php的$_FILES可获得上传的文件。
if (isset($_FILES["file"]) && 0 == $_FILES["file"]["error"]) { $fileType = array("application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "application/kset","application/octet-stream"); //文件格式 if (in_array($_FILES["file"]["type"], $fileType) && $_FILES["file"]["size"] canRead($file)) { $excelReader = new PHPExcel_Reader_Excel5(); } $sheet = $excelReader->load($file)->getSheet(0); //sheet1操作 $excelCont = array( 'highestCol' => $sheet->getHighestColumn(), //列 'highestRow' => $sheet->getHighestRow(), //行 'highestColumnIndex' => PHPExcel_Cell::columnIndexFromString($sheet->getHighestColumn()) // 几列 ); } }权限控制处理：
白名单，黑名单：以php的CI框架为例，思路是：在项目的配置文件config中写入名单数组，在core下建一个继承CI_Controller的MY_Controller文件，然后在文件中封装权限控制方法，这样整个项目下的文件只要继承了MY_Controller 就都可以调用这个权限控制的方法。
日志：虽然后台肯定会打错误日志，但前端也要根据业务适当打日志。打日志是为了出错时，更好的定位问题，所以多半在出错时，把接口入参和出参打出来。具体怎么打，要根据业务情况。
例如：下面这种根本不调接口的情况，后台根本不会有日志，但用户会有上传失败的情况，所以前端日志对定位问题有很大帮助，cilog是封装好的一个写日志的函数。
elseif (!in_array($_FILES["file"]["type"],$fileType)) { cilog('error', '上传文件MIME：'.$_FILES["file"]["type"]); echo 'alert("文件类型错误，请上传.xls或.xlsx文件");window.location.href = "xxx";'; } elseif ($_FILES["file"]["size"] > 2 * 1000 * 1000) { cilog('error', '上传文件大小：'.$_FILES["file"]["size"]); echo 'alert("上传文件不得超过2Mb");window.location.href = "xxx";'; } else { cilog('error', '上传失败：上传文件MIME：'.$_FILES["file"]["type"].'上传文件大小：'.$_FILES["file"]["size"]); echo 'alert("文件上传失败");window.location.href = "xxx";'; }xss过滤：
安全问题主要是xss和sql注入。sql注入后台会做，前端主要是做xss过滤。常用的解决方案就是：对特殊字符进行转义。但这样会造成页面展示上也会转义。所以目前的解决方案是，将半角的字符转义成全角的＜＞。
$strNavName=str_replace("", "＞", $strNavName);登陆：加密（https），一般登录页会使用https协议，使用md5多次加密。
退出：清cookie，清sessionkey。
document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=" + domain;异常处理：虽然后台管理系统对异常的容忍度远远小于用户侧的项目，但作为一个有追求的前端，对异常分支还是要认真对待。
对于操作成功或失败，都会给出对应的提示。封装一个公共的函数，根据错误码，给出用户能够理解的错误提示。
使用try catch,保证边缘数据异常时不影响主体功能。例如：一个商品列表的页面，商品的信息是主体，商品的评论数据是非主体，评论和商品不是同一个接口，评论接口有时会挂掉，所以就对评论接口使用try catch，保证评论异常时，商品数据是可以正常显示的。
try { //可能会出错的具体业务代码 } catch(Exception $e) { //打日志，做容灾处理 cilog('error', 'get_mgmt_comment_list error: '.$e->getMessage()); } 【注】：这些异常处理只是前端对异常的处理，后台也会有自己的异常报警处理。
常用插件（后台管理系统的标配 ）：
日历：datetimepicker (个人比较倾向这个)，layDate
弹窗：bootstrap的modal。如果自己写，最好是一个网站的风格保持一致，封装一个统一的函数或组件。
拖拽排序：jquery UI有现成的api,拖拽draggable，排序sortable，非常好用。
分页：PHP CI框架有现成的分页类Pagination，可以配合bootstrap的分页样式使用。
一些优秀的模板：（网上一搜一大堆）
http://www.jq22.com/demo/Bootstrap-150103222921/dashboard-1.html
http://themes.laborator.co/
http://themes.laborator.co/# theme=neon
字体图标库：
FontAwesome：http://fontawesome.io/
阿里巴巴矢量图标库：http://www.iconfont.cn/
据说后台管理系统和Vue更配呢，改天得试下~~
关键字：JavaScript, php
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
