vue-elementUI节点

1.配置好springboot-mybatis项目配置
1.1 oracle数据库表的创建

create table TB_POWER
(
  id       NUMBER(10) not null,
  name     VARCHAR2(20) not null,
  state    VARCHAR2(20) not null,
  iconcls  VARCHAR2(20),
  url      VARCHAR2(50),
  parentid NUMBER(10)
)
insert into TB_POWER (id, name, state, iconcls, url, parentid)
values (1, '首页', '1', 'el-icon-menu', 'https://www.baidu.com', 0);
insert into TB_POWER (id, name, state, iconcls, url, parentid)
values (2, '网站管理', '1', 'el-icon-menu', 'https://www.baidu.com', 0);
insert into TB_POWER (id, name, state, iconcls, url, parentid)
values (3, '公共管理', '1', 'el-icon-menu', 'https://www.baidu.com', 0);
insert into TB_POWER (id, name, state, iconcls, url, parentid)
values (4, '系统管理', '1', 'el-icon-menu', 'https://www.baidu.com', 0);
insert into TB_POWER (id, name, state, iconcls, url, parentid)
values (5, '系统统计', '1', 'el-icon-menu', 'https://www.baidu.com', 0);
insert into TB_POWER (id, name, state, iconcls, url, parentid)
values (6, '审核管理', '1', 'el-icon-menu', 'https://www.baidu.com', 0);
insert into TB_POWER (id, name, state, iconcls, url, parentid)
values (7, '意见管理', '1', 'el-icon-menu', 'https://www.so.com', 3);
insert into TB_POWER (id, name, state, iconcls, url, parentid)
values (8, '权限管理', '1', 'el-icon-menu', 'https://www.so.com', 4);
insert into TB_POWER (id, name, state, iconcls, url, parentid)
values (9, '广告管理', '1', 'el-icon-menu', 'https://www.so.com', 2);
insert into TB_POWER (id, name, state, iconcls, url, parentid)
values (10, '实名认证', '1', 'el-icon-menu', 'https://www.so.com', 6);
insert into TB_POWER (id, name, state, iconcls, url, parentid)
values (11, '员工管理', '1', 'el-icon-menu', '/emp/toList', 4);
insert into TB_POWER (id, name, state, iconcls, url, parentid)
values (12, '角色管理', '1', 'el-icon-menu', '/role/toRole', 4);
insert into TB_POWER (id, name, state, iconcls, url, parentid)
values (13, '视频认证', '1', 'el-icon-menu', 'https://www.so.com', 6);
insert into TB_POWER (id, name, state, iconcls, url, parentid)
values (14, '部门管理', '1', 'el-icon-menu', '/dept/toDept', 4);
insert into TB_POWER (id, name, state, iconcls, url, parentid)
values (15, '招标审核', '1', 'el-icon-menu', 'https://www.so.com', 6);
insert into TB_POWER (id, name, state, iconcls, url, parentid)
values (16, '消息管理', '1', 'el-icon-menu', 'https://www.so.com', 3);
insert into TB_POWER (id, name, state, iconcls, url, parentid)
values (17, '用户省份分布', '1', 'el-icon-menu', 'https://www.so.com', 5);
insert into TB_POWER (id, name, state, iconcls, url, parentid)
values (18, '满标一审', '1', 'el-icon-menu', 'https://www.so.com', 6);
insert into TB_POWER (id, name, state, iconcls, url, parentid)
values (19, '满标二审', '1', 'el-icon-menu', 'https://www.so.com', 6);
insert into TB_POWER (id, name, state, iconcls, url, parentid)
values (20, '重置密码', '1', 'el-icon-menu', 'https://www.so.com', 4);
insert into TB_POWER (id, name, state, iconcls, url, parentid)
values (21, '历史审核记录', '1', 'el-icon-menu', 'https://www.so.com', 6);
insert into TB_POWER (id, name, state, iconcls, url, parentid)
values (22, '时间段登入统计', '1', 'el-icon-menu', 'https://www.so.com', 5);
insert into TB_POWER (id, name, state, iconcls, url, parentid)
values (23, '标的数量统计', '1', 'el-icon-menu', 'https://www.so.com', 5);
insert into TB_POWER (id, name, state, iconcls, url, parentid)
values (24, '月或者日盈利统计', '1', 'el-icon-menu', 'https://www.so.com', 5);
commit;

2.创建实体类Node

public class Node {

    private Integer id;
    private String label;//节点名称
    private Integer pid;
    private String iconClass;//节点图标
    private String url;//地址
    private List<Node> children;

    public Integer getId() {
        return id;
    }
    public void setId(Integer id) {
        this.id = id;
    }
    public String getLabel() {
        return label;
    }
    public void setLabel(String label) {
        this.label = label;
    }
    public Integer getPid() {
        return pid;
    }
    public void setPid(Integer pid) {
        this.pid = pid;
    }
    public String getIconClass() {
        return iconClass;
    }
    public void setIconClass(String iconClass) {
        this.iconClass = iconClass;
    }
    public String getUrl() {
        return url;
    }
    public void setUrl(String url) {
        this.url = url;
    }
    public List<Node> getChildren() {
        return children;
    }
    public void setChildren(List<Node> children) {
        this.children = children;
    }
}

