<el-tree>怎么把后端的数据进行渲染
时间: 2023-06-07 14:08:59 浏览: 66
在使用<el-tree>渲染后端数据之前,您需要确保您的后端数据已经被正确地获取并保存在前端中。可以通过使用axios库发送异步请求来实现。一旦您成功获取了后端数据,您可以将数据通过props属性传递给<el-tree>组件,然后<el-tree>会将这些数据渲染为树形结构。如果您需要对数据进行排序、筛选或者其他操作,您可以在组件中自定义相应的方法来实现这些需求。
相关问题
设备,楼,层三者依次为父子节点,请设计出MySQL数据库表,后端java语言如何去查询并且返回给前端,前端用<el-tree>渲染出来,写出全部代码
好的,我理解您的要求。针对您的问题,我给出以下 MySQL 数据库表的设计:
CREATE TABLE device (
id int(11) NOT NULL AUTO_INCREMENT,
name varchar(50) NOT NULL,
PRIMARY KEY (id)
);
CREATE TABLE floor (
id int(11) NOT NULL AUTO_INCREMENT,
name varchar(50) NOT NULL,
device_id int(11) NOT NULL,
PRIMARY KEY (id),
FOREIGN KEY (device_id) REFERENCES device(id)
);
CREATE TABLE building (
id int(11) NOT NULL AUTO_INCREMENT,
name varchar(50) NOT NULL,
floor_id int(11) NOT NULL,
PRIMARY KEY (id),
FOREIGN KEY (floor_id) REFERENCES floor(id)
);
其中,设备(device)、楼层(floor)和建筑(building)分别存储设备、楼层和建筑的基本信息。设备和楼层之间是一对多的关系,楼层和建筑之间也是一对多的关系。
后端 Java 语言的代码如下:
@GetMapping("/buildings")
public List<Building> getBuildings() {
List<Building> buildings = buildingRepository.findAll();
for (Building building : buildings) {
List<Floor> floors = floorRepository.findByBuildingId(building.getId());
for (Floor floor : floors) {
List<Device> devices = deviceRepository.findByFloorId(floor.getId());
floor.setDevices(devices);
}
building.setFloors(floors);
}
return buildings;
}
这段代码通过调用各个仓库(如 buildingRepository、floorRepository 和 deviceRepository)来获取对应的数据。然后,它循环遍历所有建筑物,获取其中的楼层和设备。最后,将所有的数据合并到建筑物对象中并返回给前端。
前端 Vue.js 框架中,使用 <el-tree> 控件来渲染建筑物数据。代码如下:
<template>
<el-tree :data="buildings" :props="treeProps"></el-tree>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
buildings: []
};
},
created() {
axios.get('/buildings').then(response => {
this.buildings = response.data;
});
},
computed: {
treeProps() {
return {
children: 'floors',
label: 'name',
isLeaf: node => !node.floors
};
}
}
};
</script>
这段代码通过 HTTP GET 请求获取建筑物数据,并在响应时将其存储到 Vue 组件中的 buildings 数据中。然后,它使用 <el-tree> 控件来渲染数据。其中,children、label 和 isLeaf 属性分别指定了建筑物、楼层和设备数据在树中的对应位置,以及每一个节点是否是叶子节点。
设备,楼,层三者依次为父子节点,左边是右边的父节点,请设计出MySQL数据库表,只使用一张数据库的表,后端java语言如何去查询并且返回给前端,前端用<el-tree>渲染出来,写出全部代码
好的,可以开始回答你的问题了。针对你的问题,我可以设计一张名为“building”的MySQL数据库表,如下所示:
| 字段名称 | 数据类型 | 描述 |
| -------- | ------------ | ------------------ |
| id | int | 主键,自增长 |
| name | varchar(100) | 名称 |
| parent | int | 父节点的id,为空表示根节点 |
其中,根节点的parent字段为空。以设备、楼、层为例,可以插入如下数据:
| id | name | parent |
| --- | ------- | ------ |
| 1 | 设备1 | 2 |
| 2 | 楼1 | 3 |
| 3 | 层1 | 4 |
| 4 | 根节点 | NULL |
上述数据库表的Java后端实现代码如下:
```java
@RestController
@RequestMapping("/building")
public class BuildingController {
private final BuildingRepository buildingRepository;
@Autowired
public BuildingController(BuildingRepository buildingRepository) {
this.buildingRepository = buildingRepository;
}
@GetMapping("/tree")
public List<BuildingDto> getBuildingTree() {
List<BuildingDto> buildingDtos = new ArrayList<>();
// 查询所有的根节点
List<Building> rootNodes = buildingRepository.findByParentIsNull();
// 构造以根节点为顶点的树形结构
for (Building rootNode : rootNodes) {
BuildingDto rootNodeDto = new BuildingDto();
rootNodeDto.setId(rootNode.getId());
rootNodeDto.setName(rootNode.getName());
rootNodeDto.setChildren(getChildren(rootNode));
buildingDtos.add(rootNodeDto);
}
return buildingDtos;
}
private List<BuildingDto> getChildren(Building parentBuilding) {
List<BuildingDto> childrenDtos = new ArrayList<>();
List<Building> children = buildingRepository.findByParent(parentBuilding.getId());
for (Building child : children) {
BuildingDto childDto = new BuildingDto();
childDto.setId(child.getId());
childDto.setName(child.getName());
childDto.setChildren(getChildren(child));
childrenDtos.add(childDto);
}
return childrenDtos;
}
}
```
其中,Building和BuildingDto分别代表数据库表中的记录和前端渲染所需的数据格式,定义如下:
```java
@Entity
@Table(name = "building")
public class Building {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer id;
private String name;
@Column(name = "parent")
private Integer parentId;
// 省略getter和setter方法
}
```
```java
public class BuildingDto {
private Integer id;
private String name;
private List<BuildingDto> children;
// 省略getter和setter方法
}
```
最后,前端可以使用<el-tree>组件进行渲染,代码如下:
```html
<template>
<el-tree :data="treeData" :props="{label: 'name', children: 'children'}"></el-tree>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
treeData: []
}
},
mounted() {
this.getTreeData();
},
methods: {
async getTreeData() {
const response = await axios.get('/building/tree');
this.treeData = response.data;
}
}
}
</script>
```
以上就是全部的代码实现。注意,这里为了简单起见,省略了所有的异常处理、日志记录等非核心代码。如果你需要使用该代码,需要根据自己的实际情况进行相应的修改和完善。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)