node.js+express+mySQL+ejs+bootstrop實現網站登錄注冊功能

2019-11-19 14:32:17

字體：大中小

來源：轉載

供稿：網友

同志們，經過不懈的努力，查了各種文檔，終于鼓搗出了一個稍微像樣一點的node項目，當然如果直接拿去項目里用，這個demo還太簡單，畢竟一個完整的登錄注冊還有很多實際的內容，本案例mySQL的用戶列表里，為便于理解，只設置了username 和password兩個字段，正常的登錄注冊，肯定會有更多的字段的。但是對于初學node的人來說，比如筆者，還是學習到了不少內容，甚至，緊張的我不知如下下筆，肯定這個是參考了很多網上其他少年博客，以后這個登錄注冊demo會依據項目的需要而有所改進，

效果如下

效果.gif

項目構架

主入口app.js

app.js為程序程序主要入口，一般主要用來寫我們引入的那些中間件及各種設置

var express = require('express');// NodeJS中的Path對象，用于處理目錄的對象，提高開發效率var path = require('path');// 用來定義網頁logo的中間件var favicon = require('serve-favicon');// NodeJs中Express框架使用morgan中間件記錄日志// Express中的app.js文件已經默認引入了該中間件var logger = require('morgan');// 使用app.use(logger('dev'));以將請求信息打印在控制臺，便于開發調試，// 但實際生產環境中，需要將日志記錄在log文件里var logger = require('morgan');// 存儲登錄信息中間件var cookieParser = require('cookie-parser');// 解析請求體的中間件var bodyParser = require('body-parser');// 引入模塊的js文件var routes = require('./routes/index');// var users = require('./routes/user');// 引入session中間件var session=require('express-session');// 創建項目示例var app = express();// 引入我們需要的模板app.set('views', path.join(__dirname, 'views'));app.set('view engine', 'ejs');// 用摩記錄請求app.use(logger('dev'));app.use(bodyParser.json());app.use(bodyParser.urlencoded({ extended: false }));// 利用cookieParser中間件存取信息app.use(cookieParser("Luck"));// 利用session中間件存取信息app.use(session({  secret:'luck',  resave:false,  saveUninitialized:true}));// 靜態化我們的public文件下的文件，使其可以直接引用app.use(express.static(path.join(__dirname, 'public')));app.use('/', routes);// app.use('/users', users);// 捕捉404狀態app.use(function(req, res, next) {  var err = new Error('Not Found');  err.status = 404;  next(err);});module.exports = app;app.listen(3000,'127.0.0.1')routes下的index.js文件index.js這里我用來處理頁面的路由跳轉var express = require('express');var router = express.Router();// 為數據庫鏈接的js文件，可查詢數據庫中的用戶名和密碼等信息var usr=require('netRequest/dbConnect');// 獲取首頁登錄信息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});});// 登錄頁處理router.route('/login')  // get請求渲染頁面    .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: '用戶登錄' ,test:res.locals.islogin});  })  // post請求查詢用戶信息  .post(function(req, res) {    client=usr.connect();    result=null;    // 調用數據庫方法    usr.selectFun(client, req.body.username, function (result) {      if(result[0]===undefined){        res.send('沒有該用戶');      }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');        }      }    });  });// 退出登錄頁處理router.get('/logout', function(req, res) {  res.clearCookie('islogin');  req.session.destroy();  res.redirect('/');});// home頁處理router.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 });});// 注冊頁處理router.route('/reg')  // get請求渲染頁面  .get(function(req,res){    res.render('reg',{title:'注冊'});  })  // post請求注冊用戶  .post(function(req,res) {    client = usr.connect();    // 調用數據庫方法    usr.insertFun(client,req.body.username ,req.body.password2, function (err) {       if(err) throw err;       res.send('注冊成功');    });  });module.exports = router;node_modules中netRequest/dbConnect.js

dbConnect.js

var mysql=require('mysql');// 現在只是練習可以直接為數據庫創建鏈接，// 用戶多時需要創建連接池function connectServer(){  var client=mysql.createConnection({    host:'172.16.20.103',    port:3308,    database:'test',    user:'JRJ_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;

剩下即為頁面模板

<%- include header %><div class="container">  <form class="col-sm-offset-4 col-sm-4 form-horizontal" role="form" method="post">    <fieldset>      <% if(locals.islogin) { %>          <h3>用戶： <%= test %>  已經登陸。<br></h3>          <a class="btn" href="/logout" rel="external nofollow" > 退出登錄 </a>         <% } else{ %>            <div class="form-group">              <label class="col-sm-3 control-label" for="username">用戶名</label>              <div class="col-sm-9">                <input type="text" class="form-control" id="username" name="username" placeholder="用戶名" required>              </div>            </div>            <div class="form-group">              <label class="col-sm-3 control-label" for="password">密碼</label>              <div class="col-sm-9">                <input type="password" class="form-control" id="password" name="password" placeholder="密碼" required>              </div>            </div>            <div class="form-group">              <div class="col-sm-offset-3 col-sm-9">                <button type="submit" class="btn btn-primary">登錄</button>              </div>            </div>      <% } %>    </fieldset>  </form></div><%- include footer %>

index.ejs

<%- include header %><div class="jumbotron text-center">  <% if(locals.islogin){%>    <h2>用戶：<%= test %> </h2>已經登陸    <% }else{%>      <h2 class="text-center"><a href="/login" rel="external nofollow" rel="external nofollow" >請登錄后查看</a></h2>  <%}%>  </div><%- include footer %>

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">用戶名</label>        <div class="col-sm-9">          <input type="text" class="form-control" id="username" name="username" placeholder="用戶名" required>        </div>      </div>      <div class="form-group">        <label class="col-sm-3 control-label" for="password2">密碼</label>        <div class="col-sm-9">          <input type="password" class="form-control" id="password2" name="password2" placeholder="密碼" required>        </div>      </div>      <div class="form-group">        <div class="col-sm-offset-3 col-sm-9">          <button type="submit" class="btn btn-primary">注冊</button>        </div>      </div>    </fieldset>  </form></div><%- include footer %>

header.ejs

<!DOCTYPE html><html><head>  <meta charset="UTF-8"/>  <title>Test</title>  <link rel="stylesheet" href="/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="external nofollow" >  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>  <script type="text/javascript" src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script></head><body><!--  <header>    <h1><%= title %></h1>  </header> -->  <nav class="navbar navbar-default">    <div class="container-fluid">      <div class="navbar-header">        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">          <span class="sr-only">Toggle navigation</span>          <span class="icon-bar"></span>          <span class="icon-bar"></span>          <span class="icon-bar"></span>        </button>        <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Project name</a>      </div>      <div id="navbar" class="navbar-collapse collapse">        <ul class="nav navbar-nav">          <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >待定</a></li>          <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >待定</a></li>          <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >待定</a></li>          <li class="dropdown">            <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">待定<span class="caret"></span></a>            <ul class="dropdown-menu">              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li>              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li>              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a></li>              <li role="separator" class="divider"></li>              <li class="dropdown-header">Nav header</li>              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li>              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >One more separated link</a></li>            </ul>          </li>        </ul>        <ul class="nav navbar-nav navbar-right">          <li class="active"><a title="主頁" href="/" rel="external nofollow" >首頁<span class="sr-only">(current)</span></a></li>          <li><a title="登陸" href="/login" rel="external nofollow" rel="external nofollow" >登錄</a></li>          <li><a title="注冊" href="/reg" rel="external nofollow" >注冊</a></li>        </ul>      </div>    </nav>    <article>

footer.ejs