标签:set node tools java base lte axios 后端 await
方式一:后端处理
1.增加 tools service
app/service/tools.js
/**
* 构建树形结构数据
* @param {*} data
*/
buildTree(data) {
const res = [];
// 找出所有根节点
for(let item of data){
if(!item.pid){
item.children = getNode(item.id);
res.push(item);
}
}
// 传入根节点id 递归查找所有子节点
function getNode(id) {
const node = [];
for(const item of data){
if(item.pid === id){
item.children = getNode(item.id);
node.push(item);
}
}
if(node.length === 0) return;
return node;
}
return res;
}
2.获取 数据库 一维的对象数组
app/service/food.js
return await app.model.Food.findAll({
raw: true // 设置为 true,即可返回源数据
});
3.处理后返回前端
app/controller/food.js
async lists() {
const { ctx } = this;
const data = await ctx.service.food.lists();
if(data){
ctx.body = {
code: 200,
message: ‘列表查询成功‘,
data: ctx.service.tools.buildTree(data)
}
}else{
ctx.body = {
code: 500,
message: ‘列表查询失败‘,
data: {}
}
}
}
方式二:前端处理
async componentDidMount() {
let { data } = await axios.get(`${BaseUrl}/food/lists`);
this.listData = data.data;
this.setState({
list: this._buildTree(0) // 一级pid为0
});
}
// 实现一维的对象数组转化为树形数组
_buildTree = (id) => {
const data = this.listData.filter((item) => item.pid === id);
data.forEach(item => {
item.children = this._buildTree(item.id);
});
return data;
}
效果图

标签:set node tools java base lte axios 后端 await
原文地址:https://www.cnblogs.com/crazycode2/p/12485441.html