当前位置: 首页 > news >正文

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)))

最终得到的转换后的结构result
ps: 用后端逻辑开发前端真的是不好转换,总想着先去定义对象,结果根本没那么需要,强弱类型的开发方式真的太不同了。

相关文章:

v-md-editor自定义锚点(生成目录)数组转树结构

接前两篇博文&#xff0c;最终方案终于定了&#xff0c;也把之前做的编辑器模式给否决了&#xff0c;原因是系统中有老的文档需要平替&#xff0c;因此就不能通过编辑器这种模式了&#xff0c;太麻烦了。 最终方案&#xff1a;线下手动pandoc word转markdown&#xff0c;然后将…...

java 11 新特效解读(2)

目录 全新的HTTP 客户端API 更简化的编译运行程序 废弃Nashorn引擎 ZGC 优势&#xff1a; ZGC的设计目标是&#xff1a; 在当前JDK中看不到什么&#xff1f; 一个标准化和轻量级的JSON API 新的货币API 展望 全新的HTTP 客户端API HTTP&#xff0c;用于传输网页的…...

linux patch 和 git patch

一、Linux patch 文件生成和应用 生成方式1&#xff1a;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测试地址&#xff1a;&#xff08;截止2023.08.08有效&#xff09; http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8 <template><d…...

给不蒜子(busuanzi)统计数据增加初始值

背景 最近把个人博客迁移到了Hexo框架&#xff0c;并使用了Butterfly主题&#xff0c;得益于博客框架的易用性和主题功能的丰富程度&#xff0c;感觉非常的香。我对比了很多Hexo主题&#xff0c;这一个算是在功能、审美、文档等各方面几乎完美符合我需求的。 Butterfly很贴心…...

WebStorm

WebStorm 介绍下载安装Activation 介绍 WebStorm是由JetBrains公司开发的一款集成开发环境&#xff08;IDE&#xff09;&#xff0c;主要专注于前端开发和Web开发。它旨在提供一套强大的工具和功能&#xff0c;以支持开发者在前端项目中编写、调试和维护代码。 JetBrains官网: …...

代码随想录算法训练营day59

文章目录 Day59 下一个更大元素II题目思路代码 接雨水题目思路代码 Day59 下一个更大元素II 503. 下一个更大元素 II - 力扣&#xff08;LeetCode&#xff09; 题目 给定一个循环数组&#xff08;最后一个元素的下一个元素是数组的第一个元素&#xff09;&#xff0c;输出每…...

大模型训练时间估算

文章目录 开激活重计算不开激活重计算开激活重计算 GPU利用率一般在 0.3 - 0.55 之间,假定为0.45 4090 理论性能:FP16:82.58 TFLOPS 不开激活重计算 我们来说一下系数8或6是怎么来的: 对于每个模型参数,都进行2次浮点数计算,即计算Y = AB 时,先将元素按位相乘,再按位相…...

函数的模拟实现

题一&#xff1a; 模拟实现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超时时间)

文章目录 查询链接问题请求超时原因解决谷歌浏览器超时问题办法&#xff08;失败了&#xff09;谷歌浏览器不支持设置请求超时时间&#xff08;谷歌浏览器到底有没限制请求超时&#xff1f;貌似没有限制&#xff1f;&#xff09;看能否脱离浏览器请求&#xff0c;我们查看关键代…...

什么是 CSRF 攻击?

概念 CSRF 攻击指的是跨站请求伪造攻击&#xff0c;攻击者诱导用户进入一个第三方网站&#xff0c;然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录状态&#xff0c;那么攻击者就可以利用这个登录状态&#xff0c;绕过后台的用户验证&#xff0c;冒充用…...

[内网渗透]CFS三层靶机渗透

文章目录 [内网渗透]CFS三层靶机渗透网络拓扑图靶机搭建Target10x01.nmap主机探活0x02.端口扫描0x03.ThinkPHP5 RCE漏洞拿shell0x04.上传msf后门(reverse_tcp)反向连接拿主机权限 内网渗透Target2&#xff08;1&#xff09;路由信息探测&#xff08;2&#xff09;msf代理配置&a…...

