Download
1 / 9
110 likes | 157 Views
Learn how to set up Express, body-parser, and multer middleware in Node.js for your final project. Handle GET and POST methods to pass values between an HTML form and the server using Express routing.
E N D
Node.js Week 04 (Final Project) http://fog.ccsf.edu/~hyip
Installing Express for final project • Create a new directory final_project which is under the nodejs_workspace directory. (mkdir final_project, then cd final_project). • Use the npm init command under the new final_project folder to create a package.json file for your application – final_project. npm init • NOTE: you can hit RETURN to accept the defaults for most of them, except entry point is app.js: entry point: app.js • Install express locally in the nodejs_workspace directory, and save it in the dependencies list: npm install express --save • Install body-parser middleware, which is responsible for handling Raw, JSON, URL, and Text encoded form data: • NOTE: body-parser is a piece of express middleware that reads a form's input and stores it as a javascript object accessible through `req.body` npm install body-parser --save • Install multer middleware, which is responsible for the handling of multipart/form-data: npm install multer --save
Handle get method • We are going to use the Form GET method in HTML so as to pass two values. • The input will be handled by the router “process_get” inside the file “server.js” • Steps to complete the project: • Create index.html. • Create server.js. • Start the server: node server.js • Run the program from browser: http://localhost:8081/index.html
Create index.html <html> <head><title>this file is used with server.js</title> </head> <body> <h1>Process get method</h1> <form action="http://127.0.0.1:8081/process_get" method="get"> Your First Name: <input type="text" name="fname"> <br> Your Last Name: <input type="text" name="lname"> <br> <input type="submit" value="Process Get method"> </form> </body> </html>
Create server.js var express = require('express'); var app = express(); app.get('/index.html', function (req, res) { res.sendFile(__dirname + "/index.html"); }); app.get('/process_get', function (req, res) { var response = { fname: req.query.fname, lname: req.query.lname }; console.log(response); // res.end(JSON.stringify(response)); res.json(response); }); var server = app.listen(8081, function () { console.log('server.js is listening at http://127.0.0.1:8081/index.html or http://localhost:8081/index.html'); });
Handle post method • We are going to use the Form GET method in HTML so as to pass two values. • The input will be handled by the router “process_post” inside the file “server.js” • Steps to complete the project: • Update index.html. • Update server.js. • Start the server: node server.js • Run the program from browser: http://localhost:8081/index.html
Update index.html • Add the following codes to the index.html <hr> <h1>Process post method</h1> <form action="http://127.0.0.1:8081/process_post" method="post"> Your First Name: <input type="text" name="fname"> <br> Your Last Name: <input type="text" name="lname"> <br> <input type="submit" value="Process Post method"> </form>
Update server.js • Add the following codes to the server.js var bodyParser = require('body-parser'); // creating the application/x-www-form-urlencoded parser var urlenParser = bodyParser.urlencoded({ extended: false}); app.post('/process_post', urlenParser, function (req, res) { var response = { fname: req.body.fname, lname: req.body.lname }; console.log(response); res.end(JSON.stringify(response)); });
References • Node.js the Right Way, Jim R. Wilson, The Programatic Bookshelf, ISBN 978-1-937785-73-4 • NodeJS: Practical Guide for Beginners, Matthew Gimson, ISBN 978-1-519354-07-5 • Express.js: Node.js Framework for Web Application Development, Daniel Green, ISBN 978-1-530204-06-9 • Express.com • Tutorials Point • The Node Beginner Book, Manuel Kiessling, Leanpub, Link.
