| 标题 | 基于MVVM的高校团委网站设计与开发 |
| 范文 | 黄冰 摘要：结合目前高校共青团工作信息化趋势，文章介绍了基于流行的MVVM技术开发高校团委网站的过程，包括需求分析、架构设计、MVVM原理，介绍了一种基于MVVM的前端应用框架Vue并展示了其在实际项目中的运用。该网站项目为学校团委加强校园团建工作提供了强有力的信息化支持，同时基于MVVM模式进行开发，保证了项目的开发效率与质量的同时为后续项目提供了良好的扩展性，也为高校各部门的信息化在技术上进行了有益的探索。 关键词：Web开发；高校团委；MVVM；Vue 中图分类号：TP392 文献标识码：A 文章编号：1009-3044（2019）11-0089-02 Abstract： Combining with the informatization trend on the daily work of Communist Youth League（CYL） in universities， this article introduces the process of developing the website for CYL based on MVVM， including requirements analysis， architecture design， MVVM principles， introduces Vue which is a web framework based on MVVM and how to facilitate Vue in website project. This website provides solid supports for the work of CYL， and the adoption of MVVM pattern ensures the efficiency， the quality and the expansibility of the project， also conducts profitable researches on the informatization for departments in universities. Key words： web development； university CYL； MVVM； Vue 1 背景 当今时代，网络已经成为青年的重要聚集地。全国近7亿网民中，青少年网民约占80%。认真学习贯彻习近平总书记青年工作思想和网络强国战略思想，紧紧抓住共青团改革的重大机遇，充分运用网络信息化手段探索创新团的组织和工作，努力打造“团网”深度融合、“团青”充分互动的“共青团+互联网”工作新格局，是新时代共青团工作的总目标。青年在哪里，共青团就要在哪里。新一轮共青团改革，把全面构建“互联网+共青团”工作格局作为重要内容，描绘出以“青年之声”和“智慧团建”为主体，构建工作网、联系网、服务网“三网合一”的共青团互联网工作体系的亮丽“蓝图”。 随着互联网时代的大潮，“网上共青团”已经扬帆启航。每一名团员青年都是这艘巨轮上的船员。所有团员并肩协力、同舟共济，朝着让团组织在网上有门户、有平台、有声音、有活动，让团员通过网络有“户口”、有联系、有态度、有表现的目标奋力前行。“互联网+共青团”，就是要把你我他紧紧地“+”在一起！ 基于以上趋势，结合学校团委的要求，采用流行的MVVM技术设计开发了高校团委网站。該网站主要服务于校团委工作人员，学生团员干部以及全体学生团员。管理人员可以发布新闻、通知、公告、文件、活动日志、活动查看审核，数据总结分析等，使用者可以查看各种通知公告，提出活动申请，报名参加活动，查看个人历史信息及当前活动等。 2 项目需求分析 该项目功能上解决目前分院团委缺乏一个统一的宣传平台，团组织阵地建设不健全、团组织发挥作用不明显、团委团支部联系不够紧密等问题，利用当下互联网新媒体的力量，建设出具有一定完善功能可供团委及团支部使用的团情交互性网站，以更具创新性的方式增强以下几点校园团建工作优势。 实践上着力解决团委需求到网站内容的映射，技术上采用目前比较流行的技术和架构，针对目前智能手机普及率高的情况，在设计、实现以及测试阶段重点关注手机端浏览器的渲染适应情况，特别是对不同手机尺寸的自适应，比如流动布局、字体图片自适应等进行充分良好的设计规划，使得广大学生能在使用过程中获得良好的用户体验。 项目建设可供团委、团支部使用的团情交互式网站，包含前端展示和后台两个模块。 前端模块主要包括新闻浏览、通知公告展示、各支部团委活动展示、志愿服务展示、文件下载、新媒体导航等功能， 后端模块主要有数据库管理、活动日志管理、新闻通知公告文件发布、审核打分、数据流量监控分析等功能。 具体的功能需求包括： 1）管理员、团支部负责人后台操作权限。 2）团支部可将团日活动、志愿服务等内容放到网站展示。 3）管理员具有审核活动，审核活动日志，对活动打分的功能。 4）团委可以发布新闻动态以及通知公告。 5）可以实现对各个团支部的管理。 3 基于MVVM的网站总体设计 3.1 网站总体架构 根据前面项目需求分析部分的介绍对网站的前后端总体需求进行了设计，包含了前后端架构设计。 3.2.1 前端功能架构设计 前端页面包含的展示模块如图1所示，当学生登陆以后，可以到个人中心查看自己曾经参加过或者正在参加的各种社会实践、志愿者服务、团校等，并且能看到自己获得的相应的经验值，有的活动还可以对应抵扣相应的学分，同时学生也可以自己发起活动申请并提交，等待管理员的审核审批。 3.2.2 后台功能架构设计 后台的管理主要包括的功能在项目如图2所示，具体的功能在项目需求分析里已经做过详细说明。 3.2 MVVM介绍 前端Web开发技术经过好几代的迭代以后，逐渐进化除了以MVC为代表的架构，其思想是将业务逻辑、数据、界面显示分离，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。其中的M代表了数据（Model），V代表了界面显示（View）而C代表了业务逻辑控制器（Controller）。 在实际的开发中，由于业务逻辑控制器所包含的逻辑比较复杂，并且与界面视图的耦合度比较高，造成了难以维护的困境。在这种情况下，MVVM应运而生。其中前两个字母MV代表的含义与MVC中的是同样的意思，而VM代表的是ViewModel，具体三者的关系如图3所示。 可以看到在 MVVM 里面，原来在MVC里面的Controller中跟View耦合的部分被合并到了 View中，而对于其他部分与View和Model都无关的功能，包括检验用户的输入，网络相关的服务等等逻辑则放入了ViewModel中。这样做很好的解耦了Controller和View，提高了代码的可维护度，同时由于ViewModel中仅仅是逻辑代码，使得单元测试等方法更加适用，提高了代码的可测试性。 3.3 MVVM在项目中的应用 目前市面上流行的几大前端框架如React，Angular，Vue在设计思想上都有MVVM的影子在里面，本项目采用了目前在国内比较流行的Vue来进行开发。Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue 被设计为可以自底向上逐层应用，它的优点包括容易上手，简洁易用的API，数据驱动和组件化的思想。相比于手动操作DOM的网站开发方式，Vue是采用了将DOM和数据绑定起来的方法，而这种绑定是一种双向的绑定，一旦你创建了绑定，DOM将和数据保持同步，每当数据更新，则相应的DOM节点也会得到更新，反之亦然，这种模式是区别于React里面的单向数据流的。 从图4中可以看到，Vue架构在ViewModel里面的两个工具DOM监听器和数据绑定器是实现双向绑定的关键性组件。从View的角度出发，ViewModel中的DOM監听器工具可以监控网页上DOM元素的更新变化，如果发生了变化，那么更新ViewModel中的数据；而 从ViewModel的角度来看，当ViewModel中的数据有更新变化的时候，数据绑定器会通知网页去更新页面中的视图部分，也就是相对应的DOM元素。 在本项目开发的各个模块中，以个人中心模块为例，在登录的时候设计了Person类，开发者通过Object.defineProperty的getter/setter方法来实现自定义的Person类与输入表单input form中的用户名和密码等字段的双向绑定，免去了对DOM元素的单独操作，简化了封装数据的逻辑。而在个人历史活动查询的模块中，页面中定义了一些下拉列表，即select tag的DOM元素，来对不同时期、不同类型的活动进行筛选并通过页面的其他部分对相应筛选出的数据进行展示，项目中将这些元素通过Vue提供的v-model指令这个简易的API与后面相应的展示的部分进行双向的绑定，省去了每次需要重复寻找DOM元素进行刷新的逻辑，大大地简化了代码的结构，使得代码清晰可维护。 在其他各个前端以及后端模块的开发过程中，该项目运用了包括v-model，v-bind，watch，v-if等等数据绑定和控制API，也运用了包括v-on等API来实现对DOM的鼠标或者键盘事件监听并进而对相应的页面内容进行自动化的刷新，从而将项目从对DOM的各种单独操作如查询、更新等事物中解脱出来，可以很好地将开发者的主要精力放在项目逻辑的构建上，而不必担心被各种琐碎的事务如数据拼凑、如何更新视图等纠缠，使得项目的开发逻辑清晰，开发的质量和效率也大大地提高了。 4 结束语 该高校团委网站将为学校团委搭建一个网站平台，供管理员、学生以及教师教辅等人员使用，针对当前团建工作过程中团组织阵地建设不健全、团组织发挥作用不明显、团委团支部联系不够紧密等问题，探索“网络团建”新模式，并结合学院学生专业特长，创建一个具有完善交互性可供团委、团支部紧密联系的工作网、联系网、服务网“三网合一”的校园共青团网站，以更具创新性的方式增强校园团建工作的活力。 同时该项目技术采用了目前比较流行的MVVM模式进行开发，保证了项目的开发效率与质量，并为项目后续的进一步开发提供了良好的扩展性，也为高校各部门的信息化在技术上进行了有益的探索。 参考文献： [1] 秦宜智同志在“青年之声”互动社交平台 服务能力建设推进会上的讲话[J]. 中国共青团， 2015（7）： 5-11. [2] 何焕春， 杨怿. 基于MVVM 构架的Web 前端框架研究[J]. 电脑知识与技术， 2017， 13（24）： 59-60. [3] 张帆. Vue.js项目开发实战[M]. 北京： 机械工业出版社， 2018： 1-298. [4] 梁灏. Vue.js实战[M]. 北京： 清华大学出版社， 2017： 1-235. 【通联编辑：谢媛媛】 |
| 随便看 |
|
科学优质学术资源、百科知识分享平台，免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。