在 JavaScript Mustache 教程中,我们展示了如何使用 Mustache 模板引擎。
小胡子
Mustache 是一个简单的网页模板系统。它适用于许多编程语言,包括 JavaScript 和 Java。 Mustache 被描述为无逻辑模板引擎,因为它没有任何显式控制流程语句,例如 if 和 else 条件语句或 for 循环。可以使用节标记处理列表和 lambda 来实现循环和条件评估。
JSON(JavaScript 对象表示法) 是一种轻量级数据交换格式。人类很容易读写,机器很容易解析和生成。 application/json
是 JSON 的官方互联网媒体类型。 JSON 文件扩展名为.json
。
jQuery 是一个用于操作 DOM 的 JavaScript 库。使用 jQuery,我们可以查找、选择、遍历和操作 HTML 文档的各个部分。
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
Mustache 是一个 JavaScript 库,可以从 CDN(ContentDelivery Network)引用。
Mustache 基本模板示例
在第一个示例中,我们有一个基本的模板示例。
<!DOCTYPE html> <html lang="en"> <head> <title>JavaScript Mustache template</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script> </head> <body> <div id="mypanel"></div> <button id="btn">Load</button> <script> $("#btn").on('click', function() { var data = { name: "Jonathan" }; var template = "Hello {{ name }}"; var text = Mustache.render(template, data); $("#mypanel").html(text); }); </script> </body> </html>
单击按钮,我们会在页面上收到一条消息。
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
在示例中,我们使用 JQuery 和 Mustache JavaScript 库。
$("#btn").on('click', function() { ... }
我们创建了一个处理程序来响应按钮点击事件。
var data = { name: "Jonathan" };
这是数据。
var template = "Hello {{ name }}";
这是小胡子模板。 {{ name }}
是一个 Mustache 标签,它被替换为数据值。
var text = Mustache.render(template, data);
最终输出使用Mustache.render
函数呈现。模板引擎将模板与数据连接起来以生成输出。
$("#mypanel").html(text);
呈现的文本被写入面板元素。
使用模板标签的小胡子
在第二个例子中,我们使用了一个模板标签。目前使用<script type="text/template">
,但在不久的将来将被<template>
标签取代。标记客户端内容,在加载页面时不会呈现,但会在运行时使用 JavaScript 实例化。
<!DOCTYPE html> <html lang="en"> <head> <title>JavaScript Mustache template</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script> </head> <body> <script id="mp_template" type="text/template"> Date: {{ time }} <br> Time: {{ date }} <br> Unix time: {{ milliseconds_since_epoch }} </script> <div id="mypanel"></div> <button id="btn">Load</button> <script> $(function() { $("#btn").on('click', function() { $.getJSON('http://time.jsontest.com', function(data) { var template = $("#mp_template").html(); var text = Mustache.render(template, data); $("#mypanel").html(text); }); }); }); </script>
在此示例中,我们向time.jsontest.com
发出请求,它返回具有三个属性的 JSON 响应:time
、date
和milliseconds_since_epoch
(Unix 时间)。
<script id="mp_template" type="text/template"> Date: {{ time }} <br> Time: {{ date }} <br> Unix time: {{ milliseconds_since_epoch }} </script>
我们在<script id="mp_template" type="text/template">
标签内定义模板。
$.getJSON('http://time.jsontest.com', function(data) {
使用$.getJSON
,我们使用 GETHTTP 请求从服务器加载 JSON 编码的数据。
var template = $("#mp_template").html();
通过JQuery的html
方法,我们得到模板数据。
var text = Mustache.render(template, data);
输出使用Mustache.render
呈现。
$("#mypanel").html(text);
最终文本被写入面板元素。
带有 Java Servlet 的小胡子
在第三个示例中,我们创建了一个带有 servlet 的 Java 网络应用程序。
$ tree . âââ pom.xml âââ src âââ main â âââ java â â âââ com â â âââ zetcode â â âââ bean â â â âââ City.java â â âââ web â â âââ GetCities.java â âââ webapp â âââ index.html â âââ META-INF â â âââ context.xml â âââ WEB-INF âââ test âââ java
这是项目结构。
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.zetcode</groupId> <artifactId>ServletJsonMustache</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging> <name>ServletJsonMustache</name> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.source>1.8</maven.compiler.source> <maven.compiler.target>1.8</maven.compiler.target> </properties> <dependencies> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> <scope>provided</scope> </dependency> <dependency> <groupId>com.google.code.gson</groupId> <artifactId>gson</artifactId> <version>2.8.0</version> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-war-plugin</artifactId> <version>2.3</version> <configuration> <failOnMissingWebXml>false</failOnMissingWebXml> </configuration> </plugin> </plugins> </build> </project>
这是 Maven POM 文件。我们有两个工件:javax.servlet-api
for servlets 和gson
for JSON processing in Java。
<?xml version="1.0" encoding="UTF-8"?> <Context path="/ServletJsonMustache"/>
在 Tomcat context.xml
文件中,我们定义了上下文路径。它是 Web 应用程序的名称。
package com.zetcode.bean; public class City { private Long id; private String name; private int population; public City() { } public City(Long id, String name, int population) { this.id = id; this.name = name; this.population = population; } public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getPopulation() { return population; } public void setPopulation(int population) { this.population = population; } @Override public String toString() { return "City{" + "id=" + id + ", name=" + name + ", population=" + population + '}'; } }
这是City
bean。它具有三个属性:id、name 和 population。
package com.zetcode.web; import com.google.gson.Gson; import com.zetcode.bean.City; import java.io.IOException; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.ServletOutputStream; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet(name = "GetCities", urlPatterns = {"/GetCities"}) public class GetCities extends HttpServlet { private static final List<City> cities; static { cities = new ArrayList<>(); cities.add(new City(1L, "Bratislava", 432000)); cities.add(new City(2L, "Budapest", 1759000)); cities.add(new City(3L, "Prague", 1280000)); cities.add(new City(4L, "Warsaw", 1748000)); cities.add(new City(5L, "Los Angeles", 3971000)); cities.add(new City(6L, "New York", 8550000)); cities.add(new City(7L, "Edinburgh", 464000)); cities.add(new City(8L, "Berlin", 3671000)); } @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("application/json;charset=UTF-8"); try (ServletOutputStream os = response.getOutputStream()) { os.print(new Gson().toJson(cities)); } } }
这是GetCities
servlet。
response.setContentType("application/json;charset=UTF-8");
响应对象的内容类型设置为application/json
。
try (ServletOutputStream os = response.getOutputStream()) { os.print(new Gson().toJson(cities)); }
我们使用Gson
库将 Java 列表转换为 JSON 数组。该数组被写入响应输出流。该数组未指定名称。
<!DOCTYPE html> <html> <head> <title>Cities</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script> </head> <body> <script id="mp_template" type="text/template"> <table> <thead> <tr> <th>Id</th> <th>Name</th> <th>Price</th> </tr> </thead> <tbody> {{#.}} <tr> <td>{{id}}</td> <td>{{name}}</td> <td>{{population}}</td> </tr> {{/.}} </tbody> </table> </script> <div id="mypanel"></div> <button id="btn">Load</button> <script> $(function () { $("#btn").on('click', function () { $.getJSON('http://localhost:8084/ServletJsonMustache/GetCities', function (cities) { var template = $("#mp_template").html(); var text = Mustache.render(template, cities); $("#mypanel").html(text); }); }); }); </script> </body> </html>
这是主页。
<script id="mp_template" type="text/template"> ... </script>
Mustache 模板放在<script id="mp_template" type="text/template">
标签中。
<tbody> {{#.}} <tr> <td>{{id}}</td> <td>{{name}}</td> <td>{{population}}</td> </tr> {{/.}} </tbody>
使用 {{#.}} {{/.}}
语法,我们遍历从 servlet 返回的未命名 JSON 数组,并将 Mustache 标签替换为值。
$.getJSON('http://localhost:8084/ServletJsonMustache/GetCities', function (cities) {
使用$.getJSON
我们调用GetCities
servlet。 Theservlet 返回 JSON 数据,这些数据由 Mustache 处理。
命名 JSON 数组
如果我们想命名返回的 JSON 数组,我们可以使用以下代码:
Gson gson = new GsonBuilder().create(); JsonArray jarray = gson.toJsonTree(cities).getAsJsonArray(); JsonObject jsonObject = new JsonObject(); jsonObject.add("cities", jarray); os.print(jsonObject.toString());
在 servlet 中,我们将 JSON 数组放入另一个 JSON 对象中,并将该属性命名为cities
。
<tbody> {{#cities}} <tr> <td>{{id}}</td> <td>{{name}}</td> <td>{{population}}</td> </tr> {{/cities}} </tbody>
在 Mustache 模板中,我们使用以下语法:{{#cities}} {{/cities}}
。
在本文中,我们使用了 Mustache 模板引擎。
列出所有 JavaScript 教程。