2016年2月26日 星期五

如何在 GAE 上佈署 jQuery EasyUI 專案 (十) : EasyUI CMS on GAE 之 5

本來想說要開始玩 App Inventor, 但想想還是先把系統設定處理掉好了, 反正應該不會花很多時間. 我參考了之前的 PHP 版本, 但不包括密碼安全設定部分, 那是為了公司資安要求加進去的, 而且也還沒有實作.

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

首先修改 model.py 中的 Settings 模型以及其資料實體 settings 如下 :

class Settings(db.Model):
    site_title=db.StringProperty()
    site_theme=db.StringProperty()
    site_state=db.StringProperty()
    site_created_time=db.DateTimeProperty(auto_now_add=True)

settings=Settings(key_name="settings",site_title="EasyUI-based CMS on GAE",
    site_theme="default",site_state="on")
settings.put()

同時也在 Systab 資料模型新增一個系統設定 settings 頁籤 :

systab=Systabs(key_name="settings",tab_name="settings",
    tab_label=u"系統設定",tab_link="/settings",tab_order=6,tab_admin=True)
systab.put()

然後在 main.py 主程式中新增 settings 與 update_settings 路徑的處理類別 :

class settings(webapp2.RequestHandler):
    def get(self):
        info={}  #for storing parameters
        #query settings from datastore
        settings=m.Settings.get_by_key_name("settings")
        if settings: #entity exist
            info["site_title"]=settings.site_title
            info["site_theme"]=settings.site_theme
            info["site_state"]=settings.site_state
        else:
            info["site_title"]="EasyuiCMS on GAE"
            info["site_theme"]="default"
            info["site_state"]="on"
        #query Themes from datastore
        themes=m.Themes.all()
        theme_list=[]
        for t in themes:
            theme_list.append(t.theme)
        info["themes"]=theme_list
        url="templates/settings.htm"
        path=os.path.join(os.path.dirname(__file__), url)
        content=template.render(path,{'info':info})
        self.response.out.write(content)

class update_settings(webapp2.RequestHandler):
    def post(self):
        #get entity from store
        settings=m.Settings.get_by_key_name("settings")
        if settings: #entity exist
            settings.site_title=self.request.get("site_title")
            settings.site_theme=self.request.get("site_theme")
            settings.site_state=self.request.get("site_state")
            settings.put()
            result='{"status":"success"}'
        else:  #entity not existed
            result='{"status":"failure"}'      
        self.response.out.write(result)

這裡 settings 類別主要是從資料儲存區擷取 Settings 與 Themes 實體, 取得系統設定值與主題布景名稱後存入 info 字典中傳給要渲染的網頁 settings.htm 如下 :

<!--系統設定表單-->
<div id="settings" class="easyui-panel" title="系統設定" style="width:auto;padding:5px;" data-options="tools:'#settings_tools'">
  <form id="settings_form" style="padding:5px">
    <table style="border-width:0px;width:100%;border-spacing:2px;">
      <tr>
        <td style="width:50%;padding:3px;">
          <label style="width:100px;display:inline-block;">網站標題 : </label>
          <input name="site_title" type="text" class="easyui-textbox" data-options="missingMessage:'此欄位為必填',required:true" style="min-width:300px;" value="{{info.site_title}}">
        </td>
        <td style="width:50%;padding:3px;">
          <label style="width:100px;display:inline-block;">系統主題布景 : </label>
          <select name="site_theme" class="easyui-combobox" style="width:120px;" data-options="panelHeight:'auto'">
            <option value="default">主題布景</option>
{% for t in info.themes %}
              <option value="{{t}}"{% ifequal t info.site_theme %} selected{% endifequal %}>{{t}}</option>
{% endfor %}
          </select>
        </td>
      </tr>
      <tr>
        <td style="width:50%;padding:3px;">
          <label style="width:100px;display:inline-block;">系統運行狀態 : </label>
            <input type='radio' name='site_state' value='on'{% ifequal info.site_state 'on' %} checked{% endifequal %}>運轉中
            <input type='radio' name='site_state' value='off'{% ifequal info.site_state 'off' %} checked{% endifequal %}>維護中
        </td>
        <td style="width:50%;padding:3px;">
        </td>
      </tr>
    </table>
  </form>
</div>
<div id="settings_tools">
  <a href="#" id="reload_settings" class="icon-reload" title="重新載入"></a>
  <a href="#" id="save_settings" class="icon-save" title="儲存"></a>
</div>
<script>
  $(document).ready(function(){
    //系統設定 settings
    $('#reload_settings').bind('click',function(){
      $('#settings').panel('open').panel('refresh');
      });
    $('#save_settings').bind('click',function(){
      var params=$('#settings_form').serialize();
      var callback=function(data,textStatus){
        if (data.status==='success'){
          $.messager.alert('訊息','系統設定更新成功!','info');
          }
        else {$.messager.alert('訊息','系統設定更新失敗!','error');}
        }
      $.post('/update_settings',params,callback,'json');
      });
    });
</script>

這裡利用傳入的 info.themes 串列以迴圈來產生下拉式選單的選項. 當按下右上角的儲存鈕時, 會向後端的 /update_settings 路徑提出 post 要求, 更改資料儲存中的設定. 實際測試範例如下 (登入帳號 admin, 密碼 aaa) :

測試 6 : http://jqueryeasyui.appspot.com/main_5 (下載原始碼(備用下載點)


以上就是系統設定的管理, 雖然只有三個基本欄位, 但我主要是把架構與方法勾勒出來, 以後要加欄位就很方便了. OK, 自去年底突然轉向到 GAE 架站系統的研究到此告一段落, 總算將很久以前的構想實作出來的, 以後要在這個基礎上寫應用就能順水推舟快速進行了. 我花時間把過程記錄下來, 為的是將來要用時可以很快恢復功力. 接下來要把 Python 整理一下, 再回頭玩 PHP, 打算今年能一鼓作氣把新版工作日誌寫完.


沒有留言 :