如何在node.js中的pug模板引擎中呈现页面
我想在单击如何在node.js中的pug模板引擎中呈现页面,node.js,express,pug,template-engine,Node.js,Express,Pug,Template Engine,我想在单击sign时呈现一个页面。我使用面向服务的体系结构，其中我使用Pug模板引擎来创建管理面板。当我点击登录时，它会给出下面的错误 {“错误”：{“消息”：“未找到”} 我不知道我在哪里犯了错误。请帮帮我 这是welcome.pug代码，其中有sign链接。请查看我是否使用了正确的url doctype html html(lang='{{ app()->getLocale() }}') head meta(charset='utf-8') me
sign面向服务的体系结构管理面板welcome.pugsignurl doctype html
html(lang='{{ app()->getLocale() }}')
head
meta(charset='utf-8')
meta(http-equiv='X-UA-Compatible', content='IE=edge')
meta(name='viewport', content='width=device-width, initial-scale=1')
title QuizLit
// Fonts
link(href='https://fonts.googleapis.com/css?family=Raleway:100,600', rel='stylesheet', type='text/css')
// Styles
style.
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Raleway', sans-serif;
font-weight: 100;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 5px 25px;
font-size: 24px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
border: solid 1px #636b6f;
border-radius: 50px;
}
.m-b-md {
margin-bottom: 30px;
}
body
.flex-center.position-ref.full-height
.content
.title.m-b-md
| Welcome to QuizLit
.links
a(href='/login') Sign in
login.pug include ../layout/main
block content
// Horizontal Form
.login-box
.login-logo
a(href='/')
b Admin
// /.login-logo
.login-box-body
p.login-box-msg Sign in to start your session
form(role='form', method='POST', action="/login")
ul.text-danger
.has-feedback(class="form-group{{ $errors->has('email') ? ' has-error' : '' }}")
input#email.form-control(type='email', name='email', value=" ", placeholder='Email', required='')
//- | @if ($errors->has('email'))
span.help-block
//- strong {{ $errors->first('email') }}
//- | @endif
span.glyphicon.glyphicon-envelope.form-control-feedback
.has-feedback(class="form-group{{ $errors->has('password') ? ' has-error' : '' }}")
input#password.form-control(type='password', name='password', placeholder='Password', required='')
//- | @if ($errors->has('password'))
span.help-block
//- strong {{ $errors->first('password') }}
//- | @endif
span.glyphicon.glyphicon-lock.form-control-feedback
.row
.col-xs-7.col-xs-offset-1
.checkbox.icheck
label
input(type='checkbox')
| Remember Me
// /.col
.col-xs-4
button.btn.btn-primary.btn-block.btn-flat(type='submit') Sign In
// /.col
//- | @section('page_specific_scripts')
script(src="/plugins/iCheck/icheck.min.js")
script.
$(function () {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' /* optional */
});
});
Api.js'use strict'
const express = require('express');
const router = express.Router();
const adminAuthService = require('../service/adminAuthService');
const middlewares = require('../../../base/service/middlewares/accessControl');
router.post("/login", (req, res, next) => {
adminAuthService.login(req.body)
.then(data => {
return res.send(data)
}, err => next(err))
});
router.post("/createstudent", middlewares.assertUserIsAdmin, (req, res, next) => {
// router.post("/createstudent", (req, res, next) => {
adminAuthService.signupStudent(req.body)
.then(data => {
return res.send(data)
}, err => next(err))
});
module.exports = router;
Index.js'use strict'
const express = require('express');
const router = express.Router();
const adminRoutes = require("./admin");
const teacherRoutes = require("./teacher");
const appRoutes = require("./api");
router.use("/admin", adminRoutes);
router.use("/teacher", teacherRoutes);
router.use("/api", appRoutes);
router.get('/', (req, res, next) => {
res.render('welcome');
})
module.exports = router
我应该如何分别定义
Web路由Api路由index.js/loginlogin.pugrouter.get('/login', (req, res, next) => {
res.render('login');
});
api.js.links
a(href='/api/login') Sign in
首先，您在
index.js/loginlogin.pugrouter.get('/login', (req, res, next) => {
res.render('login');
});
api.js.links
a(href='/api/login') Sign in
另一件可能有用的事情是在您的pug文件中包含
POSTPOST/login@stephen建议您添加一条get路线。如果您不想或不能这样做，则需要使用
POST/loginPOSTPOST/login@stephen建议您添加一条get路线。如果您不想或不能这样做，则需要使用
POST/loginwelcome.pugwelcome.pugh1 hello worldwelcome.puglogin.pug/loginwelcome.pug登录时，它只显示了登录.pug
页面，但没有显示@rastalamplease请用你的login.pug文件和处理该页面加载的API/路由定义更新帖子。看起来你有很多在那welcome.pug
文件中进行。您是否能够将其缩小到一个特定的部分，或者整个文件是否不起作用？您是否尝试过用基本文本呈现一个简单的welcome.pug
，例如h1 hello world
？是的welcome.pug
是呈现，但login.pug
不是呈现@Rastalamm您使用什么作为路由器？你的API中是否定义了/login
？我想当我点击欢迎.pug
页面上的登录时，它只显示登录.pug
页面，但没有显示@rastalamplease。请用你的login.pug文件和处理该页面加载的API/路由定义更新帖子。我使用面向服务的架构和我制作了管理路由，其中admin@i的登录api使用面向服务的架构，我制作了管理路由，其中admin的登录api使用面向服务的架构@