基于“MVVM”模式的“Web”前端的设计与实现

方生

摘要：隨着“JavaScript”技术的快速发展和浏览器功能的增强，为了追求更好的用户体验和开发模式，“Web”系统的开发过程已经从过去的后端分层模式发展到今天的前端分层模式，其开发模式发生了质的变化。该文阐述了“Web”系统开发模式的发展过程，介绍了基于“MVVM”模式的前端框架“Vue.js”技术，并以“Web”前端的“主页”模块为例，说明了基于“MVVM”模式的“Web”前端的具体实现。

关键词：MVVM;Web;前端;Vue.js

中图分类号：TP311      文献标识码：A

文章编号：1009-3044（2021）20-0147-03

1 背景

随着“Internet”的发展，作为信息传递载体的“Web”系统页面的内容、组织结构、表现形式和交互方式都没有发生太大的变化。改变较大的是“Web”系统的开发模式和主流技术。目前，“Web”系统开发的主要模式有“MVC”模式和“MVVM”模式。“MVC”模式是一种系统级架构模式，此模式使开发人员能够从体系结构级别了解应该在什么地方编写什么代码。但这种模式的典型问题是前端开发严重依赖于开发环境，前端和后端仍然纠缠在一起。而“MVVM”模式是在特定的组件或单个页面中使用的，可以很好地解决“MVC”模式所存在的问题。

2 “MVVM”模式

在传统的“Web”项目中，“Web”项目通常在服务器端渲染。服务器进程从数据库中获取数据后，使用后端模板引擎，甚至直接在“HTML”模板中嵌入后端语言（如“JSP”“PHP”“ASP”）来加载数据生成“HTML”，然后通过网络传输到用户浏览器，再由浏览器解析成可见的“HTML”页面。这种页面简单，交互性弱，数据处理和呈现方式相对简单[1]。

但是，对于目前的大型“Web”应用程序项目，有必要将前端和后端分开。随着“JavaScript”技术的飞速发展，为了追求更好的用户体验和开发方法，浏览器端分层架构的“MVVM（Model-View-ViewModel）”模式开始出现。“MVVM”模式用于特定组件或单个页面。前端在浏览器端工作，后端在服务器端工作。这种模式的好处是显而易见的，前端和后端的责任是明确的。明确的分工可以使开发并行，前端可以在本地开发，后端可以集中处理业务逻辑和输出“RESTful”接口。前端开发和部署相对独立，只要使用前端和后端接口，调试或开发新功能就非常方便。

3 基于“MVVM”模式的前端框架技术“Vue.js”

为了降低前端开发的复杂性，出现了大量的前端框架，如“Google”的“Angularjs”“Facebook”的“Reactjs”和本文中的“Vue.js”。

“Vue.js”采用的是“MVVM”的开发模式。其核心思想是数据驱动和组件化[2]。数据驱动的思想使前端从原先的“DOM”操作中解放出来，我们不再需要在维护视图和数据的统一上花费大量的时间，只需要关注“Data”的变化[3]。而组件化是“Vue.js”的重要的核心思想，应用组件化的特点，可以将任意封装好的代码注册成标签，这样就在很大程度上减少了重复开发。组件化思想使得“Web”页面的构建就像搭建积木一样，从而提高了开发效率和代码复用性。基于“Vue.js”技术的“MVVM”开发模式架构图1所示[4]。

4 基于“MVVM”模式的“Web”系统的开发

利用基于“MVVM”模式的前端框架技术“Vue.js”实现“Web”系统的开发。

4.1 项目目录组织结构

设计规范合理的目录组织结构，可以方便日后的维护和管理。项目目录组织结构如图2所示。

4.2 项目首页设计与实现

主页是用户访问网站的入口页面。如今，用户体验越来越受到重视。主页的设计是非常重要和关键的。优秀的视觉界面设计和便捷的个性化体验会让用户印象深刻，流连忘返[5]。根据自上而下，由简到繁的原则，首先实现顶部区的功能。顶部区主要有导航菜单组成，方便用户切换到其他页面。

1）NavBar.vue

在“components”文件夹下新建“NavBar.vue”文件。主要代码如下：