Question

我使用Node，Express和Jade模板创建了创建表单。但是我的创建页面没有使用我将要创建的主布局。我扩展了主要布局，使其在我的员工列表页面上有效，但在创建页面上无效。它只显示html而不显示css或bootstrap。请帮忙。

这是我的网站结构。

我的main.jade：

doctype html
html(lang='en')
  head
   include htmlheader.jade
  body.page-body.hold-transition.skin-blue.sidebar-mini(style='background: #d2d6de')
//- | @section('htmlheader')
//- include layouts/partials/htmlheader.jade
//- | @include('layouts.partials.htmlheader')
// this page specific styles
//- | @show
#fb-root
.page-container
  .main-content.main-header


    include sidebar.jade
    include pageheader.jade
    block content

  // Sample Modal (Default skin)
  include footer.jade
//- | @include('layouts.partials.footer')
// Theme Scripts

我的route.js：

var express = require('express');
var router = express.Router();

var employee = require("../controllers/EmployeeController.js");

// Get all employees
router.get('/', employee.list);

// Get single employee by id
router.get('/show/:id', employee.show);

// Create employee
router.get('/create', employee.create);

// Save employee
router.post('/save', employee.save);

// Edit employee
router.get('/edit/:id', employee.edit);

// Edit update
router.post('/update/:id', employee.update);

// Edit update
router.post('/delete/:id', employee.delete);


module.exports = router;

我的create.jade：

extends ../layout/main

block content
body
.container
  h3
    a(href='/employees') Employee List
    //- a.btn.btn-success(href="/employees")  Employee List
  h1 Create New Employee
  form(action='/employees/save', method='post')
    .form-group
      label(for='name') Name*
      .col-md-10
        input#name.form-control(type='text', name='name', placeholder='Name')
    .form-group
      label(for='address') Address*
      .col-md-10
        input#address.form-control(type='text', name='address', placeholder='Address')
    .form-group
      label(for='position') Position*
      .col-md-10
        input#position.form-control(type='text', name='position', placeholder='Position')
    .form-group
      label(for='salary') Salary*
      .col-md-10
        input#salary.form-control(type='text', name='salary', placeholder='Salary')
    button.btn.btn-default(type='submit') Create

当我尝试这个http://localhost:3000/employees/create时，它将显示

我的index.jade：

extends ../layout/main

block content
body
.container
  h3
    a(href='/employees/create') Create Employee
  h1 Employee List
        //-  if employee.length>0
        //-      for(var i=0 i<employee.length i++)
  table.table.table-striped
    thead
      tr
        th Employee Name
        th Position
    tbody
      tr
        //- td
          //- a(href='/employees/show/#{employee[i]._id}') #{employee[i].name}
        td  Moaiz
        //- td #{employee[i].position}
        td Software Developer
  //- div No employees found.

在index.jade中，我使用相同的布局，它将显示如下：

请帮助我可能会错过某些事情或做错事情的地方。

编辑：

我认为问题是这没有选择正确的道路。这是图片：

当我点击“创建员工”时，路径将从employees开始。而且我找不到为什么它在路径中包含employees的原因。我认为这就是为什么它不能正确显示布局的问题。击中您在图像中看到的create之前，路径中不包含employees。请帮助我找到解决方案。这是我的 htmlheader.jade ：

head  
 meta(http-equiv='X-UA-Compatible', content='IE=edge')
 meta(charset='utf-8')
 meta(name='viewport', content='width=device-width, initial-scale=1')
 meta(name='description', content='Admin Dashboard')
 meta(name='author', content='')
 meta(property='og:type', content='website')
 meta(property='og:title', content='')
 meta(property='og:description', content='')
 meta(property='og:image', content='')
 // CSRF Token
 meta(name='csrf-token', content='{{ csrf_token() }}')
