我有一个使用把手的快速应用程序。我有一个路由文件(index.js-> localhost:3000 /)用于提供一些视图。但是后来我又创建了另一个路由文件(agency.js-> localhost:3000 / agency /),以便在一个文件中没有几百行代码。
问题是,当我加载/ agency端点时,它仅显示把手文件。它不使用app.js中设置的默认布局。
当我加载localhost:3000 /时,它显示布局没有问题。
答案 0 :(得分:0)
您应该真正显示您拥有的代码,因为您的设置将与我的不同,因此,如果我给您提供我的代码,则会很复杂,因为我没有使用默认值。
您有2个问题。
您要使用其他路由文件
布局文件有问题
解决方案1:使用app.use
index.js文件
app.use('/agency', require(`agency`)) // make route use the route file in root/agency.js
agency.js文件
app.get('/', (req, res) => { // this is using your /agency and its only / because its using /agency. If you want /agency/test then you use /test
res.render(`viewHandlebarsFile`) // calling your handlebar view file
})
车把的主要布局文件(默认设置):确保将其放在body标签中,它将调用车把的视图文件
{{{{body}}}
工作原理:您的index.js文件将/ agency路由指向您的路由文件agency.js
您的agency.js获取车把视图文件。
您的车把视图文件仅是主体。您的默认布局文件将使用{{{body}}}标签,该主体将调用您的车把视图文件。
就像我说的,在不知道如何设置默认值的情况下,没有代码很难帮助您。我为您提供了可以与您的设置配合使用的关键代码。祝你好运。
下面,如果您遇到问题,我会为您提供骨架布局。
位于您根文件夹中的app.js文件
const express = require('express')
const app = express()
const path = require('path')
const exphbs = require('express-handlebars');
app.set('views', path.join(__dirname, 'views'))
app.engine('hbs', exphbs({defaultLayout: 'main', extname: '.hbs'})) // change extension to .hbs
app.set('view engine', 'hbs')
app.set('port', (process.env.PORT || 3000))
app.get('/', (req, res) => {
res.render('home', {
content: 'This is some content', // for dynamic content, in view use {{content}} to call this data
published: false
})
})
app.use('/agency', require(`./agency`))
app.listen(app.get('port'), () => {
console.log('Server started on port' + app.get('port'))
})
位于根文件夹中的agency.js文件
const express = require('express')
const exphbs = require('express-handlebars')
const app = module.exports = express()
app.get('/', (req, res) => { // this is using your /agency and its only / because its using /agency. If you want /agency/test then you use /test
res.render(`view2`) // calling your handlebar view file
})
在根目录下的views文件夹中
home.hbs
<h1>Welcome Home Page</h1>
位于您的views文件夹中的view2.hbs
<h1>View 2 page</h1>
位于视图文件夹内的内部布局文件夹
main.hbs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Handlebars Express</title>
</head>
<body>
{{{body}}}
</body>
</html>