在编写完ORM
框架,web
开发框架之后,后端代码写起来就相对的比较轻松了,比如现在编写一个关于用来创建blog的API:
#检测有否登录且是否为管理员
def check_admin(request):
if request.__user__ is None or request.__user__.admin:
raise APIPermissionError()
#创建blog
@post('/api/blogs')
async def api_create_blogs(request, *, name, summary, content):
check_admin(request)
if not name or not name.strip():
raise APIValueError('name','name can not empty.')
if not summary or not summary.strip():
raise APIVauleError('summary','summary can not empty.')
if not content or not content.strip():
raise APIValueError('content','content can not empty.')
blog = Blog(user_id=request.__user__.id, user_name=request.__user__.name, user_image=request.__user__image, summary=summary.strip(), name=name.strip(), content=content.strip())
await blog.save()
return blog
现在真正困难的是编写前端页面。
前端页面需要混合HTML、CSS和JavaScript,如果对这三者没有深入地掌握,编写的前端页面将很快难以维护。
ASP、JSP、PHP等都是用以下这种模板方式生成前端页面。
<html>
<head>
<title>{{ title }}</title>
</head>
<body>
{{ body }}
</body>
</html>
如果在页面上要使用大量的javaScript
,这样的模板会导致JavaScript
代码与后端代码绑得非常紧密,以至于难以维护。根本原因还是:负责显示的DOM模型(Document Object Model)与负责数据和交互的JavaScript代码没有分割清楚。
所以新的MVVM:Model View ViewModel模式应运而生。
个人认为这个MVVM就是基于前端页面的MVC。
在前端页面中,用纯JavaScript对象表示Model
而View则是纯HTML,Model表示数据,View负责显示,两者做到了最大限度的分离。
ViewModel作用是把Model和View关联起来的。ViewModel负责把Model的数据同步到View显示出来,还负责把View的修改同步回Model。
如:
{% 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('/api/blogs/' + r.id);
}
});
}
}
});
$('#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-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 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">
<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 %}
至此还需编写MVC把页面显示出来:
#显示创建blog页面
@get('/manage/blogs/create')
def manage_create_blog(request):
return {
'__template__': 'manage_blog_edit.html',
'id': '',
'action': '/api/blogs',
'__user__': request.__user__
}
由于初学,对JavaScript
以HTML
并不熟悉,不过,只要多思考,结合python后端中编写的API以及MVC,看明白其功能还是可以的。