WEB通用基礎-MVC架構(gòu)

VC作為WEB程序的通用架構(gòu)深受廣大WEB程序員的擁護。更是廣泛成為面試題、考試試題、答辯問題等題材進行使用。

目前主流的語言框架及WEB系統(tǒng)大部分都是以MVC做為基礎架構(gòu)進行編寫的。對于初學者而言理解MVC架構(gòu)與熟悉業(yè)務邏輯的編寫能極大的縮短學習一門語言框架的時間。然而初學者僅通過教材或許很難真正的理解MVC的架構(gòu)及用法，在學習的過程中也可通過分析理解一些經(jīng)典的語言框架進行學習。（例如：JSP + servlet + javabean）

初步認知

MVC模型：作為一種架構(gòu)型的模式，無法直接實現(xiàn)功能添加，其主要作用是幫助我們對開發(fā)結(jié)構(gòu)進行分層，使得代碼結(jié)構(gòu)更佳清晰合理化，將模型(model)、視圖(view)、控制器(controller)進行分離。

將MVC通俗的理解可以想象成建筑一棟高樓大廈：

MVC：最終項目展示結(jié)果
模型(Model)：建筑材料、建筑工具的集合（WEB項目中的數(shù)據(jù)模型及函數(shù)方法模型）

視圖(View)：建筑設計圖紙、建筑展示效果圖（WEB項目中數(shù)據(jù)的展示形態(tài)，優(yōu)化豐富控制器傳遞過來的數(shù)據(jù)并進行展示）

控制器(Controller)：建筑工程師、施工人員（WEB項目中通過調(diào)取對應數(shù)據(jù)模型及函數(shù)方法模型產(chǎn)生數(shù)據(jù)并傳遞給相關視圖層）

施工人員（Controller）通過使用建筑工具(Model)將建筑材料(Model)按著設計圖紙(View)進行搭建填裝，最后組裝成一棟高樓大廈。

深入理解

模型(Model)：模型層的重點在于模塊化，重點思路在于將可復用可集成的代碼封裝成函數(shù)方法集成在模型層中方便復用及代碼維護。（例如：用戶登錄驗證，這段代碼可能在多個不同的控制器中都需要使用，若將其封裝成方法寫入模型層，則控制器如果有需求只需導入對應的模型層并以傳參的方式進行調(diào)用既可省去大量重復代碼，并且在進行維護的時候也僅需對模型層中的封裝方法進行修改就能實現(xiàn)全局維護）

視圖(View)：視圖層的重點在于數(shù)據(jù)展示，視圖層的框架要便于數(shù)據(jù)展示，避免大量邏輯代碼的存在，盡量通過簡單的循環(huán)語句將控制層獲取的數(shù)據(jù)進行展示，所以的數(shù)據(jù)處理應盡量于控制層與模型層實現(xiàn)。（當然視圖層也可以適當使用模塊化的設計思路，例如：標準WEB網(wǎng)站中，大量網(wǎng)頁頭部及尾部代碼都是重復的，這些重復視圖層代碼可以通過MVC模式的思路封裝到一個單獨的HTML頁面，在需要時通過相關語句載入對應的頁面中，可以大量減少重復代碼。）

控制器(Controller)：控制層主要做為模型層與視圖層的控制中樞。控制器應避免重復視圖層與模型層的工作，將數(shù)據(jù)的展示封裝至模型層，可復用的數(shù)據(jù)獲取與數(shù)據(jù)邏輯處理則在模型層中封裝成函數(shù)方法。控制層應做到精簡。

學編程技術，就到W3Cschool，如果你喜歡我們的文章，可以點擊右上角關注我們;如果你想看到更多IT界的資訊，可以加我們的公眾號。

公眾號：w3cschoolcn

章介紹了程序設計中最重要的MVC三層分層模型，與大家分享。

編程語言種類繁多，無論采用哪種語言進行程序設計，都要遵循經(jīng)典的軟件工程設計模式——MVC模式。

