这节主要是讲修改用户信息，修改信息这一块比较简单，主要是对mongodb的一个修改，重点在上传头像，以及一个扩展，如何在后端修改图片，例如缩放到统一大小。
首先是完成用户展示页面
在views中添加people.ejs,内容如下：
<%- include header %>
<div class=”container”>
<div class=”row-fluid”>
<div class=”span7″>
<div class=”row-fluid”>
<h1 id=”toName”><%= name%></h1>
<div class=”span3″>
<img src=<%= imgUrl%> style=”width:127px;height:111px;”>
</div>
<div class=”span8″ id=”info”>
<p>地址：<%= address%></p>
<p>公司：<%= company%></p>
<p>学校：<%= school%></p>
<p>个人简介：<%= info%></p>
<% if (user) { %>
<% if (user.name==name) { %>
<div id=”edit”>编辑</div>
<% }%>
<% }%>
</div>
<p class=”btn disabled” id=”offline”>隐身</p>
<a class=”btn btn-success” data-toggle=”modal” id=”talk” href=”#talkBox” style=”display:none”>聊天</a>
<% if (user) { %>
<% if (user.name==name) { %>
<div class=”span8″ id=”infoEdit” style=”display:none;”>
<form action=”/people” method=”post” enctype=”multipart/form-data”>
<input type=”text” placeholder=”地址” name=”address”>
<input type=”text” placeholder=”公司” name=”company”>
<input type=”text” placeholder=”学校” name=”school”>
<input type=”text” placeholder=”个人简介” name=”info”>
<br/>修改头像<input type=”file” name=”thumbnail”>
<button type=”submit” class=”btn”>提交</button>
<div id=”noEdit”>取消</div>
</form>
</div>
<% }%>
<% }%>
</div>
<br/>
<ul class=”nav nav-tabs” id=”myTab”>
<li class=”active”><a href=”#home”>提问</a></li>
<li><a href=”#profile”>回答</a></li>
<li><a href=”#messages”>热门</a></li>
</ul>
<div class=”tab-content”>
<div class=”tab-pane active” id=”home”>
<ul class=”thumbnails” id=”element”>
<% question.forEach(function(q, index){ %>
<li>
<h4><a href=”/question/<%= q._id %>”><%= q.title %></a></h4>
<p><%= q.askText %></p>
</li>
<% })%>
</ul>
</div>
<div class=”tab-pane” id=”profile”>回答</div>
<div class=”tab-pane” id=”messages”>热门</div>
</div>
</div>
<div class=”span4″>
<h2>我的信息</h2>
<h2>我的信息</h2>
<h2>我的信息</h2>
<h2>我的信息</h2>
<h2>我的信息</h2>
</div>
</div>
</div>
<%- include footer %>
修改路由设置index.js中的,这个用户页面我们不仅有用户信息，还有这个用户提过的问题，
app.get(‘/people/:user’,function(req,res){
});
为：
app.get(‘/people/:user’,function(req,res){
User.get(req.params.user, function(err, user){
//处理图片
user.imgUrl=user.imgUrl.replace(“./public/”,””);
//先查询到用户信息，然后查询用户的提问
User.getQuestionUser(user.name,function(question){
res.render(‘people’,{
address: user.address,
company: user.company,
school : user.school,
info : user.info,
name:req.params.user,
user:req.session.user,
question:question,
imgUrl:user.imgUrl
});
});
});
});
这里我们需要在user.js里面继续增加函数
User.getQuestionUser=function(user,callback){
//打开数据库
mongodb.open(function(err, db){
if(err){
return callback(err);
}
db.collection(‘question’, function(err, collection){
if(err){
mongodb.close();
return callback(err);
}
//查找用户名 name 值为 name文档
collection.find({name:user}).sort({time:-1}).toArray(function(err,items){
if(err) throw err;
mongodb.close();
//遍历数据
return callback(items);
});
});
});
};
另外我们需要将user.js里面顶部的一个User构造函数做些修改，因为用户信息更多了，修改外下面这样
function User(user){
this.name = user.name;
this.password = user.password;
this.email = user.email;
this.address = user.address;
this.company=user.company;
this.school=user.school;
this.info=user.info;
this.imgUrl=user.imgUrl;
};
这个热门和回答，这里可以由大家自己扩展。
下面一节讲如何修改用户信息和上传头像
未经允许不得转载：前端撸码笔记 » nodejs实战案例（Express框架+mongoDB）之11：用户中心页面