node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能


Posted in Javascript onJanuary 12, 2018

同志们,经过不懈的努力,查了各种文档,终于鼓捣出了一个稍微像样一点的node项目,当然如果直接拿去项目里用,这个demo还太简单,毕竟一个完整的登录注册还有很多实际的内容,本案例mySQL的用户列表里,为便于理解,只设置了username 和password两个字段,正常的登录注册,肯定会有更多的字段的。但是对于初学node的人来说,比如笔者,还是学习到了不少内容,甚至,紧张的我不知如下下笔,肯定这个是参考了很多网上其他少年博客,以后这个登录注册demo会依据项目的需要而有所改进,

效果如下

  node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能

效果.gif

项目构架

node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能 

主入口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;

剩下即为页面模板

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) { %>
          <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

</article>
</body>
</html>

项目的主要代码都在此,想要读懂的话,估计要费一段时间的。

总结

以上所述是小编给大家介绍的node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
web前端vue filter 过滤器
Jan 12 #Javascript
你可能不知道的前端算法之文字避让(inMap)
Jan 12 #Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 #Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 #Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 #Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 #Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 #Javascript
You might like
php之字符串变相相减的代码
2007/03/19 PHP
PHP CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
python修改字典内key对应值的方法
2015/07/11 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
python写一个随机点名软件的实例
2019/11/28 Python
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
文秘求职信范文
2014/04/10 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
七夕情人节促销方案
2014/06/07 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
解除同居协议书
2015/01/29 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
Python访问Redis的详细操作
2021/06/26 Python
Python 键盘事件详解
2021/11/11 Python