低代码 系列 —— 中后台集成低代码预研

  • 低代码 系列 —— 中后台集成低代码预研已关闭评论
  • 116 次浏览
  • A+
所属分类:Web前端
摘要

其他章节请看:低代码 系列笔者目前维护一个 react 中后台系统(以 spug 为例),每次来了新的需求都需要前端人员重新开发。


其他章节请看:

低代码 系列

中后台集成低代码预研

背景

笔者目前维护一个 react 中后台系统(以 spug 为例),每次来了新的需求都需要前端人员重新开发。

前面我们已经对低代码有了一定的认识,如果能通过一个可视化的配置页面就能完成前端开发,将极大的提高前端(或后端)的效率。甚至能加快企业内部数字化(信息化)建设。

低代码介绍

低代码这一概念由 Forrester 在 2014 年正式提出。低代码,顾名思义,就是指开发者写很少的代码,通过低代码平台提供的界面、逻辑、对象、流程等可视化编排工具来完成大量的开发工作,降低软件开发中的不确定性和复杂性。实现软件的高效构建,无需重复传统的手动编程,同时兼顾业务人员和专业开发人员的更多参与。

零代码属于低代码平台的一种,不提供或者仅支持有限的编程扩展能力,技术门槛低,应用场景有限。

目标

最优 稍次
通过低代码平台配置系统所有前端页面 通过低代码平台配置系统大部分前端页面

预研产品

amis

amis 是百度的一个低代码前端框架,它使用 JSON 配置来生成页面,可以减少页面开发工作量,极大提升效率。开源免费,github Star 13.4k。

包含两个项目:amis 和 amis-editor(前些天已开源)。amis-editor 通过可视化形式生成页面,画原型的功夫就将前端页面给开发好了,最后生成该页面的配置(一个json),该配置放入 amis 解析出来就是一个前端页面。

amis 在线编辑器如下:
低代码 系列 —— 中后台集成低代码预研

Tip: amis 更过介绍请看这里amis api

爱速搭

爱速搭是百度智能云推出的低代码开发平台,它灵活性强,对开发者友好,在百度内部大规模使用,有超过 4w 内部页面是基于它制作的,是百度内部中台系统的核心基础设施。支持私有部署,收费

Tip: amis 是爱速搭团队开源的前端低代码框架,爱速搭应用中的页面都是基于 amis 渲染的,同时爱速搭平台自身的绝大部分页面也是基于 amis 开发 —— 爱速搭与amis

lowcode-engine

阿里低代码引擎(lowcode-engine)是一款为低代码平台开发者提供的,具备强大定制扩展能力的低代码设计器研发框架。免费

低代码 系列 —— 中后台集成低代码预研

Tip: 前面笔者也稍微实现了一个简单的可视化编辑器,有些麻烦,也有很多不足。真实场景倾向使用成熟的编辑器

钉钉宜搭

钉钉宜搭是阿里巴巴自研的低代码应用开发平台,基于阿里云的云基础设施和钉钉的企业数字化操作系统,为每个组织提供低门槛、高效率的数字化业务应用生产新模式。在宜搭上生产的每个应用天然具备互联互通、数据驱动、安全可控的特点。收费

在宜搭模版市场提供了一些免费应用模版,只需选择一个模版修改个别文案,一分钟就能搭建一款专属应用

方案概要

市面上确实存在帮助企业加快数字化建设的低代码平台,通过该平台能较快的搭建各种系统,但通常是收费的。

通过各类低代码产品的预研,也结合笔者当前工作需求:免费内网部署灵活)。目标求其次:通过低代码平台配置系统大部分前端页面。

方案筛选:

  • amis vs 爱速搭:amis 免费
  • amis vs lowcode-engine: amis 更全,包含编辑器和渲染器(解析 json 成前端页面),而 lowcode-engine 只是一个编辑器。倘若需要自建一个低代码平台, lowcode-engine 是一个不错的选择

最终方案:中后台系统(spug) + amis + amis-editor(开源、免费)。就像这样:

graph LR A[[amis editor]]-- 配置页面生成 --> B{{json}}-- 传输 --> C[[amis]] -- 解析JSON渲染 --> 页面
  • amis-editor 配置页面,生成 json
  • amis 通过 json 渲染出页面
  • spug 集成 amis

方案可行性

通过 amis-editor 可视化操作快速创建页面,然后将配置放入 amis 中解析,实现大部分前端页面的可视化生成。

