Python版——博客网站四 编写日志创建页

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

开源地址:https://github.com/leebingbin/Python3.WebAPP.Blog

 

    单从编码来说,WebApp开发真正困难的地方在于编写前端页面。前端页面需要混合HTML、CSS和JavaScript,如果对这三者没有深入地掌握,编写的前端页面将很快难以维护。更大的问题在于,前端页面通常是动态页面,也就是说,前端页面往往是由后端代码生成的。
    生成前端页面最早的方式是拼接字符串:

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

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

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

    JSP、PHP等都是用这种模板方式生成前端页面。如果在页面上大量使用JavaScript(实际上大部分页面都会),模板方式仍然会导致JavaScript代码与后端代码绑得非常紧密,以至于难以维护。其根本原因在于负责显示的HTML DOM模型与负责数据和交互的JavaScript代码没有分割清楚。
    要编写可维护的前端代码绝非易事。和后端结合的MVC模式已经无法满足复杂页面逻辑的需要了,所以,新的MVVM:Model View ViewModel模式应运而生。
    MVVM最早由微软提出来,它借鉴了桌面应用程序的MVC思想,在前端页面中,把Model用纯JavaScript对象表示:

<script>var blog = {name: 'hello python3',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">Submit</button>
</form>

    由于Model表示数据,View负责显示,两者做到了最大限度的分离。
    把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来,还负责把View的修改同步回Model。
    ViewModel如何编写?需要用JavaScript编写一个通用的ViewModel,这样,就可以复用整个MVVM模型了。市面上已有许多成熟的MVVM框架,例如AngularJS,KnockoutJS等。我们选择Vue (https://vuejs.org/)这个简单易用的MVVM框架来实现创建Blog的页面templates/manage_blog_edit.html:

{% extends '__base__.html' %}{% block title %}编辑日志{% endblock %}{% block beforehead %}<script>varID = '{{ 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 %}

    初始化Vue时,我们指定3个参数:
        el:根据选择器查找绑定的View,这里是#vm,就是id为vm的DOM,对应的是一个<div>标签;
        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:

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

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

 

 

本文为博主原创文章,转载请注明出处!

https://my.oschina.net/u/3375733/blog/

转载于:https://my.oschina.net/u/3375733/blog/1547263

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/257352.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2017—2018 实验报告:实验一

实验一&#xff1a;实验报告 课程&#xff1a;程序设计与数据结构 班级&#xff1a; 1623 姓名&#xff1a; 张旭升 学号&#xff1a;20162329 指导教师&#xff1a;娄嘉鹏 王志强 实验日期&#xff1a;9月25日 实验密级&#xff1a; 非密级 预习程度&#xff1a; 已预习 必修/…

iOS开发 - Swift实现清除缓存功能

前言: 开发移动应用时&#xff0c;请求网络资源是再常见不过的功能。如果每次都去请求&#xff0c;不但浪费时间&#xff0c;用户体验也会变差&#xff0c;所以移动应用都会做离线缓存处理&#xff0c;其中已图片缓存最为常见。 但是时间长了&#xff0c;离线缓存会占用大量的…

如何开启IIS7以上的“IIS6管理兼容性”

护卫神PHP套件的安装&#xff0c;需要开启“IIS6管理兼容性”&#xff0c; 那么&#xff0c;如何开启IIS7、IIS7.5、IIS8.0的IIS6兼容模式呢&#xff1f; 设置的时候&#xff0c;请参照如下截图&#xff1a; 本文转自黄聪博客园博客&#xff0c;原文链接&#xff1a;http://www…

ssh服务端口转发详解

端口转发的概念和应用什么是端口转发呢&#xff0c;我们知道&#xff0c;SSH 会自动加密和解密所有 SSH 客户端与服务端之间的网络数据。但是&#xff0c;SSH 还同时提供了一个非常有用的功能&#xff0c;这就是端口转发。它能够将其他 TCP 端口的网络数据通过 SSH 链接来转发&…

布局管理器android,Android课程---布局管理器之相对布局(一)

下面示例的是在父容器里如何设置按钮的位置&#xff0c;难度&#xff1a;***&#xff0c;重点是找到一个主按钮&#xff0c;设置它的id&#xff0c;然后根据它来设置其他按钮在父容器的位置。代码示例&#xff1a;android:layout_width"match_parent"android:layout_…

【Cocos2d-Js基础教学 入门目录】

本教程视地址频在&#xff1a;九秒课堂 完全免费从接触Cocos2dx-Js以来&#xff0c;它的绽放的绚丽让我无法不对它喜欢。我觉得Js在不断带给我们惊喜&#xff1b;在开发过程中&#xff0c;会大大提升我们对原型开发的利用率&#xff0c;使用Js语言做游戏开发&#xff0c;使游戏…

Hammer.js移动端触屏框架的使用

hammer.js是一个多点触摸手势库&#xff0c;能够为网页加入Tap、Double Tap、Swipe、Hold、Pinch、Drag等多点触摸事件&#xff0c;免去自己监听底层touchstart、touchmove、touchend事件并且写一大堆判断逻辑的痛苦。hammer.js不但支持触摸屏设备的浏览器&#xff0c;在桌面浏…

Android实现笔记本修改功能,安卓12第二个开发者预览版推出:UI、功能有所改进...

最近谷歌正式推出了Android 12的第二个开发者预览版&#xff0c;带来了很多UI和功能上的改进。首先最明显的变化应该是锁屏界面和下拉通知栏的音乐播放器。此前这部分UI的配色一直采用的是音乐专辑的主色调&#xff0c;但在Android 12上&#xff0c;这个配色变成了系统的强调色…

C语言中Union类型的使用方法

转自&#xff1a;http://blog.csdn.net/feimor/article/details/6858103 使用C语言时&#xff0c;常常使用struct&#xff0c;对于union类型却几乎没有用过&#xff0c;只知道它是联合类型&#xff0c;各字段共享一块内存&#xff0c;实际应用中却不知道它的具体用途。 今天读《…

阿里启动NASA计划创造新经济核心科技

本文讲的是阿里启动"NASA"计划创造新经济核心科技【IT168 资讯】2017年3月9日&#xff0c;阿里巴巴集团在杭州召开首届技术大会&#xff0c;动员全球两万多名科学家和工程师投身“新技术战略”。会议透露&#xff0c;阿里巴巴正在启动一项代号“NASA”的计划&#xf…

android one x3怎么样,618旗舰手机怎么选,看完这篇文章,你就会知道

转眼间&#xff0c;2021年即将过半&#xff0c;一年一度的年中购物狂欢节618就要到来了。我已经迫不及待了。毕竟在618年中大促的时候&#xff0c;各家厂商都有力度非常大的活动。而且也有很多小伙伴一直在观望&#xff0c;想要在618的时候给自己换一款手机。说实话&#xff0c…

华为鸿蒙与magic,如果荣耀Magic3搭载了屏下镜头和鸿蒙系统,你会做第一批吗?...

华为荣耀在目前的手机市场中&#xff0c;荣耀手机的人气还是蛮高的&#xff0c;从高端旗舰市场到中低端市场&#xff0c;我们都能够看到荣耀手机的踪影&#xff0c;这已经可以代表荣耀手机的优势了。要知道华为荣耀这两年的发展速度非常快&#xff0c;产品的布局速度也是如此&a…

[BZOJ1026] [SCOI2009] windy数 (数位dp)

Description windy定义了一种windy数。不含前导零且相邻两个数字之差至少为2的正整数被称为windy数。 windy想知道&#xff0c;在A和B之间&#xff0c;包括A和B&#xff0c;总共有多少个windy数&#xff1f; Input 包含两个整数&#xff0c;A B。 Output 一个整数 Sample Input…

SQL——快速定位相关的外键表

转载于:https://www.cnblogs.com/mingle/p/4506422.html

Linux安装glibc(升级版本)

2019独角兽企业重金招聘Python工程师标准>>> glibc下载地址&#xff1a;http://ftp.gnu.org/gnu/glibc/ 这里下载 glibc-2.15&#xff1a; http://ftp.gnu.org/gnu/glibc/glibc-2.15.tar.gz glibc-ports-2.15&#xff1a; http://ftp.gnu.org/gnu/glibc/glibc-ports…

定义列表的特点html,HTML的列表表格表单知识点

无序列表格式 有序列表格式第一项 …

【Fanvas技术解密】HTML5 canvas实现脏区重绘

先说明一下&#xff0c;fanvas是笔者在企鹅公司开发的&#xff0c;即将开源的flash转canvas工具。 脏区重绘(dirty rectangle)并不是一门新鲜的技术了&#xff0c;这在最早2D游戏诞生的时候就已经存在。 复杂的术语或概念就不多说&#xff0c;简单说&#xff0c;脏区重绘就是每…

html调用js里面的函数,html如何调用js函数

html调用js函数的方法&#xff1a;1、用控件本身进行调用&#xff1b;2、通过javascript中的时间控件定时执行&#xff1b;3、通过getElementById调用&#xff1b;4、通过document.getElementsByName调用。本文操作环境&#xff1a;Windows7系统、html5&&javascript1.8…

大部分人都会做错的经典JS闭包面试题

2019独角兽企业重金招聘Python工程师标准>>> 由工作中演变而来的面试题 JS中有几种函数 创建函数的几种方式 三个fun函数的关系是什么&#xff1f; 函数作用域链的问题 到底在调用哪个函数&#xff1f; 后话 转载于:https://my.oschina.net/u/3687565/blog/1549046

STM32片上Flash内存映射、页面大小、寄存器映射

转自&#xff1a;http://blog.chinaunix.net/uid-20617446-id-3847242.html 一、怎么看Flash大小 1.1 通过型号 型号会印在MCU表面&#xff0c;可以通过观察获得&#xff0c;我的是STM32F103RBT6(以下分析基于这个型号)&#xff0c;对照下图的STM32产品命名&#xff0c;可知STM…