搭建个人博客 ( 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
})
});
}
});
效果如下:
就这样,文章的发布和展示就这样实现了。