在Python的web框架中编写创建日志的程序的教程


Posted in Python onApril 30, 2015

在Web开发中,后端代码写起来其实是相当容易的。

例如,我们编写一个REST API,用于创建一个Blog:

@api
@post('/api/blogs')
def api_create_blog():
  i = ctx.request.input(name='', summary='', content='')
  name = i.name.strip()
  summary = i.summary.strip()
  content = i.content.strip()
  if not name:
    raise APIValueError('name', 'name cannot be empty.')
  if not summary:
    raise APIValueError('summary', 'summary cannot be empty.')
  if not content:
    raise APIValueError('content', 'content cannot be empty.')
  user = ctx.request.user
  blog = Blog(user_id=user.id, user_name=user.name, name=name, summary=summary, content=content)
  blog.insert()
  return blog

编写后端Python代码不但很简单,而且非常容易测试,上面的API:api_create_blog()本身只是一个普通函数。

Web开发真正困难的地方在于编写前端页面。前端页面需要混合HTML、CSS和JavaScript,如果对这三者没有深入地掌握,编写的前端页面将很快难以维护。

更大的问题在于,前端页面通常是动态页面,也就是说,前端页面往往是由后端代码生成的。

生成前端页面最早的方式是拼接字符串:

s = '<html><head><title>'
 + title
 + '</title></head><body>'
 + body
 + '</body></html>'

显然这种方式完全不具备可维护性。所以有第二种模板方式:

<html>
<head>
  <title>{{ title }}</title>
</head>
<body>
  {{ body }}
</body>
</html>

ASP、JSP、PHP等都是用这种模板方式生成前端页面。

如果在页面上大量使用JavaScript(事实上大部分页面都会),模板方式仍然会导致JavaScript代码与后端代码绑得非常紧密,以至于难以维护。其根本原因在于负责显示的HTML DOM模型与负责数据和交互的JavaScript代码没有分割清楚。

要编写可维护的前端代码绝非易事。和后端结合的MVC模式已经无法满足复杂页面逻辑的需要了,所以,新的MVVM:Model View ViewModel模式应运而生。

MVVM最早由微软提出来,它借鉴了桌面应用程序的MVC思想,在前端页面中,把Model用纯JavaScript对象表示:

<script>
var blog = {
  name: 'hello',
  summary: 'this is summary',
  content: 'this is content...'
};
</script>

View是纯HTML:

<form action="/api/blogs" method="post">
  <input name="name">
  <input name="summary">
  <textarea name="content"></textarea>
  <button type="submit">OK</button>
</form>

由于Model表示数据,View负责显示,两者做到了最大限度的分离。

把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来,还负责把View的修改同步回Model。

ViewModel如何编写?需要用JavaScript编写一个通用的ViewModel,这样,就可以复用整个MVVM模型了。

好消息是已有许多成熟的MVVM框架,例如AngularJS,KnockoutJS等。我们选择Vue这个简单易用的MVVM框架来实现创建Blog的页面templates/manage_blog_edit.html:

{% extends '__base__.html' %}

{% block title %}编辑日志{% endblock %}

{% block beforehead %}

<script>
var
  action = '{{ action }}',
  redirect = '{{ redirect }}';

var vm;

$(function () {
  vm = new Vue({
    el: '#form-blog',
    data: {
      name: '',
      summary: '',
      content: ''
    },
    methods: {
      submit: function (event) {
        event.preventDefault();
        postApi(action, this.$data, function (err, r) {
          if (err) {
            alert(err);
          }
          else {
            alert('保存成功!');
            return location.assign(redirect);
          }
        });
      }
    }
  });
});
</script>
{% endblock %}

{% block content %}
<div class="uk-width-1-1">
  <form id="form-blog" v-on="submit: submit" class="uk-form uk-form-stacked">
    <div class="uk-form-row">
      <div class="uk-form-controls">
        <input v-model="name" class="uk-width-1-1">
      </div>
    </div>
    <div class="uk-form-row">
      <div class="uk-form-controls">
        <textarea v-model="summary" rows="4" class="uk-width-1-1"></textarea>
      </div>
    </div>
    <div class="uk-form-row">
      <div class="uk-form-controls">
        <textarea v-model="content" rows="8" class="uk-width-1-1"></textarea>
      </div>
    </div>
    <div class="uk-form-row">
      <button type="submit" class="uk-button uk-button-primary">保存</button>
    </div>
  </form>
