如何在Node.js中的Pug模板引擎中呈现页面

Question

当我单击Signin时，我想呈现一个页面。 我使用Service Oriented Architecture ，其中使用Pug模板引擎制作Admin-Panel 。 当我单击SignIn ，出现以下错误。

{“错误”：{“消息”：“未找到”}}

我不知道我在哪里弄错了。 请帮我。

这是welcome.pug代码，其中包含一个Signin链接。 请查看我是否使用正确的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

这是我的代码的结构。

这是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

如何在Node.js中分别定义Web Routes和Api Routes以使用面向服务的体系结构。

Answer 1

首先， index.js文件中没有任何/login路由，因此按钮上的/ login将不起作用。

其次，您似乎没有任何路由处理程序将呈现login.pug文件。 您可以在index.js文件中将其定义为GET路由

router.get('/login', (req, res, next) => {
   res.render('login');
});

您甚至可以将此路由处理程序保留在api.js文件中，在这种情况下，按钮的有效路由为

.links
   a(href='/api/login') Sign in

Answer 2

可能有所帮助的另一件事是在您的pug文件中包含POST方法请求。

目前，您似乎只有一个用于/login侦听POST请求的API端点。

@stephen建议您添加一条获取路线。 如果您不想或不能这样做，则需要使用POST方法调用/login 。 确保传递通过身份验证所需的用户信息。