很多小伙伴在剛開始學(xué)習(xí)Java后端的時候，會有將html寫入servlet的習(xí)慣（這是由于有些教程并沒有介紹mvc）。而小編在很多文章都介紹了MVC是什么。接下來，我們通過對一個簡單的web項(xiàng)目進(jìn)行MVC分解，來學(xué)習(xí)如何使用MVC模式吧！
閱前須知
本篇文章分為上下兩篇，這是上篇，主要介紹如何把視圖層從servlet中分離出來。
對本文的web項(xiàng)目結(jié)構(gòu)要是有疑惑，可以參讀小編的這篇文章：java web項(xiàng)目結(jié)構(gòu)是怎么樣的？詳解java web項(xiàng)目文件！
什么是MVC
MVC模式，就是將原本的web代碼，按照功能的不同，劃分成控制層，視圖層和模型層三個層次，以web項(xiàng)目為例，當(dāng)請求訪問時，由控制層負(fù)責(zé)處理，控制層調(diào)用模型層對請求進(jìn)行處理，最后使用表現(xiàn)層展示出來。
實(shí)戰(zhàn)
請求頁面：（這是用來請求的頁面，放出來以供參考）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>優(yōu)質(zhì)的W3C分類選擇</h1>
<form action="hello-servlet" method="get">
<select name="class" id="ke">
<option value="qd">前端開發(fā)</option>
<option value="hd">后端開發(fā)</option>
<option value="db">數(shù)據(jù)庫</option>
<option value="cp">計(jì)算機(jī)原理</option>
<option value="Android">移動開發(fā)</option>
<option value="other">其他</option>
</select>
<input type="submit" value="提交">
</form>
</body>
</html>servlet（這里我們用3.0以上版本的servlet，使用注解替代?web.xml?）：
import java.io.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
@WebServlet(name = "helloServlet", value = "/hello-servlet")
public class HelloServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
String classname = "";
String url = "";
String element = "";
classname = request.getParameter("class");
if (classname.equals("qd")) {//目前只做前端判定，后期再增加
url = "http://www.o2fo.com/courses?direction=2120&tag=0&type=&condition=&order=";
element = "前端微課";
}
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
out.println("<!DOCTYPE html>\n" +
"<html lang=\"en\">\n" +
"<head>\n" +
"\t<meta charset=\"UTF-8\">\n" +
"\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n" +
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n" +
"\t<title>Document</title>\n" +
"</head>\n" +
"<body>");
out.println("<h1>以下是W3C平臺優(yōu)秀的前端微課介紹，點(diǎn)擊鏈接即可前往</h1>");
out.println("<a href =\"" + url + "\" >" + element + "</a>");
out.println("</body></html>");
}
}可以看到，上面的代碼使用servlet進(jìn)行HTML代碼的輸出，十分的混亂，而且其中夾雜著一些判定（這部分功能應(yīng)該交給模型層進(jìn)行處理）。接下來我們將其中的html代碼進(jìn)行剝離，使用jsp來進(jìn)行頁面的輸出。
result.jsp（負(fù)責(zé)返回頁面的jsp）:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<%
String link = (String) request.getAttribute("url");
String text = (String) request.getAttribute("element");
%>
<h1>以下是W3C平臺優(yōu)秀的前端微課介紹，點(diǎn)擊鏈接即可前往</h1>
<a href ="<%= link%>"><%= text%></a>
</body>
</html>同時，對servlet進(jìn)行對應(yīng)的修改（主要是刪除原來的HTML輸出代碼，將需要傳遞給頁面的數(shù)據(jù)封裝進(jìn)請求后然后將請求轉(zhuǎn)發(fā)給jsp）。
現(xiàn)在的servlet的get方法如下：
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
String classname = "";
String url = "";
String element = "";
classname = request.getParameter("class");
if (classname.equals("qd")) {//目前只做前端判定，后期再增加
url = "http://www.o2fo.com/courses?direction=2120&tag=0&type=&condition=&order=";
element = "前端微課";
}
request.setAttribute("url",url);
request.setAttribute("element",element);
RequestDispatcher view = request.getRequestDispatcher("result.jsp");
try {
view.forward(request,response);
} catch (ServletException e) {
e.printStackTrace();
}
}這樣子就完成了視圖層的分離了。
小結(jié)
通過JSP的技術(shù)，可以將servlet中的HTML代碼取出進(jìn)行獨(dú)立封裝，以實(shí)現(xiàn)視圖層分離的效果，但這只實(shí)現(xiàn)了MVC中的視圖分離。關(guān)注W3C技術(shù)頭條，小編帶你了解更多技術(shù)。
相關(guān)閱讀
MVC三層架構(gòu)分離——模型層分離