3.dao层代码

public interface PowerDao {
    /**
     * 权限列表查询
     * @return
     */
    @Select("select id, name as label, iconcls as iconClass, url, parentid pid from tb_power")
    List<Node> getList();
}

4.service层代码

public interface PowerService {
    /**
     * 列表查询方法
     * @return
     */
    List<Node> getList();
}
@Service
public class PowerServiceImpl implements PowerService{
@Autowired
private PowerDao powerDao;
    @Override
    public List<Node> getList() {
        List<Node> list=powerDao.getList();
        //拼装后的临时集合，用于返回数据
        List<Node> tempList=new ArrayList<>();
       if(list!=null&&list.size()>0){
           for (Node node : list) {
               //找到父节点为0的一级节点
            if(node.getPid()==0){
                tempList.add(node);
                //调用递归方法，找当前节点的子节点
                bindChildren(node,list);
            }
           }
       }
        return tempList;
    }

    /**
     * 递归绑定子节点
     * @param curNode
     * @param list
     */
    private void bindChildren(Node curNode,List<Node> list){
        for (Node node : list) {
            //如果当前节点的id和循环节点的父id相等，说明是当前节点的孩子
            if(curNode.getId()==node.getPid()){
                //取出当前节点的孩子集合
                List<Node> children=curNode.getChildren();
                //如果是没有孩子，孩子集合第一次取出是空的
                if(children==null){
                    children=new ArrayList<Node>();
                    children.add(node);
                }
                //设置当前孩子集合
                curNode.setChildren(children);
                //自己调用自己找孩子
                bindChildren(node,list);
            }
        }
    }
}

5.controller层代码

@Controller
@RequestMapping("power")
public class PowerController {
@Autowired
    private PowerService powerService;
/**
 * 跳转权限树页面
 * @return
 */
@RequestMapping("toTree")
public String toTree(){
    return "power/tree";
}
    /**
     * 权限树数据
     * @return
     */
    @ResponseBody
    @RequestMapping("tree")
    public Object tree(){
        return powerService.getList();
    }
}
@Controller
@RequestMapping("index")
public class IndexController {
    /**
     * 跳转首页
     * @return
     */
    @RequestMapping("toHome")
    public String toHome(){
        return "index";
    }
}

6.JSP页面代码
6.1 tree.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>权限树</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div class="diva">
    <el-tree
            :data="treeData"
            accordion
            @node-click="handleNodeClick">
    </el-tree>
</div>
<script>
    var vm = new Vue({
        el:".diva",
        data:{
            treeData:[]
        },
        created:function(){
            var _self =this
            axios.post("/power/tree").then(function(response){
                _self.treeData = response.data;
            })
        },
        methods:{
            handleNodeClick:function(n){
                alert(n.label+",url"+n.url);
            }
        }
    })
</script>

</body>
</html>

6.2 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
    </style>
</head>
<body>
<div class="diva">
    <el-container>
        <el-header style="height: 160px;">Header</el-header>
        <el-container>
            <el-aside width="200px" style="height: 600px;">
                <el-tree
                        :data="treeData"
                        accordion
                        @node-click="handleNodeClick"
                        :icon-class="icon"
                >
                </el-tree>
            </el-aside>
            <el-main style="height: 600px;">
                <el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
                    <el-tab-pane
                            v-for="(item, index) in editableTabs2"
                            :key="item.name"
                            :label="item.title"
                            :name="item.name"
                    >
                        <iframe :src="item.url" style="width:100%;height:550px;border: 0px;" scrolling="auto"  ></iframe>
                    </el-tab-pane>
                </el-tabs>

            </el-main>
        </el-container>
    </el-container>
</div>
<script>
    var vm = new Vue({
        el:".diva",
        data:{
            icon:'el-icon-menu',
            treeData:[],
            editableTabsValue2: '2',
            editableTabs2: [ {
                title: 'Tab 2',
                name: '2',
                url: 'https://www.baidu.com'
            }],
            tabIndex: 2
        },
        created:function(){
            var _self =this
            axios.post("/power/tree").then(function(response){
                _self.treeData = response.data;
            })
        },
        methods: {
            handleNodeClick: function (n) {
                // alert(n.label+",url"+n.url);
                if (n.url != null && n.url != 'null' && n.url != '')
                    this.addTab(n.label, n.url);
            },
            addTab: function (targetName, url) {
                var newTabName = targetName;
                if (JSON.stringify(this.editableTabs2).indexOf(newTabName) == -1) {
                    this.editableTabs2.push({
                        title: newTabName,
                        name: newTabName,
                        url: url
                    });
                }
                this.editableTabsValue2 = newTabName;
            },
            removeTab(targetName) {
                let tabs = this.editableTabs2;
                let activeName = this.editableTabsValue2;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }
                this.editableTabsValue2 = activeName;
                this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
            }
        }
    })
</script>
</body>
</html>