1、展示
因爲最近剛巧剛剛開始接觸PHP，所以直接就改用PHP來做了，懶得再用Django做接口了。同時，之前使用Vue做過一個項目，但是感覺這裏不需要那麼大的工程，PHP+Bootstrap，完全ok。
1、基本頁面
去Bootstrap官網找到了一個縮略圖用於展示，選了幾條信息嘗試，發現效果不錯，嗯就這麼做下去吧
2、連接數據庫 & 展示
需要注意的兩點是：
- 圖片鏈接請求時出現403錯誤，查找原因後在<head>中添加如下代碼解決
<meta name="referrer" content="no-referrer"/> - 由於個別圖片大小不一樣，（幾乎都爲100*100，個別爲100*66導致高度不一樣）即使通過設置同一高度仍舊出現排版問題，所以直接統一設置img和card，如<style>中所示
<style type="text/css"> img{ width: 100px; } .card{ height: 200px; } </style>PHP代碼註釋如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="referrer" content="no-referrer"/>
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<?php
$sisters = '';
// 鏈接數據庫 服務器:端口號 用戶名 密碼 數據庫名稱
$link = @new mysqli("localhost:3306","root","******","sisters");
if($link->connect_error){
//將錯誤信息的關聯數組處理成json,返回給前端,請求失敗報錯碼code=0
$err = array("code"=>0,"msg"=>$link->connect_error);
die(json_encode($err)); //結束語句,並打印報錯(類似於return)
}
// 選取我們需要的信息
$str = "SELECT mid,pic,name,sign FROM network";
$res = $link->query($str);
//判斷res是否爲空數據
if($res){
$str = "";
while($arr = $res->fetch_assoc()){ //將res資源型數據,解析成關聯數組,因爲每次只能解析一條,所以while重複解析
$str = $str.json_encode($arr).","; //點爲字符串拼接
}
$sisters = "[".substr($str,0,-1)."]";
//將對象拼接成json格式 中間加逗號 末尾去掉逗號 兩邊加中括號
}else{
//如果獲取數據失敗 將錯誤碼code=2 錯誤信息="獲取數據失敗"存入關聯數組
$err = array("code"=>2,"msg"=>"獲取數據失敗");
echo json_encode($err);
}
$result = json_decode($sisters,true);
//構造縮略圖
foreach ($result as $sis ) {
echo "
<div class=\"col-sm-6 col-md-4\" style=\"height=\">
<div class=\"thumbnail card\">
<img src={$sis['pic']} alt=\"no avatar\">
<div class=\"caption\">
<h3>{$sis['name']}</h3>
<p>UID: {$sis['mid']}</p>
</div>
</div>
</div>";
}
?>
</table>
</body>
</html>
<style type="text/css">
img{
width: 100px;
}
.card{
height: 200px;
}
</style>
完成！
B站到底有多少御坂妹？
