返回首页 使用Express与MongoDB 搭建多人博客

第14章 增加头像

现在我们来给博客添加用户头像,注册的用户根据注册时的邮箱获取 gravatar 头像,未注册的用户则根据留言填的邮箱获取 gravatar 头像。 什么是 gravatar ?详情请戳:http://www.gravatar.com

我们设定:在主页和用户页的文章标题右侧显示作者头像,在文章页面留言的人的头像显示在留言板左侧。

我们需要用到 Node.js 中的 crypto 模块,之前已经引入过,所以这里可以直接使用。

添加已注册用户的头像

打开 user.js ,在最上面添加一行代码:

var crypto = require('crypto');

然后将 User.prototype.save 内的:

var user = {
    name: this.name,
    password: this.password,
    email: this.email
};

修改为:

var md5 = crypto.createHash('md5'),
    email_MD5 = md5.update(this.email.toLowerCase()).digest('hex'),
    head = "http://www.gravatar.com/avatar/" + email_MD5 + "?s=48";
//要存入数据库的用户信息文档
var user = {
    name: this.name,
    password: this.password,
    email: this.email,
    head: head
};

这里我们在用户文档里添加了 head 键,方便后面使用。

注意:需要把 email 转化成小写再编码。

打开 index.js ,将 app.post('/post') 中的:

post = new Post(currentUser.name, req.body.title, tags, req.body.post);

修改成:

post = new Post(currentUser.name, currentUser.head, req.body.title, tags, req.body.post);

修改 post.js ,将:

function Post(name, title, tags, post) {
  this.name = name;
  this.title = title;
  this.tags = tags;
  this.post = post;
}

修改为:

function Post(name, head, title, tags, post) {
  this.name = name;
  this.head = head;
  this.title = title;
  this.tags = tags;
  this.post = post;
}

将:

var post = {
    name: this.name,
    time: time,
    title:this.title,
    tags: this.tags,
    post: this.post,
    comments: [],
    pv: 0
};

修改为:

var post = {
    name: this.name,
    head: this.head,
    time: time,
    title:this.title,
    tags: this.tags,
    post: this.post,
    comments: [],
    pv: 0
};

最后,修改 index.ejs 和 user.ejs ,在 后添加一行代码:

<a href="/u/<%=post.name %>"><img src="<%=post.head %>" class="r_head" /></a>

至此,我们实现了给已注册的用户添加头像的功能。

添加未注册用户的头像

修改 app.post('/u/:name/:day/:title'),将:

var comment = {
    name: req.body.name,
    email: req.body.email,
    website: req.body.website,
    time: time,
    content: req.body.content
};

修改为:

var md5 = crypto.createHash('md5'),
    email_MD5 = md5.update(req.body.email.toLowerCase()).digest('hex'),
    head = "http://www.gravatar.com/avatar/" + email_MD5 + "?s=48"; 
var comment = {
    name: req.body.name,
    head: head,
    email: req.body.email,
    website: req.body.website,
    time: time,
    content: req.body.content
};

打开 comment.ejs ,将:

<% post.comments.forEach(function (comment, index) { %>
  <p><a href="<%=comment.website %>"><%= comment.name %></a>
  <span class="info"> 回复于 <%= comment.time %></span></p>
  <p><%- comment.content %></p>
<% }) %>

修改为:

<% post.comments.forEach(function (comment, index) { %>
  <div style="padding-left:4em">
    <p><img src="<%=comment.head %>" class="l_head" /><a href="<%=comment.website %>"><%= comment.name %></a>
    <span class="info"> 回复于 <%= comment.time %></span></p>
    <p><%- comment.content %></p>
  </div>
<% }) %>

最后,在 style.css 中添加两行样式:

.l_head{float:left;margin-left:-4em;box-shadow:0px 1px 4px #888;}
.r_head{float:right;margin-top:-2.5em;box-shadow:0px 1px 4px #888;}

现在,我们给博客添加了头像的功能。