[英]How to render a page in pug template engine in node.js
I want to render a page when I click on Signin
. 当我单击
Signin
时,我想呈现一个页面。 I use a Service Oriented Architecture
, in which I use the Pug Template Engine for making an Admin-Panel
. 我使用
Service Oriented Architecture
,其中使用Pug模板引擎制作Admin-Panel
。 When I click on SignIn
, it give the error below. 当我单击
SignIn
,出现以下错误。
{"error":{"message":"Not found"}}
{“错误”:{“消息”:“未找到”}}
I don't know where I made a mistake. 我不知道我在哪里弄错了。 Please help me.
请帮我。
Here is the welcome.pug
code where there is a Signin
link. 这是
welcome.pug
代码,其中包含一个Signin
链接。 Please see if I use the correct url
or not. 请查看我是否使用正确的
url
。
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
Here is the structure of my code. 这是我的代码的结构。
Here is the login.pug
file 这是
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 */
});
});
And here is the Api.js
code: 这是
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;
Here is the Index.js
file: 这是
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
How should I separately define the Web Routes
and Api Routes
to use a Service Oriented Architecture in Node.js. 如何在Node.js中分别定义
Web Routes
和Api Routes
以使用面向服务的体系结构。
Firstly you do not have any /login
route in the index.js
file, so /login on the button would not work. 首先,
index.js
文件中没有任何/login
路由,因此按钮上的/ login将不起作用。
Secondly you don't seem to have any route handler which will render the login.pug
file. 其次,您似乎没有任何路由处理程序将呈现
login.pug
文件。 You can define this in the index.js file as a GET route 您可以在index.js文件中将其定义为GET路由
router.get('/login', (req, res, next) => {
res.render('login');
});
You can even keep this route handler in your api.js
file in which case the effective route for the button would be 您甚至可以将此路由处理程序保留在
api.js
文件中,在这种情况下,按钮的有效路由为
.links
a(href='/api/login') Sign in
Another thing that may help is including a POST
method request in your pug file. 可能有所帮助的另一件事是在您的pug文件中包含
POST
方法请求。
At the moment, it appears you only have an API endpoint for /login
listening for POST
requests. 目前,您似乎只有一个用于
/login
侦听POST
请求的API端点。
@stephen suggested you add a get route. @stephen建议您添加一条获取路线。 If you don't want to or can't do that, you need to call
/login
with a POST
method. 如果您不想或不能这样做,则需要使用
POST
方法调用/login
。 Make sure to pass along the user information needed to authenticate them. 确保传递通过身份验证所需的用户信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.