电子商务网站之首页设计

devtools/2024/11/13 22:05:18/

        本文 以表格布局方式实现一电 子商务网站首页,结合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的商品大类表,其中包含idname两个字段,还有一个名为sub_categories的商品小类表,其中包含idnamemain_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”文件时,将会显示商品信息的分页列表,并提供相应的分页链接。


http://www.ppmy.cn/devtools/133402.html

相关文章

基于微信小程序的移动学习平台的设计与实现+ssm(lw+演示+源码+运行)

摘 要 由于APP软件在开发以及运营上面所需成本较高&#xff0c;而用户手机需要安装各种APP软件&#xff0c;因此占用用户过多的手机存储空间&#xff0c;导致用户手机运行缓慢&#xff0c;体验度比较差&#xff0c;进而导致用户会卸载非必要的APP&#xff0c;倒逼管理者必须改…

ubuntu更改max_map_count

在Ubuntu系统中&#xff0c;max_map_count是一个内核参数&#xff0c;用于限制每个进程可以拥有的内存段的数量。对于Elasticsearch等需要大量内存映射的应用&#xff0c;可能需要增加这个值。 执行以下步骤来更改max_map_count的值&#xff1a; 打开终端。 输入以下命令以编…

SpringBoot框架在资产管理中的应用

3系统分析 3.1可行性分析 通过对本企业资产管理系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本企业资产管理系统采用Spring Boot框架&#xff0c;JAVA作…

OpenCV相机标定与3D重建(2)鱼眼相机模型

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 鱼眼相机是一种具有非常宽视野的相机&#xff0c;通常会产生强烈的径向畸变。鱼眼相机模型旨在捕捉这种畸变&#xff0c;以便能够准确地处理和校…

Vue 2 —Vue Router 页面导航和参数传递

当从A页面跳转到B页面的时候把数据也一起传递过去&#xff0c;可用Vue Router 功能&#xff1a; 一、. this.$router.push 方法 Vue Router 是 Vue.js 的官方路由管理器&#xff0c;允许你在应用中进行页面导航&#xff08;即跳转到不同的 URL 路径&#xff09;。 this.$rout…

aws xray通过设置采样规则对请求进行过滤

参考资料 https://github.com/aws/aws-xray-sdk-pythonpython api reference&#xff0c;https://docs.aws.amazon.com/xray-sdk-for-python/latest/reference/node api reference&#xff0c;https://docs.aws.amazon.com/xray-sdk-for-nodejs/latest/reference/ 初始化环境…

vscode Markdown

安装扩展插件 Markdown All in One Markdown Preview Enhanced Paste Image参考 Markdown 和 Visual Studio Code

8.机器学习--决策树

(⊙﹏⊙)下周有要开组会&#xff0c;不知道该说啥&#xff0c;啊啊啊啊&#x1f62b; 目录 1.基本概念 2.ID3算法 3.C4.5算法 4.CART算法 5.连续与缺失值处理 5.1.连续值处理 5.2.缺失值处理 6.剪枝处理 6.1.预剪枝策略 6.2.后剪枝策略 7.实例代码 1.基本概念 提…