demotang的博客

原创 activiti工作流单独引入vue2方法, 全网最全!!!!!

目前工作流前端使用的有两种主流画板，都是基于bpmn.js进行个性化封装，本人使用过flowable工作流，activiti工作流，本文主要介绍activiti工作流引入及使用。以上代码已经实现画板左侧跟内容区的引入，效果如下，这是我自己添加的，你们看到的只有第一个开始节点。仪表盘：显示流程实例、任务和其他业务指标的仪表盘，以便用户可以实时查看流程状态和任务进度。任务详细信息：查看和编辑任务的详细信息，如任务描述、分配人和截止日期等。历史数据：查看已完成的流程实例和任务的历史记录，以便进行分析和审计。

原创 【vue2/vue3安装国密加密库SM2/SM3】

优先选择学术论文、行业报告、官方文档等可靠来源，避免过时或未经验证的内容。将复杂信息拆分为多个模块，如背景说明、方法步骤、注意事项等。避免冗长段落，使用列表、表格或加粗关键点提升可读性。检查答案是否具备可操作性，如提供具体参数范围、工具推荐或常见错误案例。采用简洁、中立的叙述方式，避免冗余修饰词。通过上述方法，可在 Vue2/Vue3 项目中安全地集成国密算法，满足金融、政务等高安全场景需求。通过上述方法，可在 Vue2/Vue3 项目中安全地集成国密算法，满足金融、政务等高安全场景需求。

原创 【使用 Vue2 脚手架创建项目并实现主题切换功能涵盖Ant-Design-Vue2/Element-UI】

本文介绍了使用Vue2脚手架创建项目并实现主题切换功能的两种方案。方案一基于Ant Design Vue 2，通过配置主题样式文件和a-config-provider组件实现动态主题切换；方案二采用Element UI，利用element-theme工具生成主题文件并通过动态加载CSS实现切换。两种方案都支持深色/浅色主题切换，并提供了平滑的过渡效果。文章还建议在大型应用中使用Vuex管理主题状态，确保全局一致性。开发者可根据项目需求选择合适的UI库和实现方案。

原创 vue2/vue3前端创建脚手架并引入RBAC权限模型

本文介绍了基于Vue的RBAC权限管理系统实现方案。主要内容包括：1) 使用VueCLI创建项目并配置基础结构；2) 封装axios请求，实现请求/响应拦截；3) 通过Vuex管理角色和权限状态；4) 实现路由守卫和动态路由生成；5) 开发权限指令和按钮组件进行细粒度控制；6) 完整RBAC流程实现，包括登录认证、权限获取和访问控制。该方案覆盖了前端RBAC的核心功能，可根据项目需求灵活调整。

原创 【脚手架创建 Vue3 公共组件库】

本文介绍了如何创建兼容Vue2和Vue3的公共组件库。通过分包构建实现多版本支持，采用独立目录结构分别存放Vue2和Vue3组件，配置不同的构建工具(vite/rollup)进行打包。关键点包括：1)项目目录分离管理；2)peerDependencies声明Vue版本；3)差异化构建配置；4)独立发布npm包。最后提供了组件使用方法和注意事项，强调版本同步、按需加载等最佳实践。

原创 【Webpack 的核心应用场景】

Webpack 是一个模块打包工具，适用于单页应用、多页应用、静态资源处理等场景。核心功能包括通过 loader 转换非 JS 资源，使用插件优化开发和生产环境，支持微前端架构和 SSR。可通过编写自定义 loader 和 plugin 扩展功能，配合性能调优手段如缓存和多线程构建提升效率。Webpack 提供从基础到高级的完整解决方案，适合各类现代前端项目开发。

原创 【脚手架安装乾坤】

本文介绍了基于qiankun框架的Vue3微前端实现方案。主要内容包括：主应用初始化配置，通过registerMicroApps注册微应用；Vue3子应用改造，添加public-path.js和生命周期钩子；路由配置注意事项，需设置base路径；样式隔离处理方案；主子和应用间通信机制实现；生产环境部署要求及Nginx配置；常见问题如静态资源加载、路由跳转和样式冲突的解决方法。该方案实现了微应用的独立开发和部署，同时保证了应用间的通信与隔离。

原创 前端面试场景题（高频考点全解析）

