小狐狸事務所: 如何在 GAE 上佈署 jQuery EasyUI 專案 (七) : EasyUI CMS on GAE 之 2

2016年2月2日星期二

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

完成 EasyUI CMS on GAE Part 1 測試後, 繼續來給它添柴火. 首先我想把之前寫的訪客紀錄器整合進來, 參考 :

# 如何在 GAE 上佈署 jQuery EasyUI 專案 (五) : 紀錄到訪者

我先在 model.py 中給 systabs 增加一個只有管理者能看到的系統頁籤實體 :

systab=Systabs(key_name="list_visitors",tab_name="list_visitors",
tab_label=u"到訪者",tab_link="/list_visitors",tab_order=2,tab_admin=True)
systab.put()

為了與前一篇的測試程式區隔, 我在 main.py 中增加新的路徑 main_3, 其處理類別則從前一篇的 main_2 複製過來, 修改渲染對象為 main_3.htm, 並在前面加上紀錄訪客資訊的程式碼, 如下藍色的部分所示 :

class main_3(BaseHandler):
def get(self):
#save visitor info
ip=self.request.remote_addr
#user_agent=os.environ.get("HTTP_USER_AGENT")
user_agent=self.request.headers.get("User-Agent")
visitor=m.Visitors()
visitor.ip=ip
visitor.visit_time=datetime.datetime.now() + timedelta(hours=+8)
visitor.user_agent=user_agent
visitor.ip_list=list(ip)
visitor.user_agent_list=list(user_agent)
visitor.put()
#check login session
info={} #for storing parameters
account=self.session.get('account')
if account: #already logged in
info["account"]=account
s=m.Settings.get_by_key_name("settings")
info["site_title"]=s.site_title
theme=self.session.get('theme')
info["theme"]=theme
today=datetime.date.today()
week=[u"一",u"二",u"三",u"四",u"五",u"六",u"日"]
info["greeting"]=u"您好! " + account + u", 今天是 " + \
str(today.year) + u" 年 " + str(today.month) + u" 月 " + \
str(today.day) + u" 日星期" + week[today.weekday()]
theme_list=[]
themes=m.Themes.all()
#themes.order("theme")
for t in themes:
theme_list.append(t.theme)
info["themes"]=theme_list
url="templates/main_3.htm"
else: #not logged in
s=m.Settings.get_by_key_name("settings")
info["site_title"]=s.site_title
info["site_theme"]=s.site_theme
url="templates/login.htm"
theme=self.session.get('theme')
path=os.path.join(os.path.dirname(__file__), url)
content=template.render(path,{'info':info})
self.response.out.write(content)

所渲染之網頁模板 main_3.htm 也是從 main_2.htm 複製而來, 只是把其中的 systabs_2 改為 systabs_3 而已 :

{% extends "jqueryeasyui.htm" %}
{% block style %}
a {text-decoration:none;}
a:hover {text-decoration:underline;background-color:yellow;}
#west {width:150px;}
#west-inner {border-top:0px;border-right:0px;border-bottom:0px;}
.nav {padding:5px;}
.tab {padding:10px;}
#north {height:55px;overflow:hidden;}
#north-table {width:100%;border-spacing:0px}
#north-left {text-align:left;padding:5px;}
#north-right {text-align:right;padding:5px;}
{% endblock%}
{% block body %}
<div id="north" title="{{ info.site_title }}" data-options="region:'north',border:false,collapsible:true,tools:'#tools'">
<form id="header-form" method="post">
<table id="north-table">
<tr>
<td id="north-left" style="vertical-align:middle">
{{ info.greeting }}
</td>
<td id="north-right" style="vertical-align:middle">
<span id="header_links">
<a href="javascript:gohome()" target="_self" title="首頁">首頁</a>．
<a href="javascript:logout()" target="_self" title="登出">登出</a>．
</span>
<select id="theme_sel" name="theme" class="easyui-combobox" style="width:120px;height:18px" panelHeight="auto">
<option value="default">主題布景</option>
{% for t in info.themes %}
<option value="{{t}}"{% ifequal t info.theme %} selected{% endifequal %}>{{t}}</option>
{% endfor %}
</select>
</td>
</tr>
</table>
</form>
</div>
<div id="tools">
<a href="javascript:logout()" class="icon-remove" title="登出"></a>
</div>
<div title="導覽" data-options="region:'west',border:true" id="west">
<div class="easyui-accordion" id="west-inner">
<div title="主功能" class="nav">
．<a href="javascript:gohome()" target="_self" title="首頁">首頁</a><br>
．<a href="javascript:logout()" target="_self" title="登出">登出</a><br>
</div>
</div>
</div>
<div data-options="region:'center',border:false,href:'/systabs_3'" id="center">
</div>
<script>
$("body").attr("class", "easyui-layout");
$(document).ready(function(){
//var css="http://www.jeasyui.com/easyui/themes/{{ info.theme }}/easyui.css";
var css="/static/easyui/themes/{{ info.theme }}/easyui.css";
$("#theme").attr("href", css);
$("#theme_sel").combobox({
onSelect:function(rec){
//var css="http://www.jeasyui.com/easyui/themes/" + rec.value + "/easyui.css";
var css="/static/easyui/themes/" + rec.value + "/easyui.css";
$("#theme").attr("href", css);
$.get("/change_theme",{theme:rec.value});
}
});
});

