项目路径 https://gitlab.saicstack.com/sophia/sophia-graph
项目树形结构
│ db.sqlite3 # sqllite3数据库
│ manage.py
│
├─graph
│ │ settings.py # 配置文件
│ │ urls.py # 路由
│ │ views.py # 视图
│ │ wsgi.py # wsgi协议
│ │ __init__.py
│ │
│ └─__pycache__
│ settings.cpython-36.pyc
│ urls.cpython-36.pyc
│ views.cpython-36.pyc
│ wsgi.cpython-36.pyc
│ __init__.cpython-36.pyc
│
├─static # 静态文件
│ 1.jpg
│ bootstrap.css
│ graph.editor.css
│ graph.editor.js
│ icons-32.png
│ jiaohuanji.js
│ js.js
│ qunee-min.js
│ server.js # 注册图片的js
│ SVGicon.js # 注册图片的js
│
├─templates
│ test.html # 页面显示
│
└─tuobu
│ admin.py
│ apps.py
│ models.py # 数据库的model
│ tests.py
│ urls.py
│ views.py
│ __init__.py
│
├─migrations
│ │ 0001_initial.py
│ │ __init__.py
│ │
项目流程
1. 访问首页 /
视图处理 获取最新一条Graph拓补图的记录 获取 存入的json数据返回数据 templates页面
2. 页面引入graph所需的css、js文件 `graph.editor.css` `qunee-min.js?v=1.8` `js.js` `graph.editor.js`
jiaohuanji 引入注册交换机的图标
server 引入注册服务器的图标
3. 自己连接拓补图 然后点击保存按钮 通过ajax发送请求 获取新生成的json数据发送到后端 /index 路由进行视图处理 将传入的json数据保存到Graph 的类的graph_json中去
如何注册图标请参考我已经写好的一篇文章
https://www.zhijinyu.com/article/97/detail/
如果还是不懂请参考官网
https://github.com/samsha/graph.editor