摘要：知識(shí)在于分享，也是希望和大家交流下，如何把后臺(tái)管理系統(tǒng)寫(xiě)得能更具工程化，模塊化，更有效率。后臺(tái)管理系統(tǒng)多為端，所以和的技術(shù)運(yùn)用不多，會(huì)根據(jù)產(chǎn)品需求進(jìn)行優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)。

前兩天看segmentfault的時(shí)候，突然間，想寫(xiě)篇文章總結(jié)一下那些年自己寫(xiě)過(guò)的后臺(tái)管理系統(tǒng)。作為我前端的入門(mén)項(xiàng)目，我對(duì)后臺(tái)管理系統(tǒng)的感情還是挺深的。本著以下幾點(diǎn)原因，寫(xiě)了此文。

對(duì)后臺(tái)管理系統(tǒng)做一個(gè)綜合全面的總結(jié)（嗯，這會(huì)是我以后項(xiàng)目總結(jié)的開(kāi)端）。

也算是給新入門(mén)的一個(gè)基本概念和學(xué)習(xí)范圍吧（~大神請(qǐng)自動(dòng)忽略~）。

知識(shí)在于分享，也是希望和大家交流下，如何把后臺(tái)管理系統(tǒng)寫(xiě)得能更具工程化，模塊化，更有效率。

后臺(tái)管理系統(tǒng)多為PC端，所以css3和HTML5的技術(shù)運(yùn)用不多，會(huì)根據(jù)產(chǎn)品需求進(jìn)行優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)。下面先上一張圖，羅列下后臺(tái)管理系統(tǒng)涉及到的方方面面，歡迎大家補(bǔ)充。

語(yǔ)言
html+js+css+php mysql c++

后臺(tái)管理系統(tǒng)常用框架：bootstrap

常用類庫(kù)：jquery，jquery UI（里面有很多好用的函數(shù)和小組件）

整體實(shí)現(xiàn)：
前端頁(yè)面HTML+css+js ，用php做cgi層調(diào)后臺(tái)接口，數(shù)據(jù)渲染。

頁(yè)面結(jié)構(gòu)：
頭部，側(cè)邊欄導(dǎo)航條，面包屑等公共部分抽離成頁(yè)面片，表格，表單，列表等抽離成小組件。所以后臺(tái)管理系統(tǒng)的頁(yè)面就有各個(gè)小積木拼接而成。

最常見(jiàn)的操作：
增刪改查：后臺(tái)管理系統(tǒng)的標(biāo)配。主要是操作DOM，調(diào)接口，只是操作成功后，如果想有更好的用戶體驗(yàn)，不要刷新頁(yè)面，用js動(dòng)態(tài)改DOM即可，其余感覺(jué)沒(méi)啥好說(shuō)的。

批量操作：批量操作本身并沒(méi)有技術(shù)難點(diǎn)，但是在用戶體驗(yàn)上，個(gè)人認(rèn)為，有很多講究。例如：全選，單選，多選，不選時(shí)的處理；單個(gè)或多個(gè)校驗(yàn)不合法時(shí)的提示和處理；部分成功，部分失敗時(shí)的提示和處理；全部成功的處理；

查詢：這是后臺(tái)管理系統(tǒng)的標(biāo)配。常見(jiàn)2種處理方法，1.get方法，參數(shù)全部拼到URL上，個(gè)人推薦這種，可以存為書(shū)簽；2.post方法，URL始終不會(huì)改變，大家都知道post方法較安全，但是這種無(wú)法保存為書(shū)簽，f5刷新頁(yè)面時(shí)無(wú)法保存查詢條件。（若是各位看官有別的實(shí)現(xiàn)方法，歡迎賜教）

導(dǎo)出：一般是導(dǎo)出Excel表格。用PHPExcel類庫(kù)。
需要加上頭信息：

     header("Content-Type: application/vnd.ms-excel");
     header(sprintf("Content-Disposition: attachment;filename="%s.xls"",$filename));
     header("Cache-Control: max-age=0");

導(dǎo)入：一般也是導(dǎo)入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()) // 幾列
                );
        }
    }

權(quán)限控制處理：
白名單，黑名單：以php的CI框架為例，思路是：在項(xiàng)目的配置文件config中寫(xiě)入名單數(shù)組，在core下建一個(gè)繼承CI_Controller的MY_Controller文件，然后在文件中封裝權(quán)限控制方法，這樣整個(gè)項(xiàng)目下的文件只要繼承了MY_Controller 就都可以調(diào)用這個(gè)權(quán)限控制的方法。

