3

私は、Vapor とバックエンド ロジック全般に非常に慣れていません。Leaf を使用して単純な Web アプリを構築しています。psql データベースからデータを読み取って、html/css (リーフ) ページに表示しようとしています。問題は、パラメーターをページに渡すと、css と画像が読み込まれないことです。

これは私のコントローラーの機能です

my project configuration:

App
├── Package.swift
├── Resources
│   ├── Views
│   │   └── index.leaf
├── Public
│   ├── images (images resources)
│   ├── styles (css resources)
└── Sources
    ├── App
         ├── Controllers
         │        └── PoesiaController.swift
         ├── Models
               └── Poesia.swift

final class PoesiaController {

func createView(_ req: Request) throws -> Future<View> {
        let id: Int = try req.parameters.next(Int.self)
        return Poesia.find(id, on: req).unwrap(or: NSError(domain: "errore", code: 1, userInfo: nil)).flatMap(to: View.self) { p in
            return try req.view().render("index", ["title": p.title, "content":p.content])
        }
    }

}

としてルートを作成しました

let poesieController = PoesiaController()
router.get("poesia", Int.parameter, use: poesieController.createView)

実行すると、ページには正しいデータがありますが、css または画像が読み込まれません。

私のindex.leafファイル


<!DOCTYPE html>
<html>

<head>
    <link href="https://fonts.googleapis.com/css?family=Long+Cang&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <link rel="stylesheet" href="styles/poesie.css">
</head>

<body>
    <!--Frontpage image with overlay-->
    <div class="container">
          <img class="frontpage" id= 'frontpage' src="images/alle-scoperte.jpg"/>
          <div class="overlay"></div>
    </div>

    <!--Sticky Title with overlay-->
    <div class="title">
          <div class="sticky" style="background-image: url('images/alle-scoperte.jpg'); background-position: center bottom; background-size: cover;">
              <span id="titleText">#(title)</span>
              <img class="nav" src="images/icons/menu.png" onclick="openMenu()" />
              <div class="menu">
                  <img src="images/icons/home.png">
                  <img src="images/icons/poesie.png">
                  <img src="images/icons/lib.png">
                  <img src="images/icons/collab.png">
                  <img src="images/icons/book.png">
                  <img src="images/icons/chem.png">
              </div>
          </div>
    </div>
    <!--Three Columns, left and right for author notes and center for text-->
    <div class="row">
      <div id="column_left" class="column">
          <div id="note1" class="note">
              <span class="left">Conoscere una persona significa aprirsi ad un mondo.</span>
          </div>
          <div id="note2" class="note">
              <span class="left">Tutto racchiuso nell'unicit&agrave; dei primi incontri.</span>
          </div>
      </div>

      <div id="column_center" class="column">
        <div class= "content">
            <div class="sheet">
               #(content)
            </div>
            <div class='hint'>
                <div id = "rotate">
                    <img src="images/icons/rotate.png">
                </div>
                Ruota il dispositivo per vedere il commento.
            </div>
        </div>
      </div>

      <div id="column_right" class="column">
          <div id="note3" class="note">
            <span class="right">Una terra nuova da scoprire attraverso la curiosit&agrave; ed il piacere.</span>
          </div>
          <div id="note4" class="note">
              <span class="right">Commento</span>
          </div>
      </div>
    </div>

    <div class="footer">
        &copy;Luis Claudio Pantaleone | Designed and Developed by Simone Deriu | Credits
    </div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/main.js"></script>

</html>

奇妙なことに、変数を使用せずに、またはオブジェクト マッピングの外側でページを表示するルートを作成すると、正常に表示されます。

 router.get("index") {req -> Future<View> in
        return try req.view().render("index")
    }

更新: パラメータを使用して呼び出し中のリーフ ページをレンダリングしていることが問題であることがわかりました。パラメーターなしでルートを使用してページをレンダリングしようとすると機能しますが、パラメーターを使用してルート内で同じことを行うと、css と画像が読み込まれません。

4

2 に答える 2