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,前提是已登录


    点击编辑,并进行编辑


    保存改动

    删除操作这里不做演示。

  • 相关阅读:
    asp.net mvc 项目架构解析
    新手如何发网站外链,网站的外链如何发,发外链的方法集合
    win2008r2的iis7.5手动建站方法,iis7.5中用独立用户建立网站的方法,提高网站安全性
    ex:Could not load file or assembly 'System.Web.Helpers, Version=2.0.0.0, Culture=neutral, . 系统找不到指定的文件。
    微信开放平台---网站应用开发---微信登录功能 简介
    如何使用ILSpy 把发布版本反编译成源码
    沐雪多用户微信公众平台开发源码,商城小程序源码(2018年最新的asp.net C# 微信源码,小程序源码)
    2015淘宝最新排名新规则
    群主微信sdk说明地址
    Quantization Method
  • 原文地址:https://www.cnblogs.com/bhlsheji/p/4515062.html
Copyright © 2011-2022 走看看