前端业务系统开发神器——定制化业务系统不过谈笑间，平平无奇在线开发纯前端业务系统设计

主要能力

以可视化方式在线开发中后台类纯前端（react版）系统。 能够高效（高效高效高效）开发完整的前端业务（pc 中后台类）系统（包括页面创建设计、路由、接口调用、自定义组件...）
以开发者视角方式生成代码，每一行都是有用并且可以读的懂的代码，react项目，几乎没有学习成本
源码任意下载，没有条条框框束缚，随便拿捏

当然也可以滚动到下面的 在线开发 直接查看从 0 到 1 的开发视频来了解全貌

简易介绍

• 由服务器中预置基本脚手架（如：create-react-app 创建）。 而用户创建项目时可以选择使用此作为即将创建项目的基本脚手架，并且可以配置全局数据、全局样式、http库（axios）等
• 在进行页面的开发时，会将开发中所拖拽的页面菜单结构生成相应路由写入到当前脚手架中、并生成相关页面以及样式文件和相关http请求文件
• 而且项目中使用到的自定义组件也会被下载到项目之中，并将其使用到的node依赖写入到package.json之中，成为完整的项目
• 并可以直接下载到本地运行。

通过一段简短的 gif 来介绍一下完成的项目，建议下载一个 demo 源码感受一下更容易体会

intro.gif

可视化开发

visual.gif

可视化开发更是提升效率的重要手段。如图，只需要通过可视化方式排列好结构即可快速组织好页面，当前我们设计的方式略微抽象，因为我们定向是业务列系统，所以对自由布局不是那么敏感，而设计成结构更加容易操作直观以及展示更多的内容。当然按住 ` 键更是可以即时预览。

但是只有结构并不能成为完整的功能页面，所以还需要组件的联动、元素权限、状态的管理、接口调用等

从生成的代码图中可以看出，组件的联动、元素权限由框架提供了支持，具体可以见 文档

action.png

而页面状态的管理，在 react 中是用 useState 来定义，所以如图我们提供可以定义的功能并可以访问它

//如定义个变量 loading, 初始值为 true，那么我们会将变量挂载到 $var上，为了方便管理以及提示
$var.loading //访问
$set('loading', true) //重新设值

//而在生成代码时会被还原成正常的 react 代码 
const [loading, setLoading] = useState(false) //定义
loading //访问
setLoading(true) //重新设值

同样接口也可以创建后并访问

/*定义一个查询接口名称为 search, 路径为 /user/select (因为baseURL是统一的所以全局中配置了)，
method 为 post，那么我们会将接口挂载到 $api 上，为了方便管理以及提示*/
$api.search().then(r => {}) //调用

//而生成的代码如下
class pageNameService { //定义
    search (params) {
        return Http.post(`/user/select`, params)
    }
}
export default new pageNameService()

pageNameService.search({id: 1}).then(r => {}) //调用

如此方案，我们通过将定义的挂载到我们的虚拟对象上通过模拟方案来执行代码，实现预览，并且在生成代码时能够生成开发者容易看懂的代码
并且以 $ 开头，都会提供提示，使得本来并不多的 api 也更加方便快捷几分

tips.gif

如图 并且绝大多数属性的 label 都可以点击并提供说明又或直接可使用的代码，随处可见的智能提示使得学习与开发成本几乎为零

重中之重 —— 页面母版

页面母版是能够 定制 & 高效 开发的重要方案

在创建用户的时候，我们会为其生成了项目母版（基本脚手架与一些基本样式）与页面母版，而其中的页面母版正是抽象的增删改查结构与逻辑。

假设我们有一个系统，而系统中有两个或以上的页面中有如下功能：

1. 按 *、*、* 等查询，接口为post(*/search, { any })
2. 可以创建或添加 *、*、*、*等数据，接口为post(*/insertOrUpdate, { any })
3. 可以删除单条数据，并且在删除时会提示确认弹窗等，接口为post(*/delete, id)
4. 可以删除选中的多条数据，并且在删除时会提示确认弹窗等，接口为post(*/deletes, [])
5. ...

可以看到 * 即是可变的, 而其它的都是固定的，那么固定的部分即可以定义为一个母版，
而且在设计母版时我们即可以定义自己的风格，而创建好一个母版，相关页面便可以在几分钟内完成完整的功能。从而实现 定制 & 高效
系统越有规则的设计，那么效率则会越高
如图我们这样简简单单便可以抽象出一个 CURD 母版

设计页面图

plate_design.png

预览页面图

plate_preview.png

开发流程

• 分析需求，抽象出相关页面母版
• 配置项目母版（axios、freedomen(上传路径、校验等)、全局样式）
• 创建项目并使用此项目母版
• 调试登录页面（主要调试与服务器接通、token的配置）
• 创建页面 & 调整路由
• 预览 & 测试
• 下载到本地 (npm i & npm start / npm run build)

自由的自定义组件

自定义组件是系统的扩展能力的重要方案。系统内基本的是 antd 的一些组件，也许你会用到富文本、图表、地图等等系统内没有的组件，那么我们可以将自己写的组件上传并使用，如：

//一个按钮
import React form 'react';

export default function MyButton(props) {
    return <div onClick={props.onClick}>
        {props.value}
    </div>
}
//又如使用三方其它组件，那么我们在上传的时候填写相关依赖即可
import React form 'react';
import { QRCodeSVG } from 'qrcode.react';

export default function MyQrCode({
    value, className, style, config = {}
}) {
    return <QRCodeSVG
        value={value}
        style={style}
        className={className}
        {...config}
    />
}

那么我们可以将其 build 到当前文件下的 dist 文件夹下，然后将当前代码的文件夹上传，dist 下是用于在线预览、而上面的代码会实际下载到相关项目中，所以我们下载的项目都是可以读的懂的代码，几乎与开发者编写无异

在线开发

我们简短的视频实打实的来在线开发一个完整的系统，来感受一下效率以及是否适合你吧 ~！

light2f 中后台系统前端在线开发视频链接

网站地址

使用邮箱注册后即可以免费使用 & 下载，下载后更可以任意拿捏

点此传送入口，欢迎骚扰体验，大爷快来玩啊 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

自言自语

没错，网站的UI很丑陋，看着不够高端大气上档次，因为这还不是我关注的焦点，但是并不影响他能够高效的开发出大漂亮的项目

接口还要手动创建，我觉得应该要从 swagger 等文档直接导入

要是可以按照设计图自动生成那应该还会更快乐吧

脚手架还不能用自己搭建的感觉不够自由

下载后手动修改又新加功能，建议使用git，把网站当作一位开发者，修改的人也是开发者，二者 merge 一下子

害怕 99% 都很简单，但那 1% 无法实现或成本大于 99%。如果那 1% 是正常 react 开发者可以完成，那成本依然是 1%，因为他就是一个正常的 react 项目

框架设计是使用 antd 的组件，其表单和表格与框架设计兼容并不友好，性能略微低于直接使用 antd。需要重新设计一个表单&表格来提升总体性能

快速实践验证在线开发可行性，框架与设计的用法上还是有巨大提升空间，使性能更高并且开发上更加智能，提炼 & 共享

如何才能最快速出一个产品来验证自己的想法呢，也许可视化方案是要的走的路。如果年龄大了记忆力差了，会不会不再喜欢炫酷，更喜欢傻瓜的方式了