javascript - html 根据点击的内容不同的页面内容

Question

我有一个将销售多种产品的网站。到目前为止，我的列表页面看起来像这样

<div class="col-sm-9 padding-right">
    <div class="features_items"><!--features_items-->
        <h2 class="title text-center">My Products</h2>

        <?php
        $servername = "server";
        $username = "user";
        $password = "pass";
        $dbname = "dbname";

        // Create connection
        $conn = new mysqli($servername, $username, $password, $dbname);
        // Check connection
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
        }


        $sql2 = "SELECT * FROM myproducts WHERE 1 ORDER BY ProductName ASC";
        $myresult = $conn->query($sql2);

        $x = 1;
        while ($row = $myresult->fetch_assoc()) {
       ?>
       <div class="col-sm-4">
           <div class="product-image-wrapper">
               <div class="single-products">
                   <div class="productinfo text-center">

                       <img src="../../images/myImages/<?php echo $row['ProductImage1'];?>_0001_1.jpg" alt="../../images/myImages/<?php echo $row['ProductImage1'];?>_0001_1.jpg" />
                       <h2><?php echo $row['ProductPrice']; ?></h2>
                       <p><?php echo $row['ProductName']; ?></p>
                       <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                   </div>
                   <div class="product-overlay">
                       <div class="overlay-content">
                           <h2><?php echo $row['Vendor']; ?></h2>
                           <h2><?php echo $row['ProductName']; ?></h2>
                           <p>$ <?php echo $row['ProductPrice']; ?></p>
                           <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                       </div>
                   </div>
               </div>
               <div class="choose">
                   <ul class="nav nav-pills nav-justified">
                       <li><a href=""><i class="fa fa-plus-square"></i>Add to wishlist</a></li>
                       <li><a href=""><i class="fa fa-plus-square"></i>Add to compare</a></li>
                   </ul>
               </div>
           </div>
       </div>
       <?php
       }
    $conn->close();
?>

上面的代码循环遍历数据库中的所有内容并将其显示在屏幕上。我想要的是，当您单击产品时，它会转到不同的页面并显示特定的产品信息。我有数百种产品需要单独显示，我想知道是否有一种方法可以让我不必编写100多个html文件，这样每个页面都可以有其单独的显示。

理想情况下，设置类似于上面的内容，它使用 php 从数据库中提取内容并显示需要在屏幕上显示的内容。但我的问题是，一旦点击产品，新页面如何知道已经通过了哪些产品，我能想到的唯一方法是创建所有单独的产品页面。

Answer 1

您需要像这样定义路由

my-website.com/product.php?id=2

其中 id 是每个产品的 ID。

或

如果你的 table 上有一个slug列，你可以这样做

my-website.com/product.php?slug=a-nice-product

slug 将是为每个产品生成的存储的 slug。

因此，无论哪种方式适合您，您都可以使用产品的 id 或 slug 来获取特定产品以显示在产品详细信息页面上。

显示格式将基于预定义的模板。类似于您对产品列表所做的操作将是

    <?php
  $servername = "server";
  $username = "user";
  $password = "pass";
  $dbname = "dbname";

  // Create connection
  $conn = new mysqli($servername, $username, $password, $dbname);
  // Check connection
  if ($conn->connect_error) {
      die("Connection failed: " . $conn->connect_error);
  }

  $id = $_GET['id']; // in the case of "my-website.com/product.php?id=2"

  $sql2 = "SELECT * FROM myproducts WHERE id=$id ORDER BY ProductName ASC"; // NOTE:: This is a bad practice
  $myresult = $conn->query($sql2);

  if($myresult):
?>

<div class="col-sm-9 padding-right">
        <h2 class="title text-center">Details about <?= $myresult['ProductName']; ?></h2>

        <!-- LIST PRODUCT DETAILS BASED ON TEMPLATE DESIGN -->

</div>
<?php
    endif;
    $conn->close();
?>

更新:

    $id = $_GET['id']; // in the case of "my-website.com/product.php?id=2"

      $sql2 = "SELECT * FROM myproducts WHERE id=$id ORDER BY ProductName ASC";
// NOTE:: This is a bad practice as it is open to SQL injection attacks.

了解更多关于SQL injection的信息

同样，更清晰的网址将如下所示

my-website.com/product/2

或

my-website.com/product/a-nice-product

但要实现此目的，您需要设置一些 htaccess 规则。