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

在这里插入图片描述


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

👨‍💻 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.mzph.cn/news/794370.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

逐步学习Go-WaitGroup【连字都懒得写了,直接Show my Code】

package waitgroup_testimport ("fmt""runtime""sync""testing""time""github.com/stretchr/testify/assert" )// 这是对Go语标准库中sync包下的WaitGroup的描述。// WaitGroup用于等待一组并发的goroutine结结束…

非关系型数据库-----------探索 Redis高可用 、持久化、性能管理

目录 一、Redis 高可用 1.1什么是高可用 1.2Redis的高可用技术 二、 Redis 持久化 2.1持久化的功能 2.2Redis 提供两种方式进行持久化 三、Redis 持久化之----------RDB 3.1触发条件 3.1.1手动触发 3.1.2自动触发 3.1.3其他自动触发机制 3.2执行流程 3.3启动时加载…

在深度学习模型中引入先验

当面对复杂问题的时候&#xff0c;在深度学习模型提取特征的过程中完全抛弃知识是非常不明智的策略。虽然有很多研究者在深度网络处理数据之前&#xff0c;利用具有某种知识的模型驱动方法对数据进行预处理&#xff0c;但是这种方法没有进行实质性地改造深度网络&#xff0c;且…

ms-前端八股文

1、暂时性死区 是指在 JavaScript 中使用 let 或 const 声明变量时&#xff0c;变量在其声明之前不能被访问或使用的特性。 var可以变量提升&#xff08;在 JavaScript 中&#xff0c;变量声明提升是指在执行代码之前&#xff0c;变量声明会被提升到作用域的顶部。&#xff0…

scRAN-seq|加权最近邻分析(1)

概述 本文[1]介绍了Seurat 5.0.0中的加权最近邻&#xff08;WNN&#xff09;分析方法&#xff0c;这是一种用于整合和分析多模态单细胞数据的无监督框架。 简介 多模态分析作为单细胞基因组学的一个新兴领域&#xff0c;它通过同时测量多种数据类型来精确描绘细胞状态&#xff…

idea的后端环境配置

首先&#xff0c;在你刚打开idea时红色箭头所指的是你进行配置的地方&#xff0c;接下来我把具体步骤说一下 1&#xff0c;直接点击箭头所指的地方就会出现如图界面&#xff0c;然后点击Tomcat server,使其展开点击第一个 第二步取消勾选&#xff0c;第三步选择bin的上一级然后…

C++ | Leetcode C++题解之第10题正则表达式匹配

题目&#xff1a; 题解&#xff1a; class Solution { public:bool isMatch(string s, string p) {int m s.size();int n p.size();auto matches [&](int i, int j) {if (i 0) {return false;}if (p[j - 1] .) {return true;}return s[i - 1] p[j - 1];};vector<…

启智社区昇腾算力快速使用 ATC

快速使用 ATC 本文将详细介绍如何借助启智社区昇腾算力 910/910B 进行模型转换&#xff0c;彻底告别开发板上模型转换各种报错的痛苦。 TODO&#xff1a; 完成数据集、模型存储教程 完成训练&模型转换教程 完成 ATC 其他功能教程 Fork 仓库 打开仓库点击右上角的派生按钮…

活动回顾丨掘金海外,探寻泛娱乐社交APP出海新风口

3月中旬,Flat Ads携手声网、XMP在广州成功举办“泛娱乐社交APP出海新风口——广州站”的主题线下沙龙活动。 多位大咖与泛娱乐社交APP赛道的行业伙伴汇聚一堂。本次活动邀请到Flat Ads 市场VP 王若策、声网娱乐视频产品负责人 陈际陶、XMP资深产品运营专家 屈俊星等多位行业大…

基于SpringBoot Vue员工管理系统

一、&#x1f4dd;功能介绍 基于SpringBoot Vue员工管理系统 角色&#xff1a;管理员、用户 管理员&#xff1a;管理员进入主页面&#xff0c;主要功能包括系统首页、个人中心、员工管理、部门管理、请假申请管理、出勤记录管理、奖惩信息管理、工资信息管理等进行操作。 员…

