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

原创

工具人

发布于 2022-12-13 10:42:39

8070

发布于 2022-12-13 10:42:39

文章被收录于专栏：中后台可视化开发设计与实现中后台可视化开发设计与实现

主要能力

以可视化方式在线开发中后台类纯前端（react版）系统。能够高效（高效高效高效）开发完整的前端业务（pc 中后台类）系统（包括页面创建设计、路由、接口调用、自定义组件...）

以开发者视角方式生成代码，每一行都是有用并且可以读的懂的代码，react项目，几乎没有学习成本

源码任意下载，没有条条框框束缚，随便拿捏

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

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

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

可视化开发

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

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

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

而页面状态的管理，在 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 也更加方便快捷几分

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

重中之重 —— 页面母版

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

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

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

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

可以看到 * 即是可变的, 而其它的都是固定的，那么固定的部分即可以定义为一个母版，

而且在设计母版时我们即可以定义自己的风格，而创建好一个母版，相关页面便可以在几分钟内完成完整的功能。从而实现 定制 & 高效

系统越有规则的设计，那么效率则会越高

如图我们这样简简单单便可以抽象出一个 CURD 母版

设计图

预览图

开发流程

分析需求，抽象出相关页面母版
配置项目母版（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 下是用于在线预览、而上面的代码会实际下载到相关项目中，所以我们下载的项目都是可以读的懂的代码，几乎与开发者编写无异