如何在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 。 確保傳遞通過身份驗證所需的用戶信息。