【发布时间】：2019-07-12 13:30:46
【问题描述】：
我使用Node、express和jade模板创建了创建表单。但是我的创建页面没有使用我将创建的主布局。我扩展了它在我的员工列表页面上工作但不在创建页面上工作的主要布局。它只显示 html 而不是 css 或 bootstrap。请帮忙。
这是我的网站结构。
我的主玉：
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
【问题讨论】：
-
看起来不像是玉/哈巴狗的问题。您的 CSS 可能是这里的问题。您的文件中是否有静态资产的绝对或相对路径？
-
但是
main布局页面使用index.jade扩展，并且main在create.jade中扩展，但是为什么一个页面工作得很好而其他页面没有？ @斯蒂芬斯 -
你能在定义css样式表的地方添加jade文件吗？
-
我为
Admin panel添加了一个模板，我在public文件夹中添加了所有CSS、Bootstrap文件我添加了所有文件@StephenS -
我的意思是你的样式表有
link标签的jade文件。