后端开发教程 - Java、Spring Boot 实战 - msg200.com
🎙️我们在 HMPL 中实现了新功能，以帮助开发人员缩小 Web 应用程序的大小🔥
今天，我们准备了一些很酷的功能，它们可以真正帮助开发者大幅缩减 Web 应用程序的体积。这些功能本身就为本已优秀的模板语言增添了额外且有趣的功能。
它们已经开发了几个月，并且具有相当强的可扩展性，使得未来更加光明和清晰。
⚙️ 自动body生成RequestInit
创新之一是生成向body服务器发出的请求。此功能在使用表单时非常方便，因为您无需手动指定FormData。
import { compile } from "hmpl-js";
const templateFn = compile(
`<div>
<table>
<caption>
List of products in the store
</caption>
<thead>
<tr>
<th scope="col">Product name</th>
<th scope="col">Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Coca Cola</td>
<td>10</td>
</tr>
<tr>
<td>Lays</td>
<td>4</td>
</tr>
{
{
"src":"/api/products",
"after":"submit:#form",
"autoBody":true,
"indicators": [
{
"trigger": "pending",
"content": "<tr><td>Loading...</td><td>Loading...</td></tr>"
}
]
}
}
</tbody>
</table>
<form id="form">
<div class="form-example">
<label>Product name: </label>
<input type="text" name="product" id="product" required /><br/>
<label>Quantity: </label>
<input type="number" name="quantity" id="quantity" required />
</div>
<div class="form-example">
<input type="submit" value="Add product" />
</div>
</form>
</div>
`
);
const obj = templateFn({ credentials: "same-origin" });
const wrapper = document.getElementById("wrapper");
wrapper.appendChild(obj.response);
这里，我们发送一个请求，将产品添加到表中。如果没有这个功能，我们就必须通过 手动设置参数new FormData().set()，但现在它已经自动完成了。
另外，如果你能点个星支持这个项目就更好了！谢谢❤️！
🔄 指标
指示器是根据服务器请求的状态显示的 HTML 组件。
{
{
"src": "http://localhost:5000/api/test",
"indicators": [
{
"trigger": "pending",
"content": "<p>Loading...</p>"
},
{
"trigger": "rejected",
"content": "<p>Error</p><button>reload</button>"
}
]
}
}
在它们的帮助下，您可以创建自定义加载器，向用户指示服务器尚未返回响应。
🔧 经过全面测试
整个应用程序的测试覆盖率为 100%，因此此功能将以最少数量的错误运行。
您可以在Codecov上查看包含测试的报告，测试本身位于测试文件夹中。
👀 准备好让你的网络应用变得更小了吗？
-
Node 包管理器：您可以使用以下命令通过 npm 下载它
npm i hmpl-js -
内容分发网络：您可以使用以下代码通过 CDN 包含具有依赖关系的文件：
<script src="https://unpkg.com/json5/dist/index.js"></script>
<script src="https://unpkg.com/hmpl-js/dist/hmpl.min.js"></script>
-
本地：或者，有一个与第二个类似的选项，只需将文件下载到本地机器即可。
-
启动项目：还有一个启动项目，可以通过命令进行部署
npx degit hmpl-language/hello-hmpl-starter my-project
💬 反馈
您可以在评论区写下您对新功能的想法，阅读起来一定很有趣！或者，您也可以在Discord 主题频道提问和提出建议，我或其他人会尽力解答！
✅ 该项目是开源的
所以你也可以参与！这也意味着你可以将其用于商业用途：
仓库：https://github.com/hmpl-language/hmpl
网站：https://hmpl-lang.dev
感谢您的阅读！
