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

在这里插入图片描述

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

👨‍💻 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 等函数进行排序，二维数组没有直接用于排序的函数，需要自己实现。例如，排序后的商品统计表，要对里面的商品按价格从高到低的规则排序，排序后商品统计表见排序后的商品统计表。

  排序后的商品统计表

商品名称价格/元图片地址
商品A89/images/1.jpg
商品B88images/2.jpg
商品C100images/3.jpg

排序后的商品统计表

商品名称价格/元图片地址
商品c100/images/3.jpg
商品A89images/1.jpg
商品B89images/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程序开发你们的支持就是曼亿点创作的动力💖💖💖
请添加图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/518727.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

阿里云邮件服务器多少钱？邮件服务器租用费用

阿里云邮件服务器多少钱？邮件服务器租用费用

阿里云邮件服务器租用费用&#xff0c;2核2G3M带宽99元一年、2核4G4M服务器199元一年&#xff0c;不只是云服务器ECS&#xff0c;还可以选择轻量应用服务器。 0、在阿里云CLUB中心领取 aliyun.club 当前最新的优惠券和服务器报价单 1、阿里云服务器ECS经济型e实例&#xff0c;2…
阅读更多...
Splunk Attack Range：一款针对Splunk安全的模拟测试环境创建工具

Splunk Attack Range：一款针对Splunk安全的模拟测试环境创建工具

关于Splunk Attack Range Splunk Attack Range是一款针对Splunk安全的模拟测试环境创建工具&#xff0c;该工具完全开源&#xff0c;目前由Splunk威胁研究团队负责维护。 该工具能够帮助广大研究人员构建模拟攻击测试所用的本地或云端环境&#xff0c;并将数据转发至Splunk实例…
阅读更多...
基于SpringBoot+微信小程序的农产品销售平台

基于SpringBoot+微信小程序的农产品销售平台

一、项目背景介绍&#xff1a; 随着人们收入的不断增加、生活水平的普遍提高,对生活质量的要求也日益凸显。而作为关乎每个人的生命、健康安全的食品卫生、质量无疑更被人们所重视。所以,… 2. 其他国家的绿色有机食品所占其国家食品市场比重比较大,如德国在99年便已达到40%,美…
阅读更多...
差异创意搜索算法(DCS)-2024年SCI一区新算法-公式原理详解与性能测评 Matlab代码免费获取

差异创意搜索算法(DCS)-2024年SCI一区新算法-公式原理详解与性能测评 Matlab代码免费获取

声明&#xff1a;文章是从本人公众号中复制而来&#xff0c;因此&#xff0c;想最新最快了解各类智能优化算法及其改进的朋友&#xff0c;可关注我的公众号&#xff1a;强盛机器学习&#xff0c;不定期会有很多免费代码分享~ 目录 原理简介 一、种群初始化 二、差异化知识…
阅读更多...
ThinkPHP代码审计(1) 不安全的SQL注入PHP反序列化链子phar利用简单的CMS审计实例

ThinkPHP代码审计(1) 不安全的SQL注入PHP反序列化链子phar利用简单的CMS审计实例

ThinkPHP代码审计(1) 不安全的SQL注入&PHP反序列化链子phar利用&简单的CMS审计实例 文章目录 ThinkPHP代码审计(1) 不安全的SQL注入&PHP反序列化链子phar利用&简单的CMS审计实例一.Thinkphp5不安全的SQL写法二.Thinkphp3 SQL注入三.Thinkphp链5.1.x结合phar实现…
阅读更多...
可变参数模板

可变参数模板

可变参数模板的概念 可变参数模板是C11新增的最强大的特性之一&#xff0c;它对参数高度泛化&#xff0c;能够让我们创建可以接受可变参数的函数模板和类模板。 在C98/03中&#xff0c;类模板和函数模板中只能包含固定数量的模板参数&#xff0c;可变模板参数无疑是一个巨大的…
阅读更多...
MicroPython 树莓派 RP2 入门教程

MicroPython 树莓派 RP2 入门教程

系列文章目录 前言 Raspberry Pi Pico 开发板&#xff08;图片来源&#xff1a;Raspberry Pi 基金会&#xff09;。 以下是 Raspberry Pi RP2xxx 板的快速参考资料。如果您是第一次使用该开发板&#xff0c;了解微控制器的概况可能会对您有所帮助&#xff1a; 一、关于 RP2xxx…
阅读更多...
MPLS-基础、LSR、LSP、标签、体系结构

MPLS-基础、LSR、LSP、标签、体系结构

MPLS技术 MPLS基础 MPLS&#xff1a;转发数据时&#xff0c;只在网络边缘分析IP报文头&#xff0c;不在每一跳都分析&#xff0c;节约了转发时间。 MPLS&#xff1a;Multiprotocol Label Switching&#xff0c;多协议标签交换骨干网技术。主要应用&#xff1a;VPN、流量工程…
阅读更多...
Day5-Hive的结构和优化、数据文件存储格式

Day5-Hive的结构和优化、数据文件存储格式

