3. Day 11 - 编写日志创建页
    5. 阅读: 9903
    6. 在Web开发中，后端代码写起来其实是相当容易的。
    8. 例如，我们编写一个REST API，用于创建一个Blog：
    10. @post('/api/blogs')
    11. def api_create_blog(request, *, name, summary, content):
    12.     check_admin(request)
    13.     if not name or not name.strip():
    14.         raise APIValueError('name', 'name cannot be empty.')
    15.     if not summary or not summary.strip():
    16.         raise APIValueError('summary', 'summary cannot be empty.')
    17.     if not content or not content.strip():
    18.         raise APIValueError('content', 'content cannot be empty.')
    19.     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())
    20.     yield from blog.save()
    21.     return blog
    22. 编写后端Python代码不但很简单，而且非常容易测试，上面的API：api_create_blog()本身只是一个普通函数。
    24. Web开发真正困难的地方在于编写前端页面。前端页面需要混合HTML、CSS和JavaScript，如果对这三者没有深入地掌握，编写的前端页面将很快难以维护。
    26. 更大的问题在于，前端页面通常是动态页面，也就是说，前端页面往往是由后端代码生成的。
    28. 生成前端页面最早的方式是拼接字符串：
    30. s = '<html><head><title>'
    31.     + title
    32.     + '</title></head><body>'
    33.     + body
    34.     + '</body></html>'
    35. 显然这种方式完全不具备可维护性。所以有第二种模板方式：
    37. <html>
    38. <head>
    39.     <title>{{ title }}</title>
    40. </head>
    41. <body>
    42.     {{ body }}
    43. </body>
    44. </html>
    45. ASP、JSP、PHP等都是用这种模板方式生成前端页面。
    47. 如果在页面上大量使用JavaScript（事实上大部分页面都会），模板方式仍然会导致JavaScript代码与后端代码绑得非常紧密，以至于难以维护。其根本原因在于负责显示的HTML DOM模型与负责数据和交互的JavaScript代码没有分割清楚。
    49. 要编写可维护的前端代码绝非易事。和后端结合的MVC模式已经无法满足复杂页面逻辑的需要了，所以，新的MVVM：Model View ViewModel模式应运而生。
    51. MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示：
    53. <script>
    54.     var blog = {
    55.         name: 'hello',
    56.         summary: 'this is summary',
    57.         content: 'this is content...'
    58.     };
    59. </script>
    60. View是纯HTML：
    62. <form action="/api/blogs" method="post">
    63.     <input name="name">
    64.     <input name="summary">
    65.     <textarea name="content"></textarea>
    66.     <button type="submit">OK</button>
    67. </form>
    68. 由于Model表示数据，View负责显示，两者做到了最大限度的分离。
    70. 把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。
    72. ViewModel如何编写？需要用JavaScript编写一个通用的ViewModel，这样，就可以复用整个MVVM模型了。
    74. 好消息是已有许多成熟的MVVM框架，例如AngularJS，KnockoutJS等。我们选择Vue这个简单易用的MVVM框架来实现创建Blog的页面templates/manage_blog_edit.html：
    76. {% extends '__base__.html' %}
    78. {% block title %}编辑日志{% endblock %}
    80. {% block beforehead %}
    82. <script>
    83. var
    84.     ID = '{{ id }}',
    85.     action = '{{ action }}';
    86. function initVM(blog) {
    87.     var vm = new Vue({
    88.         el: '#vm',
    89.         data: blog,
    90.         methods: {
    91.             submit: function (event) {
    92.                 event.preventDefault();
    93.                 var $form = $('#vm').find('form');
    94.                 $form.postJSON(action, this.$data, function (err, r) {
    95.                     if (err) {
    96.                         $form.showFormError(err);
    97.                     }
    98.                     else {
    99.                         return location.assign('/api/blogs/' + r.id);
    100.                     }
    101.                 });
    102.             }
    103.         }
    104.     });
    105.     $('#vm').show();
    106. }
    107. $(function () {
    108.     if (ID) {
    109.         getJSON('/api/blogs/' + ID, function (err, blog) {
    110.             if (err) {
    111.                 return fatal(err);
    112.             }
    113.             $('#loading').hide();
    114.             initVM(blog);
    115.         });
    116.     }
    117.     else {
    118.         $('#loading').hide();
    119.         initVM({
    120.             name: '',
    121.             summary: '',
    122.             content: ''
    123.         });
    124.     }
    125. });
    126. </script>
    128. {% endblock %}
    130. {% block content %}
    132.     <div class="uk-width-1-1 uk-margin-bottom">
    133.         <div class="uk-panel uk-panel-box">
    134.             <ul class="uk-breadcrumb">
    135.                 <li><a href="/manage/comments">评论</a></li>
    136.                 <li><a href="/manage/blogs">日志</a></li>
    137.                 <li><a href="/manage/users">用户</a></li>
    138.             </ul>
    139.         </div>
    140.     </div>
    142.     <div id="error" class="uk-width-1-1">
    143.     </div>
    145.     <div id="loading" class="uk-width-1-1 uk-text-center">
    146.         <span><i class="uk-icon-spinner uk-icon-medium uk-icon-spin"></i> 正在加载...</span>
    147.     </div>
    149.     <div id="vm" class="uk-width-2-3">
    150.         <form v-on="submit: submit" class="uk-form uk-form-stacked">
    151.             <div class="uk-alert uk-alert-danger uk-hidden"></div>
    152.             <div class="uk-form-row">
    153.                 <label class="uk-form-label">标题:</label>
    154.                 <div class="uk-form-controls">
    155.                     <input v-model="name" name="name" type="text" placeholder="标题" class="uk-width-1-1">
    156.                 </div>
    157.             </div>
    158.             <div class="uk-form-row">
    159.                 <label class="uk-form-label">摘要:</label>
    160.                 <div class="uk-form-controls">
    161.                     <textarea v-model="summary" rows="4" name="summary" placeholder="摘要" class="uk-width-1-1" style="resize:none;"></textarea>
    162.                 </div>
    163.             </div>
    164.             <div class="uk-form-row">
    165.                 <label class="uk-form-label">内容:</label>
    166.                 <div class="uk-form-controls">
    167.                     <textarea v-model="content" rows="16" name="content" placeholder="内容" class="uk-width-1-1" style="resize:none;"></textarea>
    168.                 </div>
    169.             </div>
    170.             <div class="uk-form-row">
    171.                 <button type="submit" class="uk-button uk-button-primary"><i class="uk-icon-save"></i> 保存</button>
    172.                 <a href="/manage/blogs" class="uk-button"><i class="uk-icon-times"></i> 取消</a>
    173.             </div>
    174.         </form>
    175.     </div>
    177. {% endblock %}
    178. 初始化Vue时，我们指定3个参数：
    180. el：根据选择器查找绑定的View，这里是#vm，就是id为vm的DOM，对应的是一个<div>标签；
    182. data：JavaScript对象表示的Model，我们初始化为{ name: '', summary: '', content: ''}；
    184. methods：View可以触发的JavaScript函数，submit就是提交表单时触发的函数。
    186. 接下来，我们在<form>标签中，用几个简单的v-model，就可以让Vue把Model和View关联起来：
    188. <!-- input的value和Model的name关联起来了 -->
    189. <input v-model="name" class="uk-width-1-1">
    190. Form表单通过<form v-on="submit: submit">把提交表单的事件关联到submit方法。
    192. 需要特别注意的是，在MVVM中，Model和View是双向绑定的。如果我们在Form中修改了文本框的值，可以在Model中立刻拿到新的值。试试在表单中输入文本，然后在Chrome浏览器中打开JavaScript控制台，可以通过vm.name访问单个属性，或者通过vm.$data访问整个Model：
    196. 如果我们在JavaScript逻辑中修改了Model，这个修改会立刻反映到View上。试试在JavaScript控制台输入vm.name = 'MVVM简介'，可以看到文本框的内容自动被同步了：
    200. 双向绑定是MVVM框架最大的作用。借助于MVVM，我们把复杂的显示逻辑交给框架完成。由于后端编写了独立的REST API，所以，前端用AJAX提交表单非常容易，前后端分离得非常彻底。
    202. 参考源码
    204. day-11