MxGraph从入门到精通之1：运行HelloWorld示例程序

悠悠 2023-02-17 02:57 12阅读 0赞

## 简介 ##

MxGraph包括了一个JavaScript编写的客户端软件，以及一系列各个语言写的后端。 客户端是一个图形组件，它需要一个web服务器把相关的文件传给客户端或者直接从本地文件系统运行起来(如下文介绍的通过直接打开本地HTML文件运行MxGraph)。后端可以原样使用（如下文介绍的通过Java后端运行MxGraph）,或者嵌入到现有的服务器应用程序中。MxGraph的架构图如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70]

## 运行HelloWorld程序 ##

在介绍MxGraph的原理和代码实现之前，我们先把它跑起来看一看。运行MxGraph有两种方式，一种是直接在本地打开HTML文件，另一种是把通过后端服务器（Java,PHP等）生成相应的数据返回到浏览器上。两种方式的运行效果如下：

1.  直接打开本地HTML文件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70 1]  
2. 通过访问后端服务器  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70 2]  
直接打开本地HTML文件的方式就不必多说了，下面主要介绍第二种方式。

## 步骤 ##

### 1 下载项目源码 ###

这步简单，使用git直接下载源码：

git clone https://github.com/jgraph/mxgraph.git

### 2 使用Idea打开项目 ###

实际上使用Eclipse也可以，官方文档说明就是用Eclipse的，但我用Idea打开用起来也完全没问题。这一步也简单，打开Idea，点击File->Open->选择上一步下载的源码根目录，打开后如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70 3]

### 3 运行目录下的示例程序 ###

这一步也很简单，点击项目目录java->examples->com.mxgraph.examples->web->Main，Main是个Java文件，点进来看到有个main方法，很开心，这是个可以直接运行的文件！所以点击运行main方法，如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70_pic_center]

### 4 打开浏览器 ###

如果上一步运行顺利的话，就可以在下面的控制台中看到以下输出：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70_pic_center 1]  
直接Ctrl+点击一下即可跳到浏览器界面：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70 4]  
点击任意连接就可以进入到相应的示例程序中，示例程序中的流程图还可以拖着玩：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200619144211572.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200619130608827.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200619130810612.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200611161514301.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200611161649884.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20200611161739633.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200611161845304.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200611161908480.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ=,size_16,color_FFFFFF,t_70