- 博客(33)
- 资源 (1)
- 收藏
- 关注
原创 【Mxgraph】Vue中使用mxgraph开发流程图工具
1.什么是mxgraphmxGraph是一个JavaScript图表库,可以快速创建交互式图形和图表应用程序,这些应用程序可以在其供应商支持的任何主要浏览器中运行。mxGraph 提供图形绘制、图形可视化、图形交互、图形布局、图形分析等能力, 适用于工作流程图、BPMN图、网络图、UML图、循环图、组织结构图、MindMap图、机架图、甘特图、信息图、平面图等绘制。mxGraph在2005年创建,作为商业项目一直持续到2016年,2016年创建者以Apache 2.0开源协议在GitHub上公布源码。
2021-03-11 16:30:30 24088 32
原创 【xlsx-chart】Vue项目中导出Excel表格并带上图表
基于xlsx-chart开发excel导出表格数据带图表的功能,及简单的拓展
2020-12-22 09:39:08 6610 5
原创 【微前端入门】:从single-spa到qiankun
一、关于微前端1.What?什么是微前端?微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应 用。微前端的核心在于拆, 拆完后在合!2.Why?为什么去使用他?不同团队间开发同一个应用技术栈不同怎么破? 希望每个团队都可以独立开发,独立部署怎么破? 项目中还需要老的应用代码怎么破?我们可以将一个应用划分成若干个子应用,将子应用打包成一个个的lib。当路径切换 时加载不同的子应用。这样每个子应用都是独立的,技术栈也不用做限制了!从而解决了前 端协同开发问题3.How
2020-09-27 17:33:58 5060 2
原创 【D3.js】使用D3.js快速实现拓扑图的绘制
D3的简介D3 全名为 Data Drive Document,即通过 Data 操作 Document,而在做数据可视化时,Data 最常 Drive 的 Document 便是 SVG。刚了解到D3时,看到D3官网非常丰富且酷炫的Demo,便觉得 D3 应该有着无限可能的图形开发能力,所以在学习完基础的API和SVG的基础后,就开始着手绘制D3的节点拓扑图了;绘制简易的可拖拽节点拓扑图2.1 准备工作:安装D3:npm install d3 --save项目中导入D3:imp.
2020-06-21 13:13:58 15397 2
原创 【Jsplumb】Jsplumb基础教程(vue+jsplumb+d3)
目前github社区存在几款可用于设计流程图的绘图框架:go.js( http://www.gojs.net/latest/index.html) :go.js 提供一整套的JS工具 ,支持各种交互式图表的创建;目前go.js 是闭源收费的jsPlumb(https://jsplumbtoolkit.com/): jsPlumb是一套开源的流程图创建工具 ,小巧精悍,使用简单;jsPlumb 有社区版跟收费版,我们可使用的是社区版JointJS(https://www.jointjs.com/)
2020-06-20 23:37:20 61426 13
原创 【AI】AI原生应用场景调研
AI原生(AI Native)是一种基于AI构建和运行应用程序的方法,是一套技术体系和方法论;在AI原生应用中,它以AI为核心,包括数据收集和处理、模型训练和优化、模型部署和管理等方面,将AI的能力贯穿于整个应用架构中。AI原生应用中的AI是产品的核心部分,如果没有AI,产品的功能形态的核心流程就不存在;
2024-03-20 09:55:45 510 1
原创 【Nginx】CentOS 安装Nignx
这就是在CentOS上安装Nginx的基本步骤。安装完成后,您可以根据需要对Nginx的配置文件进行自定义,以满足您的特定需求。如果您想更详细地配置Nginx,可以编辑。如果报错 FirewallD is not running,请启动FirewallD。默认情况下,Nginx的配置文件位于。目录中创建自定义配置文件。
2023-11-14 10:49:29 570
原创 【JMeter】前端使用JMeter测试JSEncrypt加密登录
前端开发时会接触到用户登录,登录时为了数据的安全会使用到jsencrypt加密工具进行RSA加密,同时我们需要使用jmeter来进行压测,帮助我们了解Web应用程序在高负载情况下的性能表现,从而为优化应用程序性能提供参考。
2023-05-09 11:22:20 3660 1
原创 【Gerrit】正确添加了SSh key 仍报错 Permission denied (publickey). fatal: Could not read from remote repository
当我们在部署新的开发环境时在使用Gerrit clone代码的时候,你会发现报错,错误信息大概是:Permission denied (publickey). fatal: Could not read from remote repository.OpenSSH从8.8版本开始由于安全原因开始弃用了rsa加密的密钥。因为OpenSSH认为rsa破解成本太小了,有风险就给禁用了。你可以通过命令:如:去查看Gerrit服务器的OpenSSH的版本号,如果≥8.8,就可以用这个方法。可以使用ed2
2023-03-29 09:44:35 5001 5
原创 【D3.js】基础教程
D3: Data-Driven DocumentsD3 (或D3.js)是一个JavaScript库,用于使用Web标准可视化数据。 D3帮助您使用SVG,Canvas和HTML使数据栩栩如生。 D3将强大的可视化和交互技术与数据驱动的DOM操作方法相结合,为您提供现代浏览器的全部功能,并为您的数据设计正确的可视界面提供了自由。官方资源API ReferenceRelease NotesGalleryExamplesWiki安装D3npm安装安装命令npm install d3;
2023-01-12 17:47:43 18576 1
原创 【uni-app】uni-app安装scss/sass后报错:win32-x64-64_binding.node is not a valid Win32 application
当我们下载HbuilderX编辑器,安装scss/sass编译插件时,报错:现象:这段信息告诉我们,我当时开发环境安装的node-sass中win32-ia32-72目录下binding.node这个文件丢失,需要下载补充或:\HBuilderX\plugins\compile-node-sass\node_modules\node-sass-china\vendor\win32-ia32-72\binding.node is not a valid Win32 application.这段信
2021-11-26 17:24:10 4657 2
原创 【PDF在线预览】Vue/ReactPDF简易在线预览
【Vue/React】PDF在线预览工具:pdfjs-dist@2.0.943代码:html: <div id="pageContainer"> <div id="viewer" class="pdfViewer"></div> </div>js:import pdfjsLib from "pdfjs-dist/build/pdf";import { PDFViewer } from "pdfjs-dist/web/pdf_vie
2021-11-22 19:55:41 762
原创 【Element】element-ui级联选择器(多选)点击label文字选择当前项
element-ui级联选择器(多选)点击label文字选择当前项.el-cascader-panel .el-scrollbar.el-cascader-menu:nth-child(n + 2) .el-checkbox{ width: 100%; height: 100%; z-index: 10; position: absolute; top: -1px; right: -14px;}.el-cascader-panel .el-scrol
2021-11-07 12:19:58 1181
原创 【React】脚手架配置代理
React脚手架配置代理总结方法一在package.json中追加如下配置"proxy":"http://localhost:5000"说明:优点:配置简单,前端请求资源时可以不加任何前缀。缺点:不能配置多个代理。工作方式:上述方式配置代理,当请求了3000不存在的资源时,那么该请求会转发给5000 (优先匹配前端资源)方法二第一步:创建代理配置文件在src下创建配置文件:src/setupProxy.js编写setupProxy.js配置具体代理规则:const
2021-10-17 15:57:10 182
原创 【前端通讯】WebSocket和EventSource实践
WebSocket: this.socket = DashboardService.getWsPermissionEvent(); this.socket.onopen = (e) => { console.log('-------websocket channel opened-------'); }; // 监听socket错误信息 this.socket.onerror = (e) => { console.
2021-09-17 10:12:48 964
原创 【JavaScript 】注释相关
1.单行注释 快捷键 : ctrl+ /2.多行注释 快捷键 : alt + shift + a3.JSDoc 注释规则 快捷键 : 依次输入 / * *JSDoc注释一般应该放置在方法或函数声明之前,它必须以/ **开始,以便由JSDoc解析器识别。其他任何以/*,/***或者超过3个星号的注释,都将被JSDoc解析器忽略。如下所示:/*** 一段简单的 JSDoc 注释。*/JSDoc 的注释效果假如我们有一段这样的代码
2021-09-16 15:46:59 1788 1
原创 【JsPlumb】基于JsPlumb设计的Web拓扑图编辑器
Easy editor项目介绍Easy Editor 是基于 VUE+ElementUI+JsPlumb 的拓扑编辑器,通过该编辑器你可以实现拓扑图绘制,拓扑图的修改等功能节点拖拽功能实现流程通过 vuedraggable 插件来实现左侧菜单的拖拽,拖拽结束后回调 end 方法,根据鼠标所在的位置添加一个节点信息,使用 jsplumb 来管理该节点,设置该节点可拖拽、连线 并注册相关的事件。效果图功能支持拖拽添加节点鼠标移入到节点中显示 编辑、删除 操作鼠标单击线可进行设置条件,双击可
2021-09-14 09:59:10 1905 1
原创 【微前端实践】webpack5 + Node.js+ Nacos 搭建微前端应用网络
一、关于Nacos什么是Nacos?官方介绍https://nacos.io/zh-cn/docs/what-is-nacos.htmlNacos 致力于帮助您发现、配置和管理微服务。Nacos 提供了一组简单易用的特性集,帮助您快速实现动态服务发现、服务配置、服务元数据及流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。 Nacos 是构建以“服务”为中心的现代应用架构 (例如微服务范式、云原生范式) 的服务基础设施。简单概括一下Nacos可以做两方面用途:配置服务中心
2021-09-07 18:28:49 7831 1
原创 【微前端】webpack 5 模块联邦实践
背景前端应用、微服务的发展,使得模块化的概念越来越重要。 这也不可避免的会产生再不同的项目会有很多功能相似,甚至完全相同。所以跨应用的代码共享尤为重要,之前我们处理这种问题往往采用,1、功能相似的页面直接赋值方便,不用费脑力直接复用。但这样就会导致项目中代码的复用性低,代码冗余多等问题出现。2、微服务的出现,很多业务一般使用npm 发布的形式管理公共包。我们EDSP前端项目也是用了npm插件形式;但在使用下来我们发现npm 比较适合对业务逻辑耦合小,完全工具类的包。而对于业务逻辑比较繁重,更新频繁的模
2021-08-26 17:55:37 3143 4
原创 【前端部署】Node+Express部署前端(gzip资源压缩/转发,proxy代理)
const express = require('express');const proxy = require('http-proxy-middleware');// 服务端压缩gzip// var compression = require('compression');// webpack打包好gzip文件const expressStaticGzip = require('express-static-gzip');const app = express();// 启用服务端压缩gz
2021-08-14 14:53:43 650
原创 【Javascript】2021手撕Javascript面试题
1.手写一个深拷贝// 判断数据类型function checkType(data){ return Object.prototype.toString.call(data).slice(8,-1);} 2.手写防抖节流3.手写一个Promise
2021-08-14 12:53:29 215
原创 Webpack5学习笔记(持续更新)
1:webpack 简介1.1webpack 是什么webpack 是一种前端资源构建工具,一个静态模块打包器(modulebundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)。1.2webpack 五个核心概念1.2.1Entry入口(Entry)指示 webpack 以哪个文件为入口起点开始打包,分析构建内部依赖图。1.2.2Output
2021-08-07 10:10:56 422
原创 【Monaco】Monaco-Editor在Vue中使用(实现代码编辑与diff代码比较)
Monaco编辑器使用说明1.什么是MonacoMonaco编辑器是为VS代码提供支持的代码编辑器官方API文档2.Monaco Editor安装及使用2.1安装npm install monaco-editor --save-devnpm install monaco-editor-webpack-plugin --save-dev2.2配置vue.config.jsconst MonacoWebpackPlugin = require('monaco-editor-webpack
2021-03-19 15:37:38 11825 7
原创 【Vue】自定义创建简易的Vue-cli脚手架工具
简易脚手架项目目录:本文章用于记录脚手架学习,视频地址:https://www.bilibili.com/video/BV1sx411Z7tN?p=11index.js为核心源码templates.js为package.json模板;package.json管理依赖包和命令行;#!/usr/bin/env node// 命令行工具const program = require('commander')// 快速克隆指定版本的仓库const download = require('down
2021-01-03 22:49:18 581 1
原创 【Element】element-table实现自定义表格排序
第一步:在el-table中加入 @sort-change=“sort_change” 事件,sort_change为自定义的排序方法第二步:在el-table-colum中加入sortable=“custom”,使用了该属性之后当前列就可以进行排序且排序时会调用sort_change方法进行自定义排序sortFun(attr, rev){ // 第一个参数传入info里的prop表示排的是哪一列,第二个参数是升还是降排序 if (rev) { rev =
2020-08-30 17:10:25 6823 1
原创 【Prettier】使用Prettier插件根据eslint的规则去格式化代码
使用Prettier插件根据eslint的规则去格式化代码你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。第一步:需要先安装Prettiernpm i prettier -g第二步:项目根目录下创建.prettierrc配置文件:注意 :实际使用中不要保留注...
2020-04-03 10:15:11 2614
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人