js js Javascript递归构建菜单 展开式菜单的构建利用接口的数据

构建导航菜单

// 使用数据库中的结点列表构建导航菜单

// 结点结构如下
// interface Node {
//     /** 导航菜单结点 id */
//     id: number
   
//     /** 导航菜单父结点 id (parent id)，根结点 pid 为 -1 */
//     pid: number
   
//     /** 菜单名称 */
//     name: string
   
//     /** 子菜单列表 */
//     children?: Node[]
// }

// 从数据库取出的结点列表数据
let data = [
    { id: 0, pid: -1, name: '面试' },
    { id: 1, pid: 0, name: '计算机基础知识及原理' },
    { id: 2, pid: 0, name: '前端技能' },
    { id: 3, pid: 0, name: '综合素质' },
    { id: 4, pid: 1, name: '编码' },
    { id: 5, pid: 1, name: '操作系统' },
    { id: 6, pid: 1, name: '网络' },
    { id: 7, pid: 1, name: '数据结构' },
    { id: 8, pid: 2, name: 'js' },
    { id: 9, pid: 2, name: '异步' },
    { id: 10, pid: 2, name: '项目' },
    { id: 11, pid: 3, name: '学习能力' },
    { id: 12, pid: 3, name: '解决问题能力' },
]

应该返回以下的对象（省略部分结点）

{
    id: 0,
    pid: -1,
    name: '面试',
    children: [
        {
            id: 1,
            pid: 0,
            name: '计算机基础知识及原理',
            children: [
                {
                    id: 4,
                    pid: 1,
                    name: '编码'
                },
                {
                    id: 5,
                    pid: 1,
                    name: '操作系统'
                },
                // ...
            ]
        },
        {
            id: 2,
            pid: 0,
            name: '前端技能',
            children: [
                // ...
            ]
        },
        {
            id: 3,
            pid: 0,
            name: '综合素质',
            children: [
                // ...
            ]
        }
    ]
}

直接上代码 利用递归找到父节点

let data = [{
        id: 0,
        pid: -1,
        name: '面试'
    },
    {
        id: 1,
        pid: 0,
        name: '计算机基础知识及原理'
    },
    {
        id: 2,
        pid: 0,
        name: '前端技能'
    },//...省略数据
]
let mp = {//全局变量 递归使用 也可以传参

};
function build(nodes) {
    // 请实现这个函数，要求时间复杂度 O(n)

    // （可以直接修改结点列表 data 中的各个结点，如增加 children 属性）
    
    //console.log(nodes);
    for (node of nodes) {
        if (node['pid'] == -1) {
            mp.id=node.id;
            mp.pid=node.pid;
            mp.name=node.name;
            mp.children = [];
            nodes.splice(0, 1);
            console.log(mp);
            nodes=buildtree(mp, nodes);
        }
    }
    console.log(nodes);
}

function buildtree(itemtreenode, itemlist) {
    if (itemlist.length === 0) {
        return;
    }
    var j = 0 
    for (j = 0, len = itemlist.length; j < len; j++) {
        if (itemtreenode.id === itemlist[j].pid) {
            var node = {
                id: itemlist[j].id,
                pid:itemlist[j].pid,
                name: itemlist[j].name,
                children: []
            }
            console.log(node);
            itemtreenode.children.push(node)
            buildtree(node, itemlist)
        }
    }
    //console.log(mp)
    return mp;
}

build(data)

效果如下

首先我要为程序员说句话，程序员们，每天想尽办法学习更多的技术，特别是前端，这也要学那也要学，好不容易都学会了，却没有把自己学到的东西发挥最大的价值，名企进不去，小企业又不需要那么多技术。怎么办呢，难道荒废自己的一身本领吗？错，我们要多想办法去发挥自己的优点，如果你不能通过自己的技术给自己带来便利或利益，那么你学再多会再多技术都是没用的。

所以呢，我这里把这个开源项目发表出来（用的苹果cms搭建的），让更有技术的兄弟能利用好自己的技术。不敢保证可以赚多少钱，但是你完全可以搭建起来放自己服务器上给自己使用或周围家人朋友使用，这也是价值的一种体现。

涉及版权请联系我 微信（17771806167）

团结就是力量。
有兴趣的朋友可以加我微信资讯呀。
有推广能力的朋友也可以加我微信资讯我哦！
wordpress项目等更多项目也可以加微信沟通哦！

一、项目初始构建

现在如果要构建一个 Vue 的项目，最方便的方式，莫过于使用官方的 vue-cli 。

首先，咱们先来全局安装 vue-cli ，打开命令行工具，输入以下命令：

$ npm install -g vue-cli

然后，利用 vue-cli 构建一个 Vue 项目：

