Linux 中利用 SpringMVC 提供树结构的数据-51CTO.COM

在 Linux 中使用 Spring MVC 提供树形数据可以通过以下几种途径实现：

一、使用 Spring Boot + Thymeleaf

在 Spring Boot + Thymeleaf 中，可以通过在控制器中构造树形数据，并使用 Thymeleaf 模板引擎渲染 HTML 页面，将树形数据以树状图的形式展示。以下是一个示例：

@Controller
public class TreeController {
    @GetMapping("/tree")
    public String tree(Model model) {
        List<Node> nodes = new ArrayList<Node>();
        Node root = new Node("Root");
        Node child1 = new Node("Child1");
        Node child2 = new Node("Child2");
        root.addChild(child1);
        root.addChild(child2);
        Node child11 = new Node("Child11");
        Node child12 = new Node("Child12");
        child1.addChild(child11);
        child1.addChild(child12);
        nodes.add(root);
        model.addAttribute("nodes", nodes);
        return "tree";
    }
}

在 Thymeleaf 模板中，可以使用 th:each 遍历节点并使用 th:text 显示节点的名称，如下所示：

<ul>
  <li th:each="node : ${nodes}">
    <span th:text="${node.name}"></span>
    <ul>
      <li th:each="child : ${node.children}">
        <span th:text="${child.name}"></span>
      </li>
    </ul>
  </li>
</ul>

二、使用 Spring Boot + Vue.js

在 Spring Boot + Vue.js 中，可以通过在后端控制器中构造树形数据，并使用 Vue.js 在前端渲染页面，将树形数据以树状图的形式展示。以下是一个示例：

@RestController
public class TreeController {
    @GetMapping("/tree")
    public List<Node> tree() {
        List<Node> nodes = new ArrayList<Node>();
        Node root = new Node("Root");
        Node child1 = new Node("Child1");
        Node child2 = new Node("Child2");
        root.addChild(child1);
        root.addChild(child2);
        Node child11 = new Node("Child11");
        Node child12 = new Node("Child12");
        child1.addChild(child11);
        child1.addChild(child12);
        nodes.add(root);
        return nodes;
    }
}

在前端页面中，可以使用 Vue.js 的递归组件 component 构造树形结构，如下所示：

<template>
  <div>
    <tree-node v-for="node in nodes" :node="node" :key="node.id"></tree-node>
  </div>
</template>

<script>
  Vue.component('tree-node', {
    props: ['node'],
    template: `
      <div>
        <span>{{ node.name }}</span>
        <tree-node v-for="child in node.children" :node="child" :key="child.id"></tree-node>
      </div>
    `
  });

  new Vue({
    el: '#app',
    data: {
      nodes: []
    },
    created: function() {
      axios.get('/tree')
        .then(response => this.nodes = response.data);
    }
  });
</script>

三、使用 Spring Boot + React

在 Spring Boot + React 中，可以通过在后端控制器构造树形数据，并使用 React 在前端渲染页面，将树形数据以树状图的形式展示。以下是一个示例：

@RestController
public class TreeController {
    @GetMapping("/tree")
    public List<Node> tree() {
        List<Node> nodes = new ArrayList<Node>();
        Node root = new Node("Root");
        Node child1 = new Node("Child1");
        Node child2 = new Node("Child2");
        root.addChild(child1);
        root.addChild(child2);
        Node child11 = new Node("Child11");
        Node child12 = new Node("Child12");
        child1.addChild(child11);
        child1.addChild(child12);
        nodes.add(root);
        return nodes;
    }
}

在前端页面中，可以使用 React 的递归组件 TreeNode 构造树形结构，如下所示：

class TreeNode extends React.Component {
  render() {
    const node = this.props.node;
    return (
      <div>
        <span>{node.name}</span>
        <div>
          {node.children.map(child => <TreeNode node={child} key={child.id} />)}
        </div>
      </div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { nodes: [] };
  }

  componentDidMount() {
    fetch('/tree')
      .then(response => response.json())
      .then(data => this.setState({ nodes: data }));
  }

  render() {
    return (
      <div>
        {this.state.nodes.map(node => <TreeNode node={node} key={node.id} />)}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

以上是三种常见的方式，在 Linux 中使用 Spring MVC 提供树形数据的方法。无论使用哪种方式，都需要在后端构造树形数据，并在前端使用相应的框架进行渲染。具体的实现方式可以根据项目需求和开发团队的技术栈进行选择。