【功能实现】菜单树检索

背景介绍

实际工作中很多前端攻城狮都会遇到这样一个需求：在多级菜单树中模糊搜索匹配的菜单项，并显示出来。

本题需要在已提供的基础项目中使用 Vue.js 知识，实现对已提供的二级菜单树的动态渲染及模糊搜索功能，最终将符合搜索要求的二级菜单树显示在页面中。

步骤准备

在开始答题前，你需要在线上环境终端中键入以下命令，下载并解压所提供的文件。

wget https://labfile.oss.aliyuncs.com/courses/7835/exam11-imi.zip && unzip exam11-imi.zip && rm exam11-imi.zip

copy

下载完成之后的目录结构如下：

├── data.json # 二级菜单总数据

├── index.html # 页面布局

└── js

    ├── axios.min.js # 用于异步获取数据的 Ajax 封装库

    ├── index.js # 页面功能实现的逻辑代码

    └── vue.js # 版本为 2.x 的 Vue.js 框架

源码下载后，选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。

接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：

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

考试要求

请在 index.js 和 index.html 文件中根据现有 DOM 结构（基础项目提供的 DOM 结构和 id、选择器等不要做修改）实现二级菜单数据异步获取（使用 axios）和搜索功能（使用 Vue 2.x 语法）。

具体需求如下：

页面加载后输入框内容为空，页面显示异步获取二级菜单的所有数据；输入待查找的字段后，页面中显示包含该字段的所有菜单数据，并将包含该搜索内容的菜单数据标记为黄色背景，具体表现如下：

若该菜单有父级菜单，则返回其父级菜单及同胞菜单。

若该菜单有子级菜单，则返回该菜单及其下子级菜单。

若该菜单既无父级也无子级，则返回菜单本身即可。

推荐测试字段：查询、首页、管理、配置、维护。

最终实现效果如下：

要求规定

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。

满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。

总通过次数: 105 | 总提交次数: 125 | 通过率: 84%

难度: 简单 标签: Web 前端

题解

二层循环遍历菜单项，将匹配到字段的菜单项添加到数组中即可。注意每次input值发生改变时，需要遍历的数据要重新获取。

index.html

<!DOCTYPE html>

<html lang="zh">

	<head>

		<meta charset="UTF-8">

		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<meta http-equiv="X-UA-Compatible" content="ie=edge">

		<title>test</title>

		<script src="./js/vue.js"></script>

		<script src="./js/axios.min.js"></script>

		<style>

			input{

				width: 200px;

				height: 32px;

				padding-left:5px;

			}

		</style>

	</head>

	<body>

    <!-- 需求：输入待查找的字段，输出包含该字段的所有菜单数据。

    1、若该菜单有父级菜单，则返回其父级菜单及同胞菜单。

    2、若该菜单有子级菜单，则返回该菜单及其下子级菜单。

    3、若该菜单既无父级也无子级，则返回菜单本身即可。

    测试字段：查询、首页、管理、配置、维护 -->

		<div id="app">

			<input type="text" placeholder="请输入要搜索的菜单内容"/>

			<ul>

				<li v-for="item in list" :key="item">

					<!-- 三目判断是否有背景色标记 --->

					<span :style="item.meta.bgc? 'background-color:yellow' : ''">{{ item.meta.title }}</span>

					<ul>

						<li v-for="item2 in item.children">

							<span :style="item2.meta.bgc? 'background-color:yellow' : ''">{{ item2.meta.title }}</span>

						</li>

					</ul>

				</li>

			</ul>

		</div>

	</body>

  <script type="text/javascript" src="./js/index.js"></script>

</html>

index.js

const app = new Vue({

  el:"#app",

  // 在此处补全代码，实现二级菜单搜索功能

  data: {

    list: [],

    temp: [],

    value: ""

  },

  mounted() {

    this.initData()

  },

  methods: {

    // 获取数据

    initData() {

      axios.get("./data.json").then((res) => {

        this.list = res.data

        this.temp = res.data

      })

    }

  },

  watch: {

    value() {

      let t = this.temp	// temp 为所有 menu数据，每次改变都根据它进行比对

      if(this.value === "") {	// 当搜素框中值为空时，需要展示全部数据

        this.list = this.temp

      }

      let arr = []	// arr 存放筛选后的数据

        t.forEach(item => {	// 第一层遍历寻找

          let flag = false	// flag为加入标记，防止父标题与子标题都存在字段，进行重复的插入

          if (item.meta.title.includes(this.value)) {	// 寻找过程。。。

            flag = true

            arr.push(item)

            item.meta.bgc = true	// 添加背景色标记

          }

          if (item.children) {	// 如果存在子项，则进入二层遍历

            item.children.forEach(item2 => {

              if (item2.meta.title.includes(this.value)) {	//寻找过程。。。

                item2.meta.bgc = true

                if (!flag) {	// 未被标记，则加入

                  flag = true

                  arr.push(item)

                }

              }

            })

          }

        }

      )

      this.list = arr	// 将筛选后的数据赋值到 list中进行展示

    }

  }

});

