当我在 PHP 中使用路由器时，为什么不加载 CSS 和 JavaScript？答案

【问题标题】：Why don't CSS and JavaScript load when I using router in PHP?当我在 PHP 中使用路由器时，为什么不加载 CSS 和 JavaScript？
【发布时间】：2021-11-15 04:00:28
【问题描述】：

我在我的项目中使用 PHP MVC 架构。以下是我的观点之一（php文件）：

<?php
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
include "../app/model/loadImages.php";
?>


<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Highway Grid CSS Template</title>
  <!-- 

Highway Template

https://templatemo.com/tm-520-highway

-->
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">

  <link rel="stylesheet" href="../public/assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="../public/assets/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="../public/assets/css/fontAwesome.css">
  <link rel="stylesheet" href="../public/assets/css/light-box.css">
  <link rel="stylesheet" href="../public/assets/css/templatemo-style.css">

  <link href="https://fonts.googleapis.com/css?family=Kanit:100,200,300,400,500,600,700,800,900" rel="stylesheet">

  <script src="../public/assets/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>

<body>
  <nav>
    <?php while ($row = $result2->fetch_assoc()) { $rows[] = $row ?>
      <div class="logo">
        <a href="index.php"><?php echo $row['header_1'] ?> <em><?php echo $row['header_2'] ?></em></a>
      </div>
      <div class="menu-icon">
        <span></span>
      </div>
  </nav>

  <div id="video-container">
    <div class="video-overlay"></div>
    <div class="video-content">
      <div class="inner">
        <h1><?php echo $row['mainTitle_1'] ?> <em><?php echo $row['mainTitle_2'] ?></em></h1>
        <p><?php echo $row['subtitle_1'] ?></p>
        <p><?php echo $row['subtitle_2'] ?></p>
        <div class="scroll-icon">
          <a class="scrollTo" data-scrollTo="portfolio" href="#"><img src="../public/assets/img/scroll-icon.png" alt=""></a>
        </div>
      </div>
    </div>
  <?php } $connection->close() ?>
  <?php unset($result2); ?>
  <video autoplay="" loop="" muted>
    <source src="../public/assets/videos/highway-loop.mp4" type="video/mp4" />
  </video>
  </div>


  <div class="grid-portfolio" id="portfolio">
    <div class="container">
      <div class="row">
        <?php while ($row = $result->fetch_assoc()) { ?>
          <div class="col-md-4 col-sm-6">
            <div class="portfolio-item">
              <div class="thumb">
                <a href="../public/assets/img/<?php echo $row['image'] ?>" data-lightbox="image-1">
                  <div class="hover-effect">
                    <div class="hover-content">
                      <h1><?php echo $row['title_1'] ?> <em><?php echo $row['title_2'] ?></em></h1>
                      <p><?php echo $row['subtitle'] ?></p>
                    </div>
                  </div>
                </a>
                <div class="image">
                  <img src="../public/assets/img/<?php echo $row['image'] ?>">
                </div>
              </div>
            </div>
          </div>
        <?php } ?>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="load-more-button">
            <a href="#">Load More</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <footer>
    <div class="container-fluid">
      <?php foreach($rows as $row) { ?>
        <div class="col-md-12">
          <p>Copyright &copy; <?php echo $row['bottom_txt_year'] ?> <?php echo $row['bottom_txt_company'] ?> | Designed by <?php echo $row['designer'] ?></p>
        </div>
      <?php } ?>
    </div>
  </footer>


  <!-- Modal button -->
  <div class="popup-icon">
    <button id="modBtn" class="modal-btn"><img src="../public/assets/img/contact-icon.png" alt=""></button>
  </div>

  <!-- Modal -->
  <div id="modal" class="modal">
    <!-- Modal Content -->
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header">
        <h3 class="header-title">Send us a mssage!</h3>
        <div class="close-btn"><img src="../public/assets/img/close_contact.png" alt=""></div>
      </div>
      <!-- Modal Body -->
      <div class="modal-body">
        <div class="col-md-6 col-md-offset-3">
          <form id="contact" action="" method="post">
            <div class="row">
              <div class="col-md-12">
                <fieldset>
                  <input name="name" type="text" class="form-control" id="name" placeholder="Your name..." required="">
                </fieldset>
              </div>
              <div class="col-md-12">
                <fieldset>
                  <input name="email" type="email" class="form-control" id="email" placeholder="Your email..." required="">
                </fieldset>
              </div>
              <div class="col-md-12">
                <fieldset>
                  <textarea name="message" rows="6" class="form-control" id="message" placeholder="Your message..." required=""></textarea>
                </fieldset>
              </div>
              <div class="col-md-12">
                <fieldset>
                  <button type="submit" id="form-submit" class="btn">Send Message Now</button>
                </fieldset>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>



  <section class="overlay-menu">
    <div class="container">
      <div class="row">
        <div class="main-menu">
          <ul>
            <li>
              <a href="index.html">SignUp</a>
            </li>
            <li>
              <a href="../public/admin/index.php">LogIn</a>
            </li>
            <li>
              <a href="about.html">About Us</a>
            </li>
            <li>
              <a href="blog.html">Blog Entries</a>
            </li>
            <li>
              <a href="single-post.html">Single Post</a>
            </li>
          </ul>
          <?php foreach($rows as $row) { ?>
          <p><?php echo $row['message_1'] ?></p>
          <?php } ?>
        </div>
      </div>
    </div>
  </section>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script>
    window.jQuery || document.write('<script src="../public/assets/js/vendor/jquery-1.11.2.min.js"><\/script>')
  </script>

  <script src="../public/assets/js/vendor/bootstrap.min.js"></script>

  <script src="../public/assets/js/plugins.js"></script>
  <script src="../public/assets/js/main.js"></script>

