node.js怎么实现网站登录注册功能(node.js,编程语言)

效果如下

项目构架

主入口app.js

app.js为程序程序主要入口，一般主要用来写我们引入的那些中间件及各种设置

varexpress=require('express');//NodeJS中的Path对象，用于处理目录的对象，提高开发效率varpath=require('path');//用来定义网页logo的中间件varfavicon=require('serve-favicon');//NodeJs中Express框架使用morgan中间件记录日志//Express中的app.js文件已经默认引入了该中间件varlogger=require('morgan');//使用app.use(logger('dev'));以将请求信息打印在控制台，便于开发调试，//但实际生产环境中，需要将日志记录在log文件里varlogger=require('morgan');//存储登录信息中间件varcookieParser=require('cookie-parser');//解析请求体的中间件varbodyParser=require('body-parser');//引入模块的js文件varroutes=require('./routes/index');//varusers=require('./routes/user');//引入session中间件varsession=require('express-session');//创建项目示例varapp=express();//引入我们需要的模板app.set('views',path.join(__dirname,'views'));app.set('viewengine','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){varerr=newError('NotFound');err.status=404;next(err);});module.exports=app;app.listen(3000,'127.0.0.1')routes下的index.js文件index.js这里我用来处理页面的路由跳转varexpress=require('express');varrouter=express.Router();//为数据库链接的js文件，可查询数据库中的用户名和密码等信息varusr=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)throwerr;res.send('注册成功');});});module.exports=router;node_modules中netRequest/dbConnect.js

dbConnect.js

varmysql=require('mysql');//现在只是练习可以直接为数据库创建链接，//用户多时需要创建连接池functionconnectServer(){varclient=mysql.createConnection({host:'172.16.20.103',port:3308,database:'test',user:'JRJ_Win',password:'FT%^$fjYR56'})returnclient;}functionselectFun(client,username,callback){client.query('selectpasswordfromwin.luck_userwhereusername="'+username+'"',function(err,results,fields){if(err)throwerr;callback(results);});}functioninsertFun(client,username,password,callback){client.query('insertintowin.luck_uservalue(?,?)',[username,password],function(err,result){if(err){console.log("error:"+err.message);returnerr;}callback(err);});}exports.connect=connectServer;exports.selectFun=selectFun;exports.insertFun=insertFun;

剩下即为页面模板

login.ejs

<%-includeheader%><divclass="container"><formclass="col-sm-offset-4col-sm-4form-horizontal"role="form"method="post"><fieldset><%if(locals.islogin){%><h4>用户：<%=test%>已经登陆。<br></h4><aclass="btn"href="/logout"rel="externalnofollow">退出登录</a><%}else{%><divclass="form-group"><labelclass="col-sm-3control-label"for="username">用户名</label><divclass="col-sm-9"><inputtype="text"class="form-control"id="username"name="username"placeholder="用户名"required></div></div><divclass="form-group"><labelclass="col-sm-3control-label"for="password">密码</label><divclass="col-sm-9"><inputtype="password"class="form-control"id="password"name="password"placeholder="密码"required></div></div><divclass="form-group"><divclass="col-sm-offset-3col-sm-9"><buttontype="submit"class="btnbtn-primary">登录</button></div></div><%}%></fieldset></form></div><%-includefooter%>

index.ejs

<%-includeheader%><divclass="jumbotrontext-center"><%if(locals.islogin){%><h3>用户：<%=test%></h3>已经登陆<%}else{%><h3class="text-center"><ahref="/login"rel="externalnofollow"rel="externalnofollow">请登录后查看</a></h3><%}%></div><%-includefooter%>

reg.ejs

<%-includeheader%><divclass="container"><formclass="col-sm-offset-4col-sm-4form-horizontal"role="form"method="post"><fieldset><divclass="form-group"><labelclass="col-sm-3control-label"for="username">用户名</label><divclass="col-sm-9"><inputtype="text"class="form-control"id="username"name="username"placeholder="用户名"required></div></div><divclass="form-group"><labelclass="col-sm-3control-label"for="password2">密码</label><divclass="col-sm-9"><inputtype="password"class="form-control"id="password2"name="password2"placeholder="密码"required></div></div><divclass="form-group"><divclass="col-sm-offset-3col-sm-9"><buttontype="submit"class="btnbtn-primary">注册</button></div></div></fieldset></form></div><%-includefooter%>

header.ejs

<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>Test</title><linkrel="stylesheet"href="/bootstrap-3.3.7-dist/css/bootstrap.min.css"rel="externalnofollow"><scriptsrc="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><scripttype="text/javascript"src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script></head><body><!--<header><h2><%=title%></h2></header>--><navclass="navbarnavbar-default"><divclass="container-fluid"><divclass="navbar-header"><buttontype="button"class="navbar-togglecollapsed"data-toggle="collapse"data-target="#navbar"aria-expanded="false"aria-controls="navbar"><spanclass="sr-only">Togglenavigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">Projectname</a></div><divid="navbar"class="navbar-collapsecollapse"><ulclass="navnavbar-nav"><liclass="active"><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">待定</a></li><li><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">待定</a></li><li><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">待定</a></li><liclass="dropdown"><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"class="dropdown-toggle"data-toggle="dropdown"role="button"aria-haspopup="true"aria-expanded="false">待定<spanclass="caret"></span></a><ulclass="dropdown-menu"><li><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">Action</a></li><li><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">Anotheraction</a></li><li><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">Somethingelsehere</a></li><lirole="separator"class="divider"></li><liclass="dropdown-header">Navheader</li><li><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">Separatedlink</a></li><li><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">Onemoreseparatedlink</a></li></ul></li></ul><ulclass="navnavbar-navnavbar-right"><liclass="active"><atitle="主页"href="/"rel="externalnofollow">首页<spanclass="sr-only">(current)</span></a></li><li><atitle="登陆"href="/login"rel="externalnofollow"rel="externalnofollow">登录</a></li><li><atitle="注册"href="/reg"rel="externalnofollow">注册</a></li></ul></div></nav><article>

footer.ejs

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