很多小伙伴在刚开始学习Java后端的时候，会有将html写入servlet的习惯（这是由于有些教程并没有介绍mvc）。而小编在很多文章都介绍了MVC是什么。接下来，我们通过对一个简单的web项目进行MVC分解，来学习如何使用MVC模式吧！
阅前须知
本篇文章分为上下两篇，这是上篇，主要介绍如何把视图层从servlet中分离出来。
对本文的web项目结构要是有疑惑，可以参读小编的这篇文章：java web项目结构是怎么样的？详解java web项目文件！
什么是MVC
MVC模式，就是将原本的web代码，按照功能的不同，划分成控制层，视图层和模型层三个层次，以web项目为例，当请求访问时，由控制层负责处理，控制层调用模型层对请求进行处理，最后使用表现层展示出来。
实战
请求页面：（这是用来请求的页面，放出来以供参考）
<!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>优质的W3C分类选择</h1>
<form action="hello-servlet" method="get">
<select name="class" id="ke">
<option value="qd">前端开发</option>
<option value="hd">后端开发</option>
<option value="db">数据库</option>
<option value="cp">计算机原理</option>
<option value="Android">移动开发</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 = "https://www.w3cschool.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平台优秀的前端微课介绍，点击链接即可前往</h1>");
out.println("<a href =\"" + url + "\" >" + element + "</a>");
out.println("</body></html>");
}
}可以看到，上面的代码使用servlet进行HTML代码的输出，十分的混乱，而且其中夹杂着一些判定（这部分功能应该交给模型层进行处理）。接下来我们将其中的html代码进行剥离，使用jsp来进行页面的输出。
result.jsp（负责返回页面的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平台优秀的前端微课介绍，点击链接即可前往</h1>
<a href ="<%= link%>"><%= text%></a>
</body>
</html>同时，对servlet进行对应的修改（主要是删除原来的HTML输出代码，将需要传递给页面的数据封装进请求后然后将请求转发给jsp）。
现在的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 = "https://www.w3cschool.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();
}
}这样子就完成了视图层的分离了。
小结
通过JSP的技术，可以将servlet中的HTML代码取出进行独立封装，以实现视图层分离的效果，但这只实现了MVC中的视图分离。关注W3C技术头条，小编带你了解更多技术。
相关阅读
MVC三层架构分离——模型层分离
