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

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

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

👨‍💻 本文由曼亿点原创

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

⭐🅰⭐

---

文章目录

- ⭐🅰⭐
- ⭐前言⭐
- [🎶（1）二维数组](#🎶（1）二维数组)
- [🎶（2）二维数组遍历](#🎶（2）二维数组遍历)
- 🎶（3）二维数组的排列
- [🎶（4）商品的显示，商品的排序和商品的查找](#🎶（4）商品的显示，商品的排序和商品的查找)
- - - 结束语🥇

⭐前言⭐

🎶（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程序开发你们的支持就是曼亿点创作的动力💖💖💖