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

Posted on by hackdl

其他章节请看：

低代码 系列

中后台集成低代码预研

背景

笔者目前维护一个 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

> amis-editor-demo@1.0.0 dev E:amis-editor-demo-master
> amis dev


                             _/
    _/_/_/  _/_/_/  _/_/          _/_/_/
 _/    _/  _/    _/    _/  _/  _/_/
_/    _/  _/    _/    _/  _/      _/_/
 _/_/_/  _/    _/    _/  _/  _/_/_/


当前版本：v3.1.8.

- [amis]开启调试模式...
 [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] [code generated]
  ./node_modules/entities/lib/maps/entities.json 28.4 KiB [built] [code generated]
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

 B{{json}}-- 传输 --> C[[amis]] -- 解析JSON渲染 --> 页面

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

机房租用，北京机房租用，IDC机房托管， http://www.e1idc.net

服务器托管，北京服务器托管，服务器租用，机房机柜带宽租用

服务器托管

咨询：董先生

电话13051898268 QQ/微信93663045！

上一篇:
下一篇: