郑剑峰的个人博客

背景

我的强项是后端开发，很少涉及前端开发，一个很重要的原因是前端布局太妖，要实现一个居中需要各种奇技淫巧，而且每个浏览器实现还不一样，前端的布局就像谜一样，你都不知道为啥就可以了，也不知道为啥就不行。直到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

flex

介绍

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