上位机图像处理和嵌入式模块部署(qmacvisual之plc通信)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 传统的非标自动化设备当中&#xff0c;plc发挥了很大的作用。这里面如何对这些电机和机构进行控制&#xff0c;大多数场景下用的就是plc设备了。目…

LeetCode 热题 100 | 贪心算法

目录 1 121. 买卖股票的最佳时机 2 55. 跳跃游戏 3 45. 跳跃游戏 II 4 763. 划分字母区间 菜鸟做题&#xff0c;语言是 C 1 121. 买卖股票的最佳时机 解题思路&#xff1a; 维护一个变量 max_pricemax_price 用于存储排在 i 天之后的股票最高价格第 i 天的最高利润 …

【前端面试3+1】08 css选择器、在前端页面展示后端传来的图片数组、请求方法的常见类型、【搜索插入位置】

一、css选择器有哪些&#xff1f; 1.元素选择器&#xff1a; 通过元素名称选择元素。 示例&#xff1a;p 选择所有段落元素。 2.类选择器&#xff1a; 通过类名选择元素。 示例&#xff1a;.btn 选择所有类名为 btn 的元素。 3.ID选择器&#xff1a; 通过id属性选择元素。 示例…

Copilot for Microsoft365使用心得

从去年3月份的发布到上周获得的体验名额&#xff0c;关注copilot已经超过了一年&#xff0c; 实际体验了一周觉得微软这款产品真的挺厉害的&#xff0c;至少在我认知里面确实可以减少很多的工作量&#xff0c;在此感谢陈老师公众号的体验卡的活动&#xff08;活动真实有效&…

Windows11下Docker使用记录(一)

Docker使用记录&#xff08;一&#xff09; 简单介绍Docker安装Docker 常用命令Docker 可视化Docker 使用GPU可视化rviz、gazebo 在进行ROS项目开发时&#xff0c;如果只有一台Windows电脑&#xff0c;我们可以考虑使用WSL或Docker来搭建ROS环境。在尝试了两种方式后&#xff0…

Tuxera NTFS for Mac2023绿色免费版 免费的ntfs for mac 免费读写硬盘U盘工具

Tuxera NTFS 2023 Mac免费版是款适合Mac用户使用的磁盘读写工具。Tuxera NTFS 2023 Mac可以很好的帮助用户在Mac上打开、编辑、复制、移动或删除存储在Windows NTFS格式的USB驱动器上的文件。并且Tuxera NTFS 2023 Mac还可以无阻碍地使用各种文件系统磁盘&#xff0c;还能解决磁…

WebAuthn:更好地保护线上敏感信息

1. 引言 2023年知乎博客 WebAuthn: 真正的无密码身份认证 总结得很赞。 在数字时代&#xff0c;密码已成为人们日常生活和在线活动中不可或缺的一部分。尽管互联网已经发展了 20 多年&#xff0c;许多方面都有了巨大的改进&#xff0c;但只有密码&#xff0c;还是 20 年前的用…

Python球球大作战

文章目录 写在前面球球大作战程序设计注意事项写在后面 写在前面 安装pygame的命令&#xff1a; pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pygame球球大作战 《球球大作战》是一款简单易上手、充满趣味性和竞技性的休闲手游。游戏的核心玩法可以用一句话概…

python数据分析和可视化【4】星巴克数据分析

有一组关于全球星巴克门店的统计数据directory.csv&#xff0c;分析了在不同国家和地区以及中国不同城市的星巴克门店的数量。 要求&#xff1a; &#xff08;1&#xff09;查看星巴克旗下有哪些品牌。如果我们只关心星巴克咖啡门店&#xff0c;则只需获取星巴克中Brand的数据集…

JUC:SimpleDateFormat的线程安全问题 以及 不可变类型DateTimeFormatter的使用

文章目录 不可变类SimpleDateFormat为什么不安全&#xff1f;解决 不可变类保证线程安全的实现 不可变类 SimpleDateFormat public static void main(String[] args) {SimpleDateFormat simpleDateFormat new SimpleDateFormat("yyyy-MM-dd");for (int i 0; i <…