电子商务网站之首页设计

ch_s_t2024-11-15 22:21

本文 以表格布局方式实现一电 子商务网站首页，结合php[+mysql获取后端数据 。首页通常包括网店Logo、导航条、搜索、商品展示等，网页头部和脚部已经制作成两件，直接调用即可，导航还需设计一个商品类别导航，商品展示分为三大区域：优惠品、出售商品、求购商品。

一 首页框架设计

首页采用表格布局，采用3行3列表格布局方式， 其布局效果如下所示

html代码如下所示：

html 复制代码 
<table border='1' width='1000'>	
    <tr>
	    <td rowspan='3'>商品类别导航条</td>
	    <td>优惠商品信息</td>
	</tr>
	<tr>
		<td>商品出售信息</td>
	</tr>
	<tr>
		<td>求购商品信息</td>
	</tr>
</table>

其最终效果如下所示：

二 商品类别导航条

商品类别有大类和小类，两者通过嵌套循环实现，代码 如下：

php 复制代码 
<?php
// 建立数据库连接
$conn = mysqli_connect("localhost", "root", "", "your_database_name");

// 检查连接是否成功
if (!$conn) {
    die("数据库连接失败：" . mysqli_connect_error());
}

// 查询商品大类
$mainCategoryQuery = "SELECT * FROM main_categories";
$mainCategoryResult = mysqli_query($conn, $mainCategoryQuery);

// 查询商品小类
$subCategoryQuery = "SELECT * FROM sub_categories";
$subCategoryResult = mysqli_query($conn, $subCategoryQuery);

// 生成导航条HTML
$navBar = '<ul class="nav-bar">';

while ($mainCategoryRow = mysqli_fetch_assoc($mainCategoryResult)) {
    $mainCategoryName = $mainCategoryRow['name'];
    $mainCategoryId = $mainCategoryRow['id'];

    $navBar .= '<li><a href="#">' . $mainCategoryName . '</a>';

    $navBar .= '<ul class="sub-nav">';

    // 根据商品大类id查询对应的小类
    $subCategoryQuery = "SELECT * FROM sub_categories WHERE main_category_id = $mainCategoryId";
    $subCategoryResult = mysqli_query($conn, $subCategoryQuery);

    while ($subCategoryRow = mysqli_fetch_assoc($subCategoryResult)) {
        $subCategoryName = $subCategoryRow['name'];
        $navBar .= '<li><a href="#">' . $subCategoryName . '</a></li>';
    }

    $navBar .= '</ul>';
    $navBar .= '</li>';
}

$navBar .= '</ul>';

// 输出导航条HTML
echo $navBar;

// 关闭数据库连接
mysqli_close($conn);
?>

上述代码假设已经建立了一个名为main_categories的商品大类表，其中包含id和name两个字段，还有一个名为sub_categories的商品小类表，其中包含id、name和main_category_id三个字段。

在示例中，我们首先查询商品大类并将其显示为导航条的一级菜单，然后根据商品大类的id查询对应的小类，将其显示为导航条的二级菜单。最后我们将生成的导航条HTML输出到页面上。

请根据您的实际数据库表结构和HTML样式进行相应的修改。

三 前五名优惠商品展示

优惠商品是以折扣的大小来决定的，折扣越大越优惠，前五名可以用查询SQL 中的limit关键字来先出，代码如下所示：

php 复制代码 
<?php
// 连接到数据库
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "products";

$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接是否成功
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 获取前五名优惠商品
$sql = "SELECT name, price, discount FROM items ORDER BY discount DESC LIMIT 5";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // 输出数据
    while($row = $result->fetch_assoc()) {
        echo "商品名称: " . $row["name"]. " - 原价: $" . $row["price"]. " - 优惠价: $" . ($row["price"] - $row["discount"]). "<br>";
    }
} else {
    echo "没有找到优惠商品";
}

// 关闭连接
$conn->close();
?>

以上代码将连接到数据库，查询前五名优惠商品，并将它们的名称、原价和优惠价输出到页面上。如果没有找到优惠商品，则输出 "没有找到优惠商品"。

四 商品出售信息展示

使用PHP和MySQL来查询商品销售信息，并将其以表格形式展示出来。以下是一个简单的示例代码：

php 复制代码 
<?php
// 连接到MySQL数据库
$conn = mysqli_connect("localhost", "username", "password", "database");

// 检查连接是否成功
if (!$conn) {
    die("数据库连接失败：" . mysqli_connect_error());
}

// 查询商品销售信息
$sql = "SELECT * FROM products";
$result = mysqli_query($conn, $sql);

