前期內容提要:
- 【抽獎平臺開發(1)】抽獎功能的前端實現(HTML+JS+CSS)
- 【抽獎平臺開發(2)】抽獎結果的表單提交,實現Web前後端的數據交互(HTML+JS+PHP)
- 【抽獎平臺開發(3)】將抽獎結果提交的表單上傳至數據庫,完成抽獎平臺前臺開發(PHP+MySQL)
在完成抽獎平臺前臺部分的全部功能搭建與測試後,爲一進步完善抽獎平臺的使用體驗,降低抽獎數據管理門檻,保障數據庫安全,應當改善現階段管理員通過進入數據庫後臺對抽獎結果予以管理的操作模式,開發並搭建一個與前臺配套的抽獎平臺後臺,用以實現抽獎結果查看與管理操作的可視化。
基本思路:作爲數據管理後臺,一方面應當支持管理員查看 抽獎列表(包括中獎時間和獎品名稱)、獎品詳細信息(如獎品價格,調貨地址,購買商電話等等),因此需要優化後臺可管理信息種類;另一方面應當允許管理員對於數據進行操作,基於MVC思想,完成抽獎平臺的後臺開發。
需求 | 數據獲取方式 | 後臺數據呈現方法 | 觸發機制 |
---|---|---|---|
顯示“中獎時間” | 抽獎前端表單提交數據至數據庫 | 直接調取數據庫存儲的信息 | 自動觸發 |
顯示“獎品名稱” | 抽獎前端表單提交數據至數據庫 | 直接調取數據庫存儲的信息 | 自動觸發 |
查詢“獎品詳細信息” | 數據庫預設 | 直接調取數據庫人工預設的信息 | 點擊觸發 |
統計“數據總數” | 使用數據庫命令語句 | 使用數據庫“查詢語句” | 自動觸發 |
數據操作之“刪除數據” | 使用數據庫命令語句 | 使用數據庫“刪除語句” | 點擊觸發 |
一、後臺MVC
開發模式的選擇及開發思路
後臺的主要功能在於管理數據庫數據,爲管理員提供一個安全高效可視化的數據管理平臺。後臺的全部數據從數據庫中調取,管理員在後臺上的操作發揮數據庫操作語句的作用。傳統的顯示與邏輯混合沒有辦法實現使用各種不同樣式的視圖來訪問同一個服務器端的代碼,管理員操作權限劃分工程量及數據存儲量巨大;此外,後臺數據管理平臺的搭建是一個循序漸進的過程,需要實現一種動態的程序設計,以便於後續對程序的修改和擴展簡化,並且使程序某一部分的重複利用成爲可能。基於此,選擇MVC開發模式,將顯示與邏輯相分離,通過對複雜度的簡化,使程序結構更加直觀,同時提高代碼複用率,降低耦合度。
所謂MVC全名是Model View Controller,是模型(model)-視圖(view)-控制器(controller)的縮寫,模型Model層管理大部分的業務邏輯和所有的數據庫邏輯。模型提供了連接和操作數據庫的抽象層;控制器Controller層負責響應用戶請求、準備數據,以及決定如何展示數據;視圖View層負責渲染數據,通過HTML方式呈現給用戶。
簡單通俗的講:Model層就是對數據庫的操作;View層用於從後臺獲取的數據通過頁面予以呈現;Controller層作爲樞紐,在View層和Model層之間存在,接收到用戶的請求,將模型和視圖匹配在一起,偵聽由View層(或其他外部源)觸發的事件,並對這些事件執行適當的反應。在大多數情況下,反應是在Model層上調用方法。
從用戶層面來看,用戶通過瀏覽器直接訪問Controller層,Controller層接受用戶請求後調用Model完成狀態的讀寫操作並將數據傳送給View層予以響應,View層渲染最終結果並呈現給用戶。此時用戶在View層查看數據,當用戶在View層發出數據操作請求時,Controller層將截獲用戶發出的操作請求調用Model完成操作後將操作結果(一般表現爲數據的變動,如用戶刪除數據表中的一行數據)傳遞給View,View層再次渲染最終結果(即刪除一行數據後的數據表)並呈現給用戶,值此循環往復。
將MVC開發模式運用到抽獎平臺後臺開發上來,如上圖所示。用戶通過瀏覽器訪問index.php
進入Controller層,在Controller層的Controller.php
文件中,定義一個基於用戶不同請求(查看抽獎列表、中獎詳情、刪除數據)調用相對應模型後返回視圖頁面的控制器。此後則是進入Model層通過Model.php
實現數據的操作。數據的操作除了命令語句的發出,還需要數據庫的連接與響應,這一步驟就交給BaseModel.class.php
(基礎模型類)和MySQLDB.class.php
(mysql數據庫操作類)進行處理,此外,爲保證系統中一個類只有一個實例,通過ModelFactory.class.php
完成單例工廠的搭建以實現模型類的單例。最後Controller層的控制器調用與用戶請求相對應的模型實現用戶的操作請求後將通過View層返回視圖頁面,即View-index.html
(“顯示抽獎列表”、“刪除抽獎信息”操作的視圖返回頁面)與View-GiftInfo.html
(“查看抽獎結果詳情”操作的視圖返回頁面)。
文件結構:
/www/wwwroot/***.com
└── 後臺
├── index.php
├── Framework
│ ├── ModelFactory.class.php
│ ├── BaseModel.class.php
│ └── MySQLDB.class.php
└── Application
├── Controller
│ └── Controller.php
├── Model
│ └── Model.php
└── Views
├── View-index.html
└── View-GiftInfo.html
二、基於後臺需求修復前臺缺陷
在真正開始後臺搭建前,基於後臺的信息管理需求,有必要對前臺部分功能予以完善。在前三章中,我們只是簡單實現了中獎結果
的前後端傳輸,並不符合真實情形下高度系統化的管理需求。正如前文關於平臺需求所述,在實際工程應用中,後臺管理員顯然不應該僅僅能夠看到中獎結果
,諸如抽獎用戶信息
、中獎時間
、獎品詳細信息
(比如獎品價格,調貨地址,購買商電話等等)等要素必然也是後臺查看和管理的重要元素。而這類元素又大致可以分爲兩類,一類依賴於用戶的前臺操作,我們需要利用表單形式將此類操作數據傳輸至後端(如中獎結果
、抽獎用戶信息
、中獎時間
);另一類則不依賴於用戶的前臺操作,只需要在數據庫內進行必要的預設後可以直接在後臺調取數據庫內存儲的相關信息即可(如獎品詳細信息
),與前臺操作無關。
因此在這一節中,我們需要實現的是通過PHP將第一類元素數據(中獎結果
、抽獎用戶信息
、中獎時間
)傳輸至後端。在這裏我們僅抽選中獎時間
和中獎結果
兩條數據,用以演示。
(由於我在前臺並未設置
抽獎用戶信息
錄入頁面,因此不傳輸抽獎用戶信息
,其實現方法是設計一個抽獎用戶信息
錄入頁面,通過表單形式將錄入信息提交至PHP即可,十分簡單,故也不再多述了)
1. 重新配置數據庫結構
這裏我設置了三個字段名,分別爲id
、times
和gift
,並將id
設置爲 主鍵 並且 AUTO_INCREMENT ,分別用來排序
(唯一標示符),記錄中獎時間
以及中獎內容
。
之所以需要在數據表中加入一個自動增長的主鍵ID,其目的一方面是爲了定位每一條數據以便後續的數據操作命令的正確執行,另一方面則是出於對管理員刪除數據操作的監控,在數據刪除後,其數據所對應的唯一ID也將刪除,編號連續性中斷,這就要求管理員審慎的對待數據管理與操作。當然,如果後期新增事務處理則需要予以進一步的改進。
2. 在前臺PHP中獲取“中獎時間”和“中獎內容”
<?php
$tm = date('Y-m-d H:i:s',time());
$results=$_GET['results'];
echo "Time:" . $tm ."<br>";
echo "Gift lists:" . $results ."<br>";
?>
3. 存儲至數據庫
<?php
header("content-type:text/html;charset=utf-8");
@ $db=mysqli_connect("localhost","用戶名","密碼","數據庫名稱");
if(mysqli_connect_errno()){
echo("Error:Couldnot connect the database");
exit;
}
/在獲取“中獎時間”和“中獎內容”後:
$strsql = "insert into gift(times,gift) values('$tm',$results)";
$result=mysqli_query($db,$strsql);
if(!$result){
echo("fail to insert data");
}else{
echo("sucess in insert data");
}
@ mysqli_free_result($result);
mysqli_close($db);
?>
4. 測試
三、平臺共用部分(Framework)開發
在明晰開發思路與文件結構後,我們正式開始後臺的搭建工作。首先是整個平臺公共部分的開發。根據開發思路,爲保證系統中一個類只有一個實例,通過ModelFactory.class.php
完成單例工廠的搭建以實現模型類的單例;此外由於用戶的所有操作是基於數據庫信息管理的操作,這一套步驟由BaseModel.class.php
(基礎模型類)和MySQLDB.class.php
(mysql數據庫操作類)完成。
1. ModelFactory.class.php
爲防止重複實例化,減少消耗系統和內存的資源,有且僅有一個實例對象,我們常選擇單例模式。所謂單例模式,是一種常用的軟件設計模式,在它的核心結構中只包含一個被稱爲單例的特殊類。單例模式會阻止其他對象實例化其自己的單例對象的副本,從而確保所有對象都訪問唯一實例。由於在Model層我們無法保證模型類本身是單例,因此有必要設計出一個“單例工廠類”,通過該單例工廠類,去“獲取”模型類的類名,並返回給類的一個實例(對象),以確保單例。
<?php
class ModelFactory{
Static $all_model = array(); //用於存儲各個模型類的唯一實例(單例)
Static function M( $model_name ){ //$model_name是一個模型類的類名
if( !isset(static::$all_model[$model_name]) //如果不存在
||
!( static::$all_model[$model_name] instanceof $model_name ) //或不是其實例
)
{
static::$all_model[$model_name] = new $model_name();
}
return static::$all_model[$model_name];
}
}
2. MySQLDB.class.php
(mysql數據庫操作類)
用於定義數據庫操作方法,添加數據管理功能,通過該類的對象實現:
(1)執行任意的增刪改語句
(2)執行返回一行/多行/一個數據(用於計數)的“查詢語句”(分別返回“一維數組”、“二維數組”、“數據值”)
(3)執行任何sql語句,並進行錯誤處理,或返回執行結果
<?php
class MySQLDB{
private $link = null; //用於存儲連接成功後的“資源”
private $host;
private $port;
private $user;
private $pass;
private $charset;
private $dbname;
private static $instance = null;
static function GetInstance($config){
if( !(self::$instance instanceof self) ){
self::$instance = new self($config);
}
return self::$instance;
}
private function __clone(){}
private function __construct($config){
$this->host = $config['host'];
$this->port = $config['port'];
$this->user = $config['user'];
$this->pass = $config['pass'];
$this->dbname = $config['dbname'];
$this->charset = !empty($config['charset']) ? $config['charset'] : "utf8" ;
$this->link = mysqli_connect("{$this->host}:{$this->port}", "{$this->user}", "{$this->pass}","{$this->dbname}")
or die("連接失敗");
}
//這個方法實現連接關閉
function closeDB(){
mysqli_close($this->link);
}
//這個方法爲了執行一條增刪改語句,它可以返回真假結果。
function exec($sql){
$result = $this->query($sql);
return true;
}
//這個方法是返回一行數據的“查詢語句”,它可以返回一維數組
function GetOneRow($sql){
$result = $this->query($sql);
$rec = mysqli_fetch_assoc( $result );//取出第一行數據(其實應該只有這一行)
mysqli_free_result( $result ); //提前釋放資源(銷燬結果集),否則需要等到頁面結束才自動銷燬
return $rec;
}
//這個方法是返回多行數據的“查詢語句”,它可以返回二維數組
function GetRows($sql){
$result = $this->query($sql);
$arr = array(); //空數組,用於存放要返回的結果數組(二維)
while ( $rec = mysqli_fetch_assoc( $result ) ){
$arr[] = $rec; //此時,$arr就是二維數組了!
}
mysqli_free_result( $result );
return $arr;
}
//這個方法是返回一個數據的“查詢語句”,它可以返回一個直接值
function GetOneData($sql){
$result = $this->query($sql);
$rec = mysqli_fetch_row( $result );
$data = $rec[0];
mysqli_free_result( $result );
return $data;
}
//統籌上面的所有方法,用於執行任何sql語句,並進行錯誤處理,或返回執行結果;
private function query( $sql ){
$result = mysqli_query($this->link,$sql);
if( $result === false){
echo "<p>sql語句執行失敗,請參考如下信息:";
echo "<br />錯誤代號:" . mysql_errno();
echo "<br />錯誤信息:" . mysql_error();
echo "<br />錯誤語句:" . $sql;
die();
}
return $result; //返回的是“執行結果”
}
}
?>
3. BaseModel.class.php
(基礎模型類,現階段僅需用於存儲數據庫賬號密碼)
<?php
class BaseModel{
//用於存儲數據庫工具類的實例(對象)
protected _dao = null;
function __construct(){
$config = array(
'host' => "localhost",
'port' => 3306,
'user' => "用戶名",
'pass' => "密碼",
'charset' => "utf8",
'dbname' => "數據庫名稱"
);
$this->_dao = MySQLDB::GetInstance($config);
}
}
此處的dao
,指Data Access Object
(數據訪問對象)。在基礎模型類中使用MySQLDB工具類
($this->_dao = MySQLDB::GetInstance($config)
,其中$_dao
屬性是從MySQLDB工具類
處獲得的實例,返回的是一個單例對象),工具類在實例化之後由$_dao
屬性來存儲對象。
四、Controller層開發(PHP)
在完成整個平臺公共部分的開發後,我們進入Controller層開發,根據開發思路,用戶通過瀏覽器訪問index.php
進入Controller層,在Controller層的Controller.php
文件中,定義一個基於用戶不同請求調用相對應模型後返回視圖頁面的控制器。
/www/wwwroot/***.com
└── 後臺
├── index.php
└── Application
└── Controller
└── Controller.php
1. index.php
:
這開發過程中,需要時刻保持分工負責的思維模式,index.php
作爲用戶通過瀏覽器進入Controller層的入口,只發揮環境配置和引導作用,不應賦予其過多功能。
<?php
header("content-type:text/html; charset=utf-8");//設置輸出的字符編碼爲utf8
require './Framework/MySQLDB.class.php';
require './Framework/ModelFactory.class.php';
require './Framework/BaseModel.class.php';
require './Application/Modelss/Model.php';
require './Application/Controllers/Controller.php';
$ctrl = new Controller();
$act = !empty($_GET['act']) ? $_GET['act'] : "Index";
$action = $act . "Action";
$ctrl->$action(); //可變函數————>>可變方法
?>
2. Controller.php
:
在Controller層的Controller.php
文件中,定義一個基於用戶不同請求(“顯示抽獎列表”、“刪除抽獎信息”、“查看抽獎結果詳情”)調用相對應模型後返回視圖頁面的控制器。
<?php
class Controller{
//顯示抽獎列表
function IndexAction(){
$obj_List = ModelFactory::M('ListModel');
$data1 = $obj_List->GetAllList(); //是一個二維數組
$data2 = $obj_List->GetListCount(); //是一個數字
include './Application/Views/View-index.html';
}
//刪除指定抽獎信息
function DelAction(){
$id = $_GET['id'];
$obj = ModelFactory::M('ListModel');
$result = $obj->delListById($id);
echo "<script>alert('刪除成功!')</script>";
echo "<meta http-equiv='Refresh' content='0;URL=index.php'>";
}
//查看指定抽獎結果詳情
function DetailAction(){
$id = $_GET['id'];
$obj = ModelFactory::M('ListModel');
$data = $obj->GetGiftInfoById($id);
include './Application/Views/View-GiftInfo.html';
}
}
在這裏需要額外補充強調幾點:
index.php
中的語句含義:代替了Controller.php
內所有if判斷邏輯,即:
if(!empty($_GET['act']) && $_GET['act'] == 'detail'){
DetailAction();
}
else if(!empty($_GET['act']) && $_GET['act'] == 'del'){
DelAction();
}
else{
IndexAction();
}
- 載入視圖文件的邏輯起點:
根據文件結構,Controller.php
需要回退至Application
文件夾後再進入Views
文件夾最後才能載入視圖文件,但是需要注意的是,所有邏輯起點都應當從index.php
開始,所以不需要考慮要回退多少個目錄,加多少個"."。
Controller.php
中刪除操作後的跳轉問題:
echo "<script>alert('刪除成功!')</script>";
echo "<meta http-equiv='Refresh' content='0;URL=index.php'>";
在刪除數據成功後,頁面自動跳轉回入口頁面,目的一方面在於保障數據結構安全,另一方面在於迴歸邏輯層面的初始狀態,保障操作邏輯的完整與統一。
$_GET
安全性問題:
很顯然,直接使用未經封裝的$_GET
拼接在SQL上存在XSS和SQL注入風險,對於有安全性需求的用戶,建議嘗試在php.ini中開啓magic_quotes_gpc
對於所有由用戶GET、POST、COOKIE中傳入的特殊字符予以轉義或者使用mysql_real_escape_string()
函數進行過濾再使用以預防上述安全隱患。最簡單粗暴的做法可以用htmlspecialchars
把特殊字符(&,",',<,>)
轉換爲HTML實體(&"'<>)
後輸出。
五、Models層開發(PHP)
所有模型都需要繼承基礎模型類,即前文的BaseModel.class.php
,在此基礎上,Model層通過執行數據庫類方法,將執行結果返回至Controller.php
。
Model.php
:
<?php
class ListModel extends BaseModel{
function GetAllList(){
$sql = "select * from gift;";
$data = $this->_dao->GetRows($sql);
return $data;
}
function GetListCount(){
$sql = "select count(*) as c from gift;";
$data = $this->_dao->GetOneData($sql);
return $data;
}
function delListById($id){
$sql = "delete from gift where id = $id;";
$data = $this->_dao->exec($sql);
return $data;
}
function GetGiftInfoById($id){
$sql = "select * from gift where id = $id;";
$data = $this->_dao->GetOneRow($sql);
return $data;
}
}
其中GetRows($sql)
、GetOneData($sql)
、GetOneData($sql)
、exec($sql)
是MySQLDB工具類的方法,_dao
則是從父類BaseModel
中$_dao
屬性繼承而來的用於存儲的對象,是MySQLDB工具類的實例。
六、Views層開發(HTML)
當Controller層的控制器調用與用戶請求相對應的模型實現用戶的操作請求後將通過View層返回視圖頁面。
需求 | 後臺數據呈現方法 | 觸發機制 |
---|---|---|
顯示“中獎時間” | 直接調取數據庫存儲的信息 | 自動觸發 |
顯示“獎品名稱” | 直接調取數據庫存儲的信息 | 自動觸發 |
查詢“獎品詳細信息” | 直接調取數據庫人工預設的信息 | 點擊觸發 |
統計“數據總數” | 使用數據庫“查詢語句” | 自動觸發 |
數據操作之“刪除數據” | 使用數據庫“刪除語句” | 點擊觸發 |
從需求的觸發機制來看,自動觸發的數據操作可以安排在一個頁面即View-index.html
予以呈現;需要用戶點擊觸發的是 查詢“獎品詳細信息” 以及 數據操作之“刪除數據” 兩個操作,其中後者僅僅是數據庫信息的管理操作,也可以直接在View-index.html
頁面回顯操作結果;唯一是 查詢“獎品詳細信息” 由於需要調取的是數據庫內預設的信息(即與中獎獎品相對應的信息如獎品價格,調貨地址,購買商電話等等),因此需要額外一個頁面返回視圖,即View-GiftInfo.html
。
1. View-index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>抽獎結果查詢後臺</title>
<meta name="keywords" content="抽獎結果查詢後臺" />
<meta name="description" content="抽獎結果查詢後臺" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
.t1{color:red;}
.t2{background:#cccccc}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div style="position: absolute;left: 50%;transform:translateX(-50%);white-space:nowrap" >
<div style="font-size: 23px;font-weight: bold;text-align: center">抽獎結果</div>
<br />
<div class="fr">
<table border='1'>
<tr>
<th >編號</th>
<th >中獎時間</th>
<th >獎品內容</th>
<th >數據管理</th>
</tr>
<?php
foreach( $data1 as $key => $rec )
{
?>
<tr>
<td ><?php echo $rec['id']; ?></td>
<td class='t1'><?php echo $rec['times']; ?></td>
<td class='t2'><?php echo $rec['gift']; ?></td>
<td>
<a href='?act=del&id=<?php echo $rec['id']; ?>' οnclick='return queren()'>刪除</a>
<a href='?act=detail&id=<?php echo $rec['id']; ?>' >詳細</a>
</td>
</tr>
<?php
}
?>
</table>
<br />
當前抽獎記錄總數:<?php echo $data2;?>
</div>
</div>
</body>
</html>
<script>
function queren(){
return window.confirm("是否確認刪除?");
}
</script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
setInterval(aa,1000);
function aa(){
$(".fr").load(location.href+" .fr");
}
})
</script>
對於用戶的抽獎結果,後臺應當能夠實時檢測,手動刷新以同步數據庫信息的方式顯然不符合管理需求,對此實現方式大致有二,其一,設置定時器自動刷新頁面以同步數據(實現方式見下方代碼塊);其二,不刷新頁面更新數據,對於用戶量小的平臺可以基於Ajax實現輪詢,用戶量大可選擇長輪詢或workman Socket服務器框架。
<script>
function fresh_page(){
window.location.reload();
};
setTimeout('fresh_page()',10000);
</script>
具體應用到本後臺的搭建中,由於在Views層是通過<?php echo $rec['**']; ?>
的形式更新數據,因此並不一定需要使用Ajax輪詢,綜合考慮頁面整體刷新的侷限性,在這裏我選用了jQUery的局部刷新方法,將需要同步的內容包裝在class="fr"
的div
標籤中,通過div
的局部刷新以實時同步數據庫信息至後臺:
<div class="fr">
//需要同步的內容
</div>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
setInterval(aa,1000);
function aa(){
$(".fr").load(location.href+" .fr");
}
})
</script>
另一方面,實現了響應式佈局,以同時適配PC端和移動端的訪問與操作;並使用<td>
標籤以控制表格的跨行跨列。
2. View-GiftInfo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>詳細信息</title>
<meta name="keywords" content="詳細信息" />
<meta name="description" content="詳細信息" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
</style>
<script type="text/javascript"></script>
</head>
<body>
<div style="position: absolute;left: 50%;transform:translateX(-50%)" >
<div style="font-size:23px;font-weight:bold;white-space:nowrap">關於編號<font color=red><?php echo $data['id'] ?></font>的詳細信息如下:</div>
<hr />
<nobr />中獎時間:<?php echo $data['times'] ?>
<br/>
<br/>
<nobr />獎品名稱:<?php echo $data['gift'] ?>
<br/>
<br/>
<nobr />獎品價格:<?php echo '信息暫未錄入' ?>
<br/>
<br/>
<nobr />中獎者姓名:<?php echo '信息暫未錄入' ?>
<br/>
<br/>
<nobr />中獎者聯繫方式:<?php echo '信息暫未錄入' ?>
<hr />
<a href='?'>返回</a>
</div>
</body>
</html>
關於中獎獎品相對應的信息的錄入工作,考慮到篇幅問題以及實現的簡易程度,在此不再多述。
七、測試:
需求 | 觸發機制 | 呈現頁面 |
---|---|---|
顯示“中獎時間” | 自動觸發 | View-index.html |
顯示“獎品名稱” | 自動觸發 | View-index.html |
統計“數據總數” | 自動觸發 | View-index.html |
需求 | 觸發機制 | 呈現頁面 |
---|---|---|
數據操作之“刪除數據” | 點擊觸發 | View-index.html |
查詢“獎品詳細信息” | 點擊觸發 | View-GiftInfo.html |
-
數據操作之“刪除數據”
-
查詢“獎品詳細信息”
至此,我們成功完成了抽獎平臺的全部開發(源碼已上傳)。
本系列文章索引目錄:
- 【抽獎平臺開發(1)】抽獎功能的前端實現(HTML+JS+CSS)
- 【抽獎平臺開發(2)】抽獎結果的表單提交,實現Web前後端的數據交互(HTML+JS+PHP)
- 【抽獎平臺開發(3)】將抽獎結果提交的表單上傳至數據庫,完成抽獎平臺前臺開發(PHP+MySQL)
- 【抽獎平臺開發(4)】基於MVC模式實現數據後臺管理操作的可視化(PHP+HTML+MySQL)
如果您有任何疑問或者好的建議,期待你的留言與評論!