//- | {{--
//- title {{ config('app.name', 'Admin Dashboard') }}
//- | --}}
title  Admin Dashboard
// Styles
script(src="{{url('dist/js/jquery-1.11.3.min.js')}}")
link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic')
//- |     {{-- 
//- link(rel='stylesheet', href="{{url('assets/js/jquery-ui/css/no-theme/jquery-ui-1.10.3.custom.min.css')}}")
//- |  --}}
meta(content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no', name='viewport')
// Bootstrap 3.3.7
link(rel='stylesheet', 
href="bower_components/bootstrap/dist/css/bootstrap.min.css")
// Font Awesome
link(rel='stylesheet', href="bower_components/font-awesome/css/font-awesome.min.css")
// Ionicons
link(rel='stylesheet', href="bower_components/Ionicons/css/ionicons.min.css")
// jvectormap
link(rel='stylesheet', href="bower_components/jvectormap/jquery-jvectormap.css")
// Theme style
link(rel='stylesheet', href="dist/css/AdminLTE.min.css")
//
  AdminLTE Skins. Choose a skin from the css/skins
  folder instead of downloading all of them to reduce the load.
  link(rel='stylesheet', href="dist/css/skins/_all-skins.min.css")
  link(rel='stylesheet', href="bower_components/morris.js/morris.css")
  link(rel='stylesheet', href="bower_components/jvectormap/jquery-jvectormap.css")
  // Date Picker
  link(rel='stylesheet', href="bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css")
  // Daterange picker
  link(rel='stylesheet', href="bower_components/bootstrap-daterangepicker/daterangepicker.css")
  // bootstrap wysihtml5 - text editor
  link(rel='stylesheet', href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css")
  // HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
  //if lt IE 9
  script(src='https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js')
  script(src='https://oss.maxcdn.com/respond/1.4.2/respond.min.js')
  block custom_styles

Answer 1

问题是您正在使用相对URL，具体取决于您当前的路径。相反，您应该将静态资产设置为绝对URL，以便在导航到嵌套URL时它不会更改。

更改此

SubThread1 is running.
javax.net.ssl|DEBUG|0F|nioEventLoopGroup-2-1|2019-07-05 15:29:47.379 EDT|SSLCipher.java:463|jdk.tls.keyLimits:  entry = AES/GCM/NoPadding KeyUpdate 2^37. AES/GCM/NOPADDING:KEYUPDATE = 137438953472
javax.net.ssl|ALL|0F|nioEventLoopGroup-2-1|2019-07-05 15:29:47.761 EDT|SSLEngineImpl.java:752|Closing outbound of SSLEngine
javax.net.ssl|ALL|0F|nioEventLoopGroup-2-1|2019-07-05 15:29:47.762 EDT|SSLEngineImpl.java:724|Closing inbound of SSLEngine
javax.net.ssl|ERROR|0F|nioEventLoopGroup-2-1|2019-07-05 15:29:47.765 EDT|TransportContext.java:312|Fatal (INTERNAL_ERROR): closing inbound before receiving peer's close_notify (
"throwable" : {
  javax.net.ssl.SSLException: closing inbound before receiving peer's close_notify
    at java.base/sun.security.ssl.Alert.createSSLException(Alert.java:133)
    at java.base/sun.security.ssl.Alert.createSSLException(Alert.java:117)
    at java.base/sun.security.ssl.TransportContext.fatal(TransportContext.java:307)
    at java.base/sun.security.ssl.TransportContext.fatal(TransportContext.java:263)
    at java.base/sun.security.ssl.TransportContext.fatal(TransportContext.java:254)
    at 

java.base/sun.security.ssl.SSLEngineImpl.closeInbound(SSLEngineImpl.java:733)
        at io.netty.handler.ssl.SslHandler.setHandshakeFailure(SslHandler.java:1565)

    at io.netty.handler.ssl.SslHandler.channelInactive(SslHandler.java:1049)
    at io.netty.channel.AbstractChannelHandlerContext.invokeChannelInactive(AbstractChannelHandlerContext.java:245)
    at io.netty.channel.AbstractChannelHandlerContext.invokeChannelInactive(AbstractChannelHandlerContext.java:231)
    at io.netty.channel.AbstractChannelHandlerContext.fireChannelInactive(AbstractChannelHandlerContext.java:224)
    at io.netty.channel.DefaultChannelPipeline$HeadContext.channelInactive(DefaultChannelPipeline.java:1429)
    at io.netty.channel.AbstractChannelHandlerContext.invokeChannelInactive(AbstractChannelHandlerContext.java:245)
    at io.netty.channel.AbstractChannelHandlerContext.invokeChannelInactive(AbstractChannelHandlerContext.java:231)
    at io.netty.channel.DefaultChannelPipeline.fireChannelInactive(De

faultChannelPipeline.java:947)
        at io.netty.channel.AbstractChannel$AbstractUnsafe$8.run(AbstractChannel.java:826)
        at io.netty.util.concurrent.AbstractEventExecutor.safeExecute(AbstractEventExecutor.java:163)
        at io.netty.util.concurrent.SingleThreadEventExecutor.runAllTasks(SingleThreadEventExecutor.java:404)
        at io.nett

y.channel.nio.NioEventLoop.run(NioEventLoop.java:474)
    at io.netty.util.concurrent.SingleThreadEventExecutor$5.run(SingleThreadEventExecutor.java:909)
    at io.netty.util.concurrent.FastThreadLocalRunnable.run(FastThreadLocalRunnable.java:30)
    at java.base/java.lang.Thread.run(Thread.java:835)}

    )
    Subscriber1 disconnected.
    Exception in thread "SubThread1" com.hivemq.client.mqtt.exceptions.ConnectionClosedException: Server closed connection without DISCONNECT.
        at com.hivemq.client.internal.mqtt.MqttBlockingClient.connect(MqttBlockingClient.java:91)
        at 

com.hivemq.client.internal.mqtt.message.connect.MqttConnectBuilder$Send.send(MqttConnectBuilder.java:196)
    at com.main.SubThread.run(SubThread.java:90)
    at java.base/java.lang.Thread.run(Thread.java:835)

对此

link(rel='stylesheet', href="bower_components/font-awesome/css/font-awesome.min.css")

应该对所有静态资产执行此操作

link(rel='stylesheet', href="/bower_components/font-awesome/css/font-awesome.min.css")

Answer 2

首先打开localhost：port浏览器窗口的开发管理器（F12键）。

转到控制台选项卡，查看错误。缺少某些CSS和JS文件路径。

根据管理js和css文件更新路径。

如下所示：

-header.jade

  title=AdminLTE
meta(name='viewport', content='width=device-width, initial-scale=1.0')
link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css')
link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css')
link(rel='stylesheet', href='/adminlte/dist/css/AdminLTE.min.css')
link(rel='stylesheet', href='/adminlte/dist/css/skins/_all-skins.min.css')
link(rel='stylesheet', href='/adminlte/plugins/iCheck/square/blue.css')

-js.jade

`

script(type='text/javascript', src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js')
script(type='text/javascript', src='/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js')
script(type='text/javascript', src='/adminlte/bower_components/jquery-slimscroll/jquery.slimscroll.min.js')
script(type='text/javascript', src='/fontawesome/js/fontawesome.js')
script(type='text/javascript', src='/adminlte/dist/js/pages/dashboard.js')
script(type='text/javascript', src='/adminlte/dist/js/demo.js')
script(type='text/javascript', src='/adminlte/plugins/iCheck/icheck.min.js')

`

现在您的屏幕将按照主题视图显示。

Express.js Jade模板布局在几页中不起作用

2 个答案: