v-md-editor自定义锚点(生成目录)数组转树结构
接前两篇博文,最终方案终于定了,也把之前做的编辑器模式给否决了,原因是系统中有老的文档需要平替,因此就不能通过编辑器这种模式了,太麻烦了。
最终方案:线下手动pandoc word转markdown,然后将文档保存到前端(图片也在对应路径下)页面上菜单绑定文档,文档中自动生成目录;
issue
v-md-editor群里大佬提供了生成自定义锚点(目录)的方式,但是是数组平铺的,根据级别然后展示的时候通过距离形成视觉上的菜单,但是需求模型上是菜单可点击收缩打开方式的,因此,需要调整该数组为树结构,因为本人纯后端,在朋友帮助下,将数组转为了树
解决方法
//0 1 2 3 代表菜单级别
const target = {"titles": [{"title:": "导读","lineIndex": "1","indent": 0},{"title:":"功能范围","lineIndex":"1","indent":1},{"title:":"寻求帮助","lineIndex":"1","indent":1},{"title:":"业务功能介绍","lineIndex":"1","indent":0},{"title:":"1.二级标题","lineIndex":"1","indent":1},{"title:":"1.1 三级标题","lineIndex":"1","indent":2},{"title:":"1.1.1四级","lineIndex":"1","indent":3},{"title:":"1.2 san级","lineIndex":"1","indent":2},{"title:":"2.四3级","lineIndex":"1","indent":1},{"title:":"2.1四2级","lineIndex":"1","indent":2}]
}function getTree(titles) {const res = []let treeNodeList = []let last = nullfunction getParentNode(index) {let currentIndex = index - 1while (!treeNodeList[currentIndex]) {currentIndex--}return treeNodeList[currentIndex]}for (let i = 0, l = titles.length; i < l; i++) {const item = titles[i]if (item.indent == 0) {res.push(item)treeNodeList = []} else {// 父节点const currentParent = getParentNode(item.indent)if (currentParent.children) {currentParent.children.push(item)} else {currentParent.children = [item]}if (last.indent > item.indent) {treeNodeList = treeNodeList.splice(0, item.indent)}}// 把自己放到节点队列中treeNodeList[Number(item.indent)] = itemlast = item}return res
}console.log(JSON.stringify(getTree(target.titles)))
最终得到的转换后的结构
ps: 用后端逻辑开发前端真的是不好转换,总想着先去定义对象,结果根本没那么需要,强弱类型的开发方式真的太不同了。
相关文章:
v-md-editor自定义锚点(生成目录)数组转树结构
接前两篇博文,最终方案终于定了,也把之前做的编辑器模式给否决了,原因是系统中有老的文档需要平替,因此就不能通过编辑器这种模式了,太麻烦了。 最终方案:线下手动pandoc word转markdown,然后将…...
java 11 新特效解读(2)
目录 全新的HTTP 客户端API 更简化的编译运行程序 废弃Nashorn引擎 ZGC 优势: ZGC的设计目标是: 在当前JDK中看不到什么? 一个标准化和轻量级的JSON API 新的货币API 展望 全新的HTTP 客户端API HTTP,用于传输网页的…...
linux patch 和 git patch
一、Linux patch 文件生成和应用 生成方式1:patch #多文件打 patch diff -uparN file1 file2 > xx.diff diff -uparN folder1 folder12 > xx.diff ------------------------------------------------------- diff --help -u 显示有差异行的前后几行(上下文)…...
【vue Dplayer】播放hls视频流
准备工作 安装Dplayer和hls.js npm install dplayer --save npm install hls.js --save准备测试流 hls测试地址:(截止2023.08.08有效) http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8 <template><d…...
给不蒜子(busuanzi)统计数据增加初始值
背景 最近把个人博客迁移到了Hexo框架,并使用了Butterfly主题,得益于博客框架的易用性和主题功能的丰富程度,感觉非常的香。我对比了很多Hexo主题,这一个算是在功能、审美、文档等各方面几乎完美符合我需求的。 Butterfly很贴心…...
WebStorm
WebStorm 介绍下载安装Activation 介绍 WebStorm是由JetBrains公司开发的一款集成开发环境(IDE),主要专注于前端开发和Web开发。它旨在提供一套强大的工具和功能,以支持开发者在前端项目中编写、调试和维护代码。 JetBrains官网: …...
代码随想录算法训练营day59
文章目录 Day59 下一个更大元素II题目思路代码 接雨水题目思路代码 Day59 下一个更大元素II 503. 下一个更大元素 II - 力扣(LeetCode) 题目 给定一个循环数组(最后一个元素的下一个元素是数组的第一个元素),输出每…...
大模型训练时间估算
文章目录 开激活重计算不开激活重计算开激活重计算 GPU利用率一般在 0.3 - 0.55 之间,假定为0.45 4090 理论性能:FP16:82.58 TFLOPS 不开激活重计算 我们来说一下系数8或6是怎么来的: 对于每个模型参数,都进行2次浮点数计算,即计算Y = AB 时,先将元素按位相乘,再按位相…...
函数的模拟实现
题一: 模拟实现strncpy #include <stdio.h>void my_strncpy(char* arr2, char* arr1, size_t num){int i 0;for (i 0; i < num; i){*(arr2 i) *(arr1 i);}}int main(){char arr1[] "hello liangzai";char arr2[10] { 0 };//strncpy(ar…...
CSDN博客批量查询质量分https://yma16.inscode.cc/请求超时问题(设置postman超时时间)(接口提供者设置了nginx超时时间)
文章目录 查询链接问题请求超时原因解决谷歌浏览器超时问题办法(失败了)谷歌浏览器不支持设置请求超时时间(谷歌浏览器到底有没限制请求超时?貌似没有限制?)看能否脱离浏览器请求,我们查看关键代…...
什么是 CSRF 攻击?
概念 CSRF 攻击指的是跨站请求伪造攻击,攻击者诱导用户进入一个第三方网站,然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录状态,那么攻击者就可以利用这个登录状态,绕过后台的用户验证,冒充用…...
[内网渗透]CFS三层靶机渗透
文章目录 [内网渗透]CFS三层靶机渗透网络拓扑图靶机搭建Target10x01.nmap主机探活0x02.端口扫描0x03.ThinkPHP5 RCE漏洞拿shell0x04.上传msf后门(reverse_tcp)反向连接拿主机权限 内网渗透Target2(1)路由信息探测(2)msf代理配置&a…...
一百五十一、Kettle——Linux上安装的kettle8.2开启carte服务以及配置子服务器
一、目的 kettle8.2在Linux上安装好可以启动界面、并且可以连接MySQL、Hive、ClickHouse等数据库后,准备在Linux上启动kettle的carte服务 二、实施步骤 (一)carte服务文件路径 kettle的Linux运行的carte服务文件是carte.sh (二…...
2023高教社杯数学建模A题 B题C题 D题 E题思路代码分析
文章目录 0 赛题思路1 竞赛信息2 竞赛时间3 建模常见问题类型3.1 分类问题3.2 优化问题3.3 预测问题3.4 评价问题 4 建模资料 0 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 1 竞赛信息 全国大学生数学建模…...
从ChatGLM2-6B来看大模型扩展上下文和加速推理相关技术
ChatGLM2-6B 是开源中英双语对话模型 ChatGLM-6B 的第二代版本,在保留了初代模型对话流畅、部署门槛较低等众多优秀特性的基础之上,ChatGLM2-6B 引入了如下新特性: 更强大的性能:基于 ChatGLM 初代模型的开发经验,全面…...
Unity特效总览
一、粒子 Unity中的粒子组件叫做Particle System。 粒子系统顾名思义,与“微粒”有关。粒子系统会生成和发射很多粒子,通过控制粒子的生成数量、大小、角度、速度、贴图和颜色等众多属性,可以实现或真实或炫酷的各种效果。其中,…...
Unity中人物控制器
在Unity中控制器是很常见的功能,一般的人物控制器有两种方法,一种是通过代码实现,另外一种就是通过Unity中的API实现。 这里主要介绍第一种方法。 首先对控制器步骤进行分析。 步骤1:通过方向键控制人物移动。 步骤2ÿ…...
零钱兑换-输出组合数
1.暴力递归 (1)剩余金额小于0,无解 剩余金额等于0,有解 剩余金额大于0,继续递归 (2)从大的硬币到小的硬币,可以减少循环次数 #include <bits/stdc.h> using namespace std;…...
Mybatis 小结
一、Mybatis 基本构成 MyBatis的整体分为基础支持层、核心处理层、接口。 1.1、基础支持层 1.1.1、数据源模块 MyBatis自身提供了相应的数据源实现,也提供了与第三方接口数据源集成的接口,这些功能都位于数据源模块之中。 1.1.2、事务管理模块 …...
【Cartopy】库的安装和瓦片加载(天地图、高德等)
原文作者:我辈李想 版权声明:文章原创,转载时请务必加上原文超链接、作者信息和本声明。 Cartopy基础入门 【Cartopy】库的安装和天地图瓦片加载 【Cartopy】【Cartopy】如何更好的确定边界显示 【Cartopy】【Cartopy】如何丝滑的加载Geojso…...
springboot 百货中心供应链管理系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,百货中心供应链管理系统被用户普遍使用,为方…...
从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会,其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具,对过去十年 WWDC 主题演讲内容进行了系统化分析,形成了这份…...
【位运算】消失的两个数字(hard)
消失的两个数字(hard) 题⽬描述:解法(位运算):Java 算法代码:更简便代码 题⽬链接:⾯试题 17.19. 消失的两个数字 题⽬描述: 给定⼀个数组,包含从 1 到 N 所有…...
【单片机期末】单片机系统设计
主要内容:系统状态机,系统时基,系统需求分析,系统构建,系统状态流图 一、题目要求 二、绘制系统状态流图 题目:根据上述描述绘制系统状态流图,注明状态转移条件及方向。 三、利用定时器产生时…...
06 Deep learning神经网络编程基础 激活函数 --吴恩达
深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...
虚拟电厂发展三大趋势:市场化、技术主导、车网互联
市场化:从政策驱动到多元盈利 政策全面赋能 2025年4月,国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》,首次明确虚拟电厂为“独立市场主体”,提出硬性目标:2027年全国调节能力≥2000万千瓦࿰…...
LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用
中达瑞和自2005年成立以来,一直在光谱成像领域深度钻研和发展,始终致力于研发高性能、高可靠性的光谱成像相机,为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...
从物理机到云原生:全面解析计算虚拟化技术的演进与应用
前言:我的虚拟化技术探索之旅 我最早接触"虚拟机"的概念是从Java开始的——JVM(Java Virtual Machine)让"一次编写,到处运行"成为可能。这个软件层面的虚拟化让我着迷,但直到后来接触VMware和Doc…...
基于stm32F10x 系列微控制器的智能电子琴(附完整项目源码、详细接线及讲解视频)
注:文章末尾网盘链接中自取成品使用演示视频、项目源码、项目文档 所用硬件:STM32F103C8T6、无源蜂鸣器、44矩阵键盘、flash存储模块、OLED显示屏、RGB三色灯、面包板、杜邦线、usb转ttl串口 stm32f103c8t6 面包板 …...
SQL注入篇-sqlmap的配置和使用
在之前的皮卡丘靶场第五期SQL注入的内容中我们谈到了sqlmap,但是由于很多朋友看不了解命令行格式,所以是纯手动获取数据库信息的 接下来我们就用sqlmap来进行皮卡丘靶场的sql注入学习,链接:https://wwhc.lanzoue.com/ifJY32ybh6vc…...
