后端传了一个实体类对象,前端用layui表格怎么接收
时间: 2023-06-27 10:02:48 浏览: 165
前端可以通过在 layui 表格中设置数据源来接收后端传递的实体类对象,具体步骤如下:
1. 在 layui 表格中声明数据源:
```js
table.render({
elem: '#table-demo',
url: '/api/getData', // 后端接口地址
cols: [
// 表头定义
{ field: 'id', title: 'ID', width: 80 },
{ field: 'name', title: '姓名', width: 120 },
{ field: 'age', title: '年龄', width: 80 },
// ...
]
});
```
2. 后端接口需要返回符合 layui 表格数据格式的数据,例如:
```json
{
"code": 0,
"msg": "",
"count": 1000,
"data": [
{
"id": 10001,
"name": "张三",
"age": 25,
// ...
},
{
"id": 10002,
"name": "李四",
"age": 30,
// ...
},
// ...
]
}
```
其中,`code` 字段表示接口状态码(0 表示成功),`msg` 字段为接口返回消息,`count` 字段表示数据总数,`data` 字段表示数据列表。
3. 后端实体类对象需要按照表格列定义的字段名命名,例如:
```java
public class Person {
private Integer id;
private String name;
private Integer age;
// ...
// getter 和 setter 方法
}
```
4. 后端接口需要将实体类对象转换为符合 layui 表格数据格式的 JSON 数据返回,例如:
```java
@GetMapping("/api/getData")
public Result getData() {
List<Person> persons = personService.getAll();
long count = persons.size();
return Result.success(ResultCode.SUCCESS, count, persons);
}
```
其中,`Result` 类是接口返回结果的封装类,`ResultCode` 是接口状态码的枚举类,`personService.getAll()` 返回所有 Person 对象的列表。在 `Result` 类中定义的 `success()` 方法将返回一个符合 layui 表格数据格式的 JSON 数据,例如:
```json
{
"code": 0,
"msg": "",
"count": 1000,
"data": [
{
"id": 10001,
"name": "张三",
"age": 25,
// ...
},
{
"id": 10002,
"name": "李四",
"age": 30,
// ...
},
// ...
]
}
```
这样,当前端发送请求后,后端将返回符合 layui 表格数据格式的 JSON 数据,前端就可以在 layui 表格中展示数据了。
阅读全文