日志：雖然后臺(tái)肯定會(huì)打錯(cuò)誤日志，但前端也要根據(jù)業(yè)務(wù)適當(dāng)打日志。打日志是為了出錯(cuò)時(shí)，更好的定位問(wèn)題，所以多半在出錯(cuò)時(shí)，把接口入?yún)⒑统鰠⒋虺鰜?lái)。具體怎么打，要根據(jù)業(yè)務(wù)情況。
例如：下面這種根本不調(diào)接口的情況，后臺(tái)根本不會(huì)有日志，但用戶會(huì)有上傳失敗的情況，所以前端日志對(duì)定位問(wèn)題有很大幫助，cilog是封裝好的一個(gè)寫(xiě)日志的函數(shù)。

        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", "上傳失?。荷蟼魑募﨧IME：".$_FILES["file"]["type"]."上傳文件大?。?.$_FILES["file"]["size"]);
                echo "";
            }

xss過(guò)濾：
安全問(wèn)題主要是xss和sql注入。sql注入后臺(tái)會(huì)做，前端主要是做xss過(guò)濾。常用的解決方案就是：對(duì)特殊字符進(jìn)行轉(zhuǎn)義。但這樣會(huì)造成頁(yè)面展示上也會(huì)轉(zhuǎn)義。所以目前的解決方案是，將半角的<>字符轉(zhuǎn)義成全角的＜＞。

$strNavName=str_replace("<", "＜", $str);
$strNavName=str_replace(">", "＞", $strNavName);

登陸：加密（https），一般登錄頁(yè)會(huì)使用https協(xié)議，使用md5多次加密。

退出：清cookie，清sessionkey。

document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=" + domain;

異常處理：雖然后臺(tái)管理系統(tǒng)對(duì)異常的容忍度遠(yuǎn)遠(yuǎn)小于用戶側(cè)的項(xiàng)目，但作為一個(gè)有追求的前端，對(duì)異常分支還是要認(rèn)真對(duì)待。

對(duì)于操作成功或失敗，都會(huì)給出對(duì)應(yīng)的提示。封裝一個(gè)公共的函數(shù)，根據(jù)錯(cuò)誤碼，給出用戶能夠理解的錯(cuò)誤提示。

使用try catch,保證邊緣數(shù)據(jù)異常時(shí)不影響主體功能。例如：一個(gè)商品列表的頁(yè)面，商品的信息是主體，商品的評(píng)論數(shù)據(jù)是非主體，評(píng)論和商品不是同一個(gè)接口，評(píng)論接口有時(shí)會(huì)掛掉，所以就對(duì)評(píng)論接口使用try catch，保證評(píng)論異常時(shí)，商品數(shù)據(jù)是可以正常顯示的。

try {
      //可能會(huì)出錯(cuò)的具體業(yè)務(wù)代碼 
 } catch(Exception $e) {
      //打日志，做容災(zāi)處理
      cilog("error", "get_mgmt_comment_list error: ".$e->getMessage());
 } 

【注】：這些異常處理只是前端對(duì)異常的處理，后臺(tái)也會(huì)有自己的異常報(bào)警處理。

常用插件（后臺(tái)管理系統(tǒng)的標(biāo)配 ）：
日歷：datetimepicker (個(gè)人比較傾向這個(gè))，layDate
彈窗：bootstrap的modal。如果自己寫(xiě)，最好是一個(gè)網(wǎng)站的風(fēng)格保持一致，封裝一個(gè)統(tǒng)一的函數(shù)或組件。
拖拽排序：jquery UI有現(xiàn)成的api,拖拽draggable，排序sortable，非常好用。
分頁(yè)：PHP CI框架有現(xiàn)成的分頁(yè)類Pagination，可以配合bootstrap的分頁(yè)樣式使用。

一些優(yōu)秀的模板：（網(wǎng)上一搜一大堆）
http://www.jq22.com/demo/Bootstrap-150103222921/dashboard-1.html
http://themes.laborator.co/
http://themes.laborator.co/#theme=neon

字體圖標(biāo)庫(kù)：
FontAwesome：http://fontawesome.io/
阿里巴巴矢量圖標(biāo)庫(kù)：http://www.iconfont.cn/

據(jù)說(shuō)后臺(tái)管理系統(tǒng)和Vue更配呢，改天得試下~~