### HTML 页面如何获取动态资源
在没有 `web
.xml` 文件的情况下，HTML 页面依然可以通过后端接口获取动态资源。这种做法依赖于现代 Web 框架（如 Spring Boot）的注解驱动配置方式，不再需要传统的 `web
.xml` 来定义 Servlet 映射和初始化参数 [^2]。
Layui 框架通常通过 AJAX 请求与后端交互，从而实现数据的动态加载。例如，在使用
Layui 的表格组件时，可以指定一个 URL 作为数据源，该 URL 对应的是后端提供的 RESTful 接口 [^1]。
#### 示例：
Layui 表格从后端获取动态数据
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Layui 动态数据示例</title>
<link rel="stylesheet" href="/
layui/css/
layui.css">
</head>
<body>
<table class="
layui-hide" id="demoTable"></table>
<script src="/
layui/
layui.js"></script>
<script>
layui.use('table', function(){
var table =
layui.table;
table
.render({
elem: '#demoTable'
,url:'/api/
data' // 这里指向后端提供的 REST 接口
,cols: [[
{field:'id', title:'ID'}
,{field:'name', title:'名称'}
,{field:'value', title:'值'}
]]
,page: true
});
});
</script>
</body>
</html>
```
在这个例子中，`/api/
data` 是一个由后端暴露的 RESTful 接口，它负责返回 JSON 格式的数据，供
Layui 表格进行渲染 [^2]。
#### 后端控制器示例（Spring Boot）
如果使用 Spring Boot 构建后端服务，可以通过 `@RestController` 注解来创建一个控制器，并提供一个返回 JSON 数据的方法：
```java
import org
.springframework
.web
.bind
.annotation
.GetMapping;
import org
.springframework
.web
.bind
.annotation
.RestController;
import java
.util
.Arrays;
import java
.util
.List;
@RestController
public class
DataController {
@GetMapping("/api/
data")
public List<
Data> get
Data() {
return Arrays
.asList(
new
Data(1, "项目A", "100"),
new
Data(2, "项目B", "200")
);
}
private static class
Data {
private int id;
private String name;
private String value;
public
Data(int id, String name, String value) {
this
.id = id;
this
.name = name;
this
.value = value;
}
// Getters and Setters
public int getId() {
return id;
}
public void setId(int id) {
this
.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this
.name = name;
}
public String getValue() {
return value;
}
public void setValue(String value) {
this
.value = value;
}
}
}
```
上述代码展示了一个简单的 REST 控制器，它提供了 `/api/
data` 端点用于返回 JSON 数据 [^2]。这种方式使得
前端页面无需 `web
.xml` 即可访问到动态生成的内容。
此外，对于静态资源的访问问题，确保服务器配置了正确的资源映射路径，以便能够正确地提供 CSS、
JavaScript 和图像等静态文件 [^3]。
本文介绍了如何使用LayUI框架中的data方法进行数据操作，包括向test表插入、删除、更新和查询nickname字段，以及表的创建和数据获取。
扫一扫
5295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
