2 七月是我的生日

尚未进行身份认证

我要认证

人生太苦,但你要甜!

等级
TA的排名 5w+

Mxgraph 实战教程(12):使用mxgraph实现一个流程图

前面我们讲解了mxgraph的基础操作和进阶操作,从这一节其,我们将开始两个实战项目。第一个mxgraph实现流程图实现效果:如果对大家有用的话,记得帮我github点个star,谢谢大家!git地址:小康的流程图...

2020-08-08 00:17:38

Mxgraph 使用教程(11):mxgraph手动添加节点和边(节点和边点击事件),并按照要求格式导出数据

上文我们介绍了,mxgraph如何在页面不刷新的情况下,通过请求不同文件生成不同的mxgraph图,本文我们将讲述mxgraph手动添加节点和边,并且按照原本数据格式导出数据。1.准备工作准备工作代码<template> <div> <div class="Oinput"> <input type="text" placeholder="请输入对应的城市名称......" /> <button>生.

2020-08-08 00:17:25

Mxgraph 使用教程(10):mxgraph单页面请求数据实现图形热更新

上文我们讲解了如何根据数据生成对应的mxgraph图,本文我们讲解单页面请求多个文件,生成mxgraph图。这也是我的项目需求之一。1.准备工作:原始数据:mxgraphData: [ { nodesList: [ [0, "Hello"], [1, "Mxgraph"], ], edgesList: [[0, "label", 1]], }, .

2020-08-07 20:43:30

Mxgraph 使用教程(9):mxgraph根据需求数据生成对应mxgraph图

本文将讲解如何按照对应的数据生成mxgraph图形1.准备工作2.模拟数据 mxgraphData: [ { nodesList: [ [0, "宝鸡市"], [1, "渭南市"], [2, "西安市"], [3, "汉中市"], [4, "安康市"], ], edgesList: [ .

2020-08-07 20:43:21

Mxgraph 使用教程(8):mxgraph进行查看xml 和 xml回显

上文我们讲述了mxgraph布局算法,本文讲述mxgraph进行xml回显和图片保存1.xml回显 准备工作还是上文的教程查看mxgraph图形的xml //查看图形的xml document.body.appendChild(mxUtils.button('View XML', function() { var encoder = new mxCodec(); var node = encoder.enco.

2020-08-07 20:43:12

Mxgraph 使用教程(7):给mxgraph图添加默认布局

上文我们讲解了添加工具操作,这一节我们讲解给生成图形添加默认布局1.准备工作多添加几个几点:生成如下所示的图形代码: try { var v1 = graph.insertVertex( parent, null, "Hello,", 20, 200, 100, 50, 'nodeStyle' ); .

2020-08-07 20:42:54

Mxgraph 使用教程(6):给mxgraph图添加操作工具按钮

上文我们讲解了mxgraph图如何设置样式,接下来我们给我们的mxgraph图添加一些操作工具吧1.准备工作2.添加操作按钮 <!-- 创建操作按钮放置容器 --> <div id="methods"> <div ref="buttons"></div> </div>refs选中的元素为生成的button所在的父级//定义操作按钮 //放大节点 this.$refs.

2020-08-07 20:42:36

Mxgraph 使用教程(5):mxgraph图设置样式的两种方式

上文我们了解了基本的mxgraph内容,这节我们来给节点和边设置样式1.第一种方式(行内式)上文的图形最终效果:添加样式: var v1 = graph.insertVertex( parent, null, "Hello,", 20, 200, 100, 50, "fillColor=#3CAEA3;strokeColor=white.

2020-08-07 20:42:21

Mxgraph 使用教程(4):详解mxgraph示例demo - Hello World

提示:接下来所有演示均以vue为主1.在vue中实现一个hello -world<template> <div> <div id="graphContainer" ></div> </div></template><script>import mxgraph from "./mxgraph";const { mxGraph, mxClient, .

2020-08-07 20:42:12

Mxgraph 使用教程(3):本地引入mxgraph和 vue中引入mxgraph

1.本地引入mxgraph第一步:下载mxgraph库github地址:https://github.com/jgraph/mxgraph第二步:clone项目打开项目-》进入javascript第三步:本地使用mxgraph一个官方示例demo:<html><head> <title>Hello, World! example for mxGraph</title> <!-- Sets the basepath for the

2020-08-07 20:42:00

Mxgraph 使用教程(2):mxgraph常用方法介绍

1.mxgraph常用包(这个js类库被分成了8个包。)1. 最上层的mxClient类包括或者动态导入了其他的包。当前的版本存储在maxClient.VERSION中。2. mxEditor包提供了图表编辑器相关的类实现。入口函数式mxEditor。3.view和model包实现了图表组件。他引用的mxGraphModel包含了mxCells和缓存了mxGraphView中的cells的状态。4.mxCellRender基于mxStylesheet中的定义来渲染cells的外观。mxUndoMa

2020-08-07 20:41:43

Mxgraph 使用教程(1):介绍mxgraph

1.mxgraph邂逅(×) 折磨(√)楼主暑假实习,项目组需要开发一款标注系统,mentor要求使用nuxt+mxgraph来实现标注系统,所以就开始学习mxgraph,然而百度一下,我就蒙蔽了,这个框架国内确实很少用,并且查询了许多人的摆弄可,感觉都是一些基本的教学,自己摸索了很久,大概花了一个多月把项目搞定了,现在将自己的遇到的问题以及解放方法分享给大家。2.mxgraphs介绍官方文档:mxGraph是一系列以不同技术开发的工具库,旨在提供显示交互式的 图表和图形的应用程序的功能。 请

2020-08-07 20:40:59

React 父子组件传值 && React生命周期

1.react生命周期react生命周期:很多的事物从创建到销毁的整个过程,这个过程被称之为声明周期React组件也有自己的生命周期,了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能;生命周期和生命周期函数的关系:生命周期是一个抽象的概念 ,在生命周期的整个过程,分成了很多个阶段;1.比如装载阶段( Mount), 组件第一次在DOM树中被渲染的过程 ;2.比如更新过程( Update ), 组件状态发生变化,重新更新渲染的过程;3.比如卸载过程( Unmount) , 组件从D

2020-08-04 18:57:23

React -05react脚手架解析

react脚手架的详细解析1.前端工程的复杂化1.如果我们只是开发几个小的demo程序 ,那么永远不需要考虑一些复杂的问题 :比如目录结构如何组织划分;比如如何管理文件之间的相互依赖;比如如何管理第三方模块的依赖;比如项目发布前如何压缩、打包项目;等等…2.现代的前端项目已经越来越复杂了 :不会再是在HTML中引入几个css文件,引入几个编写的js文件或者第三方的js文件这么简单;比如css可能是使用less、 sass等预处理器进行编写,我们需要将它们转成普通的css才能

2020-08-04 16:02:01

TS 08 TS中的各类修饰器

TS装饰器装饰器:装饰器是一种特殊类型的声明,它能够被附加到类声明,方法,属性或参数上,可以修改类的行为。通俗的讲装饰器就是一一个方法, 可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。常见的装饰器有:类装饰器、属性装饰器、方法装饰器、参数装饰器装饰器的写法:普通装饰器(无法传参)、装饰器工厂 (可传参)装饰器是过去几年中js最大的成就之,已是Es7的标准特性之一1.1 类装饰器类装饰器:类装饰器在类声明之前被声明(紧靠着类声明)。类装饰器应用于类构造函数,可以用来监视,修改或

2020-07-30 19:41:32

TS07 TS中的命名空间

TS命名空间1.命名空间概念命名空间:在代码量较大的情况下,为了避免各种变量命名相冲突,可将相似功能的函数、类、接口等放置到命名空间内同Java的包、.Net的命名空间一样,TypeScript的命 名空间可以将代码包裹起来,只对外暴露需要在外部访问的对象。命名空间内的对象通过export导出命名空间和模块的区别:命名空间:内部模块,主要用于组织代码,避免命名冲突。模块: ts的外部模块的简称,侧重代码的复用,一个模块里可能会有多个命名空间。2.命名空间代码演示/** * 使

2020-07-30 19:40:28

TS06 TS中使用模块

TS中的模块1.1 模块的概念模块的的概念(官方) :关于术语的一点说明:请务必注意一点,TypeScript 1.5里术语名已经发生了变化。“内部模块”现在称做“命名空间”。“外部模块”现在则简称为“模块”模块在其自身的作用域里执行,而不是在全局作用域里;这意味着定义在一个模块里的变量 ,函数,类等等在模块外部是不可见的, 除非你明确地使用export形式之-导出它们。相反,如果想使用其它模块导出的变量,函数,类,接口等的时候,你必须要导入它们,可以使用import形式之。模块的概念(自己理

2020-07-30 19:39:57

TS05 TS类型、接口、类、泛型综合使用-.TypeScript封装统一 操作Mysql Mongodb Mssq|l的底层类库

TypeScript类型、接口、类、泛型综合使用-.TypeScript封装统一 操作Mysql Mongodb Mssq|l的底层类库功能:定义一个操作数据库的库支持 Mysql Mssql MongoDb要求1: Mysql MsSql MongoDb功能一 样都有 add update delete get方法注意:约束统一的规范、以及代码重用解决方案:需要约束规范所以要定义接口, 需要代码重用所以用到泛型1、接口:在面向对象的编程中,接口是一 种规范的定义,它定义了行为和动作的规范2、泛

2020-07-29 19:59:06

TS04 TS中的泛型、泛型类(重要)

TypeScript中的泛型1.1 泛型的定义泛型:软件工程中,我们不仅要创建一致的定义 良好的API,同时也要考虑可重用性。组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件,’ 个组件可以支持多 种类型的数据。 这样用户就可以以自己的数据类型来使用组件。I通俗理解:泛型就是解决类接口方法的复用性、以及对不特定数据类型的支持。1.2 泛型函数/** * 泛型的举例

2020-07-29 19:38:00

TS03 TS中的各类型接口(详解)

1.TS中的接口接口的作用:在面向对象的编程中,接口是种规范的定义, 它定义了行为和动作的规范, 在程序设计里面,接口起 到一种限制和规范的作用。接口定义了某-批类所需要遵守的规范,接口不关心这些类的内部状态数据,也不关心这些类里方法的实现细节,它只规定这批类里必须提供某些方法,提供这些方法的类就可以满足实际需要。typescrip中 的接口类似于java,同时还增加了更灵活的接口类型,包括属性、函数、可索引和类等。1.1 属性类接口1.1.1 一个入门小实例//TS定义一个函数fun

2020-07-28 19:13:29

查看更多

勋章 我的勋章
  • 签到达人
    签到达人
    累计签到获取,不积跬步,无以至千里,继续坚持!
  • 阅读者勋章Lv1
    阅读者勋章Lv1
    授予在CSDN APP累计阅读博文达到3天的你,是你的坚持与努力,使你超越了昨天的自己。
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv4
    勤写标兵Lv4
    授予每个自然周发布9篇以上(包括9篇)原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。
  • 原力探索
    原力探索
    参与《原力计划【第二季】——打卡挑战》的文章入选【每日精选】的博主将会获得此勋章。
  • 学习力
    学习力
    《原力计划【第二季】》第一期主题勋章 ,第一期活动已经结束啦,小伙伴们可以去参加第二期打卡挑战活动获取更多勋章哦。