Node.js 博客实例(五)编辑与删除功能

原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第五章,由于版本等的原因,在原教程基础上稍加改动即可实现。

现在给博客添加编辑文章与删除文章的功能。

当一个用户在线时,只允许他在自己发表的文章页进行编辑或删除,编辑时,只能编辑文章内容,不能编辑文章标题。

在style.css ,添加如下样式:

.edit{margin:3px;padding:2px 5px;border-radius:3px;background-color:#f3f3f3;color:#333;font-size:13px;}
.edit:hover{text-decoration:none;background-color:#f00;color:#fff;-webkit-transition:color .2s linear;}

通过检测 session 中的用户名是否存在,若存在且和当前文章页面的作者名相同,则显示编辑和删除按钮,否则不显示:

article.ejs ,将代码修改成如下:

<%- include header %>
<p>
  <% if (user && (user.name == post.name)) { %>
  <span><a class="edit" href="/edit/<%= post.name %>/<%= post.time.day %>/<%= post.title %>">编辑</a></span>
  <span><a class="edit" href="/remove/<%= post.name %>/<%= post.time.day %>/<%= post.title %>">删除</a></span>
<% } %>
</p>
<p class="info">
  作者:<a href="/u/<%= post.name %>"><%= post.name %></a> |
  日期:<%= post.time.minute %>
</p>
<p><%- post.post %></p>
<%- include footer %>

post.js ,添加如下代码:

//返回原始发表的内容(markdown 格式)
Post.edit = function(name, day, title, callback) {
	//打开数据库
	mongodb.open(function (err, db) {
		if (err) {
			return callback(err);
		}
		//读取 posts 集合
		db.collection('posts', function (err, collection) {
			if (err) {
				mongodb.close();
				return callback(err);
			}
			//根据用户名、发表日期及文章名进行查询
			collection.findOne({
				"name": name,
				"time.day": day,
				"title": title
			}, function (err, doc) {
				mongodb.close();
				if (err) {
					return callback(err);
				}
			callback(null, doc);//返回查询的一篇文章(markdown 格式)
			});
		});
  });
};

//更新一篇文章及其相关信息
Post.update = function(name, day, title, post, callback) {
	//打开数据库
	mongodb.open(function (err, db) {
		if (err) {
			return callback(err);
		}
		//读取 posts 集合
		db.collection('posts', function (err, collection) {
			if (err) {
				mongodb.close();
				return callback(err);
			}
		//更新文章内容
			collection.update({
				"name": name,
				"time.day": day,
				"title": title
			}, {
				$set: {post: post}
			}, function (err) {
				mongodb.close();
				if (err) {
					return callback(err);
				}
				callback(null);
			});
		});
	});
};

//删除一篇文章
Post.remove = function(name, day, title, callback) {
	//打开数据库
	mongodb.open(function (err, db) {
		if (err) {
			return callback(err);
		}
		//读取 posts 集合
		db.collection('posts', function (err, collection) {
			if (err) {
				mongodb.close();
				return callback(err);
			}
			//根据用户名、日期和标题查找并删除一篇文章
			collection.remove({
				"name": name,
				"time.day": day,
				"title": title
			}, {
				w: 1
			}, function (err) {
					mongodb.close();
					if (err) {
						return callback(err);
					}
					callback(null);
				});
		});
	});
};

index.js ,添加如下代码:

<span style="white-space:pre">	</span>app.get('/edit/:name/:day/:title', checkLogin);
	app.get('/edit/:name/:day/:title', function (req, res) {
		var currentUser = req.session.user;
		Post.edit(currentUser.name, req.params.day, req.params.title, function (err, post) {
			if (err) {
				req.flash('error', err);
				return res.redirect('back');
			}
			res.render('edit', {
				title: '编辑',
				post: post,
				user: req.session.user,
				success: req.flash('success').toString(),
				error: req.flash('error').toString()
			});
		});
	});

	app.post('/edit/:name/:day/:title', checkLogin);
	app.post('/edit/:name/:day/:title', function (req, res) {
		var currentUser = req.session.user;
		Post.update(currentUser.name, req.params.day, req.params.title, req.body.post, function (err) {
			var url = '/u/' + req.params.name + '/' + req.params.day + '/' + req.params.title;
			if (err) {
				req.flash('error', err);
				return res.redirect(url);//出错!返回文章页
			}
			req.flash('success', '修改成功!');
			res.redirect(url);//成功!返回文章页
		});
	});

	app.get('/remove/:name/:day/:title', checkLogin);
	app.get('/remove/:name/:day/:title', function (req, res) {
		var currentUser = req.session.user;
		Post.remove(currentUser.name, req.params.day, req.params.title, function (err) {
			if (err) {
				req.flash('error', err);
				return res.redirect('back');
			}
			req.flash('success', '删除成功!');
			res.redirect('/');
		});
	});

在 blog/views/下新建 edit.ejs ,添加如下代码:

<%- include header %>
<form method="post">
  标题:<br />
  <input type="text" name="title" value="<%= post.title %>" disabled="disabled" /><br />
  正文:<br />
  <textarea name="post" rows="20" cols="100"><%= post.post %></textarea><br />
  <input type="submit" value="保存修改" />
</form>
<%- include footer %>

完工!试一下效果,先登录,再测试编辑和删除操作:

点击进入文章可看到编辑和删除按钮,前提是已登录

点击编辑,并进行编辑

保存修改

删除操作这里不做演示。

时间: 2024-11-04 21:08:51

Node.js 博客实例(五)编辑与删除功能的相关文章

Node.js 博客实例(六)留言功能

原教程https://github.com/nswbmw/N-blog/wiki/_pages的第五章,由于版本等的原因,在原教程基础上稍加改动即可实现. 实现用户给文章留言的功能,留言保存在数据库中. post.js ,修改 Post.prototype.save 中要存入的文档为: //要存入数据库的文档 var post = { name: this.name, time: time, title: this.title, post: this.post, comments:[] }; 我

Node.js 博客实例(七)分页功能

原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第七章,由于版本等的原因,在原教程基础上稍加改动即可实现. 给博客的主页和用户页面增加分页功能.设定:主页和用户页面每页最多显示十篇文章. 这里要用到 mongodb 的 skip 和 limit 操作. 打开 post.js ,把 Post.getAll 函数修改如下: //读取文章及其相关信息 Post.getTen = function(name,page,callback) { //打开数据

Node.js 博客实例(一)简单博客

原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第一章.因为版本号等的原因,在原教程基础上稍加修改就可以实现. 环境: win7旗舰版64位 Node.js:0.10.31 mongodb:2.6.4 express:3.× 效果: 注冊界面: 登录界面: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZG9uZ3NoYW9zaHVhaQ==/font/5a6L5L2T/fontsize/400/fil

Node.js 博客实例(四)实现用户页面和文章页面

原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第四章,由于版本等的原因,在原教程基础上稍加改动即可实现. 现在,我们来给博客添加用户页面和文章页面. 所谓用户页面就是当点击某个用户名链接时,跳转到:域名/u/用户名 ,并列出该用户的所有文章. 同理,文章页面就是当点击某篇文章标题时,跳转到:域名/u/用户名/时间/文章名 ,进入到该文章的页面. post.js: 将 Post.get 修改为 Post.getAll ,同时将 index.js

Node.js 博客实例(九)标签和标签页面

原教程https://github.com/nswbmw/N-blog/wiki/_pages的第九章,由于版本等的原因,在原教程基础上稍加改动即可实现. 每篇文章最多有三个标签(少于三个也可以),当点击主页左侧标签页链接时,跳转到标签页并列出所有已存在标签:当点击任意一个标签链接时,跳转到该标签页并列出所有含有该标签的文章. 首先我们来实现给文章添加标签的功能. 打开 post.ejs ,在 <input type="text" name="title" /

Node.js 博客实例(三)添加文件上传功能

原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第三章 上传文件眼下有三种方法: 使用 Express 自带的文件上传功能,不涉及数据库 使用 Formidable 外部模块,不涉及数据库 上传到 MongoDB ,涉及数据库 这里使用第一种,用户将文件上,存储于:blog/public/images/文件夹下. blog/views/header.ejs  在<span><a title="发表" href=&quo

Node.js 博客实例(三)增加文件上传功能

原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第三章 上传文件目前有三种方法: 使用 Express 自带的文件上传功能,不涉及数据库 使用 Formidable 外部模块,不涉及数据库 上传到 MongoDB ,涉及数据库 这里使用第一种,用户将文件上,存储于:blog/public/images/目录下. blog/views/header.ejs  在<span><a title="发表" href="

Node.js 博客实例(十一)文章检索功能

原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第十一章,由于版本等的原因,在原教程基础上稍加改动即可实现. 现在我们来给博客增加文章检索功能,即根据关键字模糊查询文章标题,且字母不区分大小写. 首先,我们修改 header.ejs ,在 </nav> 前添加一行代码: <span><form action="/search" method="GET"><input type

Node.js 博客实例(十)pv统计和留言统计

原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第十章,因为版本号等的原因,在原教程基础上稍加修改就可以实现. post.js中将var post={...}修改为(每次修改此处之后都要将e:/mongodb/blog/清空): //要存入数据库的文档 var post = { name: this.name, time: time, title: this.title, post: this.post, tags:this.tags, comm