WEB通用基础-MVC架构

VC作为WEB程序的通用架构深受广大WEB程序员的拥护。更是广泛成为面试题、考试试题、答辩问题等题材进行使用。

目前主流的语言框架及WEB系统大部分都是以MVC做为基础架构进行编写的。对于初学者而言理解MVC架构与熟悉业务逻辑的编写能极大的缩短学习一门语言框架的时间。然而初学者仅通过教材或许很难真正的理解MVC的架构及用法，在学习的过程中也可通过分析理解一些经典的语言框架进行学习。（例如：JSP + servlet + javabean）

初步认知

MVC模型：作为一种架构型的模式，无法直接实现功能添加，其主要作用是帮助我们对开发结构进行分层，使得代码结构更佳清晰合理化，将模型(model)、视图(view)、控制器(controller)进行分离。

将MVC通俗的理解可以想象成建筑一栋高楼大厦：

MVC：最终项目展示结果
模型(Model)：建筑材料、建筑工具的集合（WEB项目中的数据模型及函数方法模型）

视图(View)：建筑设计图纸、建筑展示效果图（WEB项目中数据的展示形态，优化丰富控制器传递过来的数据并进行展示）

控制器(Controller)：建筑工程师、施工人员（WEB项目中通过调取对应数据模型及函数方法模型产生数据并传递给相关视图层）

施工人员（Controller）通过使用建筑工具(Model)将建筑材料(Model)按着设计图纸(View)进行搭建填装，最后组装成一栋高楼大厦。

深入理解

模型(Model)：模型层的重点在于模块化，重点思路在于将可复用可集成的代码封装成函数方法集成在模型层中方便复用及代码维护。（例如：用户登录验证，这段代码可能在多个不同的控制器中都需要使用，若将其封装成方法写入模型层，则控制器如果有需求只需导入对应的模型层并以传参的方式进行调用既可省去大量重复代码，并且在进行维护的时候也仅需对模型层中的封装方法进行修改就能实现全局维护）

视图(View)：视图层的重点在于数据展示，视图层的框架要便于数据展示，避免大量逻辑代码的存在，尽量通过简单的循环语句将控制层获取的数据进行展示，所以的数据处理应尽量于控制层与模型层实现。（当然视图层也可以适当使用模块化的设计思路，例如：标准WEB网站中，大量网页头部及尾部代码都是重复的，这些重复视图层代码可以通过MVC模式的思路封装到一个单独的HTML页面，在需要时通过相关语句载入对应的页面中，可以大量减少重复代码。）

控制器(Controller)：控制层主要做为模型层与视图层的控制中枢。控制器应避免重复视图层与模型层的工作，将数据的展示封装至模型层，可复用的数据获取与数据逻辑处理则在模型层中封装成函数方法。控制层应做到精简。

学编程技术，就到W3Cschool，如果你喜欢我们的文章，可以点击右上角关注我们;如果你想看到更多IT界的资讯，可以加我们的公众号。

公众号：w3cschoolcn

章介绍了程序设计中最重要的MVC三层分层模型，与大家分享。

编程语言种类繁多，无论采用哪种语言进行程序设计，都要遵循经典的软件工程设计模式——MVC模式。

MVC是Modeling、View、Controller的缩写，代表软件设计的分层理念：Modeling指数据模型，View指前端交互视图，Controller指业务逻辑，MVC模式下的软件分层结构如下图所示。

任何一套软件系统运作的本质都是相同的：用户在前端交互层操作后，系统通过业务逻辑层处理数据层的数据。不论是BS架构的系统（例如通过浏览器访问的管理后台），还是CS架构的系统（例如App应用），都会遵循MVC模式搭建程序结构。

将一套软件系统分为数据、业务逻辑处理、前端交互三层来设计、开发，可以非常有效地保证程序结构合理、逻辑清晰。

MVC模式下的软件分层结构

我们来具体介绍一下MVC每一层的特点。

一、前端交互层

前端交互层负责绘制程序界面，完成前端程序和用户的交互互动，并实现一些简单的业务逻辑，例如数据校验。常见的负责绘制界面的编程语言有JavaScript、HTML5（即H5，严格来讲不能算编程语言，只是一种记号语言）、PHP等。

前端方向是升级迭代非常快的技术方向，例如针对移动端，有JavaScript、Flex等前端语言；针对PC端，前端语言也从曾经的HTML + JS + CSS，到流行一时的富客户端RIC（Rich Internet Client），再到ExtJS、Node.js等。前端工程师需要不断地刷新自己的技能树，来适应快速变化的前端需求。

