zoukankan      html  css  js  c++  java
  • 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 中的username是否存在,若存在且和当前文章页面的作者名同样,则显示编辑和删除button,否则不显示:

    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);
    			}
    			//依据username、发表日期及文章名进行查询
    			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);
    			}
    			//依据username、日期和标题查找并删除一篇文章
    			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 %>
    完工!试一下效果,先登录,再測试编辑和删除操作:

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


    点击编辑,并进行编辑


    保存改动

    删除操作这里不做演示。

  • 相关阅读:
    友链
    P2572 [SCOI2010]序列操作
    「THP3考前信心赛」解题报告
    DP中的树上边/点覆盖问题
    P3413 SAC#1
    luoguP6754 [BalticOI 2013 Day1] Palindrome-Free Numbers
    睿智错误
    常见套路?
    奇怪的点子
    最近做过一些比较好的题
  • 原文地址:https://www.cnblogs.com/bhlsheji/p/4515062.html
Copyright © 2011-2022 走看看