👨💻个人主页:@开发者-曼亿点
👨💻 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>
效果图如下:
提示:按自己的图片路径匹配文章来源:https://www.toymoban.com/news/detail-845852.html
结束语🥇
以上就是PHP程序设计
持续更新PHP程序设计教程,欢迎大家订阅系列专栏🔥PHP程序开发你们的支持就是曼亿点创作的动力💖💖💖
文章来源地址https://www.toymoban.com/news/detail-845852.html
到了这里,关于【项目实战】——商品管理的制作完整代码的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!