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

news2024/11/18 20:23:36

在这里插入图片描述

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

👨‍💻 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程序开发你们的支持就是曼亿点创作的动力💖💖💖
请添加图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

数据结构：详解【树和二叉树】

数据结构：详解【树和二叉树】

1. 树的概念及结构&#xff08;了解&#xff09; 1.1 树的概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝…
阅读更多...
Vue项目登录页实现获取短信验证码的功能

Vue项目登录页实现获取短信验证码的功能

之前我们写过不需要调后端接口就获取验证码的方法，具体看《无需后端接口，用原生js轻松实现验证码》这个文章。现在我们管理后台有个需求，就是登录页面需要获取验证码，用户可以输入验证码后进行登录。效果如下，当我点击获取验证码后能获取短信验证码： 这里在用户点击获取…
阅读更多...
Cortex-M7 异常处理与返回

Cortex-M7 异常处理与返回

1 前言 当CM3开始响应一个中断时&#xff0c;会在它小小的体内奔涌起三股暗流&#xff1a;  入栈&#xff1a; 把8个寄存器的值压入栈;  取向量&#xff1a;从向量表中找出对应的服务程序入口地址;  选择堆栈指针MSP/PSP&#xff0c;更新堆栈指针…
阅读更多...
LeetCode 19.删除链表的倒数第N个结点

LeetCode 19.删除链表的倒数第N个结点

给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], n 2 输出&#xff1a;[1,2,3,5] 示例 2&#xff1a; 输入&#xff1a;head [1], n 1 输出&#xff1a;[] 示例 3&#x…
阅读更多...
Leetcode 39.组合总和

Leetcode 39.组合总和

题目 思路 1.确定递归函数的返回值及参数&#xff1a; 返回值是void,参数这里还是先设定两个全局变量。一个是path存放符合条件单一结果。如&#xff1a;&#xff08;1&#xff0c;2&#xff09;。一个是result&#xff0c;是所有path的集合[(1,2),(1,3)…]。 此外再设定一个…
阅读更多...
前端学习之DOM编程-docmument对象、操作DOM对像内容、操作DOM对象属性方式、操作DOM对象的样式

前端学习之DOM编程-docmument对象、操作DOM对像内容、操作DOM对象属性方式、操作DOM对象的样式

docmument对象 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>document对象</title> </head> <body><div id"container" nameparent><ul name"parent&qu…
阅读更多...
计算机系统结构速成,期末和自考必备

计算机系统结构速成,期末和自考必备

【拯救者】计算机系统结构速成(期末自考)均可用 1️⃣先讲每章对应的基础 2️⃣接着会讲对应的题目巩固 &#x1f357;提供文档下载 这里讲的是【 &#x1f337;速成&#x1f337; 速成&#x1f337; 速成】版本&#xff0c;按课本章节来&#xff0c; 抽取重点&#xff0c;翻…
阅读更多...
数据分析——数据规范化

数据分析——数据规范化

数据规范化是数据分析中的一个重要步骤&#xff0c;其目的在于确保数据的一致性和可比性&#xff0c;提高数据质量和分析结果的准确性。以下是一些数据规范化的常见方法和技术&#xff1a; 数据清洗&#xff1a;此步骤主要清除数据中的重复项、空格、格式错误等&#xff0c;确…
阅读更多...
Transformer Based Multi-view Network for Mammographic Image Classification

Transformer Based Multi-view Network for Mammographic Image Classification

“C-Tk” means “Classification Token” 辅助信息 作者未提供代码
阅读更多...
【python从入门到精通】-- 第四战：语句汇总

【python从入门到精通】-- 第四战：语句汇总

&#x1f308; 个人主页&#xff1a;白子寰 &#x1f525; 分类专栏&#xff1a;python从入门到精通&#xff0c;魔法指针&#xff0c;进阶C&#xff0c;C语言&#xff0c;C语言题集&#xff0c;C语言实现游戏&#x1f448; 希望得到您的订阅和支持~ &#x1f4a1; 坚持创作博文…
阅读更多...
C++：函数重载和引用

C++：函数重载和引用

