做一个广告业务后台需要几天，5天吗？不，用PhalApi开源框架，1天就能做好

来自客户的项目需求

有一天，有位客户和我说，他想做一个H5激励视频广告业务后台，经过沟通，梳理的后台需求如下：

【H5激励视频广告】

1、一套H5激励视频广告接口

1）获取广告接口，进行展示，提供给客户端开发者用

参考：http://developers.adnet.qq.com/doc/ios/union/union_h5_reward

2）事件上报接口

展示成功、广告跳转、浏览器关闭、视频插放开始、视频插放完成等

3）回调接口，提供给流量商那边回调数据

接口可参考：https://ad.68mob.com/doc/api2.0.html

2、管理后台

1）接口密钥分配，针对不同的流量商进行后台生成，可删除

2）统计报表，个展示数量、点击数量、回调能知道我们展示多少点击多少点击率多少

3）广告管理，上/删视频素材上/删视频标题上/删行动语上/删封面上/删 logo 上/删落地页链接

4）视频、图片等素材存在服务器，不使用云存储

3、其他

1）交付全部源代码

2）进行线上安装与部署

3）提供在线接口文档

4）配合协作第一位开发者、第一位流量商接入使用

5）输出产品原型PRD

就其中后台的开发任务，可以基于PhalApi开源框架的portal运营平台进行快速开发，估计可以从5天的时间缩减成1天的开发时间。

广告业务后台的PRD如下，有：

后台登录
广告管理
密钥管理
API接口

下面结合这个真实案例，介绍PhalApi开源框架，如何帮助项目进行快速开发。

PhalApi开源框架的portal运营后台

PhalApi的Portal运营平台，是提供给运营团队使用的管理后台。从PhalApi 2.12.0 及以上版本提供，可以非常方便进行数据和业务上的管理。

介绍

运营平台有以下几个特点：

免费使用，可放心用于商业项目开发
基于layuiminiLAYUI MINI 后台管理模板和layui经典模块化前端框架开发运营平台界面，让后端开发也能轻松入手
提供与后面界面配套的后台数据接口，基本不用写代码，就能实现后台数据的增删改查操作
可视化运营平台安装，安装后即可使用

在我们PhalApi官方文档也要相应的详细介绍。

对于本次广告业务后台，实现的效果截图如下。大家可以访问测试环境：

http://test.h5_video_ad.yesapi.net/portal/index.html#/page/ad/index.html

账号：admin，密码：123456

编辑页效果：

登录页面：

portal快速开发步骤

从底层数据库往前端页面倒推的方式，进行以下开发（你也可以反过来，从前端页面到数据库）。

后端PHP开发部分

首先，根据业务需求，创建数据库表，例如【广告管理】功能模块，需要以下字段：

广告标题
广告副标题
广告icon
视频素材
视频封面
按钮名称
落地页链接
状态

对应的SQL语句是：