</div>
{% endblock %}

初始化Vue时,我们指定3个参数:

el:根据选择器查找绑定的View,这里是#form-blog,就是id为form-blog的DOM,对应的是一个<form>标签;

data:JavaScript对象表示的Model,我们初始化为{ name: '', summary: '', content: ''};

methods:View可以触发的JavaScript函数,submit就是提交表单时触发的函数。

接下来,我们在<form>标签中,用几个简单的v-model,就可以让Vue把Model和View关联起来:

<!-- input的value和Model的name关联起来了 -->
<input v-model="name" class="uk-width-1-1">

Form表单通过<form v-on="submit: submit">把提交表单的事件关联到submit方法。

需要特别注意的是,在MVVM中,Model和View是双向绑定的。如果我们在Form中修改了文本框的值,可以在Model中立刻拿到新的值。试试在表单中输入文本,然后在Chrome浏览器中打开JavaScript控制台,可以通过vm.name访问单个属性,或者通过vm.$data访问整个Model:

在Python的web框架中编写创建日志的程序的教程

如果我们在JavaScript逻辑中修改了Model,这个修改会立刻反映到View上。试试在JavaScript控制台输入vm.name = 'MVVM简介',可以看到文本框的内容自动被同步了:

在Python的web框架中编写创建日志的程序的教程

双向绑定是MVVM框架最大的作用。借助于MVVM,我们把复杂的显示逻辑交给框架完成。由于后端编写了独立的REST API,所以,前端用AJAX提交表单非常容易,前后端分离得非常彻底。

Python 相关文章推荐
python三元运算符实现方法
Dec 17 Python
基于Django的python验证码(实例讲解)
Oct 23 Python
python下10个简单实例代码
Nov 15 Python
Python实现判断给定列表是否有重复元素的方法
Apr 11 Python
Python使用ConfigParser模块操作配置文件的方法
Jun 29 Python
Python OpenCV利用笔记本摄像头实现人脸检测
Aug 20 Python
python 字典操作提取key,value的方法
Jun 26 Python
PyCharm导入python项目并配置虚拟环境的教程详解
Oct 13 Python
Python CSV文件模块的使用案例分析
Dec 21 Python
Python-jenkins模块之folder相关操作介绍
May 12 Python
安装pyinstaller遇到的各种问题(小结)
Nov 20 Python
python3 实现mysql数据库连接池的示例代码
Apr 17 Python
用Python实现web端用户登录和注册功能的教程
Apr 30 #Python
用Python编写web API的教程
Apr 30 #Python
为Python的web框架编写前端模版的教程
Apr 30 #Python
为Python的web框架编写MVC配置来使其运行的教程
Apr 30 #Python
在Python的web框架中配置app的教程
Apr 30 #Python
python实现从ftp服务器下载文件的方法
Apr 30 #Python
简单介绍Python下自己编写web框架的一些要点
Apr 29 #Python
You might like
收音机的保养
2021/03/01 无线电
在线竞拍系统的PHP实现框架(二)
2006/10/09 PHP
PHP 和 XML: 使用expat函数(二)
2006/10/09 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
Angular中支持SCSS的方法
2017/11/18 Javascript
让IDE识别webpack的别名alias的实现方法
2020/05/06 Javascript
python实现清屏的方法
2015/04/30 Python
在Python的Django框架中创建语言文件
2015/07/27 Python
代码实例讲解python3的编码问题
2019/07/08 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
优秀大学生推荐信范文
2013/11/28 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
水电工岗位职责
2015/02/14 职场文书
中标通知书范本
2015/04/17 职场文书
运动会表扬稿范文
2015/05/05 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
护士心得体会范文
2016/01/25 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS