App下載

MVC三層架構(gòu)分離——視圖層分離

猿友 2021-06-22 14:39:34 瀏覽數(shù) (3263)
反饋

很多小伙伴在剛開始學(xué)習(xí)Java后端的時候,會有將html寫入servlet的習(xí)慣(這是由于有些教程并沒有介紹mvc)。而小編在很多文章都介紹了MVC是什么。接下來,我們通過對一個簡單的web項目進行MVC分解,來學(xué)習(xí)如何使用MVC模式吧!

閱前須知

本篇文章分為上下兩篇,這是上篇,主要介紹如何把視圖層從servlet中分離出來。

對本文的web項目結(jié)構(gòu)要是有疑惑,可以參讀小編的這篇文章:java web項目結(jié)構(gòu)是怎么樣的?詳解java web項目文件!

什么是MVC

MVC模式,就是將原本的web代碼,按照功能的不同,劃分成控制層,視圖層和模型層三個層次,以web項目為例,當(dāng)請求訪問時,由控制層負責(zé)處理,控制層調(diào)用模型層對請求進行處理,最后使用表現(xiàn)層展示出來。

實戰(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">計算機原理</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://m.hgci.cn/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)秀的前端微課介紹,點擊鏈接即可前往</h1>");
        out.println("<a href =\"" + url + "\" >" + element + "</a>");
        out.println("</body></html>");
    }
}

可以看到,上面的代碼使用servlet進行HTML代碼的輸出,十分的混亂,而且其中夾雜著一些判定(這部分功能應(yīng)該交給模型層進行處理)。接下來我們將其中的html代碼進行剝離,使用jsp來進行頁面的輸出。

result.jsp(負責(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)秀的前端微課介紹,點擊鏈接即可前往</h1>
    <a href ="<%= link%>"><%= text%></a>
</body>
</html>

同時,對servlet進行對應(yīng)的修改(主要是刪除原來的HTML輸出代碼,將需要傳遞給頁面的數(shù)據(jù)封裝進請求后然后將請求轉(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://m.hgci.cn/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代碼取出進行獨立封裝,以實現(xiàn)視圖層分離的效果,但這只實現(xiàn)了MVC中的視圖分離。關(guān)注W3C技術(shù)頭條,小編帶你了解更多技術(shù)。

相關(guān)閱讀

MVC三層架構(gòu)分離——模型層分離

JSP教程 

servlet教程


0 人點贊