三步实现低代码框架之二 - 100 行代码实现原型

但是，作为个人业余爱好，要想快速实现一些概念原型，个人还是喜欢用 PHP。所以继续基于 PHP 语言做了一次探索，续上文内容。

这次偷懒，先引入了完整的 ThinkPHP 框架作为起步，前端使用百度的 AMIS ，做整合。100 行代码真的没有吹牛，但是整到这个程度只是开了个头，还不具备真正的实用价值。

这里想提醒自己的是，积木式或者模块化或者还原论的思维方式，有助于真正解决好问题，对应在商业角度的思考还要再深入些。

知识点

amis 的 service 组件 引入一个前端 SPA 路由解析库；route-recognizer ； thinkphp 的路由定义机制 ； amis 的 crud 组件 ；

路由定义

route/app.php

// 构建基于前端低代码框架下的UI自动生成接口
Route::post(/lc/build/table/:modelName, UIBuilder/table);
Route::get(/lc/data/table/:modelName, UIData/table);

控制器

app/controller/UIBuilderController.php

<!--?php

namespace appcontroller;

use appBaseController;
use appfeamisCrud;
use thinkhelperStr;

class UIBuilderController extends BaseController
{
    public function table($modelName)
    {
        $modelClass = \app\model\ . ucfirst($modelName);

        $model = new $modelClass(); /** @var 	hinkModel $model */
        $fields = $model--->db()->getFields();

        $view = new Crud();
        $view->api = url(/lc/data/table/ . $modelName)->suffix(false)->build();

        // TODO 调整 DAO 层和 ViewModel 层分工，然后从 ViewModel 取相关数据
        $view->columns = [];
        foreach ($fields as $field) {
            $view->columns[] = [
                name => $field[name],
                label => Str::title(str_replace(_,  , $field[name])),
            ];
        }

        return $this->toJson(0, $view);
    }

}

app/controller/UIDataController.php

<!--?php

namespace appcontroller;

use appBaseController;
use appfeamisCrud;
use thinkhelperStr;

class UIDataController extends BaseController
{
    public function table($modelName)
    {
        $modelClass = \app\model\ . ucfirst($modelName);

        $model = new $modelClass(); /** @var 	hinkModel $model */

        // TODO 实现按条件查询及分页
        $rows = $model--->select();

        $totalCount = 2104;

        return $this->dataToJson($rows, $totalCount);
    }

    protected function dataToJson($rows, $totalCount)
    {
        return $this->toJson(0, [
            items => $rows,
            total => $totalCount,
        ]);
    }
}

编写脚本自动生成 DB Model

工具化思维，代码详见代码仓库。

前端入口

<script type="text/javascript">
    (function () {
        var router = new RouteRecognizer();
        router.add([{
            path: "/table/:model/*pathVar",
            handler: function (args) {
                console.log(default handler, args)
            }
        }]);

        var hash = window.location.hash.split(#)[1];

        var result = router.recognize(hash);
        var defaultModel = Project;
        var currentModel = (result.length > 0) ? result[0].params.model : defaultModel;
        var schemaApi = "{:url(/lc/build/table/:model)->suffix(false)}".replace(/:w+/g, function(model) {
            return currentModel;
        });

        let amis = amisRequire(amis/embed);
        // 通过替换下面这个配置来生成不同页面
        let amisJSON = {
            type: page,
            title: 数据管理,
            body: {
                type: service,
                schemaApi: schemaApi,
            },
        };
        let amisScoped = amis.embed(#root, amisJSON, {}, {
            theme: cxd
        });
    })();
</script>

完整代码：