MVC是Modeling、View、Controller的縮寫，代表軟件設計的分層理念：Modeling指數(shù)據(jù)模型，View指前端交互視圖，Controller指業(yè)務邏輯，MVC模式下的軟件分層結(jié)構(gòu)如下圖所示。

任何一套軟件系統(tǒng)運作的本質(zhì)都是相同的：用戶在前端交互層操作后，系統(tǒng)通過業(yè)務邏輯層處理數(shù)據(jù)層的數(shù)據(jù)。不論是BS架構(gòu)的系統(tǒng)（例如通過瀏覽器訪問的管理后臺），還是CS架構(gòu)的系統(tǒng)（例如App應用），都會遵循MVC模式搭建程序結(jié)構(gòu)。

將一套軟件系統(tǒng)分為數(shù)據(jù)、業(yè)務邏輯處理、前端交互三層來設計、開發(fā)，可以非常有效地保證程序結(jié)構(gòu)合理、邏輯清晰。

MVC模式下的軟件分層結(jié)構(gòu)

我們來具體介紹一下MVC每一層的特點。

一、前端交互層

前端交互層負責繪制程序界面，完成前端程序和用戶的交互互動，并實現(xiàn)一些簡單的業(yè)務邏輯，例如數(shù)據(jù)校驗。常見的負責繪制界面的編程語言有JavaScript、HTML5（即H5，嚴格來講不能算編程語言，只是一種記號語言）、PHP等。

前端方向是升級迭代非常快的技術方向，例如針對移動端，有JavaScript、Flex等前端語言；針對PC端，前端語言也從曾經(jīng)的HTML + JS + CSS，到流行一時的富客戶端RIC（Rich Internet Client），再到ExtJS、Node.js等。前端工程師需要不斷地刷新自己的技能樹，來適應快速變化的前端需求。

二、業(yè)務邏輯層

業(yè)務邏輯層負責處理業(yè)務邏輯，例如在分銷運營管理后臺的門店列表頁，點擊“關聯(lián)賬號”按鈕，前端交互層把指令發(fā)送給業(yè)務邏輯層，業(yè)務邏輯層要判斷門店狀態(tài)是否能夠關聯(lián)賬號、是否有空閑賬號可以進行關聯(lián)等。

開發(fā)人員應該盡量將復雜的校驗、判斷、業(yè)務規(guī)則都封裝在業(yè)務邏輯層，這樣可以讓前端交互層的負擔更輕，更容易擴展，因此業(yè)務邏輯層是MVC結(jié)構(gòu)中最復雜的部分。

例如，假設分銷運營管理后臺除了PC版本，還打算做一套H5移動版本，以方便審核人員操作。如果業(yè)務邏輯層代碼和接口設計良好，則只需要前端工程師實現(xiàn)H5代碼即可；但如果之前的前端交互層和業(yè)務邏輯層耦合緊密，那么實現(xiàn)H5版本就需要前后端工程師一起調(diào)整代碼，非常麻煩。

業(yè)務邏輯層常用的編程語言有Java、C++、C#、PHP等。

三、數(shù)據(jù)層

數(shù)據(jù)層代表底層的數(shù)據(jù)存儲。數(shù)據(jù)包括結(jié)構(gòu)化數(shù)據(jù)和非結(jié)構(gòu)化數(shù)據(jù)，既可以存儲在數(shù)據(jù)庫中，也可以存儲在文本文件中。數(shù)據(jù)存儲操作一般由程序來完成，例如通過程序?qū)﹃P系型數(shù)據(jù)庫的數(shù)據(jù)進行增刪改查處理。

在早期的軟件開發(fā)工作中，工程師既要開發(fā)前端，也要開發(fā)后端，還要設計并管理數(shù)據(jù)庫，可以說是真正的全棧工程師。除此以外，工程師還要承擔產(chǎn)品經(jīng)理的工作，與業(yè)務方聊需求、掌控項目進度……

