I have just started using node.js with the Express framework, and I am trying to understand how the built in routing works. I have found that a "main" router can be defined from which other "sub-routes" are used. For now, my app initially makes a get request that loads a dropdown from a MySQL database. I added a demo button that should take the value in the dropdown and make a request with it as a query parameter to my sub-route. When the button is clicked for the sub-route, I am getting a 404. My app.js:
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
My index.js (main route):
var express = require('express');
var router = express.Router();
var models = require('../models');
router.use('/savings', require('./savings.js'));
/* GET home page with locations and their initial data collection dates */
router.get('/', function(req, res, next) {
models.Location.findAll({
attributes: ['locationName', 'initializationDate']
}).then(function(locations) {
res.render('index', {
title: 'Solar Data Savings',
locations: locations
});
});
});
module.exports = router;
savings.js (sub-route):
var express = require('express');
var router = express.Router();
var models = require('../models');
/* GET calculate solar data savings and reroute */
router.get('/savings', function(req, res, next) {
req.param('locationID');
models.Bank.findAll({
attributes: ['bankID'],
include: [{
model: Location,
where: { locationID: Sequelize.col('bank.locationID') }
}]
}).then(function(banks) {
res.render('index', {
title: 'Solar Data Savings',
banks: banks
});
});
});
module.exports = router;
index.pug:
extends layout
block content
div(class="container-fluid")
h1= title
p This is the #{title} project website
form(action="/savings")
div(class="form-group")
label(for="locations")
div(class="col-sm-4")
select(id="locations" class="form-control")
-for(var i = 0; i < locations.length; i++) {
option(value="#{locations[i].dataValues.locationID") #{locations[i].getLocationName()}
-}
div(class="col-sm-4")
input(type="submit", value="Get Bank")
I believe I am misunderstanding a nuance to routing, and I've scoured the web for a solution to this particular problem with no luck. Help greatly appreciated
Your savings route on the server is set to /savings/savings whereas your form is calling /savings. Either change the form or change the server side:
In savings.js, change
router.get('/savings', function(req....
to
router.get('/', function(req....
Also, you are using get to submit a form. Maybe you need to change that to
router.post('/', function(req...
Just make following changes in index.pug :
extends layout
block content
div(class="container-fluid")
h1= title
p This is the #{title} project website
form(action="/savings/savings")
div(class="form-group")
label(for="locations")
div(class="col-sm-4")
select(id="locations" class="form-control")
-for(var i = 0; i < locations.length; i++) {
option(value="#{locations[i].dataValues.locationID") #{locations[i].getLocationName()}
-}
div(class="col-sm-4")
input(type="submit", value="Get Bank")
Actually your routing is wrong:
Currently you're calling as : your_url:port/savings
BUT Should be : your_url:port/savings/savings
LINE NEEDS CORRECTION
FROM : form(action="/savings")
TO : form(action="/savings/savings")
Related
I am tring to give 2 roots one for admin and other for user.
To access the admin pannel http://localhost:3000/admin
To access to user page http://localhost:3000.
But the problem is when an option is selected from the menu of admin pannel it will not take to that page , and shows a 404 error.[if i click option which have an href add-faq it must show like http://localhost:3000/admin/add-faq. but it is showing http://localhost:3000/add-faq and giving 404 error]
But the user page had no problems.
I am using node js,Express,Hbs.
All files are named properly and no files missing..
If the http://localhost:3000/admin/add-faq is manually given the stylesheets are not loading (404)
GITHUB :https://github.com/bimalboby/clevercode
PLEASE HELP AND THANKS IN ADVANCE😊
My App.js file:
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var userRouter = require('./routes/user');
var adminRouter = require('./routes/admin');
var hbs = require('express-handlebars')
var app = express();
var db=require('./config/connection')
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');
app.engine('hbs',hbs({extname:'hbs',defaultLayout:'layout',layoutDir:__dirname+'/views/layouts',partialsDir:__dirname+'/views/partials'}))
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')));
db.connect((err)=>{
if(err) console.log('connection failed'+err);
else console.log('connected to database');
})
app.use('/', userRouter);
app.use('/admin',adminRouter);
// 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;```
**My admin.js:**
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
res.render('adminintro',{admin:true})
});
router.get('/add-prices', (req,res)=>{
res.render('faqadmin',{admin:true})
});
router.get('/add-faq',(req,res)=>{
res.render('faqadmin',{admin:true})
})
module.exports = router;
**my user.js:**
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index',{admin:false,indexpage:true});
});
router.get('/faq',(req,res)=>{
res.render('faq',{indexpage:true})
});
router.get('/web-design-pricing',(req,res)=>{
res.render('price',{indexpage:true})
});
router.get('/e-commerce-pricing',(req,res)=>{
res.render('price',{indexpage:true})
});
router.get('/seo-pricing',(req,res)=>{
res.render('price',{indexpage:true})
});
module.exports = router;
Try adding the complete end point like below in /views/partials/admin-header.hbs file like below,
<li>FAQ</li>
Your user routes are with the endpoint '/' in server.js.So its working,where as admin need to be linked like /admin/add-faq
I have an express v4 server with a route called admin. When the user post a password to the admin route, I want to respond by setting a cookie on the user's browser and sending a small json. For some reason, the server keeps returning error 500 when trying to respond. I'm assuming that this is something to do with the cookie as I can do "res.send()" without any problem. I'm new to express/nodejs so any help is appreciated.
admin.js
var express = require('express');
var router = express.Router();
var cookieParser = require('cookie-parser');
/* POST HANDLER */
router.post('/', function(req, res) {
var on = {'admin' : "on"};
res.cookie(cookie , 'cookie_on').send(on);
});
module.exports = router;
app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var admin = require('./routes/admin');
var blogposts = require('./routes/blogposts');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/admin', admin);
app.use('/blogposts', blogposts);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
Dumb mistake: Cookie should have been 'cookie'...
I'm fairly new to express js and I want to know how to use router. I created a file named categories.js inside routes directory with this code.
categories.js code:
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/categories', function(req, res) {
res.send('this is the category');
});
module.exports = router;
inside the app.js i have this code:
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
var categories = require('./routes/categories');
var app = express();
var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/test');
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hjs');
// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
app.use('/categories', categories);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
I have tried understand what is wrong but i can't see to figure out. thanks in advance.
This is the error im getting
Not Found
404
I will like to add inside the routes directory i have a index.js file and this one works.
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
I think my application is not reading the categories.js file, because when I put the category.js code inside index.js it works. but it doesn't work if i put it in a separate file in my case category.js.
I think you've got your categories route hooked up wrong, your categories are mapped to /categories/categories in your code. To fix it, try this in your app.js:
app.use('/', categories);
If you don't want to prefix, you can also simply do this:
app.use(categories);
I created an express project using the express generator like following
express project_name
and
npm install
This is my app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
These are my routes
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'iDanG Management' });
});
module.exports = router;
I have following index.jade
extends layout
block content
div.container
div.row
form(id='myform' action='' method='post')
p Name:
input(type='text' name='name')
p E-Mail:
input(type='text' name='email')
input(type='submit' value='add')
table(class='table table-hover' id='user_table')
thead
tr
th Name
th Email
tbody
script.
$(document).ready(
function() {
$('#user_table').dataTable({
"pagingType": "simple_numbers",
"ordering": false
});
$('#myform').ajaxForm({ beforeSubmit:
function (formData, jqForm, options) {
$('#table').DataTable().row.add([formData[0].value, formData[1].value]).draw();
return false;
}
});
});
And following layout.jade
doctype html
html
head
title= title
script(src="/javascripts/jquery-1.11.2.min.js")
script(src="/javascripts/jquery.form.js")
script(src="/javascripts/jquery.dataTables.min.js")
link(rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css")
link(rel="stylesheet" href="/javascripts/jquery.dataTables.min.css")
body
block content
when I try to submit that form I receive following error:
Error: Not Found
at app.use.res.render.message (/home/ubuntu/iDanG_Management/app.js:30:13)
at Layer.handle [as handle_request] (/home/ubuntu/iDanG_Management/node_modules/express/lib/router/layer.js:82:5)
at trim_prefix (/home/ubuntu/iDanG_Management/node_modules/express/lib/router/index.js:302:13)
at /home/ubuntu/iDanG_Management/node_modules/express/lib/router/index.js:270:7
at Function.proto.process_params (/home/ubuntu/iDanG_Management/node_modules/express/lib/router/index.js:321:12)
at next (/home/ubuntu/iDanG_Management/node_modules/express/lib/router/index.js:261:10)
at /home/ubuntu/iDanG_Management/node_modules/express/lib/router/index.js:603:15
at next (/home/ubuntu/iDanG_Management/node_modules/express/lib/router/index.js:246:14)
at Function.proto.handle (/home/ubuntu/iDanG_Management/node_modules/express/lib/router/index.js:166:3)
at router (/home/ubuntu/iDanG_Management/node_modules/express/lib/router/index.js:35:12)
For the forms I used this
Do you have any suggestions how I can solve this problem? Help is highly appreciated!
It seems like you are doing a post request and your routes does not have post handler.
May be add route for post:
router.post('/', function(req, res, next) {
//do something and return data here?
});
I have created a simple comment system in Express using MongoDB. The user simply uses the form on the home screen to enter a title & a comment and it then appears in a list on the bottom of the page.
However, Before it was simply showing the comments title and body on the page, what I wanted to try and do was to link the title so that when you clicked on it, it showed the comments content.
My model:
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var CommentSchema = new Schema({
title: String,
content: String,
created: Date
});
module.exports = mongoose.model('Comment', CommentSchema);
My view:
extends layout
block content
h1= title
div.addCommentForm
form( method="post", action="/create")
div
div
span.label Title :
input(type="text", class="nameTxt", name="title")
div
span.label Comment :
textarea(name="comment")
div#addCommentSubmit
input(type="submit", value="Save")
br
br
#comments
- each comment in comments
div.comment
a(href=comment.title) #{comment.title}
div.name= comment.title
div.content= comment.content
hr
My app.js:
require('./models/comments'); // require the model before the 'index.js' file is called
var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var create = require('./routes/create');
var show = require('./routes/show');
var app = express();
// Database stuff
var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/comments-app');
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/create', create);
**app.use('/:comment.title', show)**; // add to render the comments content
/// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
/// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
My show route:
var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var Comment = mongoose.model('Comment', Comment);
router.get('/:comment.title', function(req, res) {
res.send(comment.content)
});
module.exports = router;
When I click on the comments title in my app, I am presented with this rather long error.
Not Found
404
Error: Not Found
at Layer.app.use.res.render.message [as handle] (/Users/Keva161/Documents/Projects/Webapps/Node/Express4-Comments-Mongoose/app.js:37:15)
at trim_prefix (/Users/Keva161/Documents/Projects/Webapps/Node/Express4-Comments-Mongoose/node_modules/express/lib/router/index.js:240:15)
at /Users/Keva161/Documents/Projects/Webapps/Node/Express4-Comments-Mongoose/node_modules/express/lib/router/index.js:208:9
at Function.proto.process_params (/Users/Keva161/Documents/Projects/Webapps/Node/Express4-Comments-Mongoose/node_modules/express/lib/router/index.js:269:12)
at next (/Users/Keva161/Documents/Projects/Webapps/Node/Express4-Comments-Mongoose/node_modules/express/lib/router/index.js:199:19)
at next (/Users/Keva161/Documents/Projects/Webapps/Node/Express4-Comments-Mongoose/node_modules/express/lib/router/index.js:176:38)
at next (/Users/Keva161/Documents/Projects/Webapps/Node/Express4-Comments-Mongoose/node_modules/express/lib/router/index.js:176:38)
at /Users/Keva161/Documents/Projects/Webapps/Node/Express4-Comments-Mongoose/node_modules/express/lib/router/index.js:137:5
at /Users/Keva161/Documents/Projects/Webapps/Node/Express4-Comments-Mongoose/node_modules/express/lib/router/index.js:250:10
at next (/Users/Keva161/Documents/Projects/Webapps/Node/Express4-Comments-Mongoose/node_modules/express/lib/router/index.js:160:14)
Any ideas on why I am getting this error and how I can possibly fix it so I am getting the intended behaviour?
You're using
app.use('/:comment.title', show)
and then
router.get('/:comment.title', function(req, res)
You'll want to change one of these routes to just / since this is saying use the route /:comment.title/:comment.title
You will probably also run into an issue with having the .title. This will work if you intend on having a route like /SomeTitle.title otherwise you may want to change it to /:title so /SomeTitle will work. I'm only speculating on your intentions for this. It's possible this is the way you intended it work.