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

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

相关推荐
无极程序员42 分钟前
PHP常量
android·ide·android studio
萌面小侠Plus2 小时前
Android笔记(三十三)：封装设备性能级别判断工具——低端机还是高端机
android·性能优化·kotlin·工具类·低端机
慢慢成长的码农2 小时前
Android Profiler 内存分析
android
大风起兮云飞扬丶2 小时前
Android——多线程、线程通信、handler机制
android
ketil272 小时前
Ubuntu 安装 redis
redis
L72562 小时前
Android的Handler
android
清风徐来辽2 小时前
Android HandlerThread 基础
android
王佑辉3 小时前
【redis】redis缓存和数据库保证一致性的方案
redis·面试
HerayChen3 小时前
HbuildderX运行到手机或模拟器的Android App基座识别不到设备 mac
android·macos·智能手机
顾北川_野3 小时前
Android 手机设备的OEM-unlock解锁 和 adb push文件
android·java
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解