HTML如下：

    
    



    

        
        
    

结果：

Java代码如下：

package Thymeleaf;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Random;

@WebServlet("/guessNum")
public class GuessNumServlet extends HttpServlet {
    Random random = new Random();
    private int toGuess = 0;

    // 使用这个 doGet 来从服务器获取到猜数字的初始页面
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=UTF-8");
        toGuess = random.nextInt(100) + 1;
        resp.getWriter().write("n" +
                "n" +
                "n" +
                "    n" +
                "    n" +
                "n" +
                "n" +
                "n" +
                "    
n" +
                "        n" +
                "        n" +
                "    
n" +
                "n" +
                "结果：n" +
                "n" +
                "");
    }

    // 使用 doPost 来从服务器获取到 "带有猜测结果" 的页面
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=UTF-8");
        // 先根据用户提交的数字来比较一下看看结果
        int user = Integer.parseInt(req.getParameter("toGuess"));
        String result = "";
        if (user < toGuess) {
            result = "低了";
        } else if (user > toGuess) {
            result = "高了";
        } else {
            result = "答对了";
        }
        resp.getWriter().write("n" +
                "n" +
                "n" +
                "    n" +
                "    n" +
                "n" +
                "n" +
                "n" +
                "    
n" +
                "        n" +
                "        n" +
                "    
n" +
                "n" +
                "结果：n" + result +
                "n" +
                "");
    }
}

会发现在不使用模版引擎的情况下，当前的Java代码(代表着业务逻辑)和HTML代码(代表着用户界面)混合在一起，非常的不友好。尤其是HTML比较长，比较复杂的时候。

HTML文件

    
    
    
    



    

    

        
表白墙
        
输入后点击提交，将会吧信息显示在表格中
        

            

                谁：
                
            

            

                对谁：
                
            

            

                说什么：
                
            

            

                
            
        

        
        

            
            对
            
            说：
            
        
    

    

Servlet代码

import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.WebContext;
import org.thymeleaf.templateresolver.ServletContextTemplateResolver;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;

class Message {
    public String from;
    public String to;
    public String message;
}

@WebServlet("/message")
public class MessageServlet extends HttpServlet {
    // 1.先创建引擎
    private TemplateEngine engine = new TemplateEngine();

    // 保存所有的消息
    private ArrayList messages = new ArrayList<>();

    @Override
    public void init() throws ServletException {
        // 2.创建解析器
        ServletContextTemplateResolver resolver = new ServletContextTemplateResolver(getServletContext());
        resolver.setPrefix("/WEB-INF/template/");
        resolver.setSuffix(".html");
        resolver.setCharacterEncoding("UTF-8");
        engine.setTemplateResolver(resolver);
    }

    // 获取初始页面
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 把当前的模版读取加载过来，把消息 messages 给替换进去，并返回页面
        resp.setContentType("text/html;charset=UTF-8");
        WebContext webContext = new WebContext(req, resp, getServletContext());
        webContext.setVariable("messages", messages);
        engine.process("MessageWall", webContext, resp.getWriter());
    }
    // 执行新增页面

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 读取用户提交的数据，添加到 messages 列表中去，然后再返回一个完整页面
        // 设置请求的访问方式是必要的，否则 Servlet 读到的中文可能是乱码
        req.setCharacterEncoding("UTF-8");
        Message message = new Message();
        message.from = req.getParameter("from");
        message.to = req.getParameter("to");
        message.message = req.getParameter("message");
        messages.add(message);


        // 返回完整页面
        resp.setContentType("text/html;charset=UTF-8");
        WebContext webContext = new WebContext(req, resp, getServletContext());
        webContext.setVariable("messages", messages);
        engine.process("MessageWall", webContext, resp.getWriter());
    }
}

文件目录