一百五十一、Kettle——Linux上安装的kettle8.2开启carte服务以及配置子服务器

一、目的 kettle8.2在Linux上安装好可以启动界面、并且可以连接MySQL、Hive、ClickHouse等数据库后&#xff0c;准备在Linux上启动kettle的carte服务 二、实施步骤 &#xff08;一&#xff09;carte服务文件路径 kettle的Linux运行的carte服务文件是carte.sh &#xff08;二…...

2023高教社杯数学建模A题 B题C题 D题 E题思路代码分析

文章目录 0 赛题思路1 竞赛信息2 竞赛时间3 建模常见问题类型3.1 分类问题3.2 优化问题3.3 预测问题3.4 评价问题 4 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 竞赛信息 全国大学生数学建模…...

从ChatGLM2-6B来看大模型扩展上下文和加速推理相关技术

ChatGLM2-6B 是开源中英双语对话模型 ChatGLM-6B 的第二代版本&#xff0c;在保留了初代模型对话流畅、部署门槛较低等众多优秀特性的基础之上&#xff0c;ChatGLM2-6B 引入了如下新特性&#xff1a; 更强大的性能&#xff1a;基于 ChatGLM 初代模型的开发经验&#xff0c;全面…...

Unity特效总览

一、粒子 Unity中的粒子组件叫做Particle System。 粒子系统顾名思义&#xff0c;与“微粒”有关。粒子系统会生成和发射很多粒子&#xff0c;通过控制粒子的生成数量、大小、角度、速度、贴图和颜色等众多属性&#xff0c;可以实现或真实或炫酷的各种效果。其中&#xff0c;…...

Unity中人物控制器

在Unity中控制器是很常见的功能&#xff0c;一般的人物控制器有两种方法&#xff0c;一种是通过代码实现&#xff0c;另外一种就是通过Unity中的API实现。   这里主要介绍第一种方法。 首先对控制器步骤进行分析。 步骤1&#xff1a;通过方向键控制人物移动。 步骤2&#xff…...

零钱兑换-输出组合数

1.暴力递归 &#xff08;1&#xff09;剩余金额小于0&#xff0c;无解 剩余金额等于0&#xff0c;有解 剩余金额大于0&#xff0c;继续递归 &#xff08;2&#xff09;从大的硬币到小的硬币&#xff0c;可以减少循环次数 #include <bits/stdc.h> using namespace std;…...

Mybatis 小结

一、Mybatis 基本构成 MyBatis的整体分为基础支持层、核心处理层、接口。 1.1、基础支持层 1.1.1、数据源模块 MyBatis自身提供了相应的数据源实现&#xff0c;也提供了与第三方接口数据源集成的接口&#xff0c;这些功能都位于数据源模块之中。 1.1.2、事务管理模块 …...

【Cartopy】库的安装和瓦片加载(天地图、高德等)

原文作者&#xff1a;我辈李想 版权声明&#xff1a;文章原创&#xff0c;转载时请务必加上原文超链接、作者信息和本声明。 Cartopy基础入门 【Cartopy】库的安装和天地图瓦片加载 【Cartopy】【Cartopy】如何更好的确定边界显示 【Cartopy】【Cartopy】如何丝滑的加载Geojso…...

从零搭建本地大模型Agent:Ollama + FastAPI 实战指南

引言 随着AI技术的爆发&#xff0c;云端大模型API的调用成本不断攀升&#xff0c;同时数据隐私问题也日益受到关注。越来越多的开发者开始将目光投向本地化部署方案。今天&#xff0c;我将手把手教你如何利用 Ollama FastAPI&#xff0c;在本地搭建一个具备Agent能力的AI助手…...

php-qrcode实战教程:如何为二维码添加Logo和背景图片

