node+express+mongoDB搭建个人博客 (四)

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/YIDBoy/article/details/54322300

搭建个人博客 ( YIDBlog )

当我们实现了注册，登录，登出功能之后，接下来我们可以来发表文章了。

1.在models文件夹创建posts.model.js，代码如下：

var mongoose = require('mongoose');
var config = require('./../config/config');
mongoose.connect(config.mongodb);
var PostSchema = new mongoose.Schema({
    title:String,//标题
    author:String,//作者
    article:String,//文章内容
    publishTime:String,//发表时间
    postImg:String,//封面
    comments:[{
        name:String,
        time:String,
        content:String
    }],//评论
    pv:Number//访问次数
});

//这里会数据库会创建一个users集合
var Post = mongoose.model('Post', UserSchema);
module.exports = Post;

创建好了文章模型之后，我们就开始创建文章内容了

2.修改index.js，代码如下：

因为需要上传图片，所以在form 中用 enctype=”multipart/form-data”，
并且引用formidable表单控件

npm install formidable --save
npm install moment --save

var moment = require('moment');//时间控件
var formidable = require('formidable');//表单控件
//文章发表
app.get('/post',checkLogin,function (req, res) {
    res.render('post',{
        title:'发表',
        user: req.session.user,
        success: req.flash('success').toString(),
        error: req.flash('error').toString()
    })
});
app.post('/post',checkLogin,function(req,res,next){
    var imgPath = path.dirname(__dirname) + '/public/images/';
    var form = new formidable.IncomingForm(); //创建上传表单
    form.encoding = 'utf-8'; //设置编辑
    form.uploadDir = imgPath; //设置上传目录
    form.keepExtensions = true; //保留后缀
    form.maxFieldsSize = 2 * 1024 * 1024; //文件大小
    form.type = true;
    form.parse(req, function(err, fields, files) {
        if (err) {
            console.log(err);
            req.flash('error','图片上传失败');
            return;
        }
        var file = files.postImg;//获取上传文件信息

        if(file.type != 'image/png' && file.type != 'image/jpeg' && file.type != 'image/gif' && file.type != 'image/jpg'){
            console.log('上传文件格式错误，只支持png,jpeg,gif');
            req.flash('error','上传文件格式错误，只支持png,jpeg,gif');
            return res.redirect('/upload');
        }
        var title = fields.title;
        var author = req.session.user.username;
        var article = fields.article;
        var postImg = file.path.split(path.sep).pop();
        var pv = fields.pv;
        // 校验参数
        try {
            if (!title.length) {
                throw new Error('请填写标题');
            }
            if (!article.length) {
                throw new Error('请填写内容');
            }
        } catch (e) {
            req.flash('error', e.message);
            return res.redirect('back');
        }
        var post = new Post({
            title:title,
            author:author,
            article:article,
            postImg:postImg,
            publishTime:moment(new Date()).format('YYYY-MM-DD HH:mm:ss').toString(),
            pv:pv
        });
        post.save(function(err){
            if(err){
                console.log('文章发表出现错误');
                req.flash('err','文章发表出现错误');
                return res.redirect('/post');
            }
            console.log('文章录入成功');
            req.flash('success','文章录入成功');
            res.redirect('/');
        });
    });
});

3.修改post.ejs，代码如下：

<%- include header %>
<form method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label for="name">标题:</label>
        <input type="text" class="form-control" name="title" placeholder="输入标题">
    </div>
    <div class="form-group">
        <label for="name">文章</label>
        <textarea class="form-control" name="article" rows="8"></textarea>
    </div>
    <div class="form-group">
        <label for="name">图片</label>
        <input type="file" name="postImg"  />
    </div>
    <hr />
    <input type="hidden" name="pv" value=0 >
    <input type="submit" value="发表" class="btn btn-default"/>
</form>
<%- include footer %>

4.当我们文章发表之后，会跳转到首页，现在来修改index.js，代码如下：

app.get('/',function(req,res,next){
     Post.find({},function(err,data){
         if(err){
             //console.log(err);
             req.flash('error','查找错误');
             return res.redirect('/');
         }
         res.render('index',{
             title:'首页',
             user: req.session.user,
             success: req.flash('success').toString(),
             error: req.flash('error').toString(),
             posts:data,
             time:moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
         });
     })
  });

5.修改index.ejs

<%- include header %>
<p><%= time %></p>
<ul class="list-group">
    <% posts.forEach(function(post){%>
    <li class="list-group-item">
        <h3><a href="#"><%= post.title%></a></h3>
        <p class="info">
            <span>作者：<%= post.author %></span>
            <span>|</span>
            <span>日期：<%= post.publishTime %></span>
        </p>
    </li>
    <hr>
    <%})%>
</ul>
<%- include footer %>

效果如下：

6.文章列表已经出来了，接下来就是文章详情了，这里我只是简单的发表文章，需要修改index.ejs，代码如下：

<%- include header %>
<p><%= time %></p>
<ul class="list-group">
    <% posts.forEach(function(post){%>
    <li class="list-group-item">
        <h3><a href="/detail?id=<%= post._id%>"><%= post.title %></a></h3>
        <p class="info">
            <span>作者：<%= post.author %></span>
            <span>|</span>
            <span>日期：<%= post.publishTime %></span>
        </p>
    </li>
    <hr>
    <%})%>
</ul>
<%- include footer %>

7.点击标题，跳转到文章详情页面，新建detail.ejs,代码如下：

<%- include header %>

<%if(user){%>
    <%if(user.username == post.author){%>
        <p>
            <span><a class="edit" href="#">编辑</a></span>
            <span><a class="edit" href="#">删除</a></span>
        </p>
    <%}%>
<%}%>
<p><h2><a href="#"><%= post.title %></a></h2></p>
<p class="info">
作者：<a href="#"><%= post.author %></a> |
日期：<%= post.publishTime %> |
浏览：<%= post.pv%>
</p>
<p><%- post.article %></p>

<%if(post.postImg) { %>
    <img src="/images/<%= post.postImg%>" alt="" style="width:100%;height:100%;">
<% } %>
<%- include footer %>

8.修改index.js,代码如下：

//展示文章
    app.get('/detail',function(req,res,next){
        var id = req.query.id;
        if(id && id!=''){
            Post.update({"_id":id},{$inc:{"pv":1}},function(err){
                if(err){
                    console.log(err);
                    return res.redirect("back");
                };
                console.log("浏览数量+1");
            });

            Post.findById(id,function(err,data){
                if(err){
                    console.log(err);
                    req.flash('error','查看文章详细信息出错');
                    return res.redirect('/');
                }
                res.render('detail',{
                    title:'文章展示',
                    user: req.session.user,
                    success: req.flash('success').toString(),
                    error: req.flash('error').toString(),
                    post:data,
                    img:path.dirname(__dirname) + '/public/images/'+data.postImg
                })
            });
        }
    });

效果如下：

就这样，文章的发布和展示就这样实现了。