【功能实现】菜单树检索

背景介绍

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

本题需要在已提供的基础项目中使用 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. Spring与Web项目整合的原理

    引言: 在刚开始我们接触IOC时,我们加载并启用SpringIOC是通过如下代码手动加载 applicationContext.xml 文件,new出context对象,完成Bean的创建和属性的注入 ...

  2. java后端使用token处理表单重复提交

    保证接口幂等性,表单重复提交 前台解决方案:提交后按钮禁用.置灰.页面出现遮罩后台解决方案:   使用token,每个token只能使用一次1.在调用接口之前生成对应的Token,存放至redis 2 ...

  3. Java入门之基础程序设计

    1.Java语言特点了解 1. java语言:   有些语言提供了可移植性.垃圾收集等机制,但是没有提供一个大型的库.如果想要有酷炫的绘图功能.网络连接功能或者数据库存取功能,就必须动手编写代码.Ja ...

  4. 树莓派安装ros

    之前电脑安装过ros感觉还好,没成想这次在树莓派上安装费老劲了,出现了很多错误,装了卸,卸了装废了半天劲下面将一些安装的错误和问题做个总结方便以后的安装也希望给别人一个参考 ros安装(对照自己的版本 ...

  5. Pandas查询数据的几种方法

    Pandas查询数据 Pandas查询数据的几种方法 df.loc方法,根据行.列的标签值查询 df.iloc方法,根据行.列的数字位置查询 df.where方法 df.query方法 .loc既能查 ...

  6. 一个未知宽高的元素在div中垂直水平居中

    <body> <div id="#div1"> <img src="img1.png"></img> </ ...

  7. 五款轻量型bug管理工具横向测评

    五款轻量型bug管理工具横向测评 最近正在使用的本地bug管理软件又出问题了,已经记不清这是第几次了,每次出现问题都要耗费大量的时间精力去网上寻找解决方案,劳心劳力.为了避免再次出现这样的情况,我决定 ...

  8. 大数据学习之路又之从小白到用sqoop导出数据

    写这篇文章的目的是总结自己学习大数据的经验,以为自己走了很多弯路,从迷茫到清晰,真的花费了很多时间,希望这篇文章能帮助到后面学习的人. 一.配置思路 安装linux虚拟机--->创建三台虚拟机- ...

  9. PAT B1061判断题

    题目描述: 判断题的评判很简单,本题就要求你写个简单的程序帮助老师判题并统计学生们判断题的得分. 输入格式: 输入在第一行给出两个不超过 100 的正整数 N 和 M,分别是学生人数和判断题数量.第二 ...

  10. MFC---视图和窗口

    视类窗口 视类窗口是指程序运行后,显示信息的那一部分.对应的类是CTestOneView(TestOne表示项目名称)类,CTestOneView类是派生于CView类,而CView类又派生于CWnd ...