一般来说，我对 Vapor 和后端逻辑非常陌生。\n我正在使用 Leaf 构建一个简单的 Web 应用程序，我正在尝试从 psql 数据库读取数据并将其显示在 html/css (leaf) 中页。\n问题是，当我将参数传递到页面时，它不会加载 css 和图像。
\n\n这是我的控制器中的功能
\n\nmy project configuration:\n\nApp\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Package.swift\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Resources\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Views\n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.leaf\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Public\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 images (images resources)\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 styles (css resources)\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Sources\n \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 App\n \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Controllers\n \xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 PoesiaController.swift\n \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Models\n \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Poesia.swift\n\nfinal class PoesiaController {\n\nfunc createView(_ req: Request) throws -> Future<View> {\n let id: Int = try req.parameters.next(Int.self)\n return Poesia.find(id, on: req).unwrap(or: NSError(domain: "errore", code: 1, userInfo: nil)).flatMap(to: View.self) { p in\n return try req.view().render("index", ["title": p.title, "content":p.content])\n }\n }\n\n}\n我创建了一条路线
\n\nlet poesieController = PoesiaController()\nrouter.get("poesia", Int.parameter, use: poesieController.createView)\n当我运行页面时，数据正确，但没有加载 CSS 或图像。
\n\n我的index.leaf 文件
\n\n\n<!DOCTYPE html>\n<html>\n\n<head>\n <link href="https://fonts.googleapis.com/css?family=Long+Cang&display=swap" rel="stylesheet">\n <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">\n <link rel="stylesheet" href="styles/poesie.css">\n</head>\n\n<body>\n <!--Frontpage image with overlay-->\n <div class="container">\n <img class="frontpage" id= \'frontpage\' src="images/alle-scoperte.jpg"/>\n <div class="overlay"></div>\n </div>\n\n <!--Sticky Title with overlay-->\n <div class="title">\n <div class="sticky" style="background-image: url(\'images/alle-scoperte.jpg\'); background-position: center bottom; background-size: cover;">\n <span id="titleText">#(title)</span>\n <img class="nav" src="images/icons/menu.png" onclick="openMenu()" />\n <div class="menu">\n <img src="images/icons/home.png">\n <img src="images/icons/poesie.png">\n <img src="images/icons/lib.png">\n <img src="images/icons/collab.png">\n <img src="images/icons/book.png">\n <img src="images/icons/chem.png">\n </div>\n </div>\n </div>\n <!--Three Columns, left and right for author notes and center for text-->\n <div class="row">\n <div id="column_left" class="column">\n <div id="note1" class="note">\n <span class="left">Conoscere una persona significa aprirsi ad un mondo.</span>\n </div>\n <div id="note2" class="note">\n <span class="left">Tutto racchiuso nell\'unicità dei primi incontri.</span>\n </div>\n </div>\n\n <div id="column_center" class="column">\n <div class= "content">\n <div class="sheet">\n #(content)\n </div>\n <div class=\'hint\'>\n <div id = "rotate">\n <img src="images/icons/rotate.png">\n </div>\n Ruota il dispositivo per vedere il commento.\n </div>\n </div>\n </div>\n\n <div id="column_right" class="column">\n <div id="note3" class="note">\n <span class="right">Una terra nuova da scoprire attraverso la curiosità ed il piacere.</span>\n </div>\n <div id="note4" class="note">\n <span class="right">Commento</span>\n </div>\n </div>\n </div>\n\n <div class="footer">\n ©Luis Claudio Pantaleone | Designed and Developed by Simone Deriu | Credits\n </div>\n</body>\n<script src="js/jquery-3.4.1.min.js"></script>\n<script src="js/main.js"></script>\n\n</html>\n奇怪的是，如果我创建一个路由来显示没有变量的页面，或者在对象映射之外，它会正常显示。
\n\n router.get("index") {req -> Future<View> in\n return try req.view().render("index")\n }\n更新：我发现问题是在带有参数的调用中渲染叶页面。如果我尝试使用不带参数的路由渲染页面，它会起作用，但如果我在带参数的路由内执行相同的操作，它不会加载 css 和图像。
\n您的问题是由于您错过了标签中/开头的。它应该是：href<link>
<link rel="stylesheet" href="/styles/poesie.css">
省略“/”表示路径是相对于 URL 的。这就是为什么它适用于您的索引页而不是其他页。将其放入可确保将其视为绝对路径。
| 归档时间： |
|
| 查看次数： |
1043 次 |
| 最近记录： |