Я пытаюсь создать веб-сайт меню, используя nodeJS, и мне не нравится, когда все мои html .handlebars в одном файле. Интересно, почему мой рендеринг дает мне страницу, не найденную?
Вот структура моего проекта:
| public/
|-- image/
|-- javascripts
|-- stylesheets
|--Nav.css
|-- reg.css
|-- ReviewPr.css
| route
|-- index.js
|views
|-- mainlayout
|--main.hbs
|--reg.hbs
|--ReviewPr.hbs
|-app.js
Вот мой код Начиная с индекса маршрута:
- маршрут / индекс. js: почему не работает мой стиль свойства Dynami c?
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('reg', {
title: 'Registration',
style:'reg.css',
style:'Nav.css'
});
});
router.get('/Review Priority', function(req, res, next) {
res.render('ReviewPr', {
title: 'Review',
style: 'ReviewPr.css'
});
});
router.get('/Share', function(req, res, next) {
res.render('Share', {
title: 'Share',
style:'Share.css'
});
});
module.exports = router;
views / main.hbs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{title}}</title>
<link rel="stylesheet" href="/stylesheets/{{style}}">
</head>
<body>
{{{ body }}}
</body>
</html>
reg.hbs (первая страница: как вы можете видеть в коде: я даю ссылку на файл hbs)
<script src="Jsonscript.js"></script>
<div class="wrapper">
<h1>Sharing Priority Assessment Platform</h1>
<header>
<div class="topnav">
<a class="active" href="NewTest1.html">Home</a>
<a href="ReviewPr.hbs">Review Priority</a>
<a href="Share.hbs">Share</a>
<a href="About.hbs">About</a>
</div>
</header>
<nav>
<h2>Please Register only One time.If already register go to Review or Share page and look for your name</h2>
</nav>
<section>
<link rel="stylesheet" type="text/css" href="Nav.css">
<script src="Jsonscript.js"></script>
<form id="myform" type="post">
<fieldset>
<legend>Register Form </legend>
<p>We would love to hear from you. Please fill out this form</p>
<div class="elements">
<label for="name">Full Name :</label>
<input required="required" type="text" name="fname" size="20" />
</div>
<div class="elements">
<label for="Email">Email :</label>
<input required="required" type="text" id="email" name="age" size="20" />
</div>
<div class="elements">
<label for="pro"> Type of Agent :</label>
<select name="pro">
<option value="RAgent">Enterprise Agent</option>
<option value="SL" selected="selected">Shift Lead</option>
<option value="TL" selected="selected">Team Leader</option>
<option value="DL" selected="selected">Domain Lead</option>
<option value="SDM" selected="selected">Service delivery Manager</option>
</select>
</div>
<div class="elements">
<label for="Gender">Gender: </label>
<input type="radio" name="gender" value="Male" checked="checked" id="r1"> Male
<input type="radio" name="gender" value="Female" id="r2"> Female
</div>
<div class="submit">
<input type="submit" id="btn" name="btn" class="btn" value="Submit" />
</div>
</fieldset>
</form>
</section>
</div>
<div>
<footer>
<small>© Copyright 2020, Share Services Canada</small>
</footer>
</div>
4). просмотров / ReviewPr.hbs: вторая страница сайта
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="ReviewPr.css">
<div class="wrapper">
<h1>Sharing Priority Assessment Platform</h1>
<header>
<div class="topnav">
<a class="active" href="NewTest1.html">Home</a>
<a href="ReviewPr.hbs">Review Priority</a>
<a href="Share.hbs">Share</a>
<a href="About.hbs">About</a>
</div>
</header>
<nav>
<div class="elements">
<label for="Var"> Name of Agent :</label>
<select name="Var">
<option value="name">yfufuf</option>
</select>
</div>
<div class="elements2">
<label for="Time"> Fetch time :</label>
<select name="Time">
<option value="time">iytiyttu8</option>
</select>
</div>
<input type="Submit" value="Submit" >
<input type="Reset" value="Clear" >
</nav>
<section>SECTION</section>
</div>
<div>
<footer>
<small>© Copyright 2020, Share Services Canada</small>
</footer>
</div>
Окончательно: приложение. js
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var bodyParser = require ('body-parser');
var hbs =require ('express-handlebars');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
// view engine setup
app.engine('hbs', hbs({extname:'hbs',defaultLayout: 'main', layoutsDir: __dirname+ '/views/mainlayout'}))
//app.engine('hbs',expbs());
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');
//app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
Вот изображение приложения, ни одна из моих CSS работ, ни меню для перехода на другие страницы