CREATE TABLE `ad` (`id` int(11) NOT NULL AUTO_INCREMENT,`ad_title` varchar(500) DEFAULT '' COMMENT '广告标题',`ad_sub_title` varchar(500) DEFAULT '' COMMENT '广告副标题',`ad_icon` varchar(500) DEFAULT '',`add_time` datetime DEFAULT NULL,`ad_status` tinyint(4) DEFAULT '1' COMMENT '状态，1正常0关闭',`video_url` varchar(500) DEFAULT '' COMMENT '视频链接',`video_img` varchar(500) DEFAULT NULL COMMENT '视频封面',`btn_title` varchar(100) DEFAULT '' COMMENT '按钮名称',`download_url` varchar(500) DEFAULT '' COMMENT '落地页',PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8mb4;

然后，为广告创建对应的Model类，新建文件：./src/portal/Model/Ad.php ，添加以下基础的PHP代码，注意你的Model子类要继承DataModel，后面会有更详情地介绍。

<?php
namespace Portal\Model;use PhalApi\Model\DataModel;class Ad extends DataModel {public function getTableName($id) {return 'ad';}
}

接下来，为广告创建Api类，添加src/portal/Api/Ad.php文件，并放入以下PHP代码。注意Api子类需要继承DataApi，并且需要重载实现getDataModel()方法，在里面返回上面实现的广告Model类。

<?php
namespace Portal\Api;use Portal\Common\DataApi as Api;class Ad extends Api {        protected function getDataModel() {return new \Portal\Model\Ad();}}

至此，针对广告这一业务单元，后端开发已完成基础性的开发。

前端开发部分

接下来，进入前端的业务开发。

首先，把前端页面的示例目录./public/portal/page/phalapi-curd-table，复制一份到 ./public/portal/page/ad目录，里面会有三个HTML文件：

add.html 添加页面
edit.html 编辑页面
index.html 模块首页

但这时，页面还不会显示，需要再添加左侧菜单。在【菜单管理】中，把刚才复制的页面路径，放置到菜单链接中，即：page/ad/index.html，菜单标题为：广告管理。

刷新页面后，就可以看到菜单，并进行访问。

随后，前端只需要定制需要搜索的条件、需要展示的表格数据，以及需要调用的对应接口模块，剩下的由框架完成即可。例如模块列表首页，修改需要显示的表格数据，可以通过JS配置实现。修改./public/portal/page/ad/index.html 文件，

cols: [[{type: "checkbox", width: 50, fixed: "left"},{field: 'id', width: 80, title: 'ID', sort: true},{field: 'ad_title', minWidth: 50, title: '广告标题'},{field: 'ad_sub_title', minWidth: 50, title: '广告副标题'},{field: 'icon', minWidth: 50, align: 'center', templet: function (d) {//return '<a target="" href="/portal/page/stat/index.html?id='+d.id+'">查看统计</a>';return '<img src="'+d.ad_icon+'" height="28" alt="无法加载"/>';}, title: '广告icon', sort: false},{field: 'add_time', minWidth: 80, title: '添加时间', sort: true},{field: 'ad_status', minWidth: 50, align: 'center', templet: function (d) {if (d.ad_status == 0) {return '<span class="layui-badge layui-bg-red">关闭</span>';} else {return '<span class="layui-badge-rim">正常</span>';}}, title: '广告状态', sort: true},{field: 'id', minWidth: 50, align: 'center', templet: function (d) {//return '<a target="" href="/portal/page/stat/index.html?id='+d.id+'">查看统计</a>';return '<a target="_blank" href="/portal/index.html?id='+d.id+'#/page/stat/index.html">查看统计</a>';}, title: '统计', sort: true},{title: '操作', minWidth: 50, templet: '#currentTableBar', fixed: "right", align: "center"}]],

同时，修改指定调用的接口。

table.render({elem: '#currentTableId',url: '/?s=Portal.Ad.TableList', // 换成相应的运营平台接口

当数据库有测试数据后，刷新页面可以看到以下效果。

再调整添加数据页面的表单数据，修改./public/portal/page/ad/add.html文件，修改HTML，

<div class="layui-form layuimini-form"><div class="layui-form-item"><label class="layui-form-label required">广告标题</label><div class="layui-input-block"><input type="text" name="ad_title" lay-reqtext="广告标题不能为空" class="layui-input" lay-verify="required"></div></div><div class="layui-form-item layui-form-text"><label class="layui-form-label required">广告副标题</label><div class="layui-input-block"><input type="text" name="ad_sub_title" lay-reqtext="广告副标题不能为空" class="layui-input" lay-verify="required"></div></div><div class="layui-form-item"><label class="layui-form-label">广告icon</label><div class="layui-input-block"><button class="layui-btn"  id="uploadIcon">上传图片</button><br><img id="imgIcon" src="" alt=""><input type="hidden" name="ad_icon" value=""></div></div><div class="layui-form-item"><label class="layui-form-label">视频素材</label><div class="layui-input-block"><button class="layui-btn"  id="uploadVideo">上传视频</button><input type="text" name="video_url" class="layui-input" value=""></div></div><div class="layui-form-item"><label class="layui-form-label">视频封面</label><div class="layui-input-block"><button class="layui-btn"  id="uploadVideoImg">上传图片</button><br><img id="imgVideo" src="" alt=""><input type="hidden" name="video_img" value=""></div></div><div class="layui-form-item"><label class="layui-form-label">按钮名称</label><div class="layui-input-block"><input type="text" name="btn_title" value="" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">落地页链接</label><div class="layui-input-block"><input type="text" name="download_url" value="" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">状态</label><div class="layui-input-block"><input type="radio" name="ad_status" value="1" checked title="正常" ><input type="radio" name="ad_status" value="0" title="关闭" ></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="saveBtn">添加广告</button></div></div>
</div>

刷新后，添加广告的页面效果如下，

别忘了同步修改保存接口的地址，

upload.render({elem: '#uploadIcon',url: '/?s=Portal.Ad.upload' //必填项

到这里，添加广告的功能就实现了。编辑功能类似，由于还有文件上传的部分，所以还需要一些额外的代码开发。

以此类推，可以继续快速开发其他菜单模块，例如剩下的还有密钥管理、报表统计等。

PhalApi开源框架的DataModel数据模型介绍

为了进一步减少数据库操作的代码开发量，避免在开发者在Model子类重复编写代码实现基本的数据库操作。从PhalApi 2.12.0 及以上版本起，我们提供了PhalApi\Model\DataModel数据库数据基类。

如果你是初次使用PhalApi框架，建议在项目开发过程中全部的Model子类都继承于此PhalApi\Model\DataModel基类；如果你已经使用PhalApi框架开发有段时间，那么在新的Model或原有的Model子类也可以把原来继承于PhalApi\Model\NotORMModel基类调整成PhalApi\Model\DataModel，可能的影响是会存在函数名冲突。

使用DataModel前后的继承关系对比如下：

而最大的区别是，DataModel直接提供了对外可用的数据库操作接口，是开放式的；而NotORMModel是封闭式的，很多数据库操作都需要在NotORMModel内部先实现再提供编写好的接口给外部调用。

一键生成DataModel源代码

如果项目本来已经有数据库表，或者新项目时设计好了一批数据库表，这时，可以使用脚本./bin/phalapi_build_data_model.php迅速一键生成全部的DataModel源代码。

这将能极大提升开发的效率。

PhalApi开源框架的DataApi通用数据接口介绍

为了进一步实现接口低代码编程，为了能以更少的代码，实现更多的接口，满足更广业务需求，PhalApi结合多年的接口系统和项目开发经验，从PhalApi 2.13.0 版本起推出PhalApi\Api\DataApi通用数据接口。

它的特色在于，可以针对单个数据库表提供一套完整的、常用的、基本的数据接口，以自动完成对数据库表的CURD基本操作，避免重复接口开发。

DataApi有哪些接口？

如果需要实现对数据库表的数据管理，进行常见的增删改查操作，那么可以让你的Api接口类直接继承PhalApi\Api\DataApi基类。继承后便可自动拥有一套基本的数据接口。

目前有5个数据接口（后面会进一步扩展）：

创建新数据，{命名空间}.{接口类名}.CreateData
批量删除，{命名空间}.{接口类名}.DeleteDataIDs
获取一条数据，{命名空间}.{接口类名}.GetData
获取表格列表数据，{命名空间}.{接口类名}.TableList
更新数据，{命名空间}.{接口类名}.UpdateData

结合的力量，1+1 > 2

当我们把DataModel和DataApi相合时，就能快速完成后端的接口开发；当我们使用portal的HTML页面模板时，就能快速完成前端的基本开发；当我们把后端和前端进行结合时，在平时项目需求开发时，就能更快速地实现需要的功能和菜单模块。实现 1加1，大于2的效果。

如果需要进一步了解PhalApi开源框架的相关内容，可以查看官方文档，链接：http://docs.phalapi.net/#/v2.0/tutorial