使用 Vue.js 构建动态菜单树搜索

介绍

在这个项目中，你将学习如何使用 Vue.js 构建一个动态菜单树搜索功能。该项目包括从 JSON 文件中获取二级菜单数据、实现模糊搜索功能，并在页面上显示过滤后的菜单树。

👀 预览

🎯 任务

在这个项目中，你将学习：

• 如何使用axios库从 JSON 文件中获取二级菜单数据
• 如何实现一个搜索功能，根据用户输入过滤菜单项
• 如何在页面上显示过滤后的菜单树，并突出显示匹配的文本

🏆 成果

完成这个项目后，你将能够：

• 使用 Vue.js 开发一个动态且交互式的用户界面
• 从 JSON 文件中获取数据并处理异步数据获取
• 实现一个模糊搜索功能，根据用户输入过滤数据
• 显示分层菜单树结构并突出显示匹配的文本

设置项目结构

在这一步中，你将设置项目文件和结构。请按照以下步骤完成此步骤：

打开项目文件夹。目录结构如下：

├── js
│    ├── axios.min.js ## 用于异步数据获取的 Ajax 封装库
│    ├── index.js ## 实现页面功能的逻辑代码
│    └── vue.js ## Vue.js 框架的 2.x 版本
├── data.json ## 二级菜单的全部数据
└── index.html ## 页面布局

点击 WebIDE 右下角的Go Live按钮来运行项目。

接下来，在 VM 顶部打开“Web 8080”并手动刷新，你将看到页面。

目前，仅显示静态布局，尚未实现二级菜单数据的异步获取与显示以及模糊搜索功能。

获取二级菜单数据

在这一步中，你将学习如何使用axios库从data.json文件中获取二级菜单数据。

1. 打开/js目录下的index.js文件。
2. 在created()生命周期钩子中，使用axios.get()方法从data.json文件中获取数据：

created() {
  axios.get("../data.json").then((res) => {
    this.list = res.data;
    this.resultList = res.data;
  });
},

这段代码会从data.json文件中获取数据，并将其存储在list和resultList数据属性中。

实现搜索功能

在这一步中，你将学习如何为二级菜单项实现搜索功能。

1. 在index.js文件中，向methods对象添加一个searchData()方法：

methods: {
  searchData() {
    // TODO: 实现搜索功能
    this.resultList = [];
    let set = new Set();
    this.list.forEach((item1) => {
      if (item1.meta.title.search(this.search)!== -1) {
        set.add(item1);
      }
      if (item1.children) {
        item1.children.forEach((item2) => {
          if (item2.meta.title.search(this.search)!== -1) {
            set.add(item1);
          }
        });
      }
    });
    this.resultList = set;
  }
}

2. 根据搜索输入更新resultList数据属性。searchData()方法将遍历list数据，并将任何匹配的项目添加到一个Set对象中。然后将Set对象赋给resultList数据属性。

此实现将显示与搜索查询匹配的二级菜单项，匹配的文本将以黄色背景突出显示。

通过这些更改，页面现在将根据搜索输入显示过滤后的菜单树，匹配的文本将被突出显示。

最终实现效果如下：

总结

恭喜你！你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。