我对 ejs 不是很熟悉,我正在做一个使用它的实践项目。它以某种方式呈现除图像之外的所有内容。它使用来自快速会话的图像,但我什至尝试用确切的网址替换它,但它仍然不起作用。
这是app.js文件
//Imports
const path = require("path");
require("dotenv").config();
const express = require('express');
const morgan = require('morgan');
const helmet = require('helmet');
const partials = require('express-partials');
const app = express();
const session = require('express-session');
const passport = require('./config/passport.js');
//Variables
const PORT = 3000;
const EXPRESS_SESSION_SECRET = process.env.EXPRESS_SESSION_SECRET;
//Remove after development to minimize unnecessary realtime logs on server
app.use(morgan('tiny'));
//Express setup
app.use(express.json());
app.use(helmet());
app.disable('x-powered-by');
//Express page setup
app.set('views', path.join(__dirname + '/views'));
app.set('view engine', 'ejs');
app.use(partials());
app.use(express.static(path.join(__dirname + '/public')));
//Express session set up to be used on all routes
app.use(
session({
secret: EXPRESS_SESSION_SECRET,
resave: false,
saveUninitialized: false,
cookie: { maxAge: 1000 * 60 *60 * 24 }
})
);
//Initializes passport to be used on all routes
app.use(passport.initialize());
app.use(passport.session());
//Mounts the page router
const pageRouter = require('./routers/page-router.js');
app.use('/', pageRouter);
//Mounts the api router
const apiRouter = require('./routers/api-router.js');
app.use('/api', apiRouter);
//Starts server
app.listen(PORT, () => console.log(`Listening on ${PORT}`));
这是路由器中的路由,到 /account 的 GET 路由是我们感兴趣的一个
//Imports necessary modules
const express = require('express');
const {ensureAuthenticated} = require('../middleware/auth-middleware.js');
//Creates the router
const pageRouter = express.Router();
//This page is protected and requires github authentication
pageRouter.get('/account', ensureAuthenticated, (req, res) => {
res.render('account', { user: req.user });
});
//Exports the router
module.exports = pageRouter;
最后是位于views 文件夹中的ejs 文件。所有其他数据(例如名称和链接)都正确填充,即使使用实际的 url,我也无法获取要渲染的图像
<div class="row">
<div class="six columns">
<h1><%= user.username %></h1>
<p>ID: <%= user.id %></p>
<p>Name: <%= user.displayName %></p>
<p>Bio: <%= user._json.bio %></p>
<p>GitHub: <a href="<%= user._json.html_url %>">Link</a></p>
</div>
<div class="six columns">
<img src="<%= user.photos[0].value %>" alt="Avatar">
</div>
</div>
任何帮助或指导都将非常感激,提前致谢!
编辑:
这里是源代码中的 html,它看起来有效并且可以单独工作。我不知道为什么它在我的应用程序提供服务时无法正确呈现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Codecademy OAuth Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<nav>
<div>
<a href="/">Home</a> |
<a href="/account">Account</a> |
<a href="/logout">Log Out</a>
</div>
</nav>
<div class="row">
<div class="six columns">
<h1>brendengerber</h1>
<p>Name: </p>
<p>Bio: </p>
<p>GitHub: <a href="https://github.com/brendengerber">Link</a></p>
</div>
<div class="six columns">
<img src="https://avatars.githubusercontent.com/u/10082638?v=4" alt="Avatar">
</div>
</div>
</div>
</body>
</html>
首先,检查用户obj是否存在。
然后,检查用户 obj 键。