function gohome(){
$(function(){
var p=$("body").layout("panel","center");
p.panel({href:"/systabs_3"});
});
}
function logout(){
$(function(){
$.messager.confirm("確認","確定要登出系統嗎?",function(btn){
if (btn) {window.location.href="/logout";}
});
});
}
</script>
{% endblock%}

系統頁籤路徑 systabs_3 的處理類別也是從 systabs_2 複製而得, 僅修改所渲染的網頁為 systabs_3.htm, 如下所示 :

class systabs_3(BaseHandler):
def get(self):
systabs=m.Systabs.all()
systabs.order("tab_order") #sort by tab_order
tabs=[] #for storing tab objects
is_admin=self.session.get('is_admin') #True/False
for t in systabs:
tab={}
tab["tab_label"]=t.tab_label
tab["tab_link"]=t.tab_link
if t.tab_admin: #this tab is for admin only
if is_admin: #current user is admin
tabs.append(tab)
else: #this tab is for registered users
tabs.append(tab)
url="templates/systabs_3.htm"
path=os.path.join(os.path.dirname(__file__), url)
content=template.render(path,{"tabs":tabs})
self.response.out.write(content)

所渲染的系統頁籤網頁 systabs_3.htm 則從 systabs_2.htm 複製而來, 因為邏輯相同, 完全不用改 :

<div id="sys_tabs" class="easyui-tabs" data-options="fit:'true'">
{% for t in tabs %}
<div class="tab" title="{{t.tab_label}}" data-options="href:'{{t.tab_link}}',loadingMessage:'載入中 ... '"></div>
{% endfor %}
</div>

這樣顯示的部分就搞定了, 接下來處理新增的訪客頁籤路徑 /list_visitors, 其處理類別如下, 就是渲染 list_visitors.htm 網頁 :

class list_visitors(webapp2.RequestHandler):
def get(self):
url="templates/list_visitors.htm"
path=os.path.join(os.path.dirname(__file__), url)
content=template.render(path,{})
self.response.out.write(content)

而網頁 list_visitors.htm 則是從下面這篇文章的測試 6 的 list_visitors_6.htm 複製過來修改的 :

# 如何在 GAE 上佈署 jQuery EasyUI 專案 (五) : 紀錄到訪者

{% extends "jqueryeasyui.htm" %}

{% block style %}

body {font: 80% "Trebuchet MS", sans-serif; margin: 50px;}

{% endblock%}

{% block body %}

</div>

</select>

</div>

