0
0

【PHP高级开发工程师系统性教程（实战项目）】——王者荣耀英雄管理系统

在这里插入图片描述

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

👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由 曼亿点 原创

👨‍💻 收录于专栏：PHP程序开发

⭐🅰⭐

— 请添加图片描述

文章目录

⭐前言⭐

在这里插入图片描述
  🐤开发此项目的目的是，让大家更好的了解和使用MySQL数据库和灵活的运用PHP开发语言来连接数据库，达到数据库和页面的交互，达到数据库中的资源能提取在页面中和在页面添加的资源能及时的添加到数据库里面。

🎶一、在MySQl中建立数据库

（1）在数据库中建立英雄数据库

在这里插入图片描述

（2）建立英雄的表

在这里插入图片描述

（3）建立表中的属性

提示:img的图片需要各位友友到到网上去进行自行的下载放入到相应的文件夹中，请勿放错文件夹，如果放错会导致图片不会显示出来。
namesimgprice李信imga/2.jpg￥300猴子imga/3.jpg￥100元歌imga/4.jpg￥150凯imga/5.jpg￥88
在这里插入图片描述

🎶二、连接数据库

   使用mysqli_connect以及mysqli_query等数据库属性进行处理。
连接数据的相对代码如下：

  1. //连接数据库
  2. $conn=mysqli_connect('localhost','root','123456','shop');
  3. if(!$conn){
  4.     echo mysql_connect_error();
  5.     exit;//终止代码，后续不在执行
  6. }
  7.    //1 --编写sql文
  8.    $sql="select * from goods";
  9.    //2---执行sql,并获取结果
  10.    $rs=mysqli_query($conn,$sql);
  11.    //3---处理返回结果
  12.    $goods=mysqli_fetch_all($rs,MYSQLI_ASSOC);//二维数组
  13.    //释放资源，关闭数据库以及结果集
  14.    mysqli_free_result($rs);
  15.    mysqli_close($conn);
  17. </view>

如果对连接数据库不懂的可以打开作者得php程序设计得专栏。

🎶三、对英雄的价格进行处理

（1）价格升序

在这里插入图片描述

  在点击价格升序或价格降序的时候可以达到英雄的皮肤进行价格的升序和价格降序的处理。
价格排列代码如下：

  1. //去接收排序的规则
  2.  if(isset($_GET['sort']))
  3.  {
  4.      //定义排序规则
  5.      $price=array_column($goods,'price');//获取商品数组的价格列
  6.      //获取升降序
  7.      $sort_type=$_GET['sort'];
  8.      if($sort_type=='asc'){
  9.          //为升序
  10.          $sort=SORT_ASC;
  11.      }else
  12.      {
  13.          //为降序
  14.           $sort=SORT_DESC;
  15.      }
  16.      //调用排序的方法
  17.      array_multisort($price,$sort,$goods);
  18.  }

🎶四、对英雄的进行查询

  在查询框中输入查询英雄的名字，从而单个查询出英雄的皮肤和皮肤所需的价格。
在这里插入图片描述
相对于的代码：

  1. //接收查询的内容
  2.   if(isset($_GET['key'])){
  3.       $key_value=$_GET['key'];//查找的商品
  4.       $search=array();
  5.       foreach($goods as $key=>$value)
  6.       {
  7.           $index=array_search($key_value,$value);
  8.           if($index!==false)
  9.           {
  10.              $goods=array();
  11.              $goods[]= $value;
  12.           }
  13.       }
  14.   }

🎶五、王者荣耀英雄管理系统总代码

  排序，出查询和页面展示的总代码如下：

