第9章 完善之个人中心、密码找回功能
2014-03-27 23:23
525 查看
小站：http://oideas.herokuapp.com
教程演示地址：http://omind.herokuapp.com
教程代码地址：https://github.com/joveth/OMinds
QQ交流群：158325682
1，个人中心功能
首先将我们的header.ejs复制一份，命名为uheader.ejs，恩，个性话嘛，你可一随便怎么搞，下面是我自己搞的：
少不了css和图片，打开style.css，添加：
将下面的几个图片放进你的images文件夹下，名字别忘了哦：
将index.ejs 也复制一份，命名为uindex.ejs，内容：
打开routes下的index.js，添加方法：
好，打开model下的mind.js，再添加一个查询方法：
好了，已经ok了，别忘了入口要修改一下哦，在header.ejs中，将链接做如下修改：
快点试试把，看看效果：
恩，有点搓，期待大家的好东西。。。。
下面来做密码找回功能～～～
2、密码找回功能
就是发送邮件让他从新设置一下楼
将我们的ologin.ejs，复制一份，命名为oforget.ejs，内容为：
发完邮件怎么办呢？肯定是给个链接让他找回啊，重设啊，那么要建一个设置页面，在view下新建ousersetting.ejs文件，内容：
发送完了应该有提示啊，我们再建一个中间提示层，在view下新建forgetsend.ejs，内容：
就是告诉他邮件已经发送了。
打开routes/index.js，添加爱以下方法：
哦对了，在最开始呢，添加一些东西，首先是我们的临时session链接生成器方法：
当然了，nodemailer对象：
一定要记得npm install nodemailer哦。
当然了，最后就是我们的跟新用户方法了，在model/user.js中，update方法修正一下：
ok，结束了，等等，忘了我们的，common.js，添加一下方法：
好了，终于结束了，有点多，一定要耐心，认真一步一步做，你会说或你的动西，来看看我们的效果：
以上完了。谢谢，跟读，ok了，后面还有一章总结，不会再更了～～～～，不好意思里面有点小bug，没关系不影响大局。
小站：http://oideas.herokuapp.com
教程演示地址：http://omind.herokuapp.com
教程代码地址：https://github.com/joveth/OMinds
QQ交流群：158325682
教程演示地址：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 SSL
port : 465, // port for secure SMTP
auth : {
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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- WordPress 使用 Pie-Register 添加前台注册、登录、找回密码和编辑个人资料功能
- Visual SVN增加网页个人SVN密码修改功能
- 看好你的门-确保验证机制的安全(5)-防止滥用密码修改和密码找回功能
- 通过邮件找回密码功能的实现
- php邮箱找回密码功能
- 通过邮件找回密码功能的Java实现
- 找回密码功能的实现（考虑安全性，加密方面）
- PHP会员找回密码功能实现实例介绍
- app登录时用QQ或者微信授权登录，及找回密码功能
- 发送邮件，找回密码的功能
- PHP会员找回密码功能的简单实现
- php建表管理、发送url实现会员找回密码功能
- PHP会员找回密码功能实现实例介绍
- 绑定手机号功能,注册后在个人中心有一个绑定手机号的菜单,输入手机号码,手机接收短信验证码(有效期5分钟),,简述实现思路。
- PHP会员找回密码功能的简单实现
- 关于java mail邮箱密码找回功能所遇到的问题
- Win10最新版 将补充和完善窗口动画和通知中心功能
- django 开发忘记密码通过邮箱找回功能示例
- thinkphp实现发送邮件密码找回功能实例
- PHP会员找回密码功能的简单实现