2014年12月15日 星期一

用 jQuery EasyUI 打造輕量級 CMS (一)

公司的工作日誌系統明年將運轉屆滿十年, 這套當初用 ASP+Javascript+ACCESS 寫的簡易型 CMS 是我參考 myPHPNuke 的功能拼拼湊湊寫出來的, 前後端都使用 Javascript 撰寫. 我在這個架站平台上掛上加寫的營運所需的各個子系統, 因為系統是自己寫的, 所以要殺要剮都能隨心所欲, 使用至今倒也便利. 不過使用十年的系統畢竟太舊了, 網頁技術突飛猛進, 早已不知越過幾個世代, 所以靜極思動, 想要用 jQuery EasyUI 來改寫. 目前主要構想如下 :
  1. 後端改用 PHP + MySQL 架構.
  2. 前端 Javascript 框架使用 EasyUI 做介面.
  3. 版面使用 Layout 元件排版 (不需 South), 子系統用 Tabs 管理內容.
  4. 架站機平台極簡化, 只含留言板, 會員管理與子系統管理.
  5. 主要子系統為工作日誌, 以及各型機器之營運資料庫查詢管理子系統.
  6. 符合資安要求, 以免被電.
這兩天對以上構想的可能性做了一番測試, 基本模型如下面範例 1 :

範例 1 : http://mybidrobot.allalla.com/easyuitest/easyui-cms-1.htm [看原始碼]

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>EasyUI 測試</title>
  <link rel="stylesheet" type="text/css" href="../jquery/easyui-themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="../jquery/easyui-themes/icon.css">
  <script type="text/javascript" src="../jquery/jquery.js"></script>
  <script type="text/javascript" src="../jquery/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="../jquery/easyui-lang-zh_TW.js"></script>
  <style>
    .navbar {
      width:180px;
      padding-left:5px;
      padding-right:5px;
      padding-bottom:5px;
      }
    .nav {
      margin-bottom:5px;
      }
    .content {
      overflow:auto;
      padding-bottom:5px;
      }
    .tab {
      padding:10px;
      overflow:auto;
      position:relative;
      }
    #header {
      padding-left:5px;
      padding-right:5px;
      padding-top:5px;
      }
  </style>
</head>
<body>
  <div id="layout-1" class="easyui-layout" data-options="fit:true" style="">
    <div id="header" data-options="region:'north',border:false">
      <div class="easyui-panel" title="MySystem" data-options="tools:'#tools'"  style="height:60px;padding-top:5px;padding-left:5px;padding-right:5px;">
      歡迎光臨! 今天是 2014 年 12 月 12 日
      </div>
    </div>
    <div id="tools">
     <a href="#" id="nav-west" class="icon-remove"></a>
     <a href="#" id="nav-east" class="icon-remove"></a>
    </div>
    <div class="navbar" data-options="region:'east',border:false">
      <div class="easyui-panel nav" title="MyPanel">
        <ul>
          <li>Hello World!</li>
          <li>Hello World!</li>
          <li>Hello World!</li>
        </ul>
      </div>
      <div class="easyui-panel nav" title="MyPanel">
        <ul>
          <li>Hello World!</li>
          <li>Hello World!</li>
          <li>Hello World!</li>
        </ul>
      </div>
    </div>

    <div class="navbar" data-options="region:'west',border:false">
      <div class="easyui-panel nav" title="MyPanel-1">
        <ul>
          <li>Hello World!</li>
          <li>Hello World!</li>
          <li>Hello World!</li>
        </ul>
      </div>
      <div class="easyui-panel nav" title="MyPanel-2">
        <ul>
          <li>Hello World!</li>
          <li>Hello World!</li>
          <li>Hello World!</li>
        </ul>
      </div>
      <div class="easyui-panel nav" title="MyPanel-3">
        <ul>
          <li>Hello World!</li>
          <li>Hello World!</li>
          <li>Hello World!</li>
        </ul>
      </div>
      <div class="easyui-panel nav" title="MyPanel-4">
        <ul>
          <li>Hello World!</li>
          <li>Hello World!</li>
          <li>Hello World!</li>
        </ul>
      </div>
      <div class="easyui-panel nav" title="MyPanel-5">
        <ul>
          <li>Hello World!</li>
          <li>Hello World!</li>
          <li>Hello World!</li>
        </ul>
      </div>
      <div class="easyui-panel nav" title="MyPanel-6">
        <ul>
          <li>Hello World!</li>
          <li>Hello World!</li>
          <li>Hello World!</li>
        </ul>
      </div>
      <div class="easyui-panel nav" title="MyPanel-7">
        <ul>
          <li>Hello World!</li>
          <li>Hello World!</li>
          <li>Hello World!</li>
        </ul>
      </div>
      <div class="easyui-panel nav" title="MyPanel-8">
        <ul>
          <li>Hello World!</li>
          <li>Hello World!</li>
          <li>Hello World!</li>
        </ul>
      </div>
    </div>
    <div class="content" data-options="region:'center',border:false">
      <div class="easyui-tabs">
        <div title="標題 1" class="tab">
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        內容 1<br>
        </div>
        <div title="標題 2" class="tab">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
        <div title="標題 3" class="tab">內容 3</div>
      </div>
    </div>
  </div>
  <script language="javascript">
    $(document).ready(function(){
      $("#nav-west").bind("click",function(){
        if (this.className.indexOf("icon-remove") != -1){
          $("#layout-1").layout("collapse","west");
          this.className="icon-add";
          }
        else{
          $("#layout-1").layout("expand","west");
          this.className="icon-remove";
          }
        });
      $("#nav-east").bind("click",function(){
        if (this.className.indexOf("icon-remove") != -1){
          $("#layout-1").layout("collapse","east");
          this.className="icon-add";
          }
        else{
          $("#layout-1").layout("expand","east");
          this.className="icon-remove";
          }
        });
      });
  </script>
