探索我們精心整理的各類代碼資源，從基礎組件到完整項目，滿足你的各種開發需求
安全高效的PDO數據庫連接封裝
class Database {
private $conn;
public function __construct($host, $dbname, $username, $password) {
try {
$this->conn = new PDO(
"mysql:host=$host;dbname=$dbname;charset=utf8",
$username,
$password,
[
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
]
);
} catch(PDOException $e) {
die("數據庫連接失敗: " . $e->getMessage());
}
}
public function getConnection() {
return $this->conn;
}
}安全的文件上傳類，支持多文件上傳
class FileUploader {
private $uploadDir = 'uploads/';
private $maxSize = 5 * 1024 * 1024; // 5MB
private $allowedTypes = ['jpg', 'jpeg', 'png', 'gif', 'pdf'];
public function upload($fileInputName) {
if (!isset($_FILES[$fileInputName])) {
return ['error' => '沒有選擇文件'];
}
$file = $_FILES[$fileInputName];
if ($file['error'] !== UPLOAD_ERR_OK) {
return ['error' => '文件上傳失敗: ' . $this->getErrorMessage($file['error'])];
}
// 其他處理邏輯...
}
// 其他方法...
}現代美觀的響應式網站導航欄
<nav class="bg-white shadow-md">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<a href="#" class="flex-shrink-0 font-bold text-xl text-primary">
Logo
</a>
<div class="hidden md:ml-10 md:flex md:space-x-8">
<a href="#" class="text-gray-900 hover:text-primary px-3 py-2 font-medium">首頁</a>
<a href="#" class="text-gray-500 hover:text-primary px-3 py-2 font-medium">服務</a>
<a href="#" class="text-gray-500 hover:text-primary px-3 py-2 font-medium">作品</a>
<a href="#" class="text-gray-500 hover:text-primary px-3 py-2 font-medium">關于</a>
</div>
</div>
<div class="flex items-center">
<button class="bg-primary text-white px-4 py-2 rounded-md">
聯系我們
</button>
</div>
</div>
</div>
</nav>包含完整驗證邏輯的HTML表單
<form id="contactForm">
<div class="mb-4">
<label for="name" class="block text-gray-700 font-medium mb-2">姓名</label>
<input type="text" id="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary" required>
<span class="error-message text-red-500 text-sm hidden">請輸入您的姓名</span>
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 font-medium mb-2">郵箱</label>
<input type="email" id="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary" required>
<span class="error-message text-red-500 text-sm hidden">請輸入有效的郵箱地址</span>
</div>
<button type="submit" class="bg-primary text-white px-4 py-2 rounded-md">
提交
</button>
</form>現代感十足的卡片懸停動畫效果
.card {
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 20px;
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 100%);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
}
.card:hover::before {
opacity: 1;
}使用CSS Grid實現的響應式布局
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
padding: 20px;
}
.grid-item {
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 20px;
}
/* 小屏幕設備 */
@media (max-width: 640px) {
.grid-container {
grid-template-columns: 1fr;
}
}
/* 中等屏幕設備 */
@media (min-width: 641px) and (max-width: 1024px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}使用Fetch API實現的AJAX請求封裝
class ApiClient {
constructor(baseUrl) {
this.baseUrl = baseUrl;
}
async get(endpoint, params = {}) {
const queryString = new URLSearchParams(params).toString();
const url = `${this.baseUrl}/${endpoint}?${queryString}`;
try {
const response = await fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
} catch (error) {
console.error('Fetch error:', error);
throw error;
}
}
// 其他HTTP方法...
}前端表單驗證工具類
class FormValidator {
constructor(formId) {
this.form = document.getElementById(formId);
this.errors = {};
}
validate() {
this.errors = {};
const inputs = this.form.querySelectorAll('input, select, textarea');
inputs.forEach(input => {
const rules = input.dataset.rules;
if (!rules) return;
const rulesList = rules.split('|');
rulesList.forEach(rule => {
const [ruleName, ruleValue] = rule.split(':');
switch (ruleName) {
case 'required':
if (!input.value.trim()) {
this.addError(input, '此字段為必填項');
}
break;
case 'email':
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (input.value && !emailRegex.test(input.value)) {
this.addError(input, '請輸入有效的郵箱地址');
}
break;
// 其他驗證規則...
}
});
});
return Object.keys(this.errors).length === 0;
}
// 其他方法...
}