电子商务网站之首页设计

🕗 发布于 2024-11-12 11:52 android

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

一首页框架设计

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

html代码如下所示：

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

其最终效果如下所示：

二商品类别导航条

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

<?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
// 连接到数据库
$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
// 连接到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. 在大类名、小类名加超链接

<a href="index.php?a=large&x=<%=$large%>"><%=$large&></a>
<a href="index.php?a=small&x=<%=$small%>"><%=$small%></a>

2. 查询时加查询条件为大类号或小类号

条件查询，代码如下：

<?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);


?>

六商品品名搜索

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

// 获取查询关键字
$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
$page = isset($_GET['page']) ? $_GET['page'] : 1;
$records_per_page = 10;
$offset = ($page - 1) * $records_per_page;
?>

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

<?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
$sql = "SELECT COUNT(*) AS total FROM products";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
$total_pages = ceil($row["total"] / $records_per_page);
?>

显示分页链接：

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

原文地址：https://blog.csdn.net/ch_s_t/article/details/143585188

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：机器人正向运动学（Forward Kinematics）关节空间转换为笛卡尔空间
下一篇：【贪心算法】贪心算法三

软考之面向服务架构SOA-通信方法
SOAP 是一种基于 XML 的协议，用于在分布式计算环境中交换结构化信息。它定义了一套标准的消息格式，可以通过各种网络协议（如 HTTP、SMTP）进行传输。REST 是一种基于 HTTP 协议的架
阅读更多2024-11-14
Python基础教程：文件操作
上述内容介绍了Python中文件操作的基本方法，包括使用`open()`函数打开文件、读取和写入文件、关闭文件以及使用`with`语句自动管理文件的打开和关闭。还提到了文件操作中可能遇到的异常处理。
阅读更多2024-11-14
24/11/13 算法笔记＜强化学习＞ DQN算法
DQN维护两个神经网络，一个是用于预测Q值的评估网络（Evaluation Network），另一个是用于生成目标Q值的目标网络（Target Network）。：在传统的Q学习中，需要维护一个Q表来
阅读更多2024-11-14
测试自动化如何和业务流程结合？
测试自动化框架固然重要，但是最终自动化的目的都是为了业务服务的。那测试自动化如何对业务流程产生积极影响？
阅读更多2024-11-14
通过微信测试公众号实现扫码登录
实现微信的扫码登录，向微信服务器发送请求，获取accesstoken和ticket，获取二维码，登录成功后会回调，发送模板信息
阅读更多2024-11-14
【2024最新】基于springboot+vue的闲一品交易平台lw+ppt
开发技术：SpringBoot、php、Python、小程序、SSM、Vue、MySQL、JSP、ElementUI等，。专栏推荐：SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小
阅读更多2024-11-14
java组件安全
默认端口：8983。
阅读更多2024-11-14
1111111111待修改--大流量分析（三）-BUUCTF
https://buuoj.cn/challenges#%E5%A4%A7%E6%B5%81%E9%87%8F%E5%88%86%E6%9E%90%EF%BC%88%E4%B8%89%EF%BC%89
阅读更多2024-11-14
DAY111PHP开发框架&THIKNPHP&反序列化&POP利用链&RCE执行&文件删除
函数方法file_exists，@unlink($filename);//$relation可控，找到一个没有visible方法或不可访问这个方法的类时，即可调用_call()魔法方法。1、__des
阅读更多2024-11-14
如何在OCI上配置并使用OCI GenAI服务的步骤
如何在OCI上配置并使用OCI GenAI服务的步骤
阅读更多2024-11-14

电子商务网站之首页设计

一 首页框架设计

二 商品类别导航条

三 前五名优惠商品展示

四 商品出售信息展示

五 商品类别查询