MVC架构下网站的设计与实现思考

张术梅

（大连交通大学信息学院 辽宁 大连 116045）

0 引言

MVC架构，就是对Web服务模式的进一步升级，然后对网站进行优化设计。通过MVC架构，能够有效降低网站开发难度，对网络背景下数据信息的安全性、网站使用安全而言具有积极的意义。同时，在对网站使用功能的扩展升级上，还有对网站后期使用维护方面，会比以往传统模式下的网站而言更为简单化，因此能满足用户对网站使用提出的更多需求，是当前更为可靠、先进的网站开发技术。

1 MVC架构概述

整体来看，MVC就是将模型-视图-控制器统合起来的一种比较经典的网站开发模型，以此进行网站设计，能够切实将网站的界面、相关数据信息、业务逻辑等多方面内容进行分离，将业务逻辑整合成一个部件中。通过这种方式进行网站设计，业务逻辑可不用重写即可对网站界面进行个性化的设计和改进，同时还能达到用户之间的交互功能[1]。除此，通过 MVC架构进行网站设计，其中所用的造价、维护成本、耦合性等特性都比较低，能够更好促使软件以工程化的形式进行管理。将MVC架构应用于网站开发中，最大目的在于分离视图与模型，所有工作人员做好自身工作内容，进一步提升网站开发和设计的工作效率。

传统ASP及JSP技术开发的网站，在动态网页中会嵌有大量的业务逻辑程序代码，该类程序的重复利用率比较低，在功能拓展方面也不强，并且后续的维护工作比较繁琐，JSP液面是由HTML代码和JAVA代码组成的，客户端请求指示输入服务器中以后，JAVA代码会自行处理相关信息，然后再将生成的HTML及页面等信息反馈给客户端的浏览器，不会使页面的表现和逻辑偏离。如本网站类型的传统网站设计，会存在着用户互动性差、参与性差的缺点，比如用户可以在网站中浏览信息，但是却不能发布信息，如今的用户都追求个性化的功能，希望能够在登录网站以后有自己的页面，比如颜色和内容等方面，可以在系统登陆之后DIY布局。在MVC架构的支持下，网站的个性化特色更加明显，以设计模型的方式提供了全新的开发框架。

2 MVC设计模型的原理与网站子系统

2.1 设计原理

MVC模式的概念就是“模式+视图+控制器”，应用程序是由这3个部分组成，事件与控制器可以改变模式或者视图，或者同时改变这2个元素，但是控制器改变了模式的数据或者属性，那么视图也会自动更新，同理控制器如果改变了视图，视图也会从模式中获取新的数据更新内容。MVC模式其实是将一个应用的输入、处理和输出流程按照模式、视图与控制器的方式进行分离，则网站的架构就被分为三个层次，分别对应着模型层、视图层与控制层。其中视图指代着用户交互界面，对于网站的功能应用而言，可以用HTML界面来显示，有可能会为模型接受视图请求的数据，并给出最后的处理结果。控制器可以接受用户的请求，将模型和视图匹配到一起，完成用户的请求以后，分离模型、视图和控制器，那么一个模型就可以得到多个显示视图，如果用户用其中某一个视图的控制器改变了数据，则其他依赖于这些视图的控制器都会发生相应的变化，使得数据出现相应的更新，实际上可以成为模型变化的机制。

2.2 技术特点

该项技术具有较低的耦合性，视图层和业务层的分离，则视图层代码可以被更改，并不需要重新编译模型与控制器代码，只需要根据业务规则改动MVC技术的模型层就可以达到理想的效果。该项技术具有较高的重用性和可适用性，在科学技术的影响下，访问应用程序的方式更多，MVC模式允许用户使用不同模式的视图来访问同一个服务器端口的代码，也包括对WEB浏览器和无限浏览器的访问。该项技术具有较低的生命周期成本，有效降低了用户接入端口的开发费用与维护费用，并且后续的维修与修改非常便利，能够快速地部署业务及功能，大大缩短了应用软件的开发时间，使得程序员可以集中精力开发业务逻辑与表现形式的创新。该项技术的应用有助于实现软件的工程化管理，不同层次的人员各司其职，每一层的管理人员都具有不同的职责，且工作的特征也有不同，工程化的管理可以使工具化的管理代码应用于程序管理中，为具体的管理工作提供基础条件。

3 MVC架构下网站的设计和实现——以XX网站为例

3.1 整体架构设计

