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

本文链接：https://blog.csdn.net/qq_17324713/article/details/113635945

来自客户的项目需求

有一天，有位客户和我说，他想做一个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前后的继承关系对比如下：