現(xiàn)如今，互聯(lián)網(wǎng)公司對工作內(nèi)容的劃分非常細致，會將前后端的開發(fā)分離。下圖所示為前后端分離的MVC模式，不論是CS架構(gòu)還是BS架構(gòu)，前端部分統(tǒng)稱為客戶端，業(yè)務邏輯層和數(shù)據(jù)層統(tǒng)稱為服務端。

前端工程師負責客戶端開發(fā)，后端工程師負責服務端開發(fā)，客戶端和服務端之間完全通過接口交互。這樣便實現(xiàn)了專業(yè)化分工，兩端的工程師都聚焦于自己的技術領域，讓工作更精細專業(yè)。

MVC模式下的前后端分離結(jié)構(gòu)

現(xiàn)在，你是否更加理解程序設計的分層模型，以及前后端分離的原因了呢？希望本文能夠幫到你。

#專欄作家#

楊堃，公眾號：PM楊堃（ID：pmYangKun）。人人都是產(chǎn)品經(jīng)理專欄作家，《決勝B端》作者，11年互聯(lián)網(wǎng)研發(fā)、產(chǎn)品設計經(jīng)驗，曾就職于傳統(tǒng)外資保險公司、百度，現(xiàn)就職于VIPKID。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。

言

做 Java Web 開發(fā)的你，一定聽說過SpringMVC的大名，作為現(xiàn)在運用最廣泛的Java框架，它到目前為止依然保持著強大的活力和廣泛的用戶群。

本文介紹如何用eclipse一步一步搭建SpringMVC的最小系統(tǒng)，所謂最小系統(tǒng)，就是足以使項目在SpringMVC框架下成功跑起來，并且能夠做一些簡單的事情（比如訪問頁面）的系統(tǒng)。

話不多說，讓我們開始吧。所有的源代碼和jar包都會在最后給出。

其他環(huán)境：

操作系統(tǒng)：Windos 10

Tomcat ： v7.0

JDK : 1.7

正文

1. 新建一個項目

我們用eclipse新建項目，選擇Dynamic Web Project(動態(tài)的Web項目)。

點擊Next

Project name里面寫上 springmvc，這就是我們項目的名稱，其他不用改，直接點擊Finish 。

OK，項目就建好了。

接下來一定要將項目的字符集改為UTF-8

右鍵項目——properties

改為UTF-8，點擊OK。

2. 編寫 web.xml

當我們打開WebContent/WEB-INF目錄的時候，發(fā)現(xiàn)里面只有一個lib目錄，這是存放各種jar包的地方。我們知道一個web項目必須要有一個web.xml文件才行。

既然沒有，我們自己寫一個咯。

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

點擊Finish

將以下內(nèi)容填進去即可。

<?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>

這樣就完成了基本的配置，我的意思是說，現(xiàn)在這個項目就已經(jīng)是一個標準的web項目了。

3. 驗證web項目是否搭建成功

為了驗證到目前為止的正確性，我們在WebContent目錄下面新建一個jsp文件。

名字就叫index.jsp

內(nèi)容如下：

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

我們現(xiàn)在就將這個項目部署到Tomcat,來驗證是否可以跑起來。

在項目上右鍵——Debug As——Debug on Server

直接點擊Finish

經(jīng)過一段時間，控制臺開始打印日志信息，當我們看到這些信息的時候，說明Tomcat已經(jīng)啟動完畢了。

讓我們打開瀏覽器，在地址欄輸入以下信息

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

我電腦上Tomcat配置的端口號是8088，具體情況視你自己的Tomcat決定，可能是8080等。

可見，能夠成功訪問頁面了，這說明我們到目前為止的操作是正確的。

3. 集成SpringMVC

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

3.1 配置監(jiān)聽器

<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分發(fā)器，攔截所有請求

<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>

在這個配置中，我們規(guī)定了 DispatcherServlet 的關聯(lián) XML 文件名稱叫做 dispatcher-servlet。

注意，這里的路徑是相對于web.xml來說的，也就是說，這個文件也在WEB-INF的根目錄下。

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

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

3.4 編寫dispatcher-servlet.xml

dispatcher-servlet.xml 的作用就是配置SpringMVC分發(fā)器。

