在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的高级Git库 Gittle
Sep 22 Python
Python创建系统目录的方法
Mar 11 Python
Python脚本实现格式化css文件
Apr 08 Python
python实现文本文件合并
Dec 29 Python
举例讲解Python面相对象编程中对象的属性与类的方法
Jan 19 Python
OpenCV模板匹配matchTemplate的实现
Oct 18 Python
Python求解正态分布置信区间教程
Nov 20 Python
Pytorch在NLP中的简单应用详解
Jan 08 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
Oct 18 Python
全网最详细的PyCharm+Anaconda的安装过程图解
Jan 25 Python
python中Tkinter 窗口之输入框和文本框的实现
Apr 12 Python
分享python函数常见关键字
Apr 26 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
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
php实现简单洗牌算法
2013/06/18 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
php微信开发之关注事件
2018/06/14 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
python实现寻找最长回文子序列的方法
2018/06/02 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
Django 限制访问频率的思路详解
2019/12/24 Python
python matlab库简单用法讲解
2020/12/31 Python
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
手机被没收检讨书
2014/02/22 职场文书
书香校园活动方案
2014/02/28 职场文书
结对共建工作方案
2014/06/02 职场文书
信息合作协议书
2014/10/09 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
北京故宫的导游词
2015/01/31 职场文书
西安兵马俑导游词
2015/02/02 职场文书
毕业典礼主持词
2015/06/29 职场文书
欢送会主持词
2015/07/01 职场文书
小学英语听课心得体会
2016/01/14 职场文书
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python