Node. js + express + mySQL + ejs + bootstrop implement website login registration function, ejsbootstrop
Comrades, after unremitting efforts, I checked various documents and finally found a slightly decent node project. Of course, if I used it directly in the project, this demo would be too simple, after all, there is still a lot of practical content for a complete login registration. In the mySQL user list in this case, for ease of understanding, only the username and password fields are set, and normal login registration is normal, there will certainly be more fields. However, for beginners of node, for example, I still learned a lot of content, or even, I don't know the following, I'm sure this is a reference to many other young blogs on the Internet, in the future, This login and registration demo will be improved based on the needs of the project,
The effect is as follows:
Effect .gif
Project Architecture
Main portal app. js
App. js is the main entry to programs. It is generally used to write the middleware we introduce and various settings.
Var express = require ('express '); // Path object in NodeJS, used to process directory objects and improve development efficiency var path = require ('path '); // The middleware var favicon = require ('serve-favicon ') used to define the webpage logo; // The Express framework in NodeJs uses the morgan middleware to record the app in the log // Express. by default, this middleware var logger = require ('Morgan ') has been introduced in js files; // use the app. use (logger ('dev'); to print the request information on the console for development and debugging, // but in the actual production environment, you need to record the log in the log file var logger = require ('Morgan '); // store the login information middleware var cookieParser = require ('cookie-parser '); // The middleware var bodyParser = require ('body-parser ') for parsing the Request body; // The js file var routes = require ('. /routes/Index'); // var users = require ('. /routes/user'); // introduce the session middleware var session = require ('express-session'); // create a project example var app = express (); // introduce the template app we need. set ('view', path. join (_ dirname, 'view'); app. set ('view engine ', 'ejs'); // request the app with a mock. use (logger ('dev'); app. use (bodyParser. json (); app. use (bodyParser. urlencoded ({extended: false}); // uses the cookieParser middleware to access the information app. use (cookieParser ("Luck"); // uses the session middleware to access the information app. use (session ({secret: 'luck ', resave: false, saveUninitialized: true}); // statically convert the files in our public file, so that it can directly reference the app. use (express. static (path. join (_ dirname, 'public'); app. use ('/', routes); // app. use ('/users', users); // capture the 404 status app. use (function (req, res, next) {var err = new Error ('not found'); err. status = 404; next (err) ;}); module. exports = app; app. listen (3000, '2017. 0.0.1 ') index under routes. js file index. js here I am used to handle the page route jump var express = require ('express '); var router = express. router (); // The js file linked to the database. You can query the username, password, and other information in the database. var usr = require ('netrequest/dbConnect '); // obtain the homepage logon information router. get ('/', function (req, res) {if (req. cookies. islogin) {req. session. islogin = req. cookies. islogin;} if (req. session. islogin) {res. locals. islogin = req. session. islogin;} res. render ('index', {title: 'home', test: res. locals. islogin}) ;}); // process the router on the logon page. route ('/login') // get request to render the page. get (function (req, res) {if (req. session. islogin) {res. locals. islogin = req. session. islogin;} if (req. cookies. islogin) {req. session. islogin = req. cookies. islogin;} res. render ('login', {title: 'user login', test: res. locals. islogin});}) // post request to query user information. post (function (req, res) {client = usr. connect (); result = null; // call the database method usr. selectFun (client, req. body. username, function (result) {if (result [0] === undefined) {res. send ('user not exist');} else {if (result [0]. password = req. body. password) {req. session. islogin = req. body. username; res. locals. islogin = req. session. islogin; res. cookie ('islogin', res. locals. islogin, {maxAge: 60000}); res. redirect ('/home');} else {res. redirect ('/login') ;}}}) ;}); // exit the logon page to process the router. get ('/logout', function (req, res) {res. clearCookie ('islogin'); req. session. destroy (); res. redirect ('/') ;}); // process the router on the home page. get ('/home', function (req, res) {if (req. session. islogin) {res. locals. islogin = req. session. islogin;} if (req. cookies. islogin) {req. session. islogin = req. cookies. islogin;} res. render ('home', {title: 'home', user: res. locals. islogin}) ;}); // register the page to process the router. route ('/reg') // get request to render the page. get (function (req, res) {res. render ('reg ', {title: 'registration'});}) // post a request to register a user. post (function (req, res) {client = usr. connect (); // call the database method usr. insertFun (client, req. body. username, req. body. password2, function (err) {if (err) throw err; res. send ('registered successfully');}); module. exports = router; netRequest/dbConnect in node_modules. js
DbConnect. js
Var mysql = require ('mysql'); // you can directly create a connection for the database only in practice now. // you need to create a connection pool function connectServer () {var client = mysql for many users. createConnection ({host: '2017. 16.20.103 ', port: 3308, database: 'test', user: 'JJ _ win', password: 'ft % ^ $ fjYR56'}) return client ;} function selectFun (client, username, callback) {client. query ('select password from win. luck_user where username = "'+ username +'" ', function (err, results, fields) {if (err) throw Err; callback (results) ;}) ;}function insertFun (client, username, password, callback) {client. query ('insert into win. luck_user value (?,?) ', [Username, password], function (err, result) {if (err) {console. log ("error:" + err. message); return err;} callback (err) ;});} exports. connect = connectServer; exports. selectFun = selectFun; exports. insertFun = insertFun;
The rest is the Page Template
Login. ejs
<%-Include header %> <div class = "container"> <form class = "col-sm-offset-4 col-sm-4 form-horizontal" role = "form" method = "post"> <fieldset> <% if (locals. islogin) {%>
Index. ejs
<%-Include header %> <div class = "jumbotron text-center"> <% if (locals. islogin) {%>
Reg. ejs
<%-Include header %> <div class = "container"> <form class = "col-sm-offset-4 col-sm-4 form-horizontal" role = "form" method = "post"> <fieldset> <div class = "form-group"> <label class = "col-sm-3 control-label" for = "username"> User Name </label> <div class = "col-sm-9"> <input type = "text" class = "form-control" id = "username" name = "username" placeholder = "username" required> </div> <div class = "form-group"> <label class = "col-sm-3 control-label" for = "password2"> password </label> <div class = "col-sm-9"> <input type = "password" class = "form-control" id = "password2" name = "password2" placeholder = "password" required> </div> <div class = "form-group"> <div class = "col-sm-offset-3 col-sm-9"> <button type = "submit" class = "btn-primary"> register </button> </div> </div> </fieldset> </form> </div> <%-include footer %>
Header. ejs
<! DOCTYPE html>
Footer. ejs
</article></body>
The main code of the Project is here. If you want to understand it, it may take a while.
Summary
The above is a small part of the node. js + express + mySQL + ejs + bootstrop implement the website login registration function. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!