配置如下：

<?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
 ">
 
 <!-- 開啟注解模式驅(qū)動 --> 
 <mvc:annotation-driven></mvc:annotation-driven>
 <!-- 掃包 -->
 <context:component-scan base-package="com.springmvc.*"></context:component-scan>
 <!-- 靜態(tài)資源過濾 -->
 <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>

根據(jù)配置，有三個需要注意的地方。

它會掃描 com.springmvc 包下所有的Java類，但凡是遇到有注解的，比如@Controller ， @Service ， @Autowired ，就會將它們加入到Spring的bean工廠里面去。
所有的靜態(tài)資源文件，比如說 js ， css ， images 都需要放在/resources目錄下，這個目錄現(xiàn)在我們還沒有建。
所有的展示頁面，比如jsp文件，都需要放置在/WEB-INF/pages目錄下，這個目錄現(xiàn)在我們也沒有建。

OK，我們把對應的目錄加上。

首先是Java文件的目錄。

我們在這個地方右鍵，新建一個 com 包,再在里面建一個 springmvc 包，或者用 . 的方式一起建。

點擊Finish

根據(jù)SpringMVC的分層，我們在springmvc 包下面建三個包，分別是controller ， service ， dao

這樣的話，當我們項目一旦啟動，springmvc就會掃描這三個包，將里面但凡是有注解的類都提取起來，放進Spring容器（或者說Spring的bean工廠），借由Spring容器來統(tǒng)一管理。這也就是你從來沒有去new一個Controller的原因。

接下來，我們來建靜態(tài)資源的目錄。

在WebContent目錄下新建一個resources文件夾。

然后順便把js，css，img的文件夾都建一下，這里就存放我們的靜態(tài)資源文件。

最后，我們在WEB-INF目錄下建一個pages文件夾，作為展示頁面的存放目錄。

將之前的index.jsp拷貝進來。

這樣就配置的差不多了。

5. 導包和驗證

我們將jar包放到lib目錄：

然后啟動項目，驗證一下到目前為止的構(gòu)建是否正確。

打開Servers視圖，點擊如圖像是甲蟲一樣的圖標。

發(fā)現(xiàn)報錯了，錯誤信息如下：

錯誤：

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

它說我們在WEB-INF下面少了一個applicationContext.xml 這個文件，原來，我們少了對SpringBean工廠的配置，它的意思就是說，我們要規(guī)定一下，在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地址去訪問的，保證了安全性。這也是我們?yōu)槭裁窗秧撁娑挤旁谠撃夸浵碌脑颉?/p>

為了有所區(qū)分，我們還單獨建立了一個pages文件夾，將這些頁面保存起來。

現(xiàn)在，為了訪問這個頁面，我們需要用到SpringMVC的頁面跳轉(zhuǎn)機制。

我們在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

結(jié)果：

沒關系，我們看他報什么錯。

message /springmvc/WEB-INF/pagesindex.jsp

pagesindex.jsp是什么鬼？？

原來，在dispatcher-servlet.xml中，我們少寫了一個 "/"

添上去就行了。

保存后，因為修改了XML配置文件，因此我們還是需要重新啟動Tomcat。

啟動完成后，繼續(xù)！

成功了。

6. 引入靜態(tài)資源

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

Paste_Image.png

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

的確，這是一種方式。可是，它有一個缺點就是根路徑寫死了，我們肯定不希望這樣的。

其實，我們可以在viewController里面拿到項目根路徑，然后傳遞到jsp頁面就OK了。

我們把調(diào)試信息 “恭喜，web項目已經(jīng)成功搭建！” 刪掉。

<%@ 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：騰訊安全發(fā)布2019產(chǎn)業(yè)互聯(lián)網(wǎng)安全十大議題
下一篇：想學HTML5？HTML學習大綱來了

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

WEB通用基礎-MVC架構(gòu)

一、前端交互層

二、業(yè)務邏輯層

三、數(shù)據(jù)層

#專欄作家#

言

正文

您的項目需求