Express Js Routing is among the primary things to know when starting your journey with nodejs and expressjs. In this tutorial we will know more about express js, the difference between express routing and express router routing, setting up routes, and playing with HTML forms. Initially we would set up a home page route. Then render a template on signup form which on submit would post the parameter to welcome page. So, this tutorial will lead you from scratch and at par with the fresher level experienced people in the industry. So, let’s get started now.
Express JS Routing
Express js goes in hand with nodejs as it is the most popular nodejs web application with features like routing, debugging, middleware. here We will discuss express js routing. There are two types of routing one using router other using express js default routing. The tutorial is regarding express js default routing but let’s talk a bit of the difference here too. Router() links to the subroutes whereas app.get() route to individual respective routes which would be more clear with this example.
app.use('/', homepage); route to '/'path
app.get('/link1', link1page); route to '/link1'path
app.get('/link2', link2page); route to '/link2' path
var router = express.Router(); app.use('/', router); // Mount the router as middleware at path / router.get('/sub1', sub1page); route to /sub1 path router.get('/sub2', sub2page);route to /sub1/sub2 path
Now, let’s begin the code and get straight into express js routing
1. Setting up Express Js Application
var express = require('express');
var app=express();
app.get('/',function(req,res)
{
res.send('<h1>Welcome to home page</h1>')
});
var server=app.listen(3000,function(){});
Add the above code in app.js and run using npm app.js. Here you have developed an express server which would be listening on port 3000 and on landing page you would get a welcome message as below.
2. Routing to template
Now, will attach a template to route /signup and on submit it will route to path /welcomepage action method=POST. Also for template path we are using node module path to give the existing path of signup.html page. Also to parse the request parameters we have used body-parser. So do npm install body-parser.
var express = require('express');
var app=express();
const bodyParser=require('body-parser');
app.use(bodyParser.urlencoded({extended:true}));
const path=require('path');
app.get('/',function(req,res)
{
res.send('<h1>Welcome to home page</h1>')
});
app.get('/signup',function(req,res)
{
res.sendFile(path.join(__dirname+'/signup.html'));
});
app.post('/welcomepage', function(req,res)
{
const username=req.body.username;
console.log(username);
});
var server=app.listen(3000,function(){});
<div>
<div><h1>Signup Form..</h1></div>
<div>
<form method="POST" action="/welcomepage">
<input name="username" id="username"/>
<input type="submit"/>
</form>
</div>
</div> 
Since its a post route you won’t see results on the browser as it uses GET request. Hence we have consoled the output like below but to test you should always use postman.
4. Where to proceed from here
All express js basic routing has been discussed. You should now be comfortable with setting up express js server and express js routing but its just the basics as you would want to know more about other routes like redirect(), sending json object etc. So, always follow the official documentation https://expressjs.com/en/guide/routing.html
Happy learning
Similar Posts:
from Engineer Diaries https://ift.tt/2Myyngn
0 Comments