网络编程
位置:首页>> 网络编程>> JavaScript>> node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能

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

作者:范小饭_ 关注  发布时间:2023-07-15 17:55:01 

标签:nodejs,express,ejs,bootstrap

同志们,经过不懈的努力,查了各种文档,终于鼓捣出了一个稍微像样一点的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实现网站登录注册功能,希望对大家有所帮助

来源:https://www.jianshu.com

0
投稿

猜你喜欢

  • SQL Server Extended Events(下面简称XEvent)是SQL Server 2008里新加的事件处理系统,用来取代S
  • 在页面中自定义了changejs函数后页面提示错误:Active Server Pages 错误 'ASP 0138' 嵌套
  • Go pongo2 教程展示了如何使用 pongo2 模板引擎在 Golang 中使用模板。模板引擎是一个库,旨在将模板与数据结合起来以生成
  • 前言:话说,我一直没能理解美工究竟是什么(这是一篇投稿)。因为要求确实很多。目前,我只能理解成,是前端开发+页面设计+用户体验设计的全能手。
  • SQL Server数据库查询速度慢的原因有很多,常见的有以下几种:1、没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺陷)
  • 1. 排名函数与PARTITION BY --所有数据 SELECT * FROM dbo.student AS a INNER JOIN
  • 最近接触到Tencent的广告越来越多,户外广告牌和电视上都是,可以明显感觉到Tencent的扩张野心,以及对QQ品牌定位的重塑。摆脱低龄化
  • 如何阻止别人非法链接你网站的图片,防盗链?getimage.asp<% Option ExplicitDim&nb
  • 听说firefox是史上最好用的浏览器,便下载下来体验一番,将体验感受与大家分享一下,并和我一直使用的the world浏览器做一个对比!首
  • 在内容为主的网站中,搜索框往往是最常用的设计元素之一。从可用性的角度来看,搜索功能是用户有了明确的内容想看的时候最后使用的功能。如果一个网站
  • Javascript 正常取来源网页的URL只要用: document.referrer就可以了!但,如果来源页是Jav
  • CSS+DIV是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为
  • FSO,正如UFO般令人激动、令人神往,当然更多的亦是让人欢喜让人忧。君不见某空间服务商广告:100MB空间只要60RMB/年,支持数据库,
  • 一看,C盘只有不到2M可用空间,一查原因,sqlserver安装路径下的log目录文件占了好大,5G多, 于是上网搜了下,解决了: 把与sq
  • 如何将产生的密码记录并发送给用户?这里使用了cdonts邮件组件来发送邮件,前提服务器得支持cdonts组件。好了,看看具体实现方法吧,不是
  • 前言上一次简单了解了协程的工作原理 前文链接最后提到了几个使用协程时会遇到的问题,其中一个就是主线程不会等待子线程结束,在这里记录两种比较简
  • 我要说的内容都是非常基础的内容,高手就免看了,如果看了欢迎给点意见啊。新手或者对低层还不是很了解的人可以看看,帮助理解与记忆。XMLHttp
  • 本篇没有考虑异步,多线程及SQL注入WebDatabase 规范中说这份规范不再维护了,原因是同质化(几乎实现者都选择了Sqlite),且不
  • 插件很多从事互联网行业或者开发的人员来不是很陌生,wordpress之所以为什么那么受欢迎,很大部分是因为他的强大的插件库,还要譬如就是大家
  • concat()是将tensor沿着指定维度连接起来。其中tensorflow1.3版中是这样定义的:concat(values,axis,
手机版 网络编程 asp之家 www.aspxhome.com