// 检查查询结果
if (!$result) {
    die("查询失败：" . mysqli_error($conn));
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>商品销售信息</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            text-align: left;
            padding: 8px;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h2>商品销售信息</h2>
    <table>
        <tr>
            <th>ID</th>
            <th>商品名称</th>
            <th>价格</th>
            <th>库存</th>
        </tr>
        <?php
        // 遍历查询结果并生成表格行
        while ($row = mysqli_fetch_assoc($result)) {
            echo "<tr>";
            echo "<td>" . $row['id'] . "</td>";
            echo "<td>" . $row['name'] . "</td>";
            echo "<td>" . $row['price'] . "</td>";
            echo "<td>" . $row['stock'] . "</td>";
            echo "</tr>";
        }

        // 释放查询结果资源
        mysqli_free_result($result);

        // 关闭数据库连接
        mysqli_close($conn);
        ?>
    </table>
</body>
</html>

在此示例中，我们首先通过mysqli_connect()函数连接到MySQL数据库。然后，使用mysqli_query()函数执行查询语句，将结果保存在$result变量中。接下来，我们使用mysqli_fetch_assoc()函数从查询结果中获取每一行的数据，并将其以表格行的形式输出到HTML页面中。

五 商品类别查询

完成商品类别的查询需要做以下步骤 ：

1. 在大类名、小类名加超链接
php 复制代码 
<a href="index.php?a=large&x=<%=$large%>"><%=$large&></a>
<a href="index.php?a=small&x=<%=$small%>"><%=$small%></a>
2. 查询时加查询条件为大类号或小类号

条件查询，代码如下：

php 复制代码 
<?php
sql="select * from  products"

$a=$_GET['a']
$x=$_GET['X']

if($a=="large") {
    sql=sql."where large=".$x
} 
if($a=="small") {
    sql=sql."where  small=".$x
} 

sql=sql."order by publish_date desc"
$result = $conn->query($sql);


?>

六 商品品名搜索

商品品名查询是用模糊查询实现，代码 如下所示

php 复制代码 
// 获取查询关键字
$keyword = $_GET['keyword'];

// 执行模糊查询
$sql = "SELECT * FROM 商品表 WHERE 品名 LIKE '%$keyword%'";
$result = $conn->query($sql);

// 输出查询结果
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo "品名: " . $row["品名"]. "<br>";
        // 输出其他字段
    }
} else {
    echo "没有找到匹配的商品";
}

该代码用GET方法获取查询关键字，并使用SQL的LIKE操作符进行模糊查询。如果找到匹配的商品，将输出商品的品名和其他字段；如果没有找到匹配的商品，将输出提示信息。

七 分页显示技术

获取当前页码和每页显示的记录数：

php 复制代码 
<?php
$page = isset($_GET['page']) ? $_GET['page'] : 1;
$records_per_page = 10;
$offset = ($page - 1) * $records_per_page;
?>

查询数据库，获取商品信息并根据当前页码进行分页：

php 复制代码 
<?php
$sql = "SELECT * FROM products LIMIT $offset, $records_per_page";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    // 输出数据
    while($row = $result->fetch_assoc()) {
        echo "ID: " . $row["id"]. " - Name: " . $row["name"]. " - Price: " . $row["price"]. "<br>";
        echo "Description: " . $row["description"]. "<br><br>";
    }
} else {
    echo "0 结果";
}
?>

获取总记录数，并计算总页数：

php 复制代码 
<?php
$sql = "SELECT COUNT(*) AS total FROM products";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
$total_pages = ceil($row["total"] / $records_per_page);
?>

显示分页链接：

php 复制代码 
<?php
echo "<ul class='pagination'>";
for ($i = 1; $i <= $total_pages; $i++) {
    echo "<li><a href='index.php?page=$i'>$i</a></li>";
}
echo "</ul>";
?>

现在，当你访问该"index.php"文件时，将会显示商品信息的分页列表，并提供相应的分页链接。

相关推荐
martindelophy1 小时前
用自然语言剪视频：我们在 Timeline Studio 中实现了 ChatCut 对话剪辑
android·音视频
ao-weilai2 小时前
MySQL数据库：复合查询
android·数据库·mysql
三少爷的鞋14 小时前
AI 时代，我们都将成为通才型开发者：只懂 Android，已经不够了
android
Dovis(誓平步青云）18 小时前
家里设备越来越多，如何用一张空间地图控制灯光和温度![
android·java·前端·javascript·人工智能·电脑
晚风叙码20 小时前
MySQL 数据类型详解：从数值到字符串，一篇讲透
android·mysql·adb
传奇开心果编程20 小时前
【Compose Multiplatform 跨端开发学与练】第3课 布局与组件
android·windows·学习·ui·ios·kotlin·composer
传奇开心果编程1 天前
【Compose Multiplatform 跨端开发学与练】第8课 资源管理与主题
android·windows·学习·ios·kotlin·web·composer
传奇开心果编程1 天前
【Compose Multiplatform 跨端开发学与练】第9课 测试与调试
android·学习·macos·ios·kotlin·web·composer
传奇开心果编程1 天前
【Compose Multiplatform 跨端开发学与练】第4课 导航与路由
android·windows·学习·ui·ios·kotlin·composer
传奇开心果编程1 天前
【Compose Multiplatform 跨端开发学与练】第6课 状态管理与架构
android·学习·ui·ios·架构·kotlin·composer
热门推荐
01历年考研数学一、数学二、数学三真题试卷及答案PDF02如何新建文件夹？ 电脑新建文件夹的4种方法03国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）04Telegram APK 下载安装完整指南 — 2026年最新05GitHub 镜像站点06蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接07Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）08微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新092026 爱知・名古屋亚运会怎么看？直播平台+赛程安排分享10给AI一张“业务概念地图“：本体如何从哲学走向企业智能