網站搭建筆記精簡版---廖雪峰WebApp實戰-Day11:編寫日誌建立頁筆記
阿新 • • 發佈:2018-12-19
今天實現建立部落格日誌的功能 首先在handlers檔案中增加後端功能函式,之後設定前端頁面。 程式碼之後會在github上附上。
handlers
# 驗證許可權是否正確 def check_admin(request): if request.__user__ is None or not request.__user__.admin: raise APIPermissionError() # 編寫部落格建立的api後端函式 @post('/api/blogs') async def api_create_blog(request, *, name, summary, content): check_admin(request) if not name or not name.strip(): raise APIValueError('name', 'name cannot be empty.') if not summary or not summary.strip(): raise APIValueError('summary', 'summary cannot be empty.') if not content or not content.strip(): raise APIValueError('content', 'content cannot be empty.') blog = Blog(user_id=request.__user__.id, user_name=request.__user__.name, user_image=request.__user__.image, name=name.strip(), summary=summary.strip(), content=content.strip()) await blog.save() return blog # 編寫mvc將頁面顯示出來 @get('/manage/blogs/create') async def manage_create_blog(request): return { '__template__': 'manage_blog_edit.html', 'id': '', 'action': '/api/blogs', '__user__': request.__user__ }
html
{% extends '__base__.html' %} {% block title %}編輯日誌{% endblock %} {% block beforehead %} <script> var ID = '{{ id }}', action = '{{ action }}'; function initVM(blog) { <!-- 我們選擇Vue這個簡單易用的MVVM框架來實現建立Blog的頁面,以便將model與view進行分離 --> el:根據選擇器查詢繫結的View,這裡是#vm,就是id為vm的DOM,對應的是一個<div>標籤; data:JavaScript物件表示的Model,我們初始化為{ name: '', summary: '', content: ''}; methods:View可以觸發的JavaScript函式,submit就是提交表單時觸發的函式。 --> 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/', 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-width-1-1 uk-margin-bottom"> <div class="uk-panel uk-panel-box"> <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> <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表單通過<form v-on="submit: submit">把提交表單的事件關聯到submit方法。--> <form v-on="submit: submit" class="uk-form uk-form-stacked"> <div class="uk-alert uk-alert-danger uk-hidden"></div> <div class="uk-form-row"> <label class="uk-form-label">標題:</label> <div class="uk-form-controls"> <!-- 我們在<form>標籤中,用幾個簡單的v-model,就可以讓Vue把Model和View關聯起來 --> <input v-model="name" name="name" type="text" placeholder="標題" class="uk-width-1-1"> </div> </div> <div class="uk-form-row"> <label class="uk-form-label">摘要:</label> <div class="uk-form-controls"> <textarea v-model="summary" rows="4" name="summary" placeholder="摘要" class="uk-width-1-1" style="resize:none;"></textarea> </div> </div> <div class="uk-form-row"> <label class="uk-form-label">內容:</label> <div class="uk-form-controls"> <textarea v-model="content" rows="16" name="content" placeholder="內容" class="uk-width-1-1" style="resize:none;"></textarea> </div> </div> <div class="uk-form-row"> <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> {% endblock %}