模板引擎详解

news2024/11/17 17:25:13

📑打牌： da pai ge的个人主页
🌤️个人专栏： da pai ge的博客专栏
☁️宝剑锋从磨砺出，梅花香自苦寒来

🌤️动态页面的渲染方式

动态页面需要通过服务器根据客户端传来的参数 , 动态计算得到一些结果 , 并且把这些结果显示到页面上 .

所谓的 " 渲染 " (render) 就是把数据和页面结合起来 .

🌤️服务器渲染

数据和页面结合的工作 , 通过服务器完成 .

🌤️客户端渲染

服务器把数据返回给浏览器 , 由浏览器把数据和页面结合起来 .

浏览器和服务器之间的数据往往交互通过 ajax 进行 , 数据的格式往往使用 JSON.

之前咱们写的 带服务器的表白墙 , 就是通过客户端渲染实现的 .

🌤️字符串拼接 HTML

之前我们的代码中直接通过 resp.getWritter().write() 的方式 , 直接在参数中拼接一个 HTML 格式

的字符串 .

如果是返回一个简单的页面 , 可以按照上述方式拼接字符串完成 .

但是如果是一个复杂的页面呢 ? 我们通过一个简单的程序先初步感受一下 .

🌤️代码示例: 服务器版猜数字

之前我们实现的猜数字游戏 , 是一个纯粹的网页版本的程序 . 现在我们实现一个服务器版本的程序 .

创建 GuessNumServlet 类

其中的成员 toGuess 表示要猜的数字 , count 表示已经猜了的次数 .

doGet 方法用于处理游戏的初始化 . doPost 用于实现每一次 " 猜 " 的过程 .

服务器直接通过字符串拼接的方式构造 HTML, 返回给浏览器 .

@WebServlet("/html")
public class HtmlServlet extends HttpServlet {
   @Override
   protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
       String name = (String) req.getParameter("name");
       resp.setContentType("text/html; charset=utf-8");
       resp.getWriter().write(String.format("<h3>name: %s</h3>", name));
  }
}
@WebServlet("/guessNum")
public class GuessNumServlet extends HttpServlet {
   // 要猜的数字
   private int toGuess = 0;
   // 已经猜了几次
    private int count = 0;
   private Random random = new Random();
   @Override
   protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
       resp.setContentType("text/html; charset=utf-8");
       // get 方法返回一个初始页面, 并且在服务器中存一个随机数
       // 1. 构造随机数, 并清空 count
       toGuess = random.nextInt(100) + 1;
       System.out.println("toGuess = " + toGuess);
       count = 0;
       // 2. 返回页面内容
       String html = "<form action=\"guessNum\" method=\"GET\">\n" +
               "   <input type=\"submit\" value=\"重新开始游戏\">\n" +
               "</form>\n" +
               "\n" +
               "<form action=\"guessNum\" method=\"POST\">\n" +
               "   <input type=\"text\" name=\"num\">\n" +
               "   <input type=\"submit\" value=\"猜\">\n" +
               "</form>";
       resp.getWriter().write(html);
  }
   @Override
   protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
       // post 方法处理猜数字的动作.
       resp.setContentType("text/html; charset=utf-8");
       // 1. 读取请求中用户猜的数字
       int num = Integer.parseInt(req.getParameter("num"));
       // 2. 比较大小
       String result = "";
       if (num < toGuess) {
           result = "猜低了";
      } else if (num > toGuess) {
           result = "猜高了";
      } else {
           result = "猜对了";
      }
       count++;
       // 3. 构造返回的页面内容
       String html = String.format("<form action=\"guessNum\"
method=\"GET\">\n" +
               "   <input type=\"submit\" value=\"重新开始游戏\">\n" +
               "</form>\n" +
               "\n" +
               "<form action=\"guessNum\" method=\"POST\">\n" +
               "   <input type=\"text\" name=\"num\">\n" +
               "   <input type=\"submit\" value=\"猜\">\n" +
               "</form>\n" +
               "\n" +
               "<div>已经猜了: %d 次</div>\n" +
               "<div>结果: %s </div>", count, result);
       resp.getWriter().write(html);
  }
}

在字符串中直接编写 HTML , 这个是非常麻烦的 ( 尤其是有很多转义字符 ). 可以在其他编辑器直接把

HTML 写好 , 然后复制粘贴进去 .

IDEA 会自动加入转义字符 .

部署程序 , 通过浏览器访问 http://127.0.0.1:8080/ServletHelloWorld/guessNum

🌤️小结:

在这个代码中我们可以看到 , 当前页面其实并不复杂 , 但是直接拼装字符串的方式却让代码非常臃肿 .

尤其是 HTML 和 Java 代码混在一起 , 非常不利于开发维护 .

🌤️使用模板引擎

🌤️什么是模板引擎

<form action="guessNum" method="GET">
   <input type="submit" value="重新开始游戏">
</form>
<form action="guessNum" method="POST">
   <input type="text" name="num">
   <input type="submit" value="猜">
</form>
<div>已经猜了: 次</div>
<div>结果: </div>

模板引擎就是为了解决上面遇到的 , HTML 和 Java 混在一起的问题 .

我们可以把 HTML 的内容提取出来 , 放到单独的文件中 , 称为模板 .