大家好,找到我的問題。我正在聯系這個社區,希望您能幫助解決我在使用 Mongoose/EJS 時遇到的問題。
就像在我解釋這個問題之前說的那樣。我是一個新手,所以這個問題對大多數人來說似乎很簡單,而且解釋得不好,所以對此表示歉意。所以問題是我試圖通過 mongoose 使用 mongoDB :id 來顯示產品詳細資訊頁面。
所以資料可以正常回傳瀏覽器,但 CSS 和 IMAGE 鏈接已損壞。更令人沮喪的是,這些鏈接在所有其他頁面上都運行良好!
在使用摩根時,我可以看到問題出在他們的路徑上。
用于從 DB 中檢索產品的 /products/:id 路徑也被添加到 CSS 和影像檔案的路徑之前,這不是本意,因此會錯誤地呈現路徑,從而導致鏈接斷開。
我想我希望我已經包含了我認為完全理解問題所需的所有檔案,但如果需要,我很樂意提供進一步的代碼。
感謝您抽出寶貴時間閱讀本文,我期待著更大的大腦來救援。
干杯!
const express = require("express");
const app = express();
const Morgan = require("Morgan");
const mongoose = require("mongoose");
const Product = require("./models/product");
const dbURI =
"mongodb srv://xxxxxx@xxxxx/test-db/retryWrites=true&w=majority";
mongoose
.connect(dbURI)
.then((result) => app.listen(3000),
console.log("connected to mongodb (products) & listening for requests on port: 3000"))
.catch((err) => console.log(err));
// templating engine
app.set("view engine", "ejs");
// middleware and static files
app.use(express.static(__dirname "/public"));
app.use(Morgan("dev"));
app.use(express.urlencoded({ extended: true }));
=======================================================================
**// details.ejs**
<%- include('./partials/head.ejs') %>
<body>
<main class="body-main">
<!-- ========== Header =============->
<!-- <%- include('./partials/navbar.ejs') %> →
<div >
<h1><%=product.title %></h1>
<div >
<div >
<%=product.title %>
</div>
<img src=./images/<%=product.img %> alt=<%=product.title %> />
<h4 >prices from:<%=product.price %></h4>
</div>
</div>
<!-- =========== footer ============ -->
<%- include('./partials/footer.ejs') %>
=======================================================================
// DOC DETAIL REQUEST
app.get("/products/:id", (req, res) => {
const id = req.params.id;
Product.findById(id)
.then((result) => {
res.render("details", { title: "Details", product: result });
})
.catch((err) => {
throw err;
}); });
=======================================================================
// Terminal
// it should look like this
GET /products/62004ee85f4bcd160b832540 304 282.060 ms - -
GET /css/css-reset.css 404 7.488 ms - 17548
GET /css/style.css 404 6.081 ms - 17548
GET /images/backpack2.jpg 404 7.840 ms - 17548
// BUT here’s the result. i.e. /products/ included to my PUBLIC path CSS and images >
rendering those links obsolete
GET /products/62004ee85f4bcd160b832540 304 282.060 ms - -
GET /products/css/css-reset.css 404 7.488 ms - 17548
GET /products/css/style.css 404 6.081 ms - 17548
GET /products/images/backpack2.jpg 404 7.840 ms - 17548
=======================================================================
uj5u.com熱心網友回復:
我沒有詳細查看您的所有代碼。
對于初學者,您是否嘗試過洗掉斜線前面的點<img src=./images/<%=product.img %>?試試這個:<img src=/images/<%=product.img %>。
在我看來,您的images檔案夾位于公用檔案夾的根目錄中,寫/而不是./.
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/433624.html
上一篇:SyntaxError:Unexpectedtoken'{'in__dirname\views\admin\users.ejswhilecompileejs