前端面试高频考点摘要 前端面试重点考察技术深度与工程化思维，核心内容包括： JavaScript：事件循环、闭包、原型链、类型转换 CSS：盒模型、Flex/Grid布局、动画性能优化 框架：React/Vue生命周期、虚拟DOM、状态管理 浏览器：HTTP缓存、安全防护、页面渲染流程 手写代码：防抖/节流、Promise实现、常见算法 工程化：Webpack优化、代码重构、tree-shaking 综合能力：性能调试、Git协作、新技术应用 建议针对各模块核心原理和实际场景进行系统性准备，注重代码实现与优

原创 【基于 WangEditor v5 + Vue2 封装 CSDN 风格富文本组件】

本文介绍基于WangEditor v5和Vue2封装CSDN风格富文本组件的实现方法。通过创建独立Vue组件封装编辑器，定制符合CSDN风格的UI界面和功能，包括精简工具栏配置、代码高亮支持、图片上传处理等核心功能。重点讲解了编辑器初始化、配置项设计、图片上传对接、代码块高亮实现等关键技术点，并提供双向数据绑定、内容变化监听等实用功能。组件采用模块化设计，可通过props传递配置参数，便于在不同项目中复用。文章还包含性能优化建议和常见问题解决方案，帮助开发者快速实现类CSDN的富文本编辑体验。

原创 【前端入门】3分钟搞定通用映射工具：ID转名称再也不用重复写代码】

本文介绍了一个前端通用映射工具的封装方法，解决ID转名称的重复编码问题。工具提供两个核心函数：createMap处理本地数组转映射表，fetchMap处理接口数据转映射表。文章详细演示了两种常见使用场景（接口数据映射和本地数组映射），并给出具体代码示例。工具特点包括：空数组保护、默认值处理、错误捕获，适配不同接口格式。新手只需复制工具文件，按需调用函数即可实现高效映射，避免重复编写循环逻辑，提升开发效率。

原创 【未来已来：AI时代下前端开发的黄金机遇 】

摘要： AI正在重塑前端开发，带来效率革命与创新机遇。工具如GitHub Copilot、V0.dev能通过自然语言生成代码，Figma转代码工具准确率超90%。AI还优化UI/UX设计，提升转化率，并推动低代码平台爆发。3D/AR开发因AI更易实现，全栈能力因AI简化前后端协作而升级。就业市场涌现“AI+前端”跨界岗位，相关人才薪资高出35%。开发者需掌握AI工具链、可视化技术，并培养产品思维，以抓住这波技术红利。AI解放重复劳动后，前端工程师的创造力将成为核心竞争力。

原创 【DeepSeek 本地部署最详细指南】

通过以上步骤，你应该能够成功在本地部署 DeepSeek。如果在部署过程中遇到问题，可以参考官方文档或社区支持。希望这个详细的指南能帮助你顺利完成部署！注意：本文假设你已经具备基本的 Linux 命令行操作知识。如果你在部署过程中遇到问题，欢迎在评论区留言，我会尽力解答！

原创 【DeepSeek：国产大模型的崛起与ChatGPT的全面对比】

DeepSeek与ChatGPT各有优势，前者在中文处理、垂直领域和成本效益上表现突出，后者在通用性和国际化场景中更具优势。开发者应根据具体需求选择合适的工具，推动业务创新。

原创 【CryptoJS库AES加密】

上述示例使用了CryptoJS库中的AES算法进行加密和解密操作。加密和解密方法都需要一个密钥参数，并将输入数据通过加密算法处理后返回结果。当涉及到前端加密时，通常需要使用加密算法来保护用户的敏感信息。

原创 【Vue3+ts入门小试牛刀】

Vite是一个快速的构建工具，用于构建现代化的前端应用程序。TypeScript是一种强类型的JavaScript超集，它可以增强JavaScript代码的可读性和可维护性。Vue 3是一个流行的JavaScript框架，它提供了创建交互式用户界面的工具。TypeScript是一种类型安全的JavaScript的超集，它可以帮助我们在开发过程中减少错误。至此，你已经完成了一个使用Vue 3、Vite和TypeScript的简单示例。这将启动一个本地开发服务器，并打开你的默认浏览器以查看你的应用程序。

原创 【快速上手Docker 简单配置方法】