XX网站基于MVC 3层架构模式开展网站设计，具体来讲：（1）表示层，就是浏览器中用户端所使用的前端，该层架构作用就是将用户所需数据以相对简单的方式展示给用户；（2）业务逻辑层，该层架构设计作用就是相应用户发出的请求，并根据其请求对数据库进行增、删、改、查等操作需求；（3）数据持久层，也就是数据层，该层目的在于科学存储数据信息，为用户在使用中提供更为高效率的数据增、删、改、查的操作功能。

3.2 网站模块设计

XX网站在进行模块设计时可从以下几个角度进行：（1）图片管理，该模块应用作用就是网站中管理者对用户在首页轮播图片以及对成果展示版面中的图片进行更换[2]；（2）通知公告管理，该模块应用作用发布和展示相关公告信息；（3）文件管理，该层模块的应用功能对网站中的文件进行下载、传输等功能操作；（4）搜索管理，主要是对整个网站系统提供搜索的使用功能；（5）用户管理，是对使用该网站相关用户的登录、注册以及网站中超级管理员账户进行增删改查的管理；（6）研究平台模块，该模块是基于网站本身的性质进行设计，为管理员提供可在网站中进行增删改查的管理权限；（7）文章信息管理，该模块是基于编辑器来进行操作，为网站提供文章发布的途径和方式。

3.3 网站业务流程

XX网站在使用过程中，因面对用户不同，其业务流程也因此存在一定的不同之处。如果只是普通网站用户，其业务流程相对比较简单，主要是浏览XX网站中发布的相关通知、公告、办事所需文档等内容。一般网站中的下载任务可分为两种：一种为年报下载，用户可根据自身需要选择特定年份的年报；另一种为专区文件下载，用户可通过网站的首页来查看当前可下载的文件信息，然后根据需要通过下载专区进行文件下载和查看。除此，网站还会设置搜索这一功能，用户可通过输入关键词进行全站搜索，如果出现自己需要的内容时，网站会以分页的方式将搜索内容呈现给用户。

管理员在进行网站管理时可通过以下流程进行：（1）在网站首页入口登录，然后进入后台管理系统，对网站文章增删改发等相关操作[3]；（2）管理人员可对网页中的轮播图片的使用进行相应管理，对其进行修改和指向相应的连接，对网站中的展示效果图进行更改和添加，对文件进行上传、删除等。从整体上来看网站业务流程非常多，网站可根据自身使用性质进行相应设计。

3.4 网站数据库设计

本次网站系统主要采用MySQL来进行数据库管理，该系统是基于数据与数据间存在的关联，通过对数据进行分类放在相应表格进行管理，对于表格设计，可根据该网站的性质进行创建，主要有年度报表、通知表、文章表、政策法规等。

3.5 网站安全性设计

对于一个网站而言，其使用安全性非常重要，这对于网站未来的正常运转、数据安全性、网站是否会被黑客入侵等具有直接性影响，因此在进行网站设计时，应将安全性作为重点内容进行设计。就本次XX网站设计而言，该网站的安全性问题主要在于防止XSS、SQL注入网站中。

（1）对于XSS，也就是跨脚本攻击。具体来讲，若当前网站存在XSS漏洞问题情况下，攻击者就会向其中注入具有恶意性质的HTML代码，客户在使用网站时，网站就会自动执行攻击者注入的代码，从而引发各种各样的问题。例如，用户在浏览网站过程中，可能会强行进入到指定网站，网页因此被破坏，用户信息也可能会被盗取等，以上都是当前比较常见的安全性问题[4]。整体上，跨脚本攻击，主要是对客户端进行攻击，具有被动式特征，而这也是网站开发者容易忽视的设计内容。对此开发者在进行网站设计时，应做好对所有输入代码的筛选和过滤工作，对存在攻击性语句进行转义处理，能够在最短时间内将用户输入的代码转为能够执行的代码进行存储处理。在展示时能够将执行代码转为文本信息，这样做的目的在于对用户信息起到保护作用，有效防止可执行代码直接在网站前台页面暴露，这对于进一步强化网站在使用中的安全性具有积极性意义。

（2）对于SQL数据库，其在应用中比较常见问题主要是注入性问题。对于注入性问题，简单来讲就是攻击者在网站数据库引擎中注入恶意数据库命令，然后对服务器进行相应的操作，通过这种方式来获得数据库中各项数据的查阅权限。这种安全性带来的后果就是网站中的重要数据发生泄露，特别是用户名及其密码名单是当前最容易被攻击的部分。为有效解决这类安全问题，可采取以下两种方法进行处理：①对SQL命令进行参数化处理，也可以通过存储过程对数据进行相应的查询和获取，将动态拼装命令去除；②用户在输入所查询内容时，系统对此进行相应的转换和校验。通过以上，能够最大化地改善网站数据库在使用过程中遇到的注入性安全问题。

