Chieffo-CSDN博客

原创基于 GoJS 实现的拓扑图技术总结

需求用拓扑图的方式，为用户直观的展示各类资产（数据库设备、安全设备等）本身的运行状态、风险状态，它们之间的连接、数据交互关系，它们的所属组织关系等；实现效果在线链接地址：https://codepen.io/Chieffo/pen/oNjPdwzGoJS 入门推荐 GoJS 入门学习教程：GoJS官方文档（点击访问）无论学习哪种编程语言、第三方库和框架等，最好最快的学习方式都是通过官方的标准入门教程学习。这里介绍下我学习入门知识时在官网中常用到的几个栏目，以及它们对应的功能。（一）快速入

2021-03-16 09:38:04 1273

原创 Vue 实现关联页面多级跳转（页面下钻）功能

背景在项目开发过程中，经常会遇到从上一个页面跳转到下一个页面的需求，俗称下钻。比如在概览页面的数据，需要查看详情，点击某个图表或按钮，即可跳转到详情页面查看详情数据。目前为止，我们的项目中还没有一个统一的页面跳转方法，实现页面跳转的方式也因人而异，并且现有的很多项目只能在两个页面之间来回跳转，基本没有完整的实现多个页面互相跳转的功能。关联页面跳转做为项目的常用功能，并且执行的都是重复性高的代码逻辑，非常有必要把相关的逻辑抽出来，封装成简单易用的公共方法和公共组件。目的统一各个项目的关联跳转方法逻辑

2021-03-15 13:12:38 3599

原创纯前端翻页+跨页级联勾选的实现

需求描述实现对数据库表和表字段的勾选，数据库表包含了表字段，后端一次性返回所有表的数据。前端需要自行对表做翻页处理。当用户勾选完需要的表和字段后，再把勾选后的数据发送给后端。需求拆分前端翻页功能跨页级联勾选功能实现效果具体实现前端翻页功能需要实现前端翻页的部分是数据库表，进入页面后，默认自动向后端获取一次搜索后的表数据searchTableList，获取到之后，计算当前页显示的表数据，计算公式为 curTableList = searchTableList.slice((page -

2021-03-15 13:10:07 1019

原创 Vue 项目一套代码两个项目拆分方案

背景由于之前的数据库防火墙产品与数据库审计产品使用的是同一套代码，随着两个产品功能的差异越来越大，代码的冗余度和偶合度越来越高，为了便于后期维护以及添加新功能，所以基于原来的项目代码，进行了代码结构拆分。注意：本次拆分只拆分了可以拆分的部分，有的模块例如：规则、关于我们，是没有进行拆分的，一是有的模块很简单，没必要拆分；二是有的模块原先写得代码偶合太严重，无法拆分，如果要拆分，需要花费大量精力去梳理代码，同时还要后端配合拆分。目的将此次代码拆分方案记录下来，便于后来的开发人员快速熟悉项目结构。

2021-03-15 13:07:50 1983

原创 Vue 如何打包纯前端静态资源项目

背景在企数保项目开发前期，由于项目紧急，需要先做一个独立于后端的纯前端演示项目，即不依赖于后端打包纯前端静态资源。现有的项目代码和打包配置，需要基于以上需求进行修改，本文章是对修改过程中遇到的问题进行记录和总结。解决方案修改 VueRouter 的路由模式为默认的 hash 模式修改 src/router/index.js 文件，把 mode: 'history' 这一行注释掉就行修改 Webpack 打包配置修改 build/index.js 文件，把 build 对象下的

2021-03-15 13:04:32 1018

原创页面崩溃原因分析及解决

引言在开发综合治理平台态势概览的大屏页面的过程，遇到了页面崩溃的问题，本帖子记录了崩溃的原因分析和解决方案。问题打开综合治理平台，进入态势概览页面，停留在此页面一段时间，会出现如下图所示的页面崩溃的情况。原因分析注：以下操作环境建议在浏览器隐身模式下进行，防止其他因素干扰使用工具根据页面崩溃的提示，可以初步判定是页面内存溢出导致的崩溃，为了验证内存是否溢出，可以使用 Chrome 浏览器自带的工具分析验证。这里介绍三种工具的使用，可以结合实际需求来使用。任务管理器1) 打开方式：

2021-03-15 13:01:48 4239

原创 ES6 Promise 和 async/await 的使用

你可能知道，Javascript语言的执行环境是"单线程"（single thread）。所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任

2021-03-15 12:54:01 230

原创趣味算法图解

IDEA 是由 SándorP. Fekete、Sebastian Morr 和 Sebastian Stiller 共同推出的图解算法系列。它们最初是为 Sándor 在德国不伦瑞克工业大学开设的算法和数据结构讲座而设计的，作者希望它们能够有更广的用途，因此在网上发布了这个项目，希望能够帮助到教师、学生和有好奇心的人们。算法将会不断更新，可以访问页面了解更多信息：https://idea-instructions.com/这些图片使用 Inkscape 绘制，可以使用任意一款向量图编辑软件来编辑它们

2021-03-15 12:17:07 122

原创记录一次 Vue 组件封装过程

引言开发前端项目过程中，有大量的图表数据需要展示，为了更方便地使用以及代码的复用，于是基于ECharts封装了各种各样的图表组件。直接使用封装好的组件对于刚接触我们项目的人来说会比较友好，而理解组件的封装思路和封装细节，将会有助于我们更加娴熟地运用组件到实践中。本文将会以雷达图为案例，一步步讲解在vue项目中如何使用echart，如何将其封装为能重复调用的组件。准备工作在开始之前，我们先按照正常的组件注册流程，在项目 components 目录中新建一个名为 radar-chart 的组件，然后在一个

2021-03-15 12:12:49 1479

原创 Vue 组件传值过程中丢失数据

在上一篇文章 JavaScript 中的两种数据类型中，分别介绍了基本类型和引用类型，以及引用类型的浅拷贝与深拷贝。这里需要注意的是，该文章中深拷贝引用类型值的方法，并不是完美的，引用类型值中的某些属性值，仍不能完整地复制到新的变量中。比如函数值，在深拷贝过程中，就会丢失。问题在实际项目中，假如使用了二次封装的组件，并且封装的组件内部做了一些属性值的深拷贝操作，就有极有可能因为传入的属性值是引用类型的值，导致丢失部分数据。举例以基于 el-table 封装的 ak-table 组件为例：往 ak-

2021-03-15 12:03:10 1172

原创 JavaScript 中的两种数据类型

我们知道，JavaScript 是一门弱类型的语言，它创建的变量保存的值是可以在脚本生命周期内改变的，假如初始化定义的变量值为数字（var a = 1;），然后进行改变它的值的操作（a = a + '个';），这个变量值就会转换为字符串类型（alert(a); // "1个"）。实际上，JavaScript 的变量实际复杂程度还远不止如此。基本类型和引用类型一个变量可以存放两种类型的值，基本类型的值（primitive values）和引用类型的值（reference

2021-03-15 10:33:08 628

Chieffo 的博客