论如何把后台管理系统写出花

摘要：知识在于分享，也是希望和大家交流下，如何把后台管理系统写得能更具工程化，模块化，更有效率。后台管理系统多为端，所以和的技术运用不多，会根据产品需求进行优雅降级和渐进增强。

前两天看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"] <= 2 * 1000 * 1000) {
                $file = $_FILES["file"]["tmp_name"];
                require_once BASEPATH . "/libraries/phpexcel/PHPExcel.php";
                $excelReader = new PHPExcel_Reader_Excel2007();

                if (!$excelReader->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 "";
            } elseif ($_FILES["file"]["size"] > 2 * 1000 * 1000) {
                cilog("error", "上传文件大小：".$_FILES["file"]["size"]);
                echo "";
            } else {
                cilog("error", "上传失败：上传文件MIME：".$_FILES["file"]["type"]."上传文件大小：".$_FILES["file"]["size"]);
                echo "";
            }

xss过滤：
安全问题主要是xss和sql注入。sql注入后台会做，前端主要是做xss过滤。常用的解决方案就是：对特殊字符进行转义。但这样会造成页面展示上也会转义。所以目前的解决方案是，将半角的<>字符转义成全角的＜＞。

$strNavName=str_replace("<", "＜", $str);
$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更配呢，改天得试下~~