背景

我的强项是后端开发,很少涉及前端开发,一个很重要的原因是前端布局太妖,要实现一个居中需要各种奇技淫巧,而且每个浏览器实现还不一样,前端的布局就像谜一样,你都不知道为啥就可以了,也不知道为啥就不行。直到Flex布局的出现前端的布局终于有点章法了,第一次接触Flex布局是从阮一峰的博客Flex 布局教程,阮一峰写博客的能力确实厉害,通俗易懂又直击要害,建议想要入门Flex都去拜读一下。那么写这篇文章的目的是从一个后端的角度去看Flex布局,如果你看完阮一峰的博客后仍然有一些疑问,那么可以读一读这篇文章。

Flex基本概念

  • 容器和项目

Flex布局包括容器(flex container)和项目(flex item),比如下面这段代码

<div class="content">
    <div class="block"></div>
    <div class="block"></div>
</div>

content这个div就是容器,block的div就是项目

  • 两轴两个方向

Flex核心就是靠两根轴进行布局的调整,其实就是水平和垂直两个方向,只不过在Flex中水平方向称为主轴,垂直方向称为交叉轴,每个方向各有start center end三个方位,其实就是左边中间和右边三个方位。

Read the rest of this entry

介绍

grapesjs是一个开源的网页设计器,你可以理解为在线低配版Dreamweaver,和Dreamweaver不同的是,grapesjs可以灵活的进行二次开发,实际上grapesjs只是构建了设计器最基础的部分,没有二次开发grapesjs也没有意义,如果你恰好有以下需求,那么grapesjs将非常适合你
  • 页面在线设计编辑,并且能自定义组件
  • 可以导出源码
  • 提供属性配置
  • 灵活的二次开发机制

使用

grapesjs使用方法很简单,如果是html页面,可以直接通过导入js和css即可

Read the rest of this entry

背景

长久以来都想找一个画流程图的工具,有几个需求,可以将组件拖到绘图面板中,并且组件间可以通过线进行关联,在属性面板可以配置组件的属性,这里的组件可能是html的组件,也可能是一个功能,为什么需要这么一个东西呢?如果有这东西,很多想法就可以实现,比如

  • 工作流
  • 服务编排

但一直找不到满意的框架,很大原因就是这些框架颜值太低,直到遇到NodeRed,NodeRed是物联网开发工具,提供可视化界面通过配置就能实现物联网程序的开发,让我感兴趣的是NodeRed可视化界面,颜值高,操作便利,简洁不花哨

因为NodeRed是开源的,也花了一段时间去研究他的代码,想把可视化工具抽离出为我所用,种种原因失败了,既然抽离不出来,能不能自己实现一个?之前从来没想过自己开发一个,但细想觉得并不难实现,可视化界面核心有两点

Read the rest of this entry