</body>

</html>

这是我的路由器：

<?php
class APP 
{
    protected $controller = "home";
    protected $method = "index";
    protected $params = [];
    public function Run()
    {
        $url = $this->SplitURL();
        if(file_exists("../app/controller/".strtolower($url[0]).".php"))
        {
            $this->controller = strtolower($url[0]);
            unset($url[0]);
        }
        require "../app/controller/".$this->controller.".php";

        if(isset($url[1]))
        {
            if(method_exists($this->controller, $url[1]))
            {
                $this->method = $url[1];
                unset($url[1]);
            }
        }
        //array_values function resets array's empty indexes
        $this->params = array_values($url);
        //This function calls methods in controller
        $this->controller = new $this->controller;
        call_user_func_array([$this->controller, $this->method], $this->params);

    }

    private function SplitURL()
    {
        if($_GET == null)
        {
            return array("home/index");
        }
        else
        {
            return explode("/", filter_var(trim($_GET['url'], '/')),FILTER_SANITIZE_URL);
        }
    }
}

这是我的控制器之一（家庭控制器）：

<?php
class Home
{
    public function index()
    {
        $this->View("gallery/index");
    }
    public function View($view, $data = '')
    {
        if(file_exists("../app/views/".$view.".php"))
        {
            include "../app/views/".$view.".php";
        }
    }
}
?>

我的问题是，当我不输入控制器和索引或仅在 URL 中输入控制器名称时，一切正常，但是当我在 URL 中输入控制器和方法名称时，仅加载 HTML 和 CSS 和 JavaScript不要加载。我已将我的项目作为 zip 文件提供。请帮我解决它。 https://filebin.net/7nps0b1x04z8a08m

【问题讨论】：

标签： php html css

【解决方案1】：

不要在你的链接href中使用相对路径，例如当你使用路由example.com/controller然后href="../public/assets/css/bootstrap.min.css"从example.com/public/assets/css/bootstrap.min.css加载css文件但是如果路由是example.com/controller/index然后css将从@987654327加载@（我猜这个地址是错误的）。

所以定义您的样式表链接，如下所示 (Relative path doc)：

<link rel="stylesheet" href="/public/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="/public/assets/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/public/assets/css/fontAwesome.css">
<link rel="stylesheet" href="/public/assets/css/light-box.css">
<link rel="stylesheet" href="/public/assets/css/templatemo-style.css">

【讨论】：

我将 href 更改为您提供的内容，但它完全丢失了 CSS。
你的主机上的bootstrap.min.css文件路径是什么（或本地主机如localhost/public/assets/css/bootstrap.min.css）？
谢谢，我在“MyProject”文件夹中有所有子文件夹。我将所有 href 和 srcs 更改为 href="/MyProject/public/assets/css/bootstrap.min.css"
此外，public 是目录的通用命名约定，其内容可通过 Web 服务器公开获得。如果您将public 本身作为URL 路径的一部分，这意味着公共目录是MyProject。这没有错，但令人困惑。
我认为将MyProject 或其父目录作为DOCUMENT_ROOT 会给MyProject 目录的其余部分带来安全问题。例如，MyProject/.git 或 MyProject/settings.conf 将是可公开访问的，除非应用条件来阻止浏览器访问它们。您的所有可公开访问的文件，例如 index.php 应该驻留在 MyProject/public 中，它应该被定义为您的 DOCUMENT_ROOT，无需在您的 URI 中指定 /public 或 MyProject/public。更改需要重构大量 php、html 和服务器配置。