hello&#xff0c;各位小伙伴&#xff0c;本篇文章跟大家一起学习C&#xff1a;函数重载和引用&#xff0c;感谢大家对我上一篇的支持&#xff0c;如有什么问题&#xff0c;还请多多指教 &#xff01; 文章目录 函数重载1.函数重载的概念为什么C支持函数重载 引用引用的概念引…
阅读更多...
C++中发送HTTP请求的方式

C++中发送HTTP请求的方式

一&#xff0c;简介 使用C编程发送HTTP请求通常需要使用第三方的HTTP库或框架。在C中&#xff0c;有几个受欢迎的HTTP库可供选择&#xff0c;例如Curl、Boost.Beast和cpp-httplib。另外&#xff0c;也可以自己实现socket来发送http请求 二、使用Curl库发送HTTP请求 1. 确认当…
阅读更多...
day60 动态规划part17

day60 动态规划part17

这两题看了自己写的笔记还不懂的话&#xff0c;看看这个up的思路就行&#xff1a; https://space.bilibili.com/111062940/search/video?keyword%E5%9B%9E%E6%96%87 647. 回文子串 中等 提示 给你一个字符串 s &#xff0c;请你统计并返回这个字符串中 回文子串 的数目。 回…
阅读更多...
微带线特性阻抗快速计算---根据介质板参数和特性阻抗得到线宽（Matlab代码）

微带线特性阻抗快速计算---根据介质板参数和特性阻抗得到线宽（Matlab代码）

微带线特性阻抗快速计算—根据介质板参数和特性阻抗得到线宽&#xff08;Matlab代码&#xff09; 参考&#xff1a;https://blog.csdn.net/weixin_45811090/article/details/130045689 《射频电路理论与设计》第2版 黄玉兰著 《射频电路设计——理论与应用》第二版 Reinhold L…
阅读更多...
STC89C51学习笔记（三）

STC89C51学习笔记（三）

STC89C51学习笔记&#xff08;三&#xff09; 综述&#xff1a;本文讲述了通过51单片机控制LED闪烁、流水灯、按键控制LED亮灭、按键控制LED实现二进制、按键控制LED左右移。 一、LED 1.LED闪烁 1&#xff09;原理 如果要实现LED闪烁&#xff0c;不可以直接先使LED亮&…
阅读更多...
兼顾性能的数据倾斜处理方案

兼顾性能的数据倾斜处理方案

目录 前言 一、场景描述 二、常见的优化方法 2.1 Mapjoin 2.2 特殊值/空值打散 2.3 热点值打散&#xff0c;副表呈倍数扩散 2.4 热点数据单独处理/SkewJoin 2.5 方案总结 三、Distmapjoin 3.1 核心思路 3.2 代码实现 3.3 真实效果 四、方案总结 文章主要是介绍在支…
阅读更多...
手把手教你从入门到精通C# MES通信

手把手教你从入门到精通C# MES通信

前言 我们在上位机软件开发的时候，经常需要与客户的MES系统进行通信，一般与MES系统通信需要实现的功能如下： 1、通过输入员工号来获取登录MES系统的权限 2、上传设备检测的OK/NG结果给MES系统； 3、上传设备生产过程中的异常信息给MES系统； 4、上传设备生产过程中的数据，…
阅读更多...
(arxiv2401) CrossMAE

(arxiv2401) CrossMAE

作者团队来自加州大学伯克利分校&#xff08;UC Berkeley&#xff09;和加州大学旧金山分校&#xff08;UCSF&#xff09;。论文主要探讨了在MAE的解码中&#xff0c;图像patch之间的依赖性&#xff0c;并提出了一种新的预训练框架 CrossMAE。 论文的主要贡献包括&#xff1a; …
阅读更多...
【C++入门】关键字、命名空间以及输入输出

【C++入门】关键字、命名空间以及输入输出

&#x1f49e;&#x1f49e; 前言 hello hello~ &#xff0c;这里是大耳朵土土垚~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#x…
阅读更多...
Ant Design Vue table固定列失效问题解决

Ant Design Vue table固定列失效问题解决

问题描述&#xff1a;项目中封装好的公共table组件&#xff0c;基于Ant Design Vue table封装&#xff1b;使用中&#xff0c;用到了列固定&#xff0c;但是没生效&#xff0c;找了好久的原因。。。最后是因为外层容器标签导致&#xff1b; 解决方法&#xff1a;如果a-table组件…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023