当前位置：我爱分享网 > JavaScript教程 > 正文

JavaScript Mustache tutorial

2023-07-14 分类：JavaScript教程 评论(0)

在 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-apifor 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 从 Servlet 渲染 JSON 数据
图：使用 Mustache 从 Servlet 渲染 JSON 数据

在本文中，我们使用了 Mustache 模板引擎。

列出所有 JavaScript 教程。

赞(0) 打赏

相关推荐

置顶推荐

热门标签

科技 (125)5G (12)电商 (12)php教程 (11)通信 (10)智能 (9)格力 (7)中国 (6)亚马逊 (6)物流 (5)激光 (5)电视 (5)牌照 (4)市场 (4)京东 (4)网购 (3)8K (3)华为 (3)618 (3)法治 (2)北京 (2)运营商 (2)淘宝 (2)美国 (2)海信 (2)董明珠 (2)宽带 (2)互联网 (2)AI (2)科学 (2)

近期文章

网站统计

  • 日志总数：2095
  • 标签总数：496
  • 分类总数：11
  • 最后更新：2024-03-08

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