做一個廣告業務後臺需要幾天，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，後面會有更詳情地介紹。

<?phpnamespace 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類。

<?phpnamespace 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

本文分享自微信公衆號 - 小白開放平臺（yesapi）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。

做一個廣告業務後臺需要幾天，5天嗎？不，用PhalApi開源框架，1天就能做好

來自客戶的項目需求

PhalApi開源框架的portal運營後臺

portal快速開發步驟

後端PHP開發部分

前端開發部分

PhalApi開源框架的DataModel數據模型介紹

PhalApi開源框架的DataApi通用數據接口介紹

結合的力量，1+1 > 2

解決報錯pip：urllib3.exceptions.ReadTimeoutError: HTTPSConnectionPool

從零開始學架構V2-架構設計流程-2

從零開始學架構V2-初識架構設計-1

高德地圖爬蟲實踐：Java多線程併發處理策略

京東廣告研發——效率爲王：廣告統一檢索平臺實踐

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結