css/demo.css代码：

  1. /*设置页面背景颜色为灰色*/
  2. body {
  3.     background-color: #ededed
  4. }
  5. /*设置顶部搜索组件和操作按钮固定*/
  6. .search_top{
  7.     position:fixed;
  8.     width:100%;
  9.     z-index: 1;
  10. }
  11. /*设置操作按钮背景颜色与页面背景颜色一致*/
  12. .btn-area{
  13.     background-color: #ededed;
  14. }
  15. .weui-btn {
  16.     font-size: 13px;
  17.     color: black;
  18.     font-weight: normal;
  19. }
  20. /*设置图片距离顶部80px，防止顶部固定部分遮挡*/
  21. .banner{
  22.     width: 100%;
  23.     padding-top:80px;
  24. }
  25. .banner img{
  26.     width: 100%;
  27. }
  28. .goods-container {
  29.     //padding-top:80px;
  30.     background-color: #ededed;
  31.     margin-bottom: 60px;
  32. }
  33. /*左右列间距，注意左列右边距和右列左边距都是5px*/
  34. .left{
  35.     margin: 10px 5px 10px 10px;
  36. }
  37. .right{
  38.     margin: 10px 10px 10px 5px;
  39. }
  40. /*设置列里面商品底部间距，图片圆角，背景颜色白色*/
  41. .goods {
  42.     margin-bottom:5px;
  43.     border-radius: 10px;/*与img圆角配合使用*/
  44.     background-color: white;
  45.     text-align: center;
  46. }
  47. /*设置图片宽度100%，图片圆角*/
  48. .goods img {
  49.     border-radius: 10px;
  50.     width: 100%;
  51.     height: 100%;
  52. }
  53. .title {
  54.     padding-top: 10px;
  55. }
  56. .price {
  57.     color: red;
  58. }

