論如何把後臺管理系統寫出花

前兩天看segmentfault的時候，忽然間，想寫篇文章總結一下那些年本身寫過的後臺管理系統。做爲我前端的入門項目，我對後臺管理系統的感情仍是挺深的。本着如下幾點緣由，寫了此文。

1. 對後臺管理系統作一個綜合全面的總結（嗯，這會是我之後項目總結的開端）。

2. 也算是給新入門的一個基本概念和學習範圍吧（~大神請自動忽略~）。

3. 知識在於分享，也是但願和你們交流下，如何把後臺管理系統寫得能更具工程化，模塊化，更有效率。

後臺管理系統多爲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 '<script>alert("文件類型錯誤，請上傳.xls或.xlsx文件");window.location.href = "xxx";</script>';
            } elseif ($_FILES["file"]["size"] > 2 * 1000 * 1000) {
                cilog('error', '上傳文件大小：'.$_FILES["file"]["size"]);
                echo '<script>alert("上傳文件不得超過2Mb");window.location.href = "xxx";</script>';
            } else {
                cilog('error', '上傳失敗：上傳文件MIME：'.$_FILES["file"]["type"].'上傳文件大小：'.$_FILES["file"]["size"]);
                echo '<script>alert("文件上傳失敗");window.location.href = "xxx";</script>';
            }

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更配呢，改天得試下~~