接口数据

本地启动一个 node 服务,用于模拟接口数据。

使用其他服务也可以,只要发送请求能返回数据(数据参考 amis 官网,直接使用 amis 官网的接口报跨域失败)。就像这样:
低代码 系列 —— 中后台集成低代码预研

node 服务

初始化项目 local-mock:

$ mkdir local-mock $ cd local-mock // 初始化项目 $ npm init -y 

修改如下 package.json:

{   "name": "local-mock",   "version": "1.0.0",   "description": "",   "main": "index.js",   "scripts": {     "test": "echo "Error: no test specified" && exit 1"   },   "keywords": [],   "author": "",   "license": "ISC",   "dependencies": {     "body-parser": "^1.20.2",     "cookie-parser": "^1.4.6",     "cors": "^2.8.5",     "express": "^4.18.2"   },   "devDependencies": {     "nodemon": "^2.0.22"   } } 

新建 node.js(注:允许来自 http://localhost 的跨域请求):

// node.js  var express = require('express'); var app = express();  // 跨域参考:https://blog.csdn.net/gdutRex/article/details/103636581 var allowCors = function (req, res, next) {     // 注:笔者使用 `*` 仍报跨域问题,修改为请求地址(`http://localhost`)即可。     res.header('Access-Control-Allow-Origin', 'http://localhost');     res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');     res.header('Access-Control-Allow-Headers', 'Content-Type,lang,sfopenreferer ');     res.header('Access-Control-Allow-Credentials', 'true');     next(); };  //使用跨域中间件 app.use(allowCors);  // mock数据来自 amis 官网示例:https://aisuda.bce.baidu.com/amis/zh-CN/components/crud const data1 = {"status":0,"msg":"ok","data":{"count":171,"rows":[{"engine":"Gecko - tuhzbk","browser":"Camino 1.0","platform":"OSX.2+","version":"1.8","grade":"A","id":11},{"engine":"Gecko - aias9l","browser":"Camino 1.5","platform":"OSX.3+","version":"1.8","grade":"A","id":12},{"engine":"Gecko - s72lo","browser":"Netscape 7.2","platform":"Win 95+ / Mac OS 8.6-9.2","version":"1.7","grade":"A","id":13},{"engine":"Gecko - 1uegwbc","browser":"Netscape Browser 8","platform":"Win 98SE+","version":"1.7","grade":"A","id":14},{"engine":"Gecko - tjtajk","browser":"Netscape Navigator 9","platform":"Win 98+ / OSX.2+","version":"1.8","grade":"A","id":15},{"engine":"Gecko - ux0rsf","browser":"Mozilla 1.0","platform":"Win 95+ / OSX.1+","version":"1","grade":"A","id":16},{"engine":"Gecko - a3ae5r","browser":"Mozilla 1.1","platform":"Win 95+ / OSX.1+","version":"1.1","grade":"A","id":17},{"engine":"Gecko - 55daeh","browser":"Mozilla 1.2","platform":"Win 95+ / OSX.1+","version":"1.2","grade":"A","id":18},{"engine":"Gecko - eh2p99","browser":"Mozilla 1.3","platform":"Win 95+ / OSX.1+","version":"1.3","grade":"A","id":19},{"engine":"Gecko - f6yo9k","browser":"Mozilla 1.4","platform":"Win 95+ / OSX.1+","version":"1.4","grade":"A","id":20}]}} const data2 = { "status": 0, "msg": "ok" }  // 查询 app.get('/amis/api/mock2/', function (req, res) {     res.end(JSON.stringify(data1)); })  // 新增 app.post('/amis/api/mock2/', function (req, res) {     res.end(JSON.stringify(data2)); })  // 监听3000端口 var server = app.listen(3020, function () {     console.log('listening at =====> http://127.0.0.1:3020...'); }); 

编辑器

下载 amis-editor-demo,通过 npm i 安装依赖,然后 npm run dev 本地启动编辑器:

Administrator@3L-WK-10 MINGW64 /e/amis-editor-demo-master (master) $ npm run dev  > [email protected] dev E:amis-editor-demo-master > amis dev                                _/     _/_/_/  _/_/_/  _/_/          _/_/_/  _/    _/  _/    _/    _/  _/  _/_/ _/    _/  _/    _/    _/  _/      _/_/  _/_/_/  _/    _/    _/  _/  _/_/_/   当前版本:v3.1.8.  - [amis]开启调试模式... <i> [webpack-dev-middleware] wait until bundle finished assets by path *.js 66.8 MiB   assets by chunk 28.6 MiB (id hint: vendors) 53 assets   + 61 assets assets by info 4.13 MiB [immutable]   assets by chunk 2.92 MiB (auxiliary name: editor) 17 assets   + 5 assets assets by path *.css 5.07 MiB   assets by chunk 224 KiB (id hint: vendors) 2 assets   asset index.css 2.98 MiB [emitted] (name: index)   asset editor.css 1.87 MiB [emitted] (name: editor) assets by path *.html 1.31 KiB   asset editor.html 674 bytes [emitted]   asset index.html 672 bytes [emitted] Entrypoint index 13.7 MiB (4.06 MiB) = index.css 2.98 MiB index.js 10.7 MiB 21 auxiliary assets Entrypoint editor 12.6 MiB (2.92 MiB) = editor.css 1.87 MiB editor.js 10.8 MiB 17 auxiliary assets runtime modules 1.06 MiB 652 modules orphan modules 3.34 MiB (javascript) 4.13 MiB (asset) [orphan] 106 modules javascript modules 31.1 MiB   modules by path ./node_modules/ 31.1 MiB 3639 modules   modules by path ./src/ 38.4 KiB 22 modules css modules 3.15 MiB   modules by path ./node_modules/monaco-editor/esm/vs/ 138 KiB 68 modules   modules by path ./node_modules/amis/ 2.65 MiB 3 modules   modules by path ./node_modules/@fortawesome/fontawesome-free/css/*.css 113 KiB 2 modules   + 3 modules json modules 1.93 MiB   ./node_modules/amis/schema.json 1.9 MiB [built]    ./node_modules/entities/lib/maps/entities.json 28.4 KiB [built]  webpack 5.76.3 compiled successfully in 37081 ms √ [amis]调试模式已开启! > Listening at http://localhost:80  当前运行脚本:  http://localhost:80/index.js 当前运行样式[可能不存在]: http://localhost:80/index.css (node:10788) UnhandledPromiseRejectionWarning: Error: Exited with code 4294967295 ... 

输出有点错误,不管它,浏览器访问 http://localhost:80 即可进入编辑器页面。

下面笔者快速演示配置一个有增加删除编辑查询的页面。就像这样:

低代码 系列 —— 中后台集成低代码预研

配置过程如下:
低代码 系列 —— 中后台集成低代码预研

最后生成的配置在这里(也可直接修改):
低代码 系列 —— 中后台集成低代码预研

Tip:除了编辑的url需要修改 json,其他的都可以在编辑器右侧中配置。

:目前笔者将 amis-editor 作为一个单独的项目运行,通过 npm run build 打包,打包后的 html 中出现以 https://aisuda.github.io/amis-editor-demo/demo/ 开头的资源,引入内网是不行的,于是更改 assetsPublicPath: './' 即可指向引入打包出来的资源。目前还是有点小图标没有出来,可能需要更改某些地方。

// amis.config.js build: {     entry: {        index: './src/index.tsx',       editor:  './src/mobile.tsx',     },     NODE_ENV: 'production',     assetsRoot: resolve('./demo'), // 打包后的文件绝对路径(物理路径)     // assetsPublicPath: 'https://aisuda.github.io/amis-editor-demo/demo/', // 设置静态资源的引用路径(根域名+路径)     assetsPublicPath: './', // 设置静态资源的引用路径(根域名+路径)     ... } 

中后台集成 amis

引入 amis

下载sdk.tar.gz 解压后把 skd 文件夹放入 spug 的 public 中,然后在单页面中引入。就像这样:

// spug/public.index.html  <!-- 引入 amis 的包 > <link rel="stylesheet" href="sdk/sdk.css" /> <link rel="stylesheet" href="sdk/helper.css" /> <link rel="stylesheet" href="sdk/iconfont.css" />  <script src="sdk/sdk.js"></script>  ... <title>Spug</title> 

Tip:amis 还提供了 react 的方式,也就是通过 npm 来使用,但公司分配的机器不太好,构建项目报内存不够(JavaScript heap out of memory),多次尝试(比如:在 linux(node18)中运行、调整内存大小 --max-old-space-size、win7 中安装 node14/16)也未解决,只能选用 sdk 的方式。

新建页面

新建页面 amis A,用于将 amis-editor 的配置 json 渲染出前端页面。相关代码有:

  • store.js - 取得 amis-editor 的配置。这里使用 mockjs 模拟,数据就是上文编辑器创建的页面。
// spugsrcpagesamisstore.js import { observable,} from 'mobx'; import http from 'libs/http';  class Store {     // 表格数据     @observable config = {};     @observable isFetching = false;      fetchRecords = (path) => {         http.get(`/api${path}/`)             .then(res => {                 // {type: "page", title: "Hello world", body: Array(2), id: "u:7b55b5793e16", asideResizor: false, …}                 console.log('res', res)                 this.config = res;             })             .finally(() => this.isFetching = false)     }; }  export default new Store() 
  • index.js - 根据配置渲染页面,也就是 amis 解析 json:
// spugsrcpagesamisindex.js import React from 'react'; import { observer } from 'mobx-react'; import axios from 'axios';  import store from './store'; import _ from 'lodash';  window.enableAMISDebug = true // amis 环境配置 const env = {     theme: 'cxd',     // 下面三个接口必须实现     fetcher: ({         url, // 接口地址         method, // 请求方法 get、post、put、delete         data, // 请求数据         responseType,         config, // 其他配置         headers // 请求头     }) => {         config = config || {};         config.withCredentials = true;         responseType && (config.responseType = responseType);          if (config.cancelExecutor) {             config.cancelToken = new (axios).CancelToken(                 config.cancelExecutor             );         }          config.headers = headers || {};          if (method !== 'post' && method !== 'put' && method !== 'patch') {             if (data) {                 config.params = data;             }             return (axios)[method](url, config);         } else if (data && data instanceof FormData) {             config.headers = config.headers || {};             config.headers['Content-Type'] = 'multipart/form-data';         } else if (             data &&             typeof data !== 'string' &&             !(data instanceof Blob) &&             !(data instanceof ArrayBuffer)         ) {             data = JSON.stringify(data);             config.headers = config.headers || {};             config.headers['Content-Type'] = 'application/json';         }          return (axios)[method](url, data, config);     },     isCancel: (value) => {         console.log('isCancel')     },     copy: (content) => {         console.log('copy')     } };  function updateAmis(...options) {     if (!document.getElementById('amisbox')) {         return     }     let amis = window.amisRequire('amis/embed');     let amisScoped = amis.embed('#amisbox', ...options); } @observer class AMISComponent extends React.Component {     componentDidMount() {         const path = this.props.page         // 请求对应页面的配置         store.fetchRecords(path)     }      render() {         // 根据配置文件重新渲染页面         // 注:使用 lodash 的深拷贝不起作用         updateAmis(JSON.parse(JSON.stringify(store.config)), {}, env)         return <div id="amisbox"></div>      } }  class APP extends React.Component {     componentWillUnmount() {         // 卸载时需要清空,否则切换页面还会显示上个页面         store.config = {};     }     render() {         return (             <>                 <AMISComponent page={this.props.location.pathname} />             </>         );     } } export default APP; 

:为了让配置变更时 amis 能重新渲染页面,笔者使用了一个 hack 的方式:JSON.parse(JSON.stringify(store.config))。其他方法都不行(curd 存在显示问题):Object.assign(store.config)、_.cloneDeep(store.config)、{...store.config}

Tip: 这段代码参考 react 引入方式的 https://github.com/aisuda/amis-react-starter/blob/main/src/App.tsx。例子中是 typescript 写法,对于暂时不支持 ts 的项目,直接将类型去除即可使用。就像这样:

config.cancelToken = new (axios as any).CancelToken(     config.cancelExecutor ); 
// 去除 ts 的类型 config.cancelToken = new (axios).CancelToken(     config.cancelExecutor ); 
import React from 'react'; import { observer } from 'mobx-react'; import axios from 'axios';  import { render as renderAmis, ToastComponent, AlertComponent } from 'amis'; import store from './store'; import _ from 'lodash';  // amis 环境配置 const env = {   theme: 'cxd',   // 下面三个接口必须实现   fetcher: ({     url, // 接口地址     method, // 请求方法 get、post、put、delete     data, // 请求数据     responseType,     config, // 其他配置     headers // 请求头   }) => {     console.log('fetcher', method)     config = config || {};     config.withCredentials = true;     responseType && (config.responseType = responseType);      if (config.cancelExecutor) {       config.cancelToken = new (axios).CancelToken(         config.cancelExecutor       );     }      config.headers = headers || {};      if (method !== 'post' && method !== 'put' && method !== 'patch') {       if (data) {         config.params = data;       }       return (axios)[method](url, config);     } else if (data && data instanceof FormData) {       config.headers = config.headers || {};       config.headers['Content-Type'] = 'multipart/form-data';     } else if (       data &&       typeof data !== 'string' &&       !(data instanceof Blob) &&       !(data instanceof ArrayBuffer)     ) {       data = JSON.stringify(data);       config.headers = config.headers || {};       config.headers['Content-Type'] = 'application/json';     }      return (axios)[method](url, data, config);   },   isCancel: (value) => {     console.log('isCancel')   },   copy: (content) => {     console.log('copy')   } };  @observer class AMISComponent extends React.Component {   componentDidMount() {     const path = this.props.page     // 请求对应页面的配置     store.fetchRecords(path)   }    render() {     return renderAmis(       // store.config,       // 使用 _.cloneDeep() 报错       JSON.parse(JSON.stringify(store.config)),       {         // props...       },       env     );   } }  class APP extends React.Component {   componentWillUnmount() {     // 卸载时需要清空,否则切换页面还会显示上个页面     store.config = {};   }   render() {     return (       <>         <ToastComponent key="toast" position={'top-right'} />         <AlertComponent key="alert" />         <AMISComponent page={this.props.location.pathname} />       </>     );   } }  export default APP; 
放行 amis 接口

:spug 中 axios 被封装到 http.js 中,虽然在 amis 中通过 axios 发送请求,还是会走 http.js 中的拦截器(handleResponse)

由于 amis 的数据格式和 spug 的不同,这里暂时约定有 flag:amis 的是 amis 的接口,数据不做处理,直接放行。

// http.js  import http from 'axios' ... // response处理 function handleResponse(response) {   // 由于 amis 的数据格式和 spug 的不同,这里暂时约定有 flag:amis(例如:{"flag": "amis", "status": 0, "msg": "ok" }) 的是amis 的接口,数据不做处理,直接放行   const isAmis = response.data.flag === 'amis'   if(isAmis){     return Promise.resolve(response.data)   } 

Tip:amis 所需的数据格式和 spug 的不同,一种方法是前端来调整。建议让后端返回 amis 所需的数据格式,因为这是 amis 的页面,是新功能。

node 服务

现在spug的服务接口是 3010,修改 node 服务允许其跨域:

var allowCors = function (req, res, next) {     // 注:笔者使用 `*` 仍报跨域问题,修改为请求地址(`http://localhost`)即可。     res.header('Access-Control-Allow-Origin', 'http://localhost:3010');     ...     next(); }; 

Tip:使用 yapi(docker 方式安装即可) 非常方便模拟数据,也无需处理跨域。

效果

amis-editor 集成到 spug 的效果如下:
低代码 系列 —— 中后台集成低代码预研

自定义组件

amis-editor 也提供了自定义组件,笔者参考自定义组件-a新建一个自定义组件-b:

低代码 系列 —— 中后台集成低代码预研

实现很简单,就是复制一份以下文件:

-   ./renderer/MyRenderer.tsx -   ./editor/MyRenderer.tsx 

spug 中的 amis 集成该自定义组件。可以这样做:

// 自定义组件,props 中可以拿到配置中的所有参数,比如 props.label 是 'Name' function CustomComponent(props) {     const { target } = props;     let dom = React.useRef(null);     React.useEffect(function () {         // 从这里开始写自定义代码,dom.current 就是新创建的 dom 节点         // 可以基于这个 dom 节点对接任意 JavaScript 框架,比如 jQuery/Vue 等         dom.current.innerHTML = `<p>Hello {target}! @amis-editor</p>`         // 而 props 中能拿到这个     });     return React.createElement('div', {         ref: dom     }); } 

方案总结

中台系统 + amis + amis-editor 此方案能通过可视化的配置实现前端页面的开发,实现所见即所得的效果。

graph LR A[[amis editor]]-- 配置页面生成 --> B{{json}}-- 传输 --> C[[amis]] -- 解析JSON渲染 --> 页面

对于常用的页面只需要通过可视化配置界面就能完成前端开发。

其他章节请看:

低代码 系列