【项目实战】——商品管理的制作完整代码

曼亿点2024-04-09 17:02

👨‍💻个人主页 ：@开发者-曼亿点

👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由 曼亿点 原创

👨‍💻 收录于专栏 ：PHP程序开发

⭐🅰⭐

---

文章目录

⭐前言⭐

🎶（1） 二维数组

与一维数组相比，二维数组能够存储更加丰富的数据。相对于一维数组只有一键值维度--列，二维数组具有两个键值维度--行和列。

如果是索引数组，则分别表示数组的行和列。数组维度图描述了索引数组中一维数和二维数组的维度，如果是关联数组，则只需要将行及列中的数字改为键名和值即可。

数组维度图：

二维数组的本质是二维数组中存放的元素都是一维数组，创建二维数组的语法格式如下:

//创建二维数组，存放的元素为数组$arr =array(arrl,arr2,..,arrN);

二维数组仅仅通过列键值获取数组元素:array[col]，而二维数组多了一个键值维度因此，获取数组元素需要行键值和列键值:array[rowl[col]。

创建二维数组：

<?php
//创建数组存放索引数组
$arr1 =array(array(0,0,100),array(1, 1));
print_r($arr1);
echo "<br />";
echo"第1行，第3列的值 arr1[0][2]为:". $arr1[0][2];
echo "<br />".
//创建数组存放关联数组
$arr2 = array(
array ("name"=>"商品 A","price"=>"100","img"=>"images/1.jpg"),
array("name"=>"商品 B","price"=>"200","img"=>"images/2.jpg"));
print_r($arr1);
echo "<br />";
echo"第2行，列键值为name 的值为arr2[1][name]为:".$arr2[1]["name"];
?>

如图为结果图：

🎶（2） 二维数组遍历

二维数组多了一个行维度，因此需要两个循环遍历，第一个循环负责行，第二个循环负责列。由于 for循环是以次数作为循环条件的，因此 for 循环适合索引数组。

创建二维数组：

<?php
//创建数组存放索引数组
$arr1 = array(array(0,0,100),array(1,1),array(2,3,4,5));
print_r($arr1);
echo "<br />";
//计算数组行数
$row_num = count($arr1);
//for 循环遍历行
for($row=0;$row< $row_num; $row++){
	//取出数组，计算列数
$col_num = count($arr1[$row]);
//for 循环遍历列
for($co1=0;$col < $col_num; $col++){
echo $arr1[$row][$col]."     ";
}
echo "<br />";
}
//创建数组存放关联数组
$arr2 = array(
array("name"=>"商品 A","price"=>"100"","img"=>"images/1.jpg"),
array("name"=>"商品 B","price"=>"200","img"=>"images/2.jpg")
);
print_r($arr2);
echo "<br />"; 
//遍历行
foreach ($arr2 as $key=>$value){
	//获取一维数组后，直接通过键值获取".
	echo $value['name'].",".$value['price'].",".$value['img' ]."<br />";
	}
?>

运行结果如图：

🎶（3）二维数组的排列

维数组中可以使用sort、asort和ksort 等函数进行排序，二维数组没有直接用于排序的函数，需要自己实现。例如，排序后的商品统计表，要对里面的商品按价格从高到低的规则排序，排序后商品统计表见排序后的商品统计表。

排序后的商品统计表

商品名称 价格/元 图片地址
商品A 89 /images/1.jpg
商品B 88 images/2.jpg
商品C 100 images/3.jpg

排序后的商品统计表

商品名称 价格/元 图片地址
商品c 100 /images/3.jpg
商品A 89 images/1.jpg
商品B 89 images/2.jpg

在二维数组中对数组进行排序，可以利用 array_column函数和 array_multisort 函数

anray_multisort 函数返回一个排序数组，语法格式如下:

array_multisort(arrl,sorting,order,sorting type, arr2, arr3,....arrN)；

参数order可选，默认值为SORT_ASC，表示按升序排列。也可以指定SORTDESC 按降序排列。参数type可选，规定排序类型，默认为SORT_REGULAR，表示按常规顺序排列。参数 arr1必选，arr1l中的元素值为排序的依据，一般为一维数组，参数arr2,arr3，...，arrN可选。anray_multisont 数先对第一个数组元素值进行排序，接着是后面的数组，且后面数组的顺序按照对应的第一个数组的值排列。相当于将排序的多个数组以列为单位,按第一个数组元素值进行排序。

🎶（4） 商品的显示，商品的排序和商品的查找

新建商品的静态页面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品管理</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="css/weui.css"/>
		<!-- 自定义的css -->
		<link rel="stylesheet" href="css/demo.css"/>
</head>
<body ontouchstart>
<!-- 将顶部固定 -->
<div class="search_top">
 <!-- 搜索框组件 -->
 <div class="weui-search-bar">
    <form class="weui-search-bar__form" method="GET" action="index.php">
        <div class="weui-search-bar__box">
            <input type="search" class="weui-search-bar__input" name="key" 
			             style="padding-left:10px" placeholder="输入查找的商品" value=""/>
            <button class="weui-icon-search" type="submit"></button>
        </div>
    </form>
 </div>
 <!-- 操作按钮 -->
 <div class="btn-area">
	 <a class="weui-btn weui-btn_mini" href="index.php?sort=asc">价格升序</a>
	 <a class="weui-btn weui-btn_mini" href="index.php?sort=desc">价格降序</a>
	 <a class="weui-btn weui-btn_mini" href="index.php">显示全部</a>
 </div>
</div>
<!-- 由于顶部导航固定,将商品显示距离顶部100px,防止给搜索遮挡 -->
<div class="goods-container">
<div class="weui-flex">
	<!-- 第一列 -->
	<div class="weui-flex__item left">
		<div class="goods">
		    <img src="images/1.jpg" alt="">
		    <p class="title">华为笔记本MateBook</p>
			<p class="price">5600</p>
		</div>
	</div>
	<!-- 第二列
	<div class="weui-flex__item right">
		<div class="goods">
		    <img src="images/2.jpg" alt="">
		    <p class="title">华为屏幕MateView</p>
			<p class="price">2600</p>
		</div>
	</div> -->
</div>
</div>
</body>
</html>

商品页面样式设置：

/*设置页面背景颜色为灰色*/
body {
	background-color: #ededed
}
/*设置顶部搜索组件和操作按钮固定*/
.search_top{
	position:fixed;
	width:100%;
	z-index: 1;
}
/*设置操作按钮背景颜色与页面背景颜色一致*/
.btn-area{
	background-color: #ededed;
}
.weui-btn {
	font-size: 13px;
	color: black;
	font-weight: normal;
}
/*设置商品距离顶部80px，防止顶部固定部分遮挡商品*/
.goods-container {
	padding-top:80px;
	background-color: #ededed;
}
/*左右列间距，注意左列右边距和右列左边距都是5px*/
.left{
	margin: 10px 5px 10px 10px;
}
.right{
	margin: 10px 10px 10px 5px;
}
/*设置列里面商品底部间距，图片圆角，背景颜色白色*/
.goods {
	margin-bottom:5px;
	border-radius: 10px;/*与img圆角配合使用*/
	background-color: white;
	text-align: center;
}
/*设置图片宽度100%，图片圆角*/
.goods img {
	border-radius: 10px;
	width: 100%;
	height: 100%;
}
.title {
	padding-top: 10px;
}
.price {
	color: red;
}

效果图：

首页面由两部分构成，分别是置项的组件(包含搜索框和机作被围和晁示商品容器组件。搜索框中使用了表单提交关键字，表单使用 POST 方式提交数据当前页面。

商品管理的总代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品管理</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="css/weui.css"/>
		<!-- 自定义的css -->
		<link rel="stylesheet" href="css/demo.css"/>
</head>
<body ontouchstart>
<?php
//定义一个二维数组，存储商品
$goods=array(
	array("img"=>"images/1.jpg","name"=>"华为笔记本","price"=>"10000"),
	array("img"=>"images/2.jpg","name"=>"华为手表","price"=>"2000"),
	array("img"=>"images/3.jpg","name"=>"华为路由器","price"=>"3080"),
	array("img"=>"images/4.jpg","name"=>"华为电视剧","price"=>"4090"),
	array("img"=>"images/5.jpg","name"=>"华为手机","price"=>"52223")
);


//去接收排序的规则
 if(isset($_GET['sort']))
 {
	 //定义排序规则
	 $price=array_column($goods,'price');//获取商品数组的价格列
	 //获取升降序
	 $sort_type=$_GET['sort'];
	 if($sort_type=='asc'){
		 //为升序
		 $sort=SORT_ASC;
	 }else
	 {
		 //为降序
		  $sort=SORT_DESC;
	 }
	 //调用排序的方法
	 array_multisort($price,$sort,$goods);
 }
 //接收查询的内容
  if(isset($_GET['key'])){
 	 $key_value=$_GET['key'];//查找的商品
 	 $search=array();
 	 foreach($goods as $key=>$value)
 	 {
 		 $index=array_search($key_value,$value);
 		 if($index!==false)
 		 {
			 $goods=array();
 			$goods[]= $value;
 		 }
 	 }
  }
$goods_left=array();
$goods_right=array();
for($i=0;$i<count($goods);$i++)
{
	if($i%2==0){
		array_push($goods_left,$goods[$i]);//存放显示在左边的数据
	}else{
		array_push($goods_right,$goods[$i]);//存放显示在右边的数据
	}
}
?>
<!-- 将顶部固定 -->
<div class="search_top">
 <!-- 搜索框组件 -->
 <div class="weui-search-bar">
    <form class="weui-search-bar__form" method="GET" action="test.php">
        <div class="weui-search-bar__box">
            <input type="search" class="weui-search-bar__input" name="key" 
			             style="padding-left:10px" placeholder="输入查找的商品" value=""/>
            <button class="weui-icon-search" type="submit"></button>
        </div>
    </form>
 </div>
 <!-- 操作按钮 -->
 <div class="btn-area">
	 <a class="weui-btn weui-btn_mini" href="test.php?sort=asc">价格升序</a>
	 <a class="weui-btn weui-btn_mini" href="test.php?sort=desc">价格降序</a>
	 <a class="weui-btn weui-btn_mini" href="test.php">显示全部</a>
 </div>
</div>
<!-- 由于顶部导航固定,将商品显示距离顶部100px,防止给搜索遮挡 -->
<div class="goods-container">
<div class="weui-flex">

<div class="weui-flex__item left">
<?php
//创建二维数组
//遍历左的商品组，并显示在界面上

foreach($goods_left as $key=>$value)
{
	?>
		<div class="goods">
		    <img src=<?php echo $value['img']?> alt="">
		    <p class="title"><?php echo $value['name']?></p>
			<p class="price"><?php echo $value['price']?></p>
		</div>
	<?php
}
?>
</div>

<div class="weui-flex__item right">
<?php
//创建二维数组
//遍历左的商品组，并显示在界面上

foreach($goods_right as $key=>$value)
{
	?>
	
		<div class="goods">
		    <img src=<?php echo $value['img']?> alt="">
		    <p class="title"><?php echo $value['name']?></p>
			<p class="price"><?php echo $value['price']?></p>
		</div>
	
	<?php
}
?>
	</div>
</div>
</div>

</body>
</html>

效果图如下：

提示：按自己的图片路径匹配

结束语🥇

以上就是PHP程序设计

持续更新PHP程序设计教程，欢迎大家订阅系列专栏🔥PHP程序开发你们的支持就是曼亿点创作的动力💖💖💖

相关推荐
酷帅且洋仔12 分钟前
Redis——常用数据类型List
数据库·redis·list
miao_zz1 小时前
基于react native的锚点
android·react native·react.js
安卓美女1 小时前
Android自定义View性能优化
android·性能优化
littleschemer1 小时前
Go缓存系统
缓存·go·cache·bigcache
Amd7942 小时前
Nuxt Kit 中的页面和路由管理
缓存·中间件·路由·nuxt·管理·重定向·动态
小ᶻᶻᶻᶻ2 小时前
搭建 PHP
开发语言·php
Dingdangr2 小时前
Android中的四大组件
android
椰椰椰耶2 小时前
【网络】TCP/IP 五层网络模型：网络层
网络·tcp/ip·php
理想青年宁兴星3 小时前
【MySQL】了解并操作MySQL的缓存配置与信息
数据库·缓存
mg6683 小时前
安卓玩机工具-----无需root权限 卸载 禁用 删除当前机型app应用 ADB玩机工具
android
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）05Coze扣子平台完整体验和实践（附国内和国际版对比）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07【经验分享】Ubuntu22.04安装微信(linux官方版)08苍穹外卖面试总结09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10Ubuntu24.04安装中文输入法