蓝桥杯Web：【功能实现】菜单树检索的更多相关文章

  1. Java实现 蓝桥杯VIP 基础练习 Huffuman树

    基础练习 Huffuman树 问题描述 Huffman树在编码中有着广泛的应用.在这里,我们只关心Huffman树的构造过程. 给出一列数{pi}={p0, p1, -, pn-1},用这列数构造Hu ...

  2. 问题 1462: [蓝桥杯][基础练习VIP]Huffuman树

    题目描述 Huffman树在编码中有着广泛的应用.在这里,我们只关心Huffman树的构造过程. 给出一列数{pi}={p0,  p1,  …,  pn-1},用这列数构造Huffman树的过程如下: ...

  3. ALGO-27_蓝桥杯_算法训练_FBI树(树，递归)

    问题描述 我们可以把由“”和“”组成的字符串分为三类:全“”串称为B串,全“”串称为I串,既含“”又含“”的串则称为F串. FBI树是一种二叉树,它的结点类型也包括F结点,B结点和I结点三种.由一个长 ...

  4. 蓝桥杯 大臣的旅费_树的最长度_两次DFS

    #include <iostream> #include <cstdio> #include <cstdlib> #include <algorithm> ...

  5. 【算法】蓝桥杯 试题 基础练习 Huffuman树

    资源限制 时间限制:1.0s   内存限制:512.0MB 问题描述 Huffman树在编码中有着广泛的应用.在这里,我们只关心Huffman树的构造过程. 给出一列数{pi}={p0, p1, …, ...

  6. [蓝桥杯2015初赛]生命之树（树状dp）

    在X森林里,上帝创建了生命之树.他给每棵树的每个节点(叶子也称为一个节点)上,都标了一个整数,代表这个点的和谐值.上帝要在这棵树内选出一个非空节点集S,使得对于S中的任意两个点a,b,都存在一个点列 ...

  7. Java实现 蓝桥杯VIP 算法训练 FBI树

    问题描述 我们可以把由"0"和"1"组成的字符串分为三类:全"0"串称为B串,全"1"串称为I串,既含"0&q ...

  8. 蓝桥杯Web练习题：多个斜线开始的路径重定向问题

    多个斜线开始的路径重定向问题 需求说明 在 vue-router v3.5.2 版本代码中存在一个 Bug,一个以多个斜线(///)开始的路径实际上可能会重定向到另一个域.这是因为 cleanPath ...

  9. 第六届蓝桥杯软件类省赛题解C++/Java

    第六届蓝桥杯软件类省赛题解C++/Java 1[C++].统计不含4的数字统计10000至99999中,不包含4的数值个数.答:暴力循环范围内所有数字判断一下就是了,答案是52488 1[Java]. ...

随机推荐

  1. 在虚拟机里面安装wordpress

    第一步: 安装Mariadb数据库 使用下面代码安装 1 yum install mariadb-server.x86_64 设置开机启动和启动 1 systemctl start mariadb 2 ...

  2. 说出 5 条 IO 的最佳实践?

    IO 对 Java 应用的性能非常重要.理想情况下,你不应该在你应用的关键路径上 避免 IO 操作.下面是一些你应该遵循的 Java IO 最佳实践: a)使用有缓冲区的 IO 类,而不要单独读取字节 ...

  3. NetCore微服务实现事务一致性masstransit之saga使用

    demo如下,一个订单处理的小例子: 首先看看结果很简单: 核心代码如下: using MassTransit; using Microsoft.Extensions.DependencyInject ...

  4. 『现学现忘』Docker基础 — 37、ONBUILD指令介绍

    目录 1.ONBUILD指令说明 2.演示ONBUILD指令的使用 3.补充:crul命令解释 1.ONBUILD指令说明 ONBUILD是一个特殊的指令,它后面跟的是其它指令,比如 RUN, COP ...

  5. 定常系统（时不变系统）和时变系统&& 动态系统和静态系统

    根据系统是否含有参数随时间变化的元件,自动控制系统可分为时变系统与定常系统两大类. 定常系统又称为时不变系统,其特点是:系统的自身性质(所研究物体的本质属性例如:质量.转动惯量等)不随时间而变化.具体 ...

  6. 微信小程序要求HTTPS，如何选择SSL证书？

    为了保护小程序应用安全,微信官方的需求文档要求,每个微信小程序必须事先设置一个通讯域名,并通过HTTPS请求进行网络通信,不满足条件的域名和协议无法请求.因此开发者应先准备好配置好HTTPS证书的域名 ...

  7. 走在 SVG + Low Poly 的路上

    随着 SVG 的发展,艺术家和设计师们把越来越多传统设计行业的东西引入了前端, low poly 就是其中之一.那 low poly 强大在哪呢,大家通过下面的图来感受一下. 恰巧我们产品 Logo ...

  8. 如何用vue打造一个移动端音乐播放器

    写在前面 没错,这就是慕课网上的那个vue音乐播放器,后台是某音乐播放器的线上接口扒取,虽然这类项目写的人很多,但不得不说这还是个少有的适合vue提升的好项目,做这个项目除了想写一个比较大并且功能复杂 ...

  9. python---复杂度、斐波那切数列、汉诺塔

    时间复杂度 ​ 用来估计算法运行时间的一个式子. ​ 一般来说, 时间复杂度高的算法比复杂度低的算法慢. 常见的时间复杂度: ​ O(1) < O(logn) < O(n) < O( ...

  10. 集成JUnit测试

    集成JUnit测试 既然使用了Spring,那么怎么集成到JUnit中进行测试呢,首先大家能够想到的肯定是: public class TestMain { @Test public void tes ...