簡潔後臺管理模版

時間 2019-11-11

標籤簡潔後臺管理模版简体版

原文原文鏈接

本文轉載於:猿2048網站簡潔後臺管理模版javascript

原文地址：簡潔後臺管理模版
以前給客戶開發一個簡單的後臺管理系統，原本準備套用AdminLTE的，但客戶嫌棄太臃腫，並且又須要有多tab頁面切換，因而從我代碼庫中找到很久前就寫過的管理後臺，根據需求重寫。這是基於jQuery，加上本身編寫基礎樣式，從零搭建起來的框架，在這個輕量級模版的基礎上進行開發vue項目。如今順便將這個模版搭建成個人前端demo的管理系統，而這篇文章就講述下如何實現簡單的後臺管理系統。php

效果請看：manage-demo:http://jeffzhong.space/sites/manage-demo/

css

項目架構

基於gulp自動化工具，使用less預編譯，使用swig模版引擎編譯html。html

基礎樣式base.css，字體庫raleway，圖標庫fontello，js基礎庫jQuery。前端

同時使用webpack爲vue.js配置好開發環境，在src文件夾裏面能夠直接開發vue項目，裏面有簡單的vue樣例。固然想用react的也能夠更改成react庫。vue

文件目錄

dist 文件生成目錄
src 源文件目錄，裏面爲vue項目的文件
img 圖片文件夾
lib 類庫文件夾
less less文件
pages 頁面文件夾
index.html 首頁(母板頁)
gulpfile.js
webpack.config.js
package.json

而咱們如今要作的就是最外層的框架頁，也就是母板頁，爲了使其更加輕便，同時適應更多類型的項目，只使用了最基礎的jquery來實現功能。html5

基礎樣式庫

每一個前端開發者作過大量項目後，基本都會有本身的樣式庫吧。個人base-css是參考了部分bootstrap和pure的樣式庫，精簡了不少組件，很是的輕量級。詳細代碼請看https://github.com/edwardzhong/base-csss，less預編譯，gulp自動化，能夠自由選擇所須要的組件後再打包，通過這樣定製打包後的樣式體積就更加的小了。該樣式庫主要包括以下組件：java

normalize：html5標籤修復
grid：響應式網格
alert
button
breadcrumb
dialog
form
menu
pager
pagination
panel
tab
table

有了基礎樣式以後，咱們搭建系統就方便不少了。react

實現母板頁

後臺管理系統最重要的就是母板頁(index.html)，咱們一步步來實現它。jquery

佈局

基本就是左右佈局：左邊導航部分固定寬度，右邊內容部分寬度自適應。實現這個佈局有不少種方式，這裏不詳敘，從實現動畫和自適應方面考慮，我採用的是絕對定位的方式。左邊的導航欄隱藏顯示動畫是經過設置margin-left和transition屬性實現的。

/*左邊導航欄*/
    .menu-wrap {
        position: absolute;
        transition: margin-left .3s ease-in-out;
        top: 50px;
        left: 0;
        width: 200px;
        height: calc(100% - 50px);
        overflow-y: scroll;
    }
    /*右邊內容部分*/
    .main {
        height: calc(100% - 50px);
        overflow: hidden;
        margin-left: 200px;
        transition: margin-left .3s ease-in-out;
    }

導航欄

導航欄就是使用ul列表佈局，若是要實現多級的子菜單就在相應li下再嵌套一個ul列表便可，而後添加樣式，添加css3動畫等。佈局示例請看以下的代碼：

<ul id="menuList" class="side-menu">
        <li class="children">
          <a data-type="tab" title="Html Component" href="javascript:;"><i class="icon-doc-text"></i><span>Html Component</span></a>
          <ul style="height: 0px;">
            <li><a data-type="tab" title="Alert" href="./pages/alert.html"><span> Alert</span></a> </li>
            <li><a data-type="tab" title="Page" href="./pages/page.html"><span> Page</span></a> </li>
            <li><a data-type="tab" title="Panel" href="./pages/panel.html"><span> Panel</span></a> </li>
          </ul>
        </li>
        <li>
          <a title="My Blog" href="/"><i class="icon-bookmark"></i><span>My Blog</span></a>
        </li>
    </ul>

實現多tab內容面

不少後臺管理模版都是經過模版引擎編譯頁面內容，這樣生成的每一個頁面都會包含導航欄和內容塊，這樣的好處就是編寫比較簡單。可是點擊導航欄裏的連接就回從新加載整個頁面，在網速不佳的狀況，就會看到整個頁面在跳動。

另外一種方式是使用frameset或iframe，嵌套頁面。這樣內容頁和母版頁是分離的，分別加載的。這樣會體驗比較好，編寫的代碼也是隔離的。但也是隔離了做用域，因此要專門處理框架內外層通訊的問題，同時編寫也會稍麻煩。

我這裏選用的是iframe方案，由於使用多iframe實現母板頁多tab顯示比較方便。這樣左邊導航欄點擊後就會建立新的iframe並填入連接，而後再將該iframe插入內容塊。同時tab欄也對應插入一一對應的tab標籤，這樣點擊tab標籤就隱藏顯示對應iframe塊。請看以下的html代碼結構：

<div id="main" class="main">
      <nav class="nav">
        <!-- tab標籤 -->
        <ul id="nav" class="menu-tabs">
            <li><a>...</a><li>
            <li><a>...</a><li>
        </ul>
      </nav>
      <!-- 頁面iframe -->
      <div class="page-con">
        <div class="page"><iframe src="..."></iframe></div>
        <div class="page"><iframe src="..."></iframe></div>
      </div>
    </div>

母板頁的添加iframe和添加tab標籤的代碼

//添加頁面
    function appendPage(url){
      $('.page-con .page').removeClass('active');
      $('.page-con').append('<div class="page active"><iframe src="'+url+'" frameborder="0" width="100%" height="100%"></iframe></div>');
    }
    
    //添加tab
    function appendTab(txt){
      $nav.find('li').removeClass('active');
      $nav.append('<li data-txt="'+txt+'" class="active"><a href="javascript:;">'+txt+'<i class="close">×</i></a></li>');
      var w=setTabWidth();
      //移動到新增tab
      $navParent.animate({'scrollLeft':w+'px'},600); 
    }

固然這中間有不少細節，好比添加，刪除，選擇，滾動頁面，tab欄的選擇關閉，tab欄內容超出頁面寬度的處理，當前tab如何滾動到當前顯示區等，具體實現能夠查看github代碼。

內容頁

完成母板頁以後，接下來就是添加內容頁了。首先就是定義導航連接，添加了自定義屬性data-type="tab"的連接就是要在右邊內容iframe打開的頁面，不然就是打開外部連接了。每一個在iframe打開的a標籤要配置title屬性，由於我是經過title來區分頁面是否已經打開過，tab中已經存在就再也不打開。

內容頁既能夠是靜態頁面，也能夠用vue，react構造頁面，demo裏面有部分頁面使用了vue來實現邏輯功能。

<ul id="menuList" class="side-menu">
        <!-- 要添加到iframe中的連接 -->
        <li><a data-type="tab" title="Alert" href="./pages/alert.html"><span> Alert</span></a> </li>
        <!-- 外部連接跳轉 -->
        <li><a title="My Blog" href="/"><i class="icon-bookmark"></i><span>My Blog</span></a></li>
    </ul>