[码仔的前端笔记]前端页面实现拓扑图技术

前言

码仔本来是后端开发,在小小外包上了几个月班后,由于各种原因,决定在金三银四的浪潮中重新找了份工作,以后端的身份招进公司,一来直接让我先搞定前端的Topo图任务,前端知识半桶水的码仔只能硬着头皮上,接下来我会就我们公司的业务需求为大家展示这几周搞定前端Topo图的被虐历程.

VUE基础知识

所有的前端业务需求,肯定是要一定的前端基础,我们公司项目现在正在转型成前后端分离项目,前端使用的是VUE技术,后端使用SpringBoot技术,基础就是所有技术的基石,为了便于各位看官看懂码仔篇文章的部分专业知识,请补一下前端基础,在这里码仔推荐两个地方怒补一下前端知识.

恶补VUE基础

这里给大家提供一下我怒补VUE基础的两个途径,一个是菜鸟教程的VUE教学,这个主要是看笔记的方式学习,点我进菜鸟教程,然后就是看视频的方式学习了,在这里推荐飞哥的前端进阶,点我进飞哥前端视频.在这里给大家提供一些学习思路,因为要完成这个项目,你必须知道的前端内容:
1.什么是vue,vue有哪些版本,如何安装vue,vue的生命周期是什么,版本之间会有哪些冲突?
2.什么是npm,对应vue的版本是哪些?
3.什么是node.js?
4.如何使用vue的框架ElementUI?
5.什么是svg?这里给大家推荐让我醍醐灌顶的文章svg画布等基础文章
6.vue组件如何自定义,组件如何引入?

学完这些之后,至少别人的开源文件能看懂了…

正文

接下来就是本文最重要的部分了,如何实现一个符合自己公司业务要求的拓扑图功能,并且以组件的形式插入到自己的项目中!

1.市面上的开源Topo图组件分析

• 网上还是有老大哥为我们这群小白认真分析了一波市面上的Topo图组件,也是避免开发周期太长,以及避免重复造轮子,在这里我就直接把老大哥的博客贴出来市面上的开源Topo组件选型.
• 虽然老哥分析的头头是道,可谓煞费苦心,而且我也觉得个人比较推荐Ant的Topo组件.但是!但是!都不太符合码仔的业务需求,到这里,码仔哭了,只能重头去找开源组件.
• 终于功夫不负秃头人,让我在github上找到了一个符合业务需求的开源项目
• 项目是国内一个前端大神做的Topo图组件这里放上项目地址,这本来是一个放在github的项目,但是怕各位看官打不开就放国内的地址了.
• 这是项目的实例图片,我对其做了一些修改,差不多开源就是这个样子
  
• 当码仔高高兴兴的像是抓到了希望的稻草的时候,命运还是让稻草上长满了倒刺
• 码仔把组件翻来覆去的合并到项目,各种报错…然后看了看作者的issue
  
• 没办法,码仔还是想着,走一步看一步吧,先将作者的开源项目pull下来,修改源码变成自己的组件,然后打包完变成自定义组件再合并到项目中去,默默为自己的机智点个赞,于是就开始了漫漫看源代码,修bug之路.

组件源代码分析

1.项目地址
2.运行项目,因为这个项目是一个完整页面组件,所以可以直接运行,在页面打开.

npm install //安装依赖
npm run dev  //运行项目

3.项目目录分析


4.知道这些目录是做什么的,修改起大佬的源代码就轻松了,首先进入程序入口


4.主要组件分析

其实也不难分析,每个vue组件就是三个板块,<template>,<script>,<style>,一个放div,一个放方法,一个放样式,页面效果先在div中改,然后响应方法写到<script>中的methods中.
5.有什么需求就改什么需求.
6.改完就将整个页面打包成一个自定义的组件,插入到自己的项目里面就行了

结语

这个文章还没写完,因为码仔还没讲组件的所有需求全部写完,需求写完了就会将页面组件进行打包,然后放到码云上,十分感谢组件作者的开源,salute!