cs.php代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>商品管理</title>
  6.     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  7.     <link rel="stylesheet" href="css/weui.css"/>
  8.         <!-- 自定义的css -->
  9.         <link rel="stylesheet" href="css/demo.css"/>
  10. </head>
  11. <body ontouchstart>
  12. <?php
  13. //连接数据库
  14. $conn=mysqli_connect('localhost','root','123456','shop');
  15. if(!$conn){
  16.     echo mysql_connect_error();
  17.     exit;//终止代码，后续不在执行
  18. }
  19.    //1 --编写sql文
  20.    $sql="select * from goods";
  21.    //2---执行sql,并获取结果
  22.    $rs=mysqli_query($conn,$sql);
  23.    //3---处理返回结果
  24.    $goods=mysqli_fetch_all($rs,MYSQLI_ASSOC);//二维数组
  25.    //释放资源，关闭数据库以及结果集
  26.    mysqli_free_result($rs);
  27.    mysqli_close($conn);
  29. //去接收排序的规则
  30.  if(isset($_GET['sort']))
  31.  {
  32.      //定义排序规则
  33.      $price=array_column($goods,'price');//获取商品数组的价格列
  34.      //获取升降序
  35.      $sort_type=$_GET['sort'];
  36.      if($sort_type=='asc'){
  37.          //为升序
  38.          $sort=SORT_ASC;
  39.      }else
  40.      {
  41.          //为降序
  42.           $sort=SORT_DESC;
  43.      }
  44.      //调用排序的方法
  45.      array_multisort($price,$sort,$goods);
  46.  }
  48. //接收查询的内容
  49.   if(isset($_GET['key'])){
  50.       $key_value=$_GET['key'];//查找的商品
  51.       $search=array();
  52.       foreach($goods as $key=>$value)
  53.       {
  54.           $index=array_search($key_value,$value);
  55.           if($index!==false)
  56.           {
  57.              $goods=array();
  58.              $goods[]= $value;
  59.           }
  60.       }
  61.   }
  63.      //将数组进行拆分,分别显示在左边和右边
  64.      $goods_left=array();
  65.       $goods_right=array();
  66.       for($i=0;$i<count($goods);$i++)
  67.       {
  68.           if($i%2==0){
  69.               //显示在左边的商品
  70.               array_push($goods_left,$goods[$i]);
  71.           }else{
  72.               array_push($goods_right,$goods[$i]);
  73.           }
  74.       }
  75. ?>
  76. <!-- 将顶部固定 -->
  77. <div class="search_top">
  78.  <!-- 搜索框组件 -->
  79.  <div class="weui-search-bar">
  80.     <form class="weui-search-bar__form" method="GET" action="index.php">
  81.         <div class="weui-search-bar__box">
  82.             <input type="search" class="weui-search-bar__input" name="key" 
  83.                          style="padding-left:10px" placeholder="输入查找的商品" value=""/>
  84.             <button class="weui-icon-search" type="submit"></button>
  85.         </div>
  86.     </form>
  87.  </div>
  88.  <!-- 操作按钮 -->
  89.  <div class="btn-area">
  90.     <a class="weui-btn weui-btn_mini" href="index.php?sort=asc">价格升序</a>
  91.     <a class="weui-btn weui-btn_mini" href="index.php?sort=desc">价格降序</a>
  92.     <a class="weui-btn weui-btn_mini" href="index.php">显示全部</a>
  93.  </div>
  94. </div>
  95. <!-- 顶部图片 -->
  96. <div class="banner"><img src="images/header.jpg" /></div>
  97. <!-- 由于顶部导航固定,将商品显示距离顶部100px,防止给搜索组件遮挡 -->
  98. <!-- 由于底部导航固定,将商品显示距离底部60px,防止给导航组件遮挡 -->
  99. <div class="goods-container">
  100. <div class="weui-flex">
  101. <div class="weui-flex__item left">
  102.     <!-- 第一列 -->
  103.     <?php
  104.     //绑定左边的商品
  105.     foreach($goods_left as $key=>$value)
  106.     {
  107.         ?>
  108.         <div class="goods">
  109.             <img src="<?php echo $value['img']?>" alt="">
  110.             <p class="title"><?php echo $value['names']?></p>
  111.             <p class="price"><?php echo $value['price']?></p>
  112.         </div>
  113.         <?php
  114.     }
  115.     ?>
  116.         
  117.     </div>
  118.     <!-- 第二列 -->
  119.     <div class="weui-flex__item right">
  120.     <?php
  121.     //绑定右边的商品
  122.     foreach($goods_right as $key=>$value)
  123.     {
  124.         ?>
  125.         <div class="goods">
  126.             <img src="<?php echo $value['img']?>" alt="">
  127.             <p class="title"><?php echo $value['names']?></p>
  128.             <p class="price"><?php echo $value['price']?></p>
  129.         </div>
  130.         <?php
  131.     }
  132.     ?>
  133.     </div>
  134. </div>
  135. </div>
  136. <div class="weui-tabbar" style="width: 100%; position: fixed; bottom: 0;">
  137.             <div class="weui-tabbar__item">
  138.                 <div tyle="display: inline-block; position: relative;">
  139.                     <img src="./images/home.png" alt="" class="weui-tabbar__icon">
  140.                 </div>
  141.                 <p class="weui-tabbar__label">首页</p>
  142.             </div>
  143.             <div class="weui-tabbar__item">
  144.                 <img src="./images/type.png" alt="" class="weui-tabbar__icon">
  145.                 <p class="weui-tabbar__label">分类</p>
  146.             </div>
  147.             <div class="weui-tabbar__item">
  148.                 <div style="display: inline-block; position: relative;">
  149.                     <img src="./images/car.png" alt="" class="weui-tabbar__icon">
  150.                 </div>
  151.                 <p class="weui-tabbar__label">购物车</p>
  152.             </div>
  153.             <div class="weui-tabbar__item weui-bar__item_on">
  154.                 <img src="./images/me.png" alt="" class="weui-tabbar__icon">
  155.                 <p class="weui-tabbar__label">我</p>
  156.             </div>
  157.         </div>
  158. </body>
  159. </html>

效果展示：
在这里插入图片描述

结束语🥇

以上就是PHP程序设计
持续更新PHP程序设计教程，欢迎大家订阅系列专栏🔥PHP程序开发你们的支持就是曼亿点创作的动力💖💖💖
请添加图片描述

标签： php android 开发语言
本文转载自: https://blog.csdn.net/2301_77628600/article/details/137615807
版权归原作者 曼亿点 所有， 如有侵权，请联系我们删除。
登录后发布评论

“【PHP高级开发工程师系统性教程（实战项目）】——王者荣耀英雄管理系统”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。