今天是第十三天我們可以寫一個javascript比價網站網頁程式管理系統，以下是我的程式碼
前端技術：
後端技術：
以下是構建一個基本的比價網站的步驟：
使用 HTML 設置網頁的基本結構，包括商品列表、搜尋欄位、比價結果等。
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>比價網站管理系統</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>比價管理系統</h1>
<div>
<input type="text" id="search" placeholder="輸入商品名稱">
<button onclick="searchProduct()">搜尋</button>
</div>
<div id="results"></div>
<script src="app.js"></script>
</body>
</html>
設置簡單的樣式。
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
h1 {
text-align: center;
}
#search {
width: 300px;
padding: 10px;
margin-right: 10px;
}
button {
padding: 10px;
}
#results {
margin-top: 20px;
}
負責處理搜尋功能和顯示結果。
// 模擬資料庫的商品價格資料
const products = [
{ name: "iPhone 14", prices: [29900, 30500, 29800] },
{ name: "MacBook Pro", prices: [60000, 59000, 61000] },
{ name: "AirPods Pro", prices: [8000, 8200, 7800] }
];
// 搜尋產品並顯示比價結果
function searchProduct() {
const searchTerm = document.getElementById('search').value.toLowerCase();
const resultDiv = document.getElementById('results');
resultDiv.innerHTML = ''; // 清除先前的搜尋結果
const filteredProducts = products.filter(product =>
product.name.toLowerCase().includes(searchTerm)
);
if (filteredProducts.length > 0) {
filteredProducts.forEach(product => {
const minPrice = Math.min(...product.prices);
const maxPrice = Math.max(...product.prices);
resultDiv.innerHTML += `
<div>
<h2>${product.name}</h2>
<p>最低價：NT$${minPrice}</p>
<p>最高價：NT$${maxPrice}</p>
</div>
`;
});
} else {
resultDiv.innerHTML = `<p>找不到商品。</p>`;
}
}
如果你需要將資料庫資料與伺服器互動，你可以在 Node.js 中建立 API 來存取或更新產品價格。
const express = require('express');
const app = express();
const cors = require('cors');
// 啟用 CORS 允許跨域請求
app.use(cors());
const products = [
{ name: "iPhone 14", prices: [29900, 30500, 29800] },
{ name: "MacBook Pro", prices: [60000, 59000, 61000] },
{ name: "AirPods Pro", prices: [8000, 8200, 7800] }
];
// 搜尋產品 API
app.get('/search', (req, res) => {
const searchTerm = req.query.q.toLowerCase();
const filteredProducts = products.filter(product =>
product.name.toLowerCase().includes(searchTerm)
);
res.json(filteredProducts);
});
// 伺服器監聽
app.listen(3000, () => {
console.log('Server running on port 3000');
});
前端可以透過 AJAX 請求來與後端互動：
function searchProduct() {
const searchTerm = document.getElementById('search').value;
fetch(`http://localhost:3000/search?q=${searchTerm}`)
.then(response => response.json())
.then(data => {
const resultDiv = document.getElementById('results');
resultDiv.innerHTML = ''; // 清除先前的搜尋結果
if (data.length > 0) {
data.forEach(product => {
const minPrice = Math.min(...product.prices);
const maxPrice = Math.max(...product.prices);
resultDiv.innerHTML += `
<div>
<h2>${product.name}</h2>
<p>最低價：NT$${minPrice}</p>
<p>最高價：NT$${maxPrice}</p>
</div>
`;
});
} else {
resultDiv.innerHTML = `<p>找不到商品。</p>`;
}
});
}
我會以介紹javascript程式碼為主
// 模擬資料庫的商品價格資料
const products = [
{ name: "iPhone 14", prices: [29900, 30500, 29800] },
{ name: "MacBook Pro", prices: [60000, 59000, 61000] },
{ name: "AirPods Pro", prices: [8000, 8200, 7800] }
];
這段代碼定義了一個名為 products 的常量（使用 const），它是一個商品列表，使用 JavaScript 的陣列來儲存多個商品物件，每個商品物件包括兩個屬性：
name: 商品名稱（如 "iPhone 14"）prices: 一個陣列，包含該商品在不同商店的價格（如 [29900, 30500, 29800]）這樣的資料結構模擬了一個商品價格的簡單資料庫，允許我們在網頁中展示每個商品的價格範圍。
// 搜尋產品並顯示比價結果
function searchProduct() {
const searchTerm = document.getElementById('search').value.toLowerCase();
const resultDiv = document.getElementById('results');
resultDiv.innerHTML = ''; // 清除先前的搜尋結果
這段代碼定義了一個名為 searchProduct 的函數，當使用者點擊搜尋按鈕時會被觸發。以下是這段代碼的作用：
document.getElementById('search').value：這行代碼取得搜尋框中輸入的內容，並將其轉換為小寫（toLowerCase()）以進行不區分大小寫的搜尋。document.getElementById('results')：取得 results 的 div，這個 div 用來顯示搜尋結果。resultDiv.innerHTML = ''：清空之前的搜尋結果，避免多次搜尋時結果累積。 const filteredProducts = products.filter(product =>
product.name.toLowerCase().includes(searchTerm)
);
這段代碼使用 Array.prototype.filter() 方法來篩選出符合搜尋條件的商品：
products.filter()：遍歷 products 陣列中的每個商品。product.name.toLowerCase().includes(searchTerm)：將每個商品的名稱轉換成小寫，並使用 includes 方法檢查是否包含搜尋的關鍵字。filteredProducts 會包含所有符合搜尋條件的商品。 if (filteredProducts.length > 0) {
filteredProducts.forEach(product => {
const minPrice = Math.min(...product.prices);
const maxPrice = Math.max(...product.prices);
resultDiv.innerHTML += `
<div>
<h2>${product.name}</h2>
<p>最低價：NT$${minPrice}</p>
<p>最高價：NT$${maxPrice}</p>
</div>
`;
});
} else {
resultDiv.innerHTML = `<p>找不到商品。</p>`;
}
}
filteredProducts.length > 0：這段代碼檢查是否有篩選到符合條件的商品，若有，則會開始顯示結果。
filteredProducts.forEach(product => { ... })：遍歷篩選出的商品，對每個商品顯示結果。
Math.min(...product.prices)：使用 Math.min() 函數來找出該商品的最低價格。...product.prices 是擴展運算符（spread operator），用來將 prices 陣列的每個元素展開作為獨立參數傳給 Math.min。
Math.max(...product.prices)：類似地，使用 Math.max() 來找出商品的最高價格。
然後使用模板字串 `${}` 來生成 HTML 字符串並插入到 results div 裡，顯示每個商品的名稱和對應的價格範圍。
如果沒有找到商品，則顯示「找不到商品」的訊息。
products 是商品的資料庫，其中包含商品名稱和不同價格。searchProduct() 函數會根據使用者的輸入搜尋商品，篩選出符合搜尋條件的商品。Math.min() 和 Math.max() 找出每個商品的最低和最高價格。
iThome鐵人賽
看影片追技術