本文对渐进式框架和MVVM等概念做个简介,并简单运用Vue.js(一套构建用户界面的渐进式框架)来构建API项目的后台管理系统。
什么是MVVM
Model–View–ViewModel(MVVM)是一种创建用户界面的软件架构设计模式,其中Model就是数据模型,View就是我们的视图,ViewModel就是一个视图模型,用来绑定数据模型和视图上面的dom元素。
MVVM 源自于经典的 Model–View–Controller(MVC)模式(期间还演化出了 Model-View-Presenter(MVP)模式,可忽略不计)。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离,极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层,它就像是一个中转站(value converter),负责转换 Model 中的数据对象来让数据变得更容易管理和使用,该层向上与视图层进行双向数据绑定,向下与 Model 层通过接口请求进行数据交互,起呈上启下作用。
MVVM 模型示意图:
MVVM 的各个组成部分 :
——引用自前后端分手大师——MVVM 模式
什么是渐进式框架
渐进式——在原有项目中,可以先尝试引入一两个组件,可以当插件用....甚至也可以用它来开发整个项目!换句话,站在使用者的来说:“给你一个空屋,至于你需要什么自己一件件添,而不是那种家居家电全齐,自己不喜欢再一件件的扔了,甚至required 必须用且耗费空间的!”
它给你提供足够的optional,但并不主张很多required,也不多做职责之外的事!这就是渐进式。
——引用自《Vue2.0 中,“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么?》
什么是 Vue.js
Vue.js 是一套构建用户界面的渐进式框架,专注于MVVM 模型的 ViewModel 层。
Vue.js 不仅简单、容易上手、配置设施齐全,同时拥有中文文档。
对于使用 Vue.js 的开发者来说,我们仍然可以使用 熟悉的 HTML 和 CSS 来编写代码。并且,Vue.js 也使用了 Virtual DOM、Reactive 及组件化的思想,可以让我们集中精力于编写应用,而不是应用的性能。
——引用自《我的职业是前端工程师【四】:如何选择合适的前端框架,告别选择恐惧症》
Vue.js 是一套构建用户界面的渐进式框架。它是一个开源框架,最新版本已经更新到了2.0,是一个独立的Javascript框架,不依赖于任何其他框架(例如jquery)。
Vue.js开源地址:https://github.com/vuejs/vue
Vue.js英文文档:https://vuejs.org/
Vue.js中文文档: https://vuefe.cn/
Vue.js各种资源:https://github.com/vuejs/awesome-vue#official-resources
Vue.js简单实例
现有个 .NET API 项目,需要建立一个简易的后台管理系统,来管理后台用户和应用授权信息。原有的后台管理系统,功能比较完善和庞大,对于该项目来说显得过于累赘,所以尝试采用基于现有.NET API项目框架基础上的一种更简便快捷的小型后台前端框架。Vue.js就是一种很好的选择。
具体实现可参考Vue.js中文文档以及JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查)