日期:2014-05-16  浏览次数:20327 次

nodejs--express开发博客系统(三)

    上一节已经实现了登录、注册、发表文章和文章读取的功能,今天咱加上评论、文章页面和作者页面。

     评论只能在进入文章页面后才能进行,所以咱们先写文章页面。

     在上一节的代码中,我已经给文章标题添加了超链接了,

<a href="/<%= post.user %>/<%= post.time.day%>/<%= post.title %>"><%= post.title %></a>
     根据这个链接地址,进入文章页面的路由控制就可以写成这样:

app.get('/:user/:time/:title', function(req,res){
    User.get(req.params.user,function(err, user){
        Post.getOne(req.params.user, req.params.time, req.params.title, function(err, post){//还记得post.js里面获取文章的函数吧?
            if(err){
                req.flash('err',err); 
                return res.redirect('/');
            }
            res.render('article',{
                title: req.params.title,
                post: post,
                user: req.session.user,
                success: req.flash('success').toString(),
                error: req.flash('error').toString()
            });
        });
    });
});
    接下来写文章页面的视图 article.ejs
<%- include header %>
<p><h2><a href="/<%= locals.post.user %>/<%= locals.post.time.day %>/<%= locals.post.title %>"><%= locals.post.title %></a></h2></p>
<p class="info">
    作者:<a href="/<%= locals.post.user %>"><%= locals.post.user %></a> |
    日期:<%= locals.post.time.minute %> 
</p>
<p><%- locals.post.post %></p>
<p class="info">阅读:<%= locals.post.pv %> | 评论:<%= locals.post.comments.length %>
<%- include footer %>
进入主页点击文章标题看看效果吧?


         发现问题了吧?样式都没有了,原因先不说,说完解决方法之后你就明白了:

        把header.ejs中引入style.css的路径写成这样:

<link rel="stylesheet" href="/stylesheets/style.css">
      好了,ok了!

     现在在文章页面后面加上评论,完整的article.ejs为:

<%- include header %>
<p><h2><a href="/<%= locals.post.user %>/<%= locals.post.time.day %>/<%= locals.post.title %>"><%= locals.post.title %></a></h2></p>
<p class="info">
    作者:<a href="/<%= locals.post.user %>"><%= locals.post.user %></a> |
    日期:<%= locals.post.time.minute %> 
</p>
<p><%- locals.post.post %></p>
<p class="info">阅读:<%= locals.post.pv %> | 评论:<%= locals.post.comments.length %>

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


<form method="post">
<% if(!locals.user){ %>
姓名:<input type="text" name="name" /><br />
邮箱:<input type="text" name="email" /><br />
网址:<input type="text" name="website" /><br />
<% } %>
留言:<br /><textarea name="content" rows="5" cols="80"></textarea>
      <br /><input type="submit" value="留言" />
</form>
<%- include footer %>
      评论视图有了,下面就是处理过程了,在app.get("/:user/:time/:title",function(){})后面添加:

app.post('/:user/:time/:title', fu