VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > PHP >
  • 三步实现低代码框架之二 - 100 行代码实现原型

继续标题党哈。老习惯,自己吹过的牛就算含着泪也要实现,自从上次初步分析过 三步实现PHP低代码框架 (https://www.cnblogs.com/x3d/p/14748219.html) 后,其实这两个月也在团队内小范围试用一些产品,主要试用对象是 Erupt,基于 Java Spring Boot 构建的一款框架,从开发效率上看还是效果很明显的。低代码的低,强调的是要大幅减少代码,从这个角度对比市面上一些商业化产品来看,Erupt 还有很大提升空间,尤其没有整合工作流引擎,但是相比于市面上另外一派主打代码生成器的产品来说,体验已经好了太多太多。而且非常佩服作者的产品性思维能力,整合的东西扩展性非常强,使用这套框架实在是干活时的利器。

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

这次偷懒,先引入了完整的 ThinkPHP 框架作为起步,前端使用百度的 AMIS https://baidu.gitee.io/amis/zh-CN/components/ ,做整合。100 行代码真的没有吹牛,但是整到这个程度只是开了个头,还不具备真正的实用价值。

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

回到顶部

知识点

  • amis 的 service 组件 https://baidu.gitee.io/amis/zh-CN/components/service,支持动态渲染页面;
  • 引入一个前端 SPA 路由解析库;route-recognizer https://github.com/tildeio/route-recognizer ;
  • thinkphp 的路由定义机制 http://static.kancloud.cn/manual/thinkphp6_0/1037499 ;
  • amis 的 crud 组件 https://baidu.gitee.io/amis/zh-CN/components/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 app\controller;

use app\BaseController;
use app\fe\amis\Crud;
use think\helper\Str;

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

        $model = new $modelClass(); /** @var \think\Model $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 app\controller;

use app\BaseController;
use app\fe\amis\Crud;
use think\helper\Str;

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

        $model = new $modelClass(); /** @var \think\Model $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>

完整代码:https://gitee.com/web3d/lowcode-demo

本文来源:http://www.cnblogs.com/x3d/,转载请注明。

相关教程