二、业务逻辑层

业务逻辑层负责处理业务逻辑，例如在分销运营管理后台的门店列表页，点击“关联账号”按钮，前端交互层把指令发送给业务逻辑层，业务逻辑层要判断门店状态是否能够关联账号、是否有空闲账号可以进行关联等。

开发人员应该尽量将复杂的校验、判断、业务规则都封装在业务逻辑层，这样可以让前端交互层的负担更轻，更容易扩展，因此业务逻辑层是MVC结构中最复杂的部分。

例如，假设分销运营管理后台除了PC版本，还打算做一套H5移动版本，以方便审核人员操作。如果业务逻辑层代码和接口设计良好，则只需要前端工程师实现H5代码即可；但如果之前的前端交互层和业务逻辑层耦合紧密，那么实现H5版本就需要前后端工程师一起调整代码，非常麻烦。

业务逻辑层常用的编程语言有Java、C++、C#、PHP等。

三、数据层

数据层代表底层的数据存储。数据包括结构化数据和非结构化数据，既可以存储在数据库中，也可以存储在文本文件中。数据存储操作一般由程序来完成，例如通过程序对关系型数据库的数据进行增删改查处理。

在早期的软件开发工作中，工程师既要开发前端，也要开发后端，还要设计并管理数据库，可以说是真正的全栈工程师。除此以外，工程师还要承担产品经理的工作，与业务方聊需求、掌控项目进度……

现如今，互联网公司对工作内容的划分非常细致，会将前后端的开发分离。下图所示为前后端分离的MVC模式，不论是CS架构还是BS架构，前端部分统称为客户端，业务逻辑层和数据层统称为服务端。

前端工程师负责客户端开发，后端工程师负责服务端开发，客户端和服务端之间完全通过接口交互。这样便实现了专业化分工，两端的工程师都聚焦于自己的技术领域，让工作更精细专业。

MVC模式下的前后端分离结构

现在，你是否更加理解程序设计的分层模型，以及前后端分离的原因了呢？希望本文能够帮到你。

#专栏作家#

杨堃，公众号：PM杨堃（ID：pmYangKun）。人人都是产品经理专栏作家，《决胜B端》作者，11年互联网研发、产品设计经验，曾就职于传统外资保险公司、百度，现就职于VIPKID。

本文原创发布于人人都是产品经理。未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议。

言

做 Java Web 开发的你，一定听说过SpringMVC的大名，作为现在运用最广泛的Java框架，它到目前为止依然保持着强大的活力和广泛的用户群。

本文介绍如何用eclipse一步一步搭建SpringMVC的最小系统，所谓最小系统，就是足以使项目在SpringMVC框架下成功跑起来，并且能够做一些简单的事情（比如访问页面）的系统。

话不多说，让我们开始吧。所有的源代码和jar包都会在最后给出。

其他环境：

操作系统：Windos 10

Tomcat ： v7.0

JDK : 1.7

正文

1. 新建一个项目

我们用eclipse新建项目，选择Dynamic Web Project(动态的Web项目)。

点击Next

Project name里面写上 springmvc，这就是我们项目的名称，其他不用改，直接点击Finish 。

OK，项目就建好了。

接下来一定要将项目的字符集改为UTF-8

右键项目——properties

改为UTF-8，点击OK。

2. 编写 web.xml

当我们打开WebContent/WEB-INF目录的时候，发现里面只有一个lib目录，这是存放各种jar包的地方。我们知道一个web项目必须要有一个web.xml文件才行。

既然没有，我们自己写一个咯。

右键WEB-INF——new——file，新建一个web.xml文件。

点击Finish

将以下内容填进去即可。

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
 xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" 
 id="WebApp_ID">
 
<!-- 这是项目的名称 -->
<display-name>springmvc</display-name>
</web-app>

这样就完成了基本的配置，我的意思是说，现在这个项目就已经是一个标准的web项目了。

3. 验证web项目是否搭建成功

为了验证到目前为止的正确性，我们在WebContent目录下面新建一个jsp文件。

名字就叫index.jsp

内容如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
 <head>
 <meta charset="UTF-8" />
 </head>
 <body>
 恭喜，web項目已經成功搭建！
 </body>
</html>

我们现在就将这个项目部署到Tomcat,来验证是否可以跑起来。

在项目上右键——Debug As——Debug on Server

直接点击Finish

