和創建註冊頁面類似,日誌創建頁面的編寫也並不複雜。在www/templates下創建manage_blog_edit.html:
<code> {% extends '__base__.html' %} {% block title %}編輯日誌{% endblock %} {% block beforehead %}
<
script
>
var
ID ='{{ id }}'
, action ='{{ action }}'
;function
initVM
(blog
) {var
vm =new
Vue({el
:'#vm'
,data
: blog,methods
: {submit
:function
(event
) { event.preventDefault();var
$form = $('#vm'
).find('form'
); $form.postJSON(action,this
.$data,function
(err, r
) {if
(err) { $form.showFormError(err); }else
{return
location.assign('/manage/blogs'
); } }); } } }); $('#vm'
).show(); } $(function
() {
if
(ID) { getJSON('/api/blogs/'
+ ID,function
(err, blog
) {if
(err) {return
fatal(err); } $('#loading'
).hide(); initVM(blog); }); }else
{ $('#loading'
).hide(); initVM({name
:''
,summary
:''
,content
:''
}); } });script
> {% endblock %} {% block content %}<
div
class
="uk-grid"
><
div
class
="uk-width-1-1 uk-margin-bottom"
><
ul
class
="uk-breadcrumb"
><
li
><
a
href
="/manage/comments"
>評論a
>li
><
li
><
a
href
="/manage/blogs"
>日誌a
>li
><
li
><
a
href
="/manage/users"
>用戶a
>li
>ul
>div
><
div
id
="error"
class
="uk-width-1-1"
>div
><
div
id
="loading"
class
="uk-width-1-1 uk-text-center"
><
span
><
i
class
="uk-icon-spinner uk-icon-medium uk-icon-spin"
>i
> 正在加載...span
>div
><
div
id
="vm"
class
="uk-width-2-3"
><
form
v-on
="submit: submit"
class
="uk-form-stacked"
><
div
class
="uk-alert uk-alert-danger uk-hidden"
>div
><
div
class
="uk-margin-top"
><
label
class
="uk-form-label"
>標題:label
><
div
class
="uk-form-controls"
><
input
v-model
="name"
name
="name"
type
="text"
placeholder
="標題"
class
="uk-input uk-form-width-large"
>div
>div
><
div
class
="uk-margin-top"
><
label
class
="uk-form-label"
>摘要:label
><
div
class
="uk-form-controls"
><
textarea
v-model
="summary"
rows
="4"
name
="summary"
placeholder
="摘要"
class
="uk-textarea"
style
="resize:none;"
>textarea
>div
>div
><
div
class
="uk-margin-top"
><
label
class
="uk-form-label"
>內容:label
><
div
class
="uk-form-controls"
><
textarea
v-model
="content"
rows
="12"
name
="content"
placeholder
="內容"
class
="uk-textarea"
style
="resize:none;"
>textarea
>div
>div
><
div
class
="uk-margin-top"
><
button
type
="submit"
class
="uk-button uk-button-primary"
><
i
class
="uk-icon-save"
>i
> 保存button
><
a
href
="/manage/blogs"
class
="uk-button"
><
i
class
="uk-icon-times"
>i
> 取消a
>div
>form
>div
>div
> {% endblock %} /<code>此模板除了用於創建新的日誌內容,也是編輯修改現有日誌的模板,只是編輯修改時會預先載入先前的日誌內容在輸入欄中。