繼續標題黨哈。老習慣，自己吹過的牛就算含着淚也要實現，自從上次初步分析過 三步實現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>