经过一段时间，控制台开始打印日志信息，当我们看到这些信息的时候，说明Tomcat已经启动完毕了。

让我们打开浏览器，在地址栏输入以下信息

http://localhost:8088/springmvc/index.jsp

我电脑上Tomcat配置的端口号是8088，具体情况视你自己的Tomcat决定，可能是8080等。

可见，能够成功访问页面了，这说明我们到目前为止的操作是正确的。

3. 集成SpringMVC

我们在web.xml文件里面添加下面的配置

3.1 配置监听器

<listener>
 <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<listener>
 <listener-class>org.springframework.web.util.IntrospectorCleanupListener</listener-class>
</listener>

3.2 配置过滤器，解决POST乱码问题

<filter>
 <filter-name>encoding</filter-name>
 <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
 <init-param>
 <param-name>encoding</param-name>
 <param-value>UTF-8</param-value>
 </init-param>
</filter>
<filter-mapping>
 <filter-name>encoding</filter-name>
 <url-pattern>/*</url-pattern>
</filter-mapping>

3.3 配置SpringMVC分发器，拦截所有请求

<servlet>
 <servlet-name>springmvc</servlet-name>
 <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
 <init-param>
 <param-name>namespace</param-name>
 <param-value>dispatcher-servlet</param-value>
 </init-param>
</servlet>
<servlet-mapping>
 <servlet-name>springmvc</servlet-name>
 <url-pattern>/</url-pattern>
 </servlet-mapping>

在这个配置中，我们规定了 DispatcherServlet 的关联 XML 文件名称叫做 dispatcher-servlet。

注意，这里的路径是相对于web.xml来说的，也就是说，这个文件也在WEB-INF的根目录下。

所以，我们需要在WEB-INF的根目录下新建一个dispatcher-servlet.xml文件。

至此，web.xml文件的编写就告一段落了。

3.4 编写dispatcher-servlet.xml

dispatcher-servlet.xml 的作用就是配置SpringMVC分发器。

配置如下：

<?xml version="1.0" encoding="UTF-8" ?>
<beans xmlns="http://www.springframework.org/schema/beans"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 xmlns:p="http://www.springframework.org/schema/p"
 xmlns:context="http://www.springframework.org/schema/context"
 xmlns:util="http://www.springframework.org/schema/util" 
 xmlns:mvc="http://www.springframework.org/schema/mvc"
 xsi:schemaLocation="http://www.springframework.org/schema/beans
 http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
 http://www.springframework.org/schema/context 
 http://www.springframework.org/schema/context/spring-context-3.0.xsd
 http://www.springframework.org/schema/util 
 http://www.springframework.org/schema/util/spring-util-3.0.xsd 
 http://www.springframework.org/schema/mvc 
 http://www.springframework.org/schema/mvc/spring-mvc.xsd
 ">
 
 <!-- 开启注解模式驱动 --> 
 <mvc:annotation-driven></mvc:annotation-driven>
 <!-- 扫包 -->
 <context:component-scan base-package="com.springmvc.*"></context:component-scan>
 <!-- 静态资源过滤 -->
 <mvc:resources location="/resources/" mapping="/resources/**"/>
 
 
 <!-- 视图渲染 jsp/freemaker/velocity-->
 <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
 <!-- 制定页面存放的路径 -->
 <property name="prefix" value="/WEB-INF/pages"></property>
 <!-- 文件的后缀 -->
 <property name="suffix" value=".jsp"></property>
 </bean> 
 
</beans>

根据配置，有三个需要注意的地方。

它会扫描 com.springmvc 包下所有的Java类，但凡是遇到有注解的，比如@Controller ， @Service ， @Autowired ，就会将它们加入到Spring的bean工厂里面去。
所有的静态资源文件，比如说 js ， css ， images 都需要放在/resources目录下，这个目录现在我们还没有建。
所有的展示页面，比如jsp文件，都需要放置在/WEB-INF/pages目录下，这个目录现在我们也没有建。

OK，我们把对应的目录加上。

首先是Java文件的目录。

我们在这个地方右键，新建一个 com 包,再在里面建一个 springmvc 包，或者用 . 的方式一起建。

点击Finish

根据SpringMVC的分层，我们在springmvc 包下面建三个包，分别是controller ， service ， dao

这样的话，当我们项目一旦启动，springmvc就会扫描这三个包，将里面但凡是有注解的类都提取起来，放进Spring容器（或者说Spring的bean工厂），借由Spring容器来统一管理。这也就是你从来没有去new一个Controller的原因。

接下来，我们来建静态资源的目录。

在WebContent目录下新建一个resources文件夹。

然后顺便把js，css，img的文件夹都建一下，这里就存放我们的静态资源文件。

最后，我们在WEB-INF目录下建一个pages文件夹，作为展示页面的存放目录。

将之前的index.jsp拷贝进来。

这样就配置的差不多了。

5. 导包和验证

我们将jar包放到lib目录：

然后启动项目，验证一下到目前为止的构建是否正确。

打开Servers视图，点击如图像是甲虫一样的图标。

发现报错了，错误信息如下：

错误：

Could not open ServletContext resource [/WEB-INF/applicationContext.xml]

它说我们在WEB-INF下面少了一个applicationContext.xml 这个文件，原来，我们少了对SpringBean工厂的配置，它的意思就是说，我们要规定一下，在Spring容器启动的时候，需要自动加载哪些东西？

于是，我们把 applicationContext.xml 加上。

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop"
 xmlns:context="http://www.springframework.org/schema/context" xmlns:tx="http://www.springframework.org/schema/tx"
 xmlns:util="http://www.springframework.org/schema/util" xmlns:p="http://www.springframework.org/schema/p"
 xsi:schemaLocation="http://www.springframework.org/schema/beans 
 http://www.springframework.org/schema/beans/spring-beans.xsd 
 http://www.springframework.org/schema/aop 
 http://www.springframework.org/schema/aop/spring-aop-4.0.xsd
 http://www.springframework.org/schema/tx 
 http://www.springframework.org/schema/tx/spring-tx-4.0.xsd
 http://www.springframework.org/schema/context 
 http://www.springframework.org/schema/context/spring-context-4.0.xsd
 http://www.springframework.org/schema/util 
 http://www.springframework.org/schema/util/spring-util-4.0.xsd
 ">
 
</beans>

里面我们啥也不配置，再次启动Tomcat。

这回不报错了。

5. 配置ViewController

我们知道，WEB-INF目录下的任何资源都是无法直接通过浏览器的url地址去访问的，保证了安全性。这也是我们为什么把页面都放在该目录下的原因。

为了有所区分，我们还单独建立了一个pages文件夹，将这些页面保存起来。

现在，为了访问这个页面，我们需要用到SpringMVC的页面跳转机制。

我们在Controller包下新建一个ViewController

点击Finish

ViewController 代码：

package com.springmvc.controller;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
@Controller
public class ViewController {
 
 @RequestMapping("/view")
 public ModelAndView view(HttpServletRequest request){
 String path = request.getParameter("path") + "";
 ModelAndView mav = new ModelAndView();
 mav.setViewName(path);
 return mav;
 }
}

我只需要将想要访问的页面放在path里面，通过url传进来就行了。

因为添加了java类，因此我们重新启动Tomcat。

启动完成后，在地址栏输入：

http://localhost:8088/springmvc/view?path=index

结果：

没关系，我们看他报什么错。

message /springmvc/WEB-INF/pagesindex.jsp

pagesindex.jsp是什么鬼？？

原来，在dispatcher-servlet.xml中，我们少写了一个 "/"

添上去就行了。

保存后，因为修改了XML配置文件，因此我们还是需要重新启动Tomcat。

启动完成后，继续！

成功了。

6. 引入静态资源

比如，我在resources/img目录下放了一张图片，怎么引入到index.jsp呢？

Paste_Image.png

background : url(http://localhost:8088/springmvc/resources/img/bg.jpg);
background-size : 100% 100%;

的确，这是一种方式。可是，它有一个缺点就是根路径写死了，我们肯定不希望这样的。

其实，我们可以在viewController里面拿到项目根路径，然后传递到jsp页面就OK了。

我们把调试信息 “恭喜，web項目已經成功搭建！” 删掉。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
 <head>
 <meta charset="UTF-8" />
 </head>
 
 <style>
 body {
 background : url(${contextPath}/resources/img/bg.jpg);
 background-size : 100% 100%;
 }
 </style>
 <body>
 
 </body>
</html>

${contextPath} 可以取到Controller传过来的contextPath值。

成功了！

在线咨询

上一篇：CSS 2019：腾讯安全发布2019产业互联网安全十大议题
下一篇：想学HTML5？HTML学习大纲来了

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

WEB通用基础-MVC架构

一、前端交互层

二、业务逻辑层

三、数据层

#专栏作家#

言

正文

您的项目需求