第9章 完善之个人中心、密码找回功能
来源：互联网 发布：php fpm 与php 编辑：程序博客网 时间：2024/05/21 19:49
小站：http://oideas.herokuapp.com
教程演示地址：http://omind.herokuapp.com
教程代码地址：https://github.com/joveth/OMinds
QQ交流群：158325682
1，个人中心功能
首先将我们的header.ejs复制一份，命名为uheader.ejs，恩，个性话嘛，你可一随便怎么搞，下面是我自己搞的：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="baidu-tc-cerfication" content="ceebe65e9edd003b00d5343cacf62368" /> <title><%= title %></title> <!-- begin CSS --> <link href="/stylesheets/style.css" type="text/css" rel="stylesheet"><!-- end CSS --><script>var _hmt = _hmt || [];(function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?9b5c19985f45da0c8d516c281226b29c"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script><script language="javascript" type="text/javascript" src="/js/jquery-1.7.1.min.js"></script> <script language="javascript" type="text/javascript" src="/js/common.js"></script> </head> <body style="background: #000000;"> <div id="container" style="width: 700px; margin: 0 auto;"><div class="unav-main"><a class="nav-home" href="/" title="首页"></a><a class="nav-mind" href="/" title="我的投稿"></a><a class="nav-mail" href="/" title="消息"></a><a class="nav-care" href="/" title="关注"></a><a class="nav-user" style="float:right" href="#" title="用户"><%=user.nickname%></a></div><div class="uc-main">少不了css和图片，打开style.css，添加：
.unav-main{ max-width: 690px;margin: 20px auto;height:30px;}.unav-main a{display: block;height: 34px;opacity: 0.8;width: 34px;float:left;margin: 0 20px 20px 0;}.nav-home {background: url(../images/nav-home.png) no-repeat;}.nav-mind {background: url(../images/nav-mind.png) no-repeat;}.nav-mail {background: url(../images/nav-mail.png) no-repeat;}.nav-care {background: url(../images/nav-plus.png) no-repeat;}.nav-user {color:#fff;}.uc-main{ max-width: 690px; border: solid 1px #111111; -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,0.2);box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,0.2);background: url(../images/bgnoise_lg.png) repeat left top;border-radius: 10px;margin-bottom:20px;}将下面的几个图片放进你的images文件夹下，名字别忘了哦：
将index.ejs 也复制一份，命名为uindex.ejs，内容：
<%- include uheader%><div class="content" > <div style="height:30px"> </div> <% if(minds==null||minds.length==0){%> 还没有投稿哦，<a href="/upminds">投一个...</a><%}else{ minds.forEach(function (mind, index) { %><div class="cell"> <div class="cell_author" > <%if(mind.user){%> <img src="<%=mind.user.photo%>" title="<%=mind.user.nickname%>"> <a href="/theuserminds?uid=<%=mind.user._id%>"><%=mind.user.nickname%></a> <%}%> <span class="cell_loc" title="<%=(index+1)%>楼"><%=(index+1)%>#</span> </div> <div class="cell_text" title='<%=mind.cdate%>' ><%=mind.content%> </div> <div class="cell_bar"> <ul style="padding:0"> <li><a id="putups<%= mind._id %>" name="putups" href="javascript:putUps('<%= mind._id %>');" title="<%=mind.ups%>个赞" >赞[<%=mind.ups%>]</a></li> <li><a id="putdowns<%= mind._id %>" name="putdowns" href="javascript:putDowns('<%= mind._id %>')" title="<%=mind.downs%>个踩">踩[<%=mind.downs%>]</a></li> </ul> <ul class="cell_bar_comm"> <li><a href="/comment?oid=<%=mind._id%>" title="<%=mind.comments%>条评论" >评[<%=mind.comments%>]</a></li> <div class="bshare-custom" style="float:right;height:28px;margin-top: 4px;"><a title="分享到QQ空间" class="bshare-qzone"></a> <a title="分享到新浪微博" class="bshare-sinaminiblog"></a> <a title="分享到人人网" class="bshare-renren"></a> <a title="分享到腾讯微博" class="bshare-qqmb"></a> <a title="分享到网易微博" class="bshare-neteasemb"></a> <script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=;pophcol=2&lang=zh"></script> <script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script> <script type="text/javascript" charset="utf-8">bShare.addEntry({ title:"OMinds分享", summary:'分享你的心事。' ,vTag:'OMinds'});</script> </ul> </div> </div><%})}%><div style="height:10px"> </div> </div> </div> <script type="text/javascript"> function putUps(oid){var params ={ oid:oid }; $.ajax({ data: params, url: '/addups', type:'post', jsonpCallback: 'callback', success: function(data){ console.log(data); $('#putups'+oid).attr("title",data+'个赞'); $('#putups'+oid).html("赞["+data+"]"); }, error: function(jqXHR, textStatus, errorThrown){ alert('error ' + textStatus + " " + errorThrown); } });}function putDowns(oid){var params ={ oid:oid }; $.ajax({ data: params, url: '/addowns', type:'post', jsonpCallback: 'callback', success: function(data){ $('#putdowns'+oid).attr("title",data+'个踩'); $('#putdowns'+oid).html("踩["+data+"]"); }, error: function(jqXHR, textStatus, errorThrown){ alert('error ' + textStatus + " " + errorThrown); } });}</script> <%- include footer%>打开routes下的index.js，添加方法：
app.get('/ucenter', function (req, res) {var user = req.session.user;if (!user) {return res.redirect('/');}User.getById(user._id, function(err, temp) {if (!temp) {return res.redirect('/');}Mind.getUserMinds(temp,function(err, minds) {if (err) {minds = [];}res.render('uindex', {title : 'OMinds - 我的投稿',user : req.session.user,minds : minds});});});});好，打开model下的mind.js，再添加一个查询方法：
//用户投稿Mind.getUserMinds = function(user,callback) { mongodb.connect(settings.url,function (err, db) { if (err) { return callback(err); } db.collection('minds', function(err, collection) { if (err) { db.close(); return callback(err); } var query = {}; if (user) { query.user = user; } collection.find(query).sort({cdate: -1}).toArray(function(err,results){ db.close(); if (err) { return callback(err); } callback(null, results); }); }); });};好了，已经ok了，别忘了入口要修改一下哦，在header.ejs中，将链接做如下修改：
<a href="/ucenter" class="user_icon" style="clear:both;padding: 0;"><img src="<%=user.photo%>" title="<%=user.nickname%>"></a>只是把href加上了内容。
快点试试把，看看效果：
恩，有点搓，期待大家的好东西。。。。
下面来做密码找回功能～～～
2、密码找回功能
就是发送邮件让他从新设置一下楼
将我们的ologin.ejs，复制一份，命名为oforget.ejs，内容为：
<%- include header%><form action="/sendmail" class="form-login" method="post" id="forget_form"><div class="header">OMinds-发送邮件，找回密码</div><div class="inputs"><span style="padding:10px 15px;color:red;" id="error"><%=error%></span><input id="email" name="email" type="text" required placeholder="邮箱"><div class="link-2"><a href="/login">没忘记？</a></div><div class="clear"></div><div class="button-login"><input type="button" value="发 送" id="forget_btn"></div></div></form><%- include footer%>
发完邮件怎么办呢？肯定是给个链接让他找回啊，重设啊，那么要建一个设置页面，在view下新建ousersetting.ejs文件，内容：
<%- include header%><form action="/updateinfor" class="form-login" method="post" id="usersetting_form"><div class="header">OMinds-用户设置</div><div class="inputs"><span style="padding:10px 15px;color:red;" id="error"><%=error%></span><input id="reg_email" name="reg_email" type="text" value="<%= user.email%>" disabled ><input id="reg_nickname" name="reg_nickname" type="text" required placeholder="昵称" value="<%= user.nickname%>"><input id="reg_passw" name="reg_passw" type="password" required placeholder="密码" ><input id="reg_repassw" name="reg_repassw" type="password" required placeholder="密码确认"><div class="clear"></div><div class="button-login"><input type="button" value="更 新" id="update_btn"></div></div></form><%- include footer%>
发送完了应该有提示啊，我们再建一个中间提示层，在view下新建forgetsend.ejs，内容：
<%- include header %> <div class="content" > <div class="cell"> <div class="cell_author"> <a href="/" title="密码找回">密码找回</a> </div> <div class="cell_text" style="margin-bottom:20px;"> 已向您的邮箱（<%= email %>）发送密码找回邮件，请确认。 </div> </div> </div><%- include footer %>
就是告诉他邮件已经发送了。
打开routes/index.js，添加爱以下方法：
app.get('/forget', function (req, res) {var use = req.session.user;if(use){return res.redirect('/');}res.render('oforget', {title : 'OMinds - 找回密码' ,user : req.session.user,error : req.flash('error').toString()});});app.post('/sendmail', function(req, res) {var email = req.body.email;if (!email) {req.flash('error', '请填写邮箱。');return res.redirect('/forget');}User.get(email, function(err, user) {req.flash('email', email);if (!user) {req.flash('error', '不存在的邮箱!');return res.redirect('/forget');}var transport = nodemailer.createTransport("SMTP", {host : "smtp.163.com",secureConnection : true, // use SSLport : 465, // port for secure SMTPauth : {user : "ominds@163.com",pass : //换成你自己的邮箱密码}});var newusession = randomString(12);user.password = "";transport.sendMail({from : "ominds@163.com",to : email,subject : "OMinds用户密码找回",generateTextFromHTML : true,html : "用户:" + user.nickname+ "，请点击（复制）此链接进行密码更新:<a href=http://"+ req.headers.host + "/usersetting?usession="+ newusession + " >" + req.headers.host+ "/usersetting?usession=" + newusession+ "</a><br>请勿回复。"}, function(error, response) {if (error) {return res.redirect('/');} else {console.log("Message sent: " + response.message);}transport.close();});delete req.session.newusession;delete req.session.user;req.session.newusession = newusession;req.session.user = user;res.render('forgetsend', {title : 'OMinds-邮件发送完成',email : email,user : null});});});app.get('/usersetting', function(req, res) {if (!req.session.user) {return res.redirect('/');}var usession = req.session.newusession;if (usession) {delete req.session.newusession;if (usession != req.query.usession) {return res.redirect('/');}}res.render('ousersetting', {title : 'OMinds - 用户设置',error : req.flash('error').toString(),user : req.session.user});});app.post('/updateinfor', function(req, res) {if (!req.session.user) {return res.redirect('/');}var usession = req.session.newusession;if (usession) {delete req.session.newusession;if (usession != req.query.usession) {return res.redirect('/');}}var email = req.body.reg_email;var nickname = req.body.reg_nickname;var password = req.body.reg_passw;var repassword = req.body.reg_repassw;if (nickname == null) {req.flash('error', '请输入昵称。');return res.redirect('/usersetting');} else if (nickname.length < 3 || nickname.length > 40) {req.flash('error', '昵称长度在3-40位。');return res.redirect('/usersetting');}if (password == null || repassword == null) {req.flash('error', '请输入密码。');return res.redirect('/usersetting');}if (password.length < 6 || password.length > 25) {req.flash('error', '密码长度在6-25位。');return res.redirect('/usersetting');}// 检查密码是否一致if (password != repassword) {req.flash('error', '两次密码不一致，请确认。');return res.redirect('/usersetting');}var md5 = crypto.createHash('md5'), password = md5.update(req.body.reg_passw).digest('hex');var updateUser = new User({email : email,nickname : nickname,password : password});User.update(updateUser, function(err) {if (err) {return res.redirect('/');}delete req.session.user;req.session.user = updateUser;error = "更新成功！";res.render('ousersetting', {title : 'OMinds - 用户设置',error : req.flash('error').toString(),user : updateUser});});});请将邮件发送的pass填写为你自己的东西，包括邮箱。哦对了，在最开始呢，添加一些东西，首先是我们的临时session链接生成器方法：
//生成随机串function randomString(size) {size = size || 6;var code_string = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';var max_num = code_string.length + 1;var new_pass = '';while (size > 0) {new_pass += code_string.charAt(Math.floor(Math.random() * max_num));size--;}return new_pass;};当然了，nodemailer对象：
var nodemailer = require("nodemailer");一定要记得npm install nodemailer哦。
当然了，最后就是我们的跟新用户方法了，在model/user.js中，update方法修正一下：
// U (改)User.update = function(user, callback) {mongodb.connect(settings.url,function(err, db) {if (err) {return callback(err);}db.collection('users', function(err, collection) {if (err) {db.close();return callback(err);}collection.update({"email" : user.email}, {$set : {nickname : user.nickname,password : user.password}}, function(err) {db.close();if (err) {return callback(err);}callback(null);});});});};ok，结束了，等等，忘了我们的，common.js，添加一下方法：
$("#forget_btn").click(function(){var email = $("#email").val();if(email==null||email.trim()==''){$("#error").text('邮箱不能为空！');return;}$("#forget_form").submit();});$("#update_btn").click(function(){var nickname = $("#reg_nickname").val();var passw = $("#reg_passw").val();var repassw = $("#reg_repassw").val();if(nickname==null||nickname.trim()==''){$("#error").text('昵称不能为空！');return;}else if(passw==null||passw.trim()==''){$("#error").text('密码不能为空！');return;}else if(repassw==null||repassw.trim()==''){$("#error").text('请确认密码！');return;}else if(passw!=null&&(passw.length<6||passw.length>40)){$("#error").text('您输入的密码不符合要求，密码长度为6-40！');return;}$("#usersetting_form").submit();});好了，终于结束了，有点多，一定要耐心，认真一步一步做，你会说或你的动西，来看看我们的效果：
以上完了。谢谢，跟读，ok了，后面还有一章总结，不会再更了～～～～，不好意思里面有点小bug，没关系不影响大局。
小站：http://oideas.herokuapp.com
教程演示地址：http://omind.herokuapp.com
教程代码地址：https://github.com/joveth/OMinds
QQ交流群：158325682
0 0
- 第9章 完善之个人中心、密码找回功能
- Django站点之找回密码功能
- 第8章 完善之搜索、精华功能
- php找回密码功能
- 找回密码功能逻辑
- 邮箱找回密码功能
- 登录之找回密码
- angularjs之找回密码
- php邮箱找回密码功能
- php邮箱找回密码功能
- 发送找回密码邮件（个人笔记）
- Web实战之密码找回
- APP测试之找回密码
- APP测试之找回密码
- Ubuntu Linux系统帐户密码找回功能
- asp.net 邮件找回密码功能、
- C#密码找回功能的实现
- JavaMail模仿CSDN找回密码的功能
- hdu 1754 I Hate It
- ORA-28002 密码过期警告
- YARN的基本概念
- 我所知道的TA测试框架
- 链表操作
- 第9章 完善之个人中心、密码找回功能
- 表空间自动维护管理
- Hibernate利用@DynamicInsert和@DynamicUpdate生成动态SQL语句
- Hadoop中map/reduce之WordCount实例——分解vs汇总
- avcodec_decode_video2使用参数picture注意点
- apache 多个tomcat 多个应用 整合配置（实战结果）
- 欢迎同学们关注此博客，里面有大量关于java的知识。。。。。。。
- bash设置成vim命令模式
- 如何收缩表空间中的数据文件?
