和創建註冊頁面類似，日誌創建頁面的編寫也並不複雜。在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>此模板除了用於創建新的日誌內容，也是編輯修改現有日誌的模板，只是編輯修改時會預先載入先前的日誌內容在輸入欄中。