简化部署：Docker 可以将应用程序和其依赖的环境一起打包成一个容器，在任意支持 Docker 的环境中部署，避免了因环境不同而导致的部署问题。Docker 是一种容器化平台，它能够将应用程序和其依赖的环境打包在一个容器中，实现应用程序在不同环境中的移植性和可重复性。容器（Container）：容器是基于镜像创建的运行实例，它是一个独立、隔离的环境，包含了应用程序及其运行所需的所有内容。一致的开发环境：Docker可以确保在不同的开发、测试和生产环境中运行相同的应用程序，避免了因环境差异引起的问题。

原创 【a-form-model+vue2封装搜索框，最终版】

组件来包裹该项，并通过传递属性来设置该项的验证规则和其他属性。方法用于处理表单的提交事件，通过验证表单的合法性后，将当前表单的值通过。数组，并根据具体的表单项类型进行初始化操作，如设置默认选中第一项。属性设置为"ruleForm"，以方便在代码中对该表单进行操作。方法用于处理日期选择器的改变事件，并将选择的日期值存储到。标签来动态渲染相应的组件，并通过。属性将样式限定在当前组件内部。方法将表单重置为初始状态。组件来布局表单项，通过。方法用于重置表单，通过。包裹表单元素，并在其。对于每个表单项，使用。

原创 【封装一个自适应的a-form】

的新的Vue组件，在其中封装a-form，并使用a-row和a-col进行自适应布局。我们还创建了一个Vue实例，并在data中定义了表单数据和处理表单提交的方法。封装一个自适应的a-form并使用a-row和a-col布局需要安装相关的依赖包，并在代码中引入它们。，它是一个基于Vue.js的UI组件库，包括了a-form、a-row和a-col等组件。中使用了a-form、a-row和a-col来实现自适应布局。的a-form、a-row、a-col组件，并在。在上面的代码中，我们引入了。

原创 前端发展前景探讨：技术进步与职业发展机会

越来越多的公司都意识到前端的重要性，因此对于优秀的前端开发人员的需求将会持续增长。同时，前端的技术门槛并不高，初学者相对容易入门，这也意味着有更多的人加入这个行业，竞争也会加剧。最后，我们也可以来讨论一下前端发展中的挑战。正文： 大家好，我是一名在西安工作的前端开发，最近对前端的发展前景产生了浓厚的兴趣，想和大家开启一个话题，一起来探讨一下前端的发展前景。然而，技术的发展日新月异，新的技术不断涌现，我们不禁要问，前端的发展前景如何？综上所述，前端的发展前景非常广阔，技术的进步为我们带来了更多的机会。

原创 前端开发踩过的坑及保持心态解决问题的方法

引言作为前端开发人员，在工作中难免会遇到各种各样的问题和困难。这些问题可能会让我们感到沮丧和无助，甚至一度想放弃。然而，只要我们保持对问题的积极态度，并学会一步步解决问题，我们就能够不断成长和进步。本篇博客将分享一些我踩过的前端开发坑，并介绍如何保持心态，培养解决问题的习惯。

原创 踩过的坑：“只跳过一次提交”的Git操作指南

在我工作的项目中，有一次我在提交代码时犯了个错误，将一些不必要的文件也提交了上去。希望今天的分享能够给大家带来一些乐趣，也希望大家在使用Git时不会踩到类似的坑。今天，我要和大家分享一个关于Git的有趣经历，并且教大家如何解决其中的一个问题。现在，我成功地在Git中跳过了那个不必要的提交，并且只保留了其他修改的提交。这个命令可以将指定的提交应用到当前分支，而不影响其他提交。命令查看了一下提交历史，找到了那个有问题的提交的哈希值。命令来只应用那个特定的提交，而不提交到当前分支。命令来应用特定的提交，并使用。

原创 【乾坤新增一个子应用】

在子应用项目中，需要配置一些与乾坤框架相关的配置项，例如子应用的名称、入口文件的路径等。现在，你已经成功完成了新增一个子应用的过程。当你访问主应用的页面时，你将看到子应用被加载到主应用的页面中，并且可以在主应用的页面中进行路由切换和子应用之间的通信。在主应用的入口文件中，引入乾坤框架，并调用"loadMicroApp"方法加载子应用。在终端中分别进入子应用和主应用的项目目录，使用命令行工具启动子应用和主应用。在子应用的入口文件中，引入乾坤框架，并注册子应用。在主应用的配置文件中，添加子应用的配置项。

原创 【前端布局 如何适配不同分辨率 vue2】

