上海中学国际部学费,网站评价及优化分析报告,网站落地页和普通网页,智慧团建个人注册2019独角兽企业重金招聘Python工程师标准 开源地址#xff1a;https://github.com/leebingbin/Python3.WebAPP.Blog 单从编码来说#xff0c;WebApp开发真正困难的地方在于编写前端页面。前端页面需要混合HTML、CSS和JavaScript#xff0c;如果对这三者没有深… 2019独角兽企业重金招聘Python工程师标准 开源地址https://github.com/leebingbin/Python3.WebAPP.Blog 单从编码来说WebApp开发真正困难的地方在于编写前端页面。前端页面需要混合HTML、CSS和JavaScript如果对这三者没有深入地掌握编写的前端页面将很快难以维护。更大的问题在于前端页面通常是动态页面也就是说前端页面往往是由后端代码生成的。 生成前端页面最早的方式是拼接字符串 s htmlheadtitle title /title/headbody body /body/html 显然这种方式完全不具备可维护性。所以有第二种模板方式 html
headtitle{{ title }}/title
/head
body{{ body }}
/body
/html JSP、PHP等都是用这种模板方式生成前端页面。如果在页面上大量使用JavaScript实际上大部分页面都会模板方式仍然会导致JavaScript代码与后端代码绑得非常紧密以至于难以维护。其根本原因在于负责显示的HTML DOM模型与负责数据和交互的JavaScript代码没有分割清楚。 要编写可维护的前端代码绝非易事。和后端结合的MVC模式已经无法满足复杂页面逻辑的需要了所以新的MVVMModel View ViewModel模式应运而生。 MVVM最早由微软提出来它借鉴了桌面应用程序的MVC思想在前端页面中把Model用纯JavaScript对象表示 scriptvar blog {name: hello python3,summary: this is summary,content: this is content};
/script View是纯HTML form action/api/blogs methodpostinput namenameinput namesummarytextarea namecontent/textareabutton typesubmitSubmit/button
/form 由于Model表示数据View负责显示两者做到了最大限度的分离。 把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来还负责把View的修改同步回Model。 ViewModel如何编写需要用JavaScript编写一个通用的ViewModel这样就可以复用整个MVVM模型了。市面上已有许多成熟的MVVM框架例如AngularJSKnockoutJS等。我们选择Vue https://vuejs.org/这个简单易用的MVVM框架来实现创建Blog的页面templates/manage_blog_edit.html {% extends __base__.html %}{% block title %}编辑日志{% endblock %}{% block beforehead %}scriptvarID {{ 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 classuk-width-1-1 uk-margin-bottomdiv classuk-panel uk-panel-boxul classuk-breadcrumblia href/manage/comments评论/a/lilia href/manage/blogs日志/a/lilia href/manage/users用户/a/li/ul/div/divdiv iderror classuk-width-1-1/divdiv idloading classuk-width-1-1 uk-text-centerspani classuk-icon-spinner uk-icon-medium uk-icon-spin/i 正在加载.../span/divdiv idvm classuk-width-2-3form v-onsubmit: submit classuk-form uk-form-stackeddiv classuk-alert uk-alert-danger uk-hidden/divdiv classuk-form-rowlabel classuk-form-label标题:/labeldiv classuk-form-controlsinput v-modelname namename typetext placeholder标题 classuk-width-1-1/div/divdiv classuk-form-rowlabel classuk-form-label摘要:/labeldiv classuk-form-controlstextarea v-modelsummary rows4 namesummary placeholder摘要 classuk-width-1-1 styleresize:none;/textarea/div/divdiv classuk-form-rowlabel classuk-form-label内容:/labeldiv classuk-form-controlstextarea v-modelcontent rows16 namecontent placeholder内容 classuk-width-1-1 styleresize:none;/textarea/div/divdiv classuk-form-rowbutton typesubmit classuk-button uk-button-primaryi classuk-icon-save/i 保存/buttona href/manage/blogs classuk-buttoni classuk-icon-times/i 取消/a/div/form/div{% endblock %}初始化Vue时我们指定3个参数 el根据选择器查找绑定的View这里是#vm就是id为vm的DOM对应的是一个div标签 dataJavaScript对象表示的Model我们初始化为{ name: , summary: , content: } methodsView可以触发的JavaScript函数submit就是提交表单时触发的函数。 接下来我们在form标签中用几个简单的v-model就可以让Vue把Model和View关联起来 !-- input的value和Model的name关联起来了 --
input v-modelname classuk-width-1-1 Form表单通过form v-onsubmit: 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