在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 相关文章推荐
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
Apr 25 Python
从Python的源码来解析Python下的freeblock
May 11 Python
Eclipse中Python开发环境搭建简单教程
Mar 23 Python
python基础教程之Filter使用方法
Jan 17 Python
Python之str操作方法(详解)
Jun 19 Python
使用pytorch进行图像的顺序读取方法
Jul 27 Python
python文档字符串(函数使用说明)使用详解
Jul 30 Python
django 快速启动数据库客户端程序的方法示例
Aug 16 Python
jupyter notebook中新建cell的方法与快捷键操作
Apr 22 Python
详解Django中异步任务之django-celery
Nov 05 Python
Alpine安装Python3依赖出现的问题及解决方法
Dec 25 Python
python库Tsmoothie模块数据平滑化异常点抓取
Jun 10 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中看实例学正则表达式
2006/12/25 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
Angular多选、全选、批量选择操作实例代码
2017/03/10 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
Python中几种导入模块的方式总结
2017/04/27 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
python实现学生信息管理系统
2020/04/05 Python
python实现简单的文字识别
2018/11/27 Python
python实现视频分帧效果
2019/05/31 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
商务日语毕业生自荐信
2013/11/23 职场文书
个人委托书怎么写
2014/04/04 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
2014年评职称工作总结
2014/11/20 职场文书
nginx+lua单机上万并发的实现
2021/05/31 Servers
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python