电子商务网站之首页设计

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"文件时，将会显示商品信息的分页列表，并提供相应的分页链接。

相关推荐
mmsx5 分钟前
android 登录界面编写
android·登录界面
姜毛毛-JYM5 分钟前
【JetPack】Navigation知识点总结
android
花生糖@1 小时前
Android XR 应用程序开发 | 从 Unity 6 开发准备到应用程序构建的步骤
android·unity·xr·android xr
是程序喵呀1 小时前
MySQL备份
android·mysql·adb
casual_clover1 小时前
Android 之 List 简述
android·list
锋风Fengfeng3 小时前
安卓15预置第三方apk时签名报错问题解决
android
User_undefined3 小时前
uniapp Native.js原生arr插件服务发送广播到uniapp页面中
android·javascript·uni-app
程序员厉飞雨4 小时前
Android R8 耗时优化
android·java·前端
丘狸尾6 小时前
[cisco 模拟器] ftp服务器配置
android·运维·服务器
van叶～8 小时前
探索未来编程：仓颉语言的优雅设计与无限可能
android·java·数据库·仓颉
热门推荐
01【一文读懂】NTN（非地面网络）技术介绍02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀0419个Web前端交互式3D JavaScript框架和库05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07Cube-Studio：开源大模型全链路一站式中台08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10组基轨迹建模 GBTM的介绍与实现（Stata 或 R）