php-qrcode实战教程&#xff1a;如何为二维码添加Logo和背景图片 【免费下载链接】php-qrcode A PHP QR Code generator and reader with a user-friendly API. 项目地址: https://gitcode.com/gh_mirrors/ph/php-qrcode php-qrcode是一个功能强大的PHP二维码生成和读取…...

Real Anime Z图像质量评测:SSIM/NIQE指标下真实系风格量化优势

Real Anime Z图像质量评测&#xff1a;SSIM/NIQE指标下真实系风格量化优势 1. 工具介绍 Real Anime Z是一款基于阿里云通义Z-Image底座模型开发的高精度二次元图像生成工具。该工具通过Real Anime Z专属微调权重进行了深度优化&#xff0c;特别针对真实系二次元风格进行了专项…...

Arm AArch64寄存器体系与性能优化实战

1. Arm AArch64寄存器体系概览作为现代处理器架构的核心组成部分&#xff0c;寄存器在Armv8/v9架构中扮演着关键角色。AArch64作为Arm的64位执行状态&#xff0c;其寄存器设计体现了从传统嵌入式系统到云计算基础设施的全场景适应能力。与x86等CISC架构不同&#xff0c;Arm采用…...

HTML函数在系统更新后变卡是硬件老化吗_软硬兼容性排查【方法】

HTML函数变卡主因是渲染层兼容性断层&#xff0c;新版浏览器收紧布局触发规则、强化HTML解析严格性&#xff0c;并引发polyfill冲突&#xff0c;需排查强制同步布局、弃用API及第三方库适配问题。HTML函数变卡不是硬件老化&#xff0c;是渲染层兼容性断层系统更新后 innerHTML、…...

手把手教你改造RuoYi-Vue,让它同时连接MySQL和TDengine 3.0

企业级物联网监控系统改造实战&#xff1a;RuoYi-Vue整合TDengine 3.0全指南 当传统关系型数据库遇上物联网海量时序数据&#xff0c;技术架构该如何优雅进化&#xff1f;本文将带您深入一个真实的企业级改造案例——基于RuoYi-Vue框架的监控系统如何无缝接入TDengine时序数据库…...

给你的STM32F429项目加个“网口”:基于CubeMX的LAN8720以太网模块驱动与LWIP应用实战

STM32F429以太网实战&#xff1a;从CubeMX配置到LWIP应用开发 当你需要为工业传感器节点或智能设备添加远程监控能力时&#xff0c;以太网通信往往是可靠的选择。本文将手把手带你完成STM32F429与LAN8720的硬件协同设计&#xff0c;并通过CubeMX快速构建包含FreeRTOS和LWIP的工…...

GeoAI 的4大核心技术如何重塑行业应用

1. 图像分类&#xff1a;从像素到决策的智能之眼 我第一次接触GeoAI图像分类技术是在一个农业监测项目中。当时需要从无人机拍摄的农田图像中自动识别作物类型&#xff0c;传统方法需要人工标注每张图片&#xff0c;效率极低。而当我用上基于卷积神经网络&#xff08;CNN&#…...

PZEM-004T v3.0 功率监测仪:5分钟快速上手完整指南

PZEM-004T v3.0 功率监测仪&#xff1a;5分钟快速上手完整指南 【免费下载链接】PZEM-004T-v30 Arduino library for the Updated PZEM-004T v3.0 Power and Energy meter 项目地址: https://gitcode.com/gh_mirrors/pz/PZEM-004T-v30 PZEM-004T v3.0 是一个专为Arduino…...

基于STM32LXXX的无线收发芯片(Ci24R1)应用程序设计

一、简介: Ci24R1 是南京中科微推出的一款工作在 2.4GHz ISM 频段的 GFSK/FSK 无线收发芯片。它在设计上高度兼容 nRF24L01+ 的寄存器映射,常被视为低成本替代方案,同时增加了与 BLE4.2 的物理层兼容性 。 二、主要技术特性: ◼ 工作在2.4GHz ISM频段 ◼ 调制方式:GFSK…...