</body>
</html>


此例中我用 Layout 排版, 底下的 South 不需要, 只剩下東西北中四個區域. 北方用作網站標頭, 擺放登入訊息與子系統進入口. 東西兩方用作導覽連結框, 中間作為內容區. 為了畫面的美觀, 我捨棄了各區域的標題, 從而無法擺放展開縮合紐, 北方區域的標題上我放了兩個按鈕, 分別控制左右導覽框之縮合與展開. 注意, 這裡 this.className 的 this 為兩個按鈕之 DOM 物件, 使用 indexOf 判斷的原因是, 第一次按時其 className 不是只有 icon-remove 而已, 用 this.className=="icon-remove" 會傳回 false, 但按第二次就可以了.

上面範例中, 我特地在頁籤 1 與 2 中分別給予垂直與水平方向很長的內容, 可見它會自動出現捲軸.

另外我又陸陸續續做了幾個測試, 實在太雜了, 就不一一詳述, 如下列範例 :

範例 2 : http://mybidrobot.allalla.com/easyuitest/easyui-cms-2.htm [看原始碼]

範例 3 : http://mybidrobot.allalla.com/easyuitest/easyui-cms-3.htm [看原始碼]

範例 4 : http://mybidrobot.allalla.com/easyuitest/easyui-cms-4.htm [看原始碼]

範例 5 : http://mybidrobot.allalla.com/easyuitest/easyui-cms-5.htm [看原始碼]

範例 6 : http://mybidrobot.allalla.com/easyuitest/easyui-cms-6.htm [看原始碼]

最後進行微調, 將樣式集中, 單一性元素用 id, 重複性元素用 class, 這樣就清爽多了. 版面如下 :

範例 7 : http://mybidrobot.allalla.com/easyuitest/easyui-cms-7.htm [看原始碼]

接下來要考量資料庫了.

參考資料 :
  1. miniCMS
  2. A Micro CMS
  3. Controling Combobox "panel" height

2 則留言 :

erichuang 提到...

Tony,你好。看了您写的Jquery easy ui的博文我收益匪浅。现在我正在学习jquery easy ui以及php,希望能够获得你这个cms源码研究学习,不知能否如愿,谢谢。我的电邮:com.hzq@gmail.com,期待你的回信。

小狐狸事務所 提到...

Eric 您好,

抱歉, 信太多了, 最近才發現您有留言給我.
我這個 EsyUICMS 還在開發階段, 還有幾個功能尚未寫完, 因此就目前完成的進度給您參考, 有發現 BUG 記得告訴我.

tony 敬上