例如，可以使用vue-responsive来根据屏幕尺寸显示或隐藏组件，使用vue-mq来设置不同的屏幕尺寸断点等。使用百分比单位或vw/vh单位来指定组件的大小和位置，可以使其相对于父容器或视口的大小自动调整。使用CSS的flexbox或grid布局可以创建灵活的布局，可以自动适配不同的屏幕尺寸。可以根据视口的宽度或高度设置元素的大小，使其相对于视口的大小自适应。使用CSS的@media查询来根据不同的分辨率应用不同的样式。可以在不同的CSS文件中定义不同的布局，并根据不同的分辨率加载相应的CSS文件。

原创 【JavaScript数组操作总结：全网最详细的指南】

标题：JavaScript数组操作总结：全网最详细的指南。

原创 【纯前端实现xlsx的解析并处理成table需要的格式】

xlsx解析成json,并处理成table需要格式数据进行对比

原创 js数据类型速记

js数据类型速记

原创 jsDOM基础操作速记

原创 【js数组常用方法速记】

原创 vue+moment转化日期格式为年月日时分秒！最简洁版

官网：https://momentjs.cn/

原创 【常见的兼容性问题】

浏览器对CSS属性的支持差异：不同浏览器对CSS属性的支持程度不同，某些属性在某些浏览器中可能不起作用或解析不正确。图片格式的兼容性：不同浏览器对图片格式的支持存在差异，某些格式在某些浏览器中可能不被支持或显示异常。事件处理的差异：不同浏览器对事件的处理存在差异，例如事件对象的属性、方法、坐标获取等方面。需要进行兼容性处理，使用合适的方法来获取事件相关信息。浏览器的盒模型差异：不同浏览器对盒模型的解析存在差异，导致元素的尺寸计算不一致。样式的兼容性：不同浏览器对样式的解析存在差异，可能导致页面显示不一致。

原创 【谈谈对闭包的理解】

闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域。由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。闭包 的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量始终保持在内存中。

原创 【express的详细使用】

简单说，中间件（middleware）就是处理HTTP请求的函数。它最大的特点就是，一个中间件处理完，再传递给下一个中间件。App实例在运行过程中，会调用一系列的中间件每个中间件可以从App实例，接收三个参数，依次为request对象（代表HTTP请求）、response对象（代表HTTP回应），next回调函数（代表下一个中间件）。每个中间件都可以对HTTP请求（request对象）进行加工，并且决定是否调用next方法，将request对象再传给下一个中间件。一个不进行任何操作、只传递。

原创 【Promise几道场景手写题】

promise几道场景手写题

原创 前端构建新玩法 Vite 上手与思考

Vite 是面向现代浏览器的一个更轻、更快的 Web 应用开发工具，核心基于 ECMAScript 标准原生模块系统（ES Modules）实现。表象功能上看，Vite 可以取代基于 Webpack 的 vue-cli 或者 cra 的集成式开发工具，提供全新的一种开发体验。具体细节往下看。

原创 【Babel原理及其使用】

Babel使用的难点主要在于理解polyfill、runtime和core-js，通过本文，把这三者的概念和关系理清楚了，对babel的使用就不存在问题！

原创 【实现webpack小型打包工具】

如果你对于上面的实现还有疑惑的话，可以阅读下打包后的部分简化代码。通过这个工具的实现，大家可以理解到打包工具的原理到底是什么。转换后的代码来看，这样大家就能理解为什么需要这样写了。接下来我们需要实现一个函数，这个函数的功能有以下几点。行的代码，但是打包工具的核心原理就是这些了。接下来我们将这些工具引入文件中。，所以我们首先需要安装一些。首先，我们先来实现如何使用。的代码，但是浏览器是不支持。虽然实现这个工具只写了不到。的模块化代码转换为了。

原创 【从源码窥探Webpack4.x原理】

Webpack在启动阶段对配置参数和命令行参数以及默认参数进行了合并，并进行了插件的初始化工作。完成初始化的工作后调用Compiler的run开启Webpack编译构建过程，构建主要流程包括compilemakebuildsealemit等阶段。

原创 【Webpack4打包机制原理解析】

webpack是一个打包模块化JavaScript的工具，在webpack里一切文件皆模块，通过Loader转换文件，通过Plugin注入钩子，最后输出由多个模块组合成的文件。webpack专注于构建模块化项目。

原创 【微前端实战总结篇】

微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于拆, 拆完后再合!

原创 【setTimeout实现原理及使用】

setTimeout，它就是一个定时器，用来指定某个函数在多少毫秒之后执行。