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

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

對后臺管理系統(tǒng)做一個綜合全面的總結(jié)（嗯，這會是我以后項目總結(jié)的開端）。

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

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

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

語言
html+js+css+php mysql c++

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

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

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

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

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

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

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

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

     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框架為例，思路是：在項目的配置文件config中寫入名單數(shù)組，在core下建一個繼承CI_Controller的MY_Controller文件，然后在文件中封裝權(quán)限控制方法，這樣整個項目下的文件只要繼承了MY_Controller 就都可以調(diào)用這個權(quán)限控制的方法。

日志：雖然后臺肯定會打錯誤日志，但前端也要根據(jù)業(yè)務(wù)適當(dāng)打日志。打日志是為了出錯時，更好的定位問題，所以多半在出錯時，把接口入?yún)⒑统鰠⒋虺鰜怼＞唧w怎么打，要根據(jù)業(yè)務(wù)情況。
例如：下面這種根本不調(diào)接口的情況，后臺根本不會有日志，但用戶會有上傳失敗的情況，所以前端日志對定位問題有很大幫助，cilog是封裝好的一個寫日志的函數(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", "上傳失敗：上傳文件MIME：".$_FILES["file"]["type"]."上傳文件大小：".$_FILES["file"]["size"]);
                echo "";
            }

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

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

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

退出：清cookie，清sessionkey。

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

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

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

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

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

【注】：這些異常處理只是前端對異常的處理，后臺也會有自己的異常報警處理。

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

一些優(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)庫：
FontAwesome：http://fontawesome.io/
阿里巴巴矢量圖標(biāo)庫：http://www.iconfont.cn/

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