Appearance
动态页面(SSR)
系统集成了thymeleaf模板引擎，并支持通过调用自动化或脚本的方式获取平台内部的数据后，服务器渲染静态资源中的html页面。
设置
| 配置项 | 内容 |
|---|---|
| 名称 | 动态页面名称 |
| 路径 | 动态页面的访问路径 页面路径支持/、.、字母数字等复合url规范的字符 |
| 模板引擎 | 页面渲染使用的引擎，目前仅支持thymeleaf |
| 调用类型 | 页面动态渲染使用的数据源 |
| 自动化 | 调用类型选择自动化时，设置页面渲染的数据来源的自动化 |
| 脚本 | 调用类型选择脚本时，设置页面渲染的数据来源的脚本 |
| 脚本函数 | 调用类型选择脚本时，调用的脚本中的函数 |
| 自动化或脚本返回值标识符 | 调用数据源返回数据后，数据设置的标识符上下文。 此标志符是在页面模板获取数据的根属性 如:设置为data,则在页面中使用 ${data.属性} 获取值 |
| 渲染页面 | 选择来自静态资源中的页面作为渲染模板 |
快速入门
创建一个动态页面，并设置自动化作为动态页面的数据源
自动化输入参数：
| 参数 | 类型 | 是否必填 |
|---|---|---|
| ctx | Object | 非必填 |
添加【代码片段】步骤，具体代码如下：
js
automatic.setReturnValue({
"ctx": ctx,
"list":[
{
"id": 1,
"name": "张三",
"position": "工程师",
"department": "技术部",
"salary": 60000,
"join_date": "2022-01-01"
},
{
"id": 2,
"name": "李四",
"position": "销售经理",
"department": "销售部",
"salary": 80000,
"join_date": "2022-02-15"
},
{
"id": 3,
"name": "王五",
"position": "财务主管",
"department": "财务部",
"salary": 70000,
"join_date": "2022-03-10"
}
]
})html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<title>动态页面</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div style="padding: .1563rem">
<h3>列表渲染</h3>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">名称</th>
<th scope="col">职位</th>
<th scope="col">部门</th>
<th scope="col">薪资</th>
<th scope="col">加入时间</th>
</tr>
</thead>
<tbody>
<tr th:each="item : ${data.list}">
<th scope="row" th:text="${item.id}"></th>
<td th:text="${item.name}"></td>
<td th:text="${item.position}"></td>
<td th:text="${item.department}"></td>
<td th:text="${item.salary}"></td>
<td th:text="${item.join_date}"></td>
</tr>
</tbody>
</table>
<h3 style="margin-top: .1042rem">条件判断</h3>
<p th:if="${#strings.isEmpty(data.ctx.query.visible)}">链接不包含visible参数</p>
<p th:unless="${#strings.isEmpty(data.ctx.query.visible)}">链接包含visible参数</p>
<button class="btn btn-primary" onclick='window.location.search="?visible=1"'>显示</button>
<button class="btn btn-primary" style="margin-left: .026rem" onclick='window.location.search=""'>隐藏</button>
<h3 style="margin-top: .1042rem">格式化</h3>
<p>日期格式化：<span th:text="${#dates.format(#dates.createNow(),'dd/MMM/yyyy HH:mm')}"></span></p>
<p>将数字3格式化为：<span th:text="${#numbers.formatInteger(3 ,2,'POINT')}"></span></p>
<h3 style="margin-top: .1042rem">接收到的参数：</h3>
<p th:text="${data.ctx.query}"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script>
</body>
</html>基本语法
下面将列举thymeleaf模板引擎的基本语法，其他用法请参考thymeleaf官方文档
文本绑定
通过th:text属性绑定当前元素的文本内容，如果遇到特殊字符都将转化为字符串
js
const data = {
"text": "Hello World"
}html
<span th:text="${data.text}"></span>html
<span>Hello World</span>非转义文本绑定
当输出的文本内容我们希望是HTML源代码时，可以通过th:utext进行非转义文本的绑定
js
const home = {
welcome: 'Welcome to our <b>fantastic</b> grocery store!'
}html
<p th:utext="${home.welcome}">Welcome to our grocery store!</p>html
<p>Welcome to our <b>fantastic</b> grocery store!</p>逻辑判断
我们可以通过th:if，控制返回结果为true的元素渲染，th:unless则反之
js
const data = {
visible: 'show'
}html
<p th:if="${#strings.isEmpty(data.visible)}">if</p>
<p th:unless="${#strings.isEmpty(data.visible)}">unless</p>html
<p>if</p>循环
我们可通过th:each遍历数组对象，循环渲染元素
js
const data = {
list: [{
"id": 1,
"name": "张三",
"position": "工程师",
"department": "技术部",
"salary": 60000,
"join_date": "2022-01-01"
}, {
"id": 2,
"name": "李四",
"position": "销售经理",
"department": "销售部",
"salary": 80000,
"join_date": "2022-02-15"
}, {
"id": 3,
"name": "王五",
"position": "财务主管",
"department": "财务部",
"salary": 70000,
"join_date": "2022-03-10"
}]
}html
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">名称</th>
<th scope="col">职位</th>
<th scope="col">部门</th>
<th scope="col">薪资</th>
<th scope="col">加入时间</th>
</tr>
</thead>
<tbody>
<tr th:each="item : ${data.list}">
<th scope="row" th:text="${item.id}"></th>
<td th:text="${item.name}"></td>
<td th:text="${item.position}"></td>
<td th:text="${item.department}"></td>
<td th:text="${item.salary}"></td>
<td th:text="${item.join_date}"></td>
</tr>
</tbody>
</table>html
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">名称</th>
<th scope="col">职位</th>
<th scope="col">部门</th>
<th scope="col">薪资</th>
<th scope="col">加入时间</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>张三</td>
<td>工程师</td>
<td>技术部</td>
<td>60000</td>
<td>2022-01-01</td>
</tr>
<tr>
<th scope="row">2</th>
<td>李四</td>
<td>销售经理</td>
<td>销售部</td>
<td>80000</td>
<td>2022-02-15</td>
</tr>
<tr>
<th scope="row">3</th>
<td>王五</td>
<td>财务主管</td>
<td>财务部</td>
<td>70000</td>
<td>2022-03-10</td>
</tr>
</tbody>
</table>函数
thymeleaf提供了丰富的工具类支持模板内的对象操作，下文演示了函数的基本用法
html
<p>日期格式化：<span th:text="${#dates.format(#dates.createNow(),'dd/MMM/yyyy HH:mm')}"></span></p>
<p>将数字3格式化为：<span th:text="${#numbers.formatInteger(3 ,2,'POINT')}"></span></p>html
<p>日期格式化：<span>26/6月/2024 11:52</span></p>
<p>将数字3格式化为：<span>03</span></p>