3.6 关键技术的设计和实现

（1）对于XX网站中的图片进行传输和文件下载时，本次网站设计采用百度ueditor编辑器为核心插件，该插件具有非常强的使用功能，能够基本满足当前系统所需要的各项使用需求。但在实际使用中还是存在一些不足之处，若用户上传的图片比较大，系统就会默认将原图大小显示出来，这种情况下也就使得最终呈现出来的图片铺面整个显示屏。对于该问题的解决方式主要在于源码查询，通过对图片的高、宽等参数进行自适应设置，但这种设置方式又会引发另一问题：无论图片大小，最终宽度统一[5]。而ueditor编辑器能够为网站提供两个上传按钮，一个按钮采取单图的方式进行上传；另一个按钮采取多图的方式进行上传。对此可通过折中的方式进行上传，如果图片大，可通过单图按钮完成上传操作，最后图片呈现效果就是原本设定好的宽度参数；如果图片小，可采取多图按钮完成上传操作。除此，ueditor编辑器添加附件后，若文件格式为.txt或.pdf等，对该格式下的附件进行下载操作时，网站就会直接解析。通过查看源码，资源链接只是使用一个简单标签，对此可通过对源码进行修改，用户点击附件就会避免被网站直接解析，并通知网站开始下载操作[6]。

（2）在进行该网站设计时，大部分内容采用分页加载技术进行设计。相比较于其他系统存在的不同之处，以往都是直接将页码拿到前端，通过limit即可直接查询，但本系统中数据库设计采用type字段进行设计，将数据资源根据类型进行划分，且这些数据的顺序错综复杂，如果需要对其中某项type类数据采取分页加载，每一次加载后的数据会对最后一条数据ID进行记录，以此作为下次分页起点，这种设计方式的优势在于ID建立索引，能够起到对系统性能的优化作用。

（3）完成该网站的基本功能开发后，对于客户提出的其他需求，应做好对内外网的管制工作[7]。例如，若XX网站为校园网，部分内容只能通过校园网进行查看和下载操作，为解决这种使用需求，可通过以下两种方式：①对数据库表进行修改，通过添加字段的方式进行区分，决定外网的使用权限，但这种方式不够现实，因修改规模比较大，对开发者而言具有非常大的难度；②新增表格，该表格主要用于具有校园网使用权限的用户进行资源查看和下载。除此，为更好地强化网站系统在使用中的响应能力，可通过数据缓存、监听等技术，降低网站在操作中的性能损耗，进一步强化其响应能力。

3.7 前端页面的简要展示

该网站的主界面9个主要的选项卡功能，以此构成的展示区域，包括部门首页、组织机构及政策法规等信息，还有科研平台、科技成果及知识产权等功能，主要是用于对外展示该单位的科研成果及最新动态，包括该单位的一些科研资料等，有时会在主页上发布通知及文件。该网页的科技处后台需要管理人员用特定的账号登录，才能拥有操作权限，后台的管理人员可以发布关于科学类的资料，或者调整网站的管理功能，平台上的系统会根据不同类型的文章，按照类别发布到对应的模块上。管理员可以分布的信息并不固定，可以发布学术年报、其他网站的连接或者该单位最新的科技动态等。

3.8 系统使用的效果

该网站在设计时经过了系统测试的环节，该环节也是一款应用软件在上架前的最后环节，本网站通过白盒测试与黑盒测试以后，经历半年的试用期，确认稳定才能正式登录上线使用。该网站上线使用距今已有两年的时间，期间因为需求的问题已经对系统的功能实现相应的拓展，期间并没有出现任何的安全事故与相关问题，该系统的运行非常流畅，而且使用效果是比较好的，满足了本单位的基本要求，在性能方面也能够满足实用的要求。

4 结语

综上所述，基于MVC架构来进行网站研发和设计，进一步提升网站在未来使用中的维护效率和质量，有效保证数据在其中的安全性。基于此，相关开发人员应重视对该方面的研发，使其更好地应用于网站设计中。同时，设计人员要针对网站中的数据安全进行完善，针对XSS与SQL等问题做出有效的防范，以保证数据的安全性，经过改造后的系统可以上传编辑器改造以后的图片，应用数据表格的分页加载技术以后，本网站对外网的访问权限也做出了相应的限制，已经大幅度地提升了网站系统对信息的响应速度和数据的安全性。尤其是经过了两年的使用以后，验证了该网站系统的运行是比较稳定的，无论是数据的安全方面，还是功能的扩展方面，都具有一定的优势。