Hive 窗口函数 案例 需求&#xff1a;连续三天登陆的用户数据 步骤&#xff1a; -- 建表 create table logins (username string,log_date string ) row format delimited fields terminated by ; -- 加载数据 load data local inpath /opt/hive_data/login into table log…
阅读更多...
小程序如何设置余额充值和消费功能

小程序如何设置余额充值和消费功能

小程序中设置余额充值和消费功能非常重要的&#xff0c;通过让客户在小程序中进行余额充值&#xff0c;不仅可以提高用户粘性&#xff0c;还可以促进消费&#xff0c;增加用户忠诚度。以下是如何在小程序中设置余额充值和消费功能的步骤&#xff1a; 1. **设计充值入口**&…
阅读更多...
Web3 革命：揭示区块链技术的全新应用

Web3 革命：揭示区块链技术的全新应用

随着数字化时代的不断发展&#xff0c;区块链技术作为一项颠覆性的创新正在改变着我们的世界。而在这一技术的进步中&#xff0c;Web3正逐渐崭露头角&#xff0c;为区块链技术的应用带来了全新的可能性。本文将探讨Web3革命所揭示的区块链技术全新应用&#xff0c;并展望其未来…
阅读更多...
【Redis】Redis群集的三种模式(主从、哨兵、群集)

【Redis】Redis群集的三种模式(主从、哨兵、群集)

redis群集有三种模式&#xff0c;分别是主从同步/复制、哨兵模式、Cluster&#xff0c;下面会讲解一下三种模式的工作方式&#xff0c;以及如何搭建cluster群集 ●主从复制&#xff1a;主从复制是高可用Redis的基础&#xff0c;哨兵和集群都是在主从复制基础上实现高可用的。主…
阅读更多...
【性能优化】查询性能优化

【性能优化】查询性能优化

目录 1. 精简字段给前端2. SQL优化3. 多级缓存4. IO连接优化之外考虑计算操作优化5. 请求层配置6. 使用更快的框架 服务器推荐 2核4g 1核2g 2核2g 的服务器&#xff0c;4000 - 5000 qps 就非常不错了。 1. 精简字段给前端 字段信息太多会影响下载内容的速度 2. SQL优化 例如…
阅读更多...
基于springboot的学校访客登记系统

基于springboot的学校访客登记系统

基于SpringBoot的学校访客登记系统的设计与实现~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBootMyBatis工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 功能需求 本学校访客登记系统通过信息化的技术实现了访客管理流程的信息化的管理操作。平…
阅读更多...
iOS开发之Swift标识符

iOS开发之Swift标识符

iOS开发之Swift标识符 在iOS开发中&#xff0c;使用Swift语言时&#xff0c;标识符是用来命名变量、常量、函数、类、结构体、枚举等程序实体的&#xff1b; 这些标识符使得Swift代码更加清晰、易于理解和维护。 一、变量与常量&#xff1a;var、let var代表variable&#…
阅读更多...
C++：函数重载和引用

C++：函数重载和引用

hello&#xff0c;各位小伙伴&#xff0c;本篇文章跟大家一起学习C&#xff1a;函数重载和引用&#xff0c;感谢大家对我上一篇的支持&#xff0c;如有什么问题&#xff0c;还请多多指教 &#xff01; 文章目录 函数重载1.函数重载的概念为什么C支持函数重载 引用引用的概念引…
阅读更多...
基于SpringBoot+Vue的儿童书法机构管理系统

基于SpringBoot+Vue的儿童书法机构管理系统

一、项目背景介绍&#xff1a; 儿童书法机构的管理是一个具有挑战性的任务&#xff0c;需要有效的信息管理和资源分配。传统的手动管理方式存在着效率低下、易出错等问题。为了解决这些问题&#xff0c;基于SpringBootVue的儿童书法机构管理系统应运而生。该系统利用现代化的技…
阅读更多...
代码随想录第三十一天 | 贪心算法P1 | ● 理论基础 ● 455. ● 376. ● 53.

代码随想录第三十一天 | 贪心算法P1 | ● 理论基础 ● 455. ● 376. ● 53.

理论基础 题目分类 一般解题步骤 贪心算法一般分为如下四步&#xff1a; 将问题分解为若干个子问题找出适合的贪心策略求解每一个子问题的最优解将局部最优解堆叠成全局最优解 这个四步其实过于理论化了&#xff0c;我们平时在做贪心类的题目 很难去按照这四步去思考&…
阅读更多...
数据结构：顺序表的基本操作！（C语言）

数据结构：顺序表的基本操作！（C语言）

一、静态存储 #include <stdio.h> #include <stdlib.h>/*[1].定义静态顺序表的最大容量*/ #define MaxSize 10/*[2].自定义数据元素的数据类型*/ typedef int ElemType; 1. 静态分配的定义结构体 /*[3].静态分配的结构体定义*/ typedef struct {ElemType data[M…
阅读更多...
最新AI创作系统ChatGPT网站系统源码+Ai绘画网站源码+Suno-v3-AI音乐生成大模型（sparkAi系统V6版本）

最新AI创作系统ChatGPT网站系统源码+Ai绘画网站源码+Suno-v3-AI音乐生成大模型（sparkAi系统V6版本）

一、前言 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧。已支持GPT…
阅读更多...
最新文章

Copyright @ 2022~2023