$ vue init <template-name> <project-name>

# 例如：
$ vue init webpack my-project

这行代码其实就是从 Github 的 Vue 官方项目模板库—— vuejs-templates 组织拉取代码，并设置该项目的名称。该命令是帮助大家通过选择应用比较广泛的几种官方项目模板库中的一种和可配置的几个步骤快速构建我们的应用。然而，这些模板并不限制你自己对于使用 Vue.js 的架构组织和选择类库。

注意：这里的第三个参数代表的是几种官方项目模板库中的一种，今天只粗略的介绍其中的四种：

• browserify——全功能的 Browserify + vueify ，包括热加载，静态检测，单元测试等；
• browserify-simple——一个简易的 Browserify + vueify ，以便于快速开始；
• webpack——全功能的 Webpack + vueify ，包括热加载，静态检测，单元测试等；
• webpack-simple——一个简易的 Webpack + vueify ，以便于快速开始。

不同的模板有不同的用处： 简易的可以更快速的开发，全功能适合有野心的（大型、扩展性很高的–个人认为）应用。他们的共同点就是，都支持 .vue 文件类型的组件方式。意味着任何只要符合 .vue 形式的第三方的组件都可以被使用，只需要发布在 npm 上。

基于官方项目模板构建自己特殊的应用？

作为自由开发者，你如果不喜欢上面的模板，你可以 fork 这些模板，修改它们以符合你自己特殊要求（甚至还可以创建一个你自己的模板），通过 vue-cli 命令使用。

$ vue init username/repo my-project

安装依赖

进入刚创建的工程文件夹，安装依赖：

# 安装依赖
$ cd <project-name>
$ npm install

到这里，一个 Vue 工程就初步构建完成了。

二、项目文件夹及文件简介

先简单介绍几个第一层的文件夹：

• build 中是官方项目模板的基本配置文件，在例子中是 webpack ：开发环境配置文件，生产环节配置文件等；
• node_modules 是各种依赖模块；
• src 中是 vue 组件及入口文件；
• static 中放置静态资源文件；
• index.html 是页面入口文件。

App.vue 文件

先来看看 src 下的 App.vue 文件中的这个代码段：

<template>
    <div id="#app">
        <img src="./assets/logo.png">
        <router-view></router-view>
    </div>
</template>

这个代码段中的 <router-view> 组件是 vue-router 中渲染路径匹配到的视图组件。牵扯到路径，也就是路由，又由于是 Vue 单页面工程，所以自然少不了 vue-router 。那咱们自然要用以下命令来先安装 vue-router ：

$ npm install --save vue-router

main.js 文件

安装好 vue-router 后，那到哪里配置具体的路由呢？答案是 src 文件夹下面的 main.js 文件中，可以这么配置路由：

import Vue from 'vue';
import App from './App';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

// 定义路由组件
const Worldcloud = require('./components/cloud.vue');
const Building = require('./components/building.vue');

// 定义路由，配置路由映射
const routes = [
  { path: '/', redirect: '/wordcloud' },
  { path: '/wordcloud', component: Worldcloud },
  { path: '/building', component: Building }
];

// 创建router实例
const router = new VueRouter({
    routes
});

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  router
})

从路由映射的配置中可以看出，访问网站的根路由会直接跳转到 /wordcloud 组件页面下。

三、组件与其他插件

ok，到这步就可以开始写页面组件了，到 src 文件夹下的 components 文件夹下面，去定义自己的组件吧~

其他插件

如果想使用数据可视化库—— echarts ，可以输入以下命令来安装：

$ npm install --save echarts

如果想实现状态管理的功能，比如：登录功能。就需要安装 vuex ，可以输入以下命令来安装：

$ npm install --save vuex

如果想使用 ES6 中新的 API ，而不仅仅是利用 Babel 转译新的 JavaScript 句法，那就需要安装 babel-polyfill 为当前环境提供一个垫片，否则会报错。有哪些属于 ES6 中新的 API 呢？比如：Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法。可以输入以下命令来安装 babel-polyfill ：

$ npm install --save babel-polyfill

四、项目预览与发布

在命令行中输入

$ npm run dev

就可以预览你也写的页面了。事实上，我们一般都是先输入以上命令开启实时预览，然后再开始开发的，即它可以监听我们开发中的改动。

项目可以在本地预览了，但是要怎么发布到网上呢？首先，在命令行中输入

$ npm run build

会生成一个 dist 文件夹.该文件夹中就是我们可以用来发布的代码，直接将代码上传到你的服务器上就可以了。

五、参考文章

这篇文章的撰写主要是参考了这两篇文章：

• 基于vue、vuex、vue-router、echarts搭建的数据展示平台；
• Vuejs自己的构建工具。