demotang的博客

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

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

原创 【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，它就是一个定时器，用来指定某个函数在多少毫秒之后执行。

原创 【前端面试高频手写题】

ES6给我们提供了这样的数据结构，它的名字叫WeakMap，它是一种特殊的Map, 其中的键是弱引用的。类的继承在几年前是重点内容，有n种继承方式各有优劣，es6普及后越来越不重要，那么多种写法有点『回字有四样写法』的意思，如果还想深入理解的去看红宝书即可，我们目前只实现一种最理想的继承方式。但是实际上，对于某些严格的场景来说，这个方法是有巨大的坑的。像dom的拖拽，如果用消抖的话，就会出现卡顿的感觉，因为只在停止的时候执行了一次，这个时候就应该用节流，在一定时间内多次执行，会流畅很多。

原创 【前端性能优化方式】

编码优化，指的就是 在代码编写时的，通过一些 最佳实践，提升代码的执行性能。通常这并不会带来非常大的收益，但这属于 程序猿的自我修养，而且这也是面试中经常被问到的一个方面，考察自我管理与细节的处理。虚拟列表的实现原理：只渲染可视区的 dom 节点，其余不可见的数据卷起来，只会渲染可视区域的 dom 节点，提高渲染性能及流畅性，优点是支持海量数据的渲染；没有vdom，完全的响应式，每个数据变化，都通过响应式通知机制来新建Watcher干活，项目规模变大后，过多的Watcher，会导致性能的瓶颈。

原创 【vuex小试牛刀】

了解vuex核心概念请移步 https://vuex.vuejs.org/zh/

原创 【慢慢理解Vue的设计思想】

KVue:框架构造函数Observer:执行数据响应化(分辨数据是对象还是数组)Compile:编译模板，初始化视图，收集依赖(更新函数、watcher创建)Watcher:执行更新函数(更新domDep:管理多个Watcher，批量更新。

原创 【继承与原型链】

我们知道面向对象风格有三大特性和六大原则，三大特性是封装、继承、多态，六大原则是单一职责原则（SRP）、开放封闭原则（OCP）、里氏替换原则（LSP）、依赖倒置原则（DIP）、接口分离原则（ISP）、最少知识原则（LKP）。同理，原型对象也是一个对象，它也有自己的原型对象，因此也可以继承它的原型对象的属性。并不是强面向对象语言，因此它的灵活性决定了并不是所有面向对象的特征都适合 JavaScript 开发，本教程将会着重介绍三大特性中的继承，和六大原则里的单一职责原则、开放封闭原则、最少知识原则。

原创 【React router原理】

history是一个独立的第三方js库，可以用来兼容在不同浏览器、不同环境下对历史记录的管理，拥有统一的API。具体来说里面的history分为三类老浏览器的history: 主要通过hash来实现，对应高版本浏览器: 通过html5里面的history，对应node环境下: 主要存储在memeory里面，对应上面针对不同的环境提供了三个API，但是三个API有一些共性的操作，将其抽象了一个公共的文件。

原创 【vue3响应式原理】

setup是一个新的组件选项，它是组件内使用Composition API的入口 // 调用时刻是初始化属性确定后，beforeCreate之前。// 响应化:接收一个对象，返回一个响应式的代理对象 const state = reactive({ count: 0 })文件件内，实际上源码主要分为两部分，编译器和运行时环境。解决方式:将之前代理结果缓存，get时直接使用。建立响应数据key和更新函数之间的对应关系。vue 代码入口，整合编译器和运行时。// 返回对象将和渲染函数上下文合并。

原创 【Vue2源码学习分析】

Vue源码学习使我们能够深入理解原理，解答很多开发中的疑惑，规避很多潜在的错误，写出更好的代 码。学习大神的代码，能够学习编程思想，设计模式，训练基本功，提升内力。

原创 【JavaScript 引擎如何执行 JavaScript 代码】

在 V8 引擎中 JavaScript 代码的运行过程主要分成三个阶段其中，语法分析阶段属于编译器通用内容，就不再赘述。前面提到的执行环境、词法环境、作用域、执行上下文等内容都是在编译和执行阶段中产生的概念。JavaScript 在运行过程中会产生一个调用栈，调用栈遵循 LIFO（先进后出，后进先出）

原创 【浏览器渲染原理最详细版】

将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting。计算 offsetWidth 和 offsetHeight 属性。很多人不知道的是，重绘和回流其实和 Event loop 有关。元素尺寸改变——边距、填充、边框、宽度和高度。内容变化，比如用户在input框中输入文字。使用 translate 替代 top。添加或者删除可见的DOM元素；，解析出来的结果会成为一棵。设置 style 属性的值。具体如下图过程如下图所示。在这个阶段，引擎开始解析。树 dom的目的至少有。常见的引起重绘的属性。