# 用 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, 打算今年能一鼓作氣把新版工作日誌寫完.
沒有留言:
張貼留言