$(document).ready(function(){

$('#visitors').datagrid({

url:'/get_visitors',

method:"post",

columns:[[

{field:'ip',title:'IP 位址',sortable:true},

{field:'visit_time',title:'到訪時間',sortable:true},

{field:'user_agent',title:'瀏覽器',sortable:true}

]],

singleSelect:true,

fitColumns:true,

collapsible:true,

rownumbers:true,

pagination:true,

collapsible:false,

pageSize:10

});

$("#visitors_search_what").textbox({

icons:[{

iconCls:"icon-search",

handler:function(e){

$('#visitors').datagrid("load",{

search_field:$("#visitors_search_field").combobox("getValue"),

search_what:$("#visitors_search_what").textbox("getValue")

});

}

}]

});

$("#reload_visitors").bind("click",function(){

$("#visitors").datagrid("load");

});

$("#remove_visitor").bind("click",function(){

var row=$("#visitors").datagrid("getSelected");

if (row) {

$.messager.confirm("確認","確定要刪除這筆到訪紀錄嗎?",function(btn){

if (btn){

var params={ip:row.ip,visit_time:row.visit_time};

var callback=function(data){

if (data.status==="success"){

$("#visitors").datagrid("reload");

}

else {$.messager.alert("訊息","刪除到訪紀錄失敗!","error");}

};

$.post("/remove_visitor",params,callback,"json");

}

})

}

else {$.messager.alert("訊息","請點選要刪除的資料!")}

});

</script>

{% endblock%}

這裡用 Ajax 以 post 方法向後端 /get_visitors 取得 datagrid 所需的 json 資料; 點選任一列後按右上角刪除鈕則會用 Ajax 的 post 向後端 /remove_visitor 要求刪除資料. 上面黃色部分是 PHP 版所無, 我覺得加上去會比較好, 下次要改 PHP 版時要加上去.

路徑 get_visitors 的處理類別是從上述舊作的 get_visitors_6 複製過來的, 邏輯相同, 內容完全不用改, 如下所示 :

class get_visitors(webapp2.RequestHandler):

def post(self):

page=self.request.get("page")

rows=self.request.get("rows")

sort=self.request.get("sort")

order=self.request.get("order")

search_field=self.request.get("search_field")

search_what=self.request.get("search_what")

if len(page):

page=int(page)

else:

page=1

if len(rows):

rows=int(rows)

else:

rows=10

if not len(sort):

sort="visit_time"

if not len(order):

order="desc"

if len(search_field):

if search_field=="ip_list":

query=m.Visitors.gql("WHERE ip_list = :1", list(search_what))

elif search_field=="user_agent_list":

query=m.Visitors.gql("WHERE user_agent_list = :1", list(search_what))

else:

query=m.Visitors.all()

query.filter(search_field + " >= ", search_what)

query.filter(search_field + " < ", search_what + u'\ufffd')

else:

query=m.Visitors.gql("ORDER BY %s %s" % (sort, order))

visitors=query.fetch(rows, (page-1)*rows)

rows=[]

for v in visitors:

visit_time=v.visit_time.strftime("%Y-%m-%d %H:%M:%S")

visitor={"ip":v.ip,

"visit_time":visit_time,

"user_agent":v.user_agent}

rows.append(visitor)

count=query.count()

obj={"total":count,"rows":rows}

self.response.headers["Content-Type"]="application/json"

self.response.out.write(json.dumps(obj))

而刪除資料的路徑 /remove_visitor 處理類別則是新寫的, 因為之前從沒試過刪除 Datastore 中的資料, 如下所示 :

class remove_visitor(webapp2.RequestHandler):

def post(self):

ip=self.request.get("ip")

visit_time=self.request.get("visit_time")

#dtobj=datetime.datetime.strptime(visit_time,"%Y-%m-%d %H:%M:%S")

query=m.Visitors.all()

query.filter("ip = ",ip)

#query.filter("visit_time >= ",dtobj)

visitor=query.fetch(1,0)

db.delete(visitor)

content='{"status":"success"}'

self.response.out.write(content)

由於 Visitors 資料表的各欄位沒有一個可作為 key, 所以我就沒有設 key name, 這造成要刪除時無法精準鎖定要刪除的資料實體. 雖然 list_visitors.htm 網頁會傳出 ip 與 visit_time 這兩個參數, 但是其中的 visit_time 值是為了顯示方便而格式化的值 (只到秒), 與存在資料庫中的實體的 visit_time 欄位值並不同, 我參考下列這篇將 visit_time 轉為 datetime 物件實體, 用 >= 去過濾, 但卻出現 Server Internal Error! 所以只好僅過濾 ip 欄位, 並用 fetch(1,0) 刪除符合該 ip 的第一筆 (不是時間最早的, 而是搜尋到的第一筆).

# string to datetime with fractional seconds, on Google App Engine

實際測試範例與 zip 原始檔如下 :

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