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

点击编辑,并进行编辑



保存改动

删除操作这里不做演示。

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

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

    原教程https://github.com/nswbmw/N-blog/wiki/_pages的第六章,因为版本号等的原因,在原教程基础上稍加修改就可以实现. 实现用户给文章留言的功能,留言保存在数据 ...

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

    原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第一章.因为版本号等的原因,在原教程基础上稍加修改就可以实现. 环境: win7旗舰版64位 Node ...

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

    原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第三章 上传文件眼下有三种方法: 使用 Express 自带的文件上传功能,不涉及数据库 使用 For ...

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

    原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第十章,因为版本号等的原因,在原教程基础上稍加修改就可以实现. post.js中将var post={ ...

  5. Node.js博客搭建

    Node.js 博客搭建 一. 学习需求 Node 的安装运行 会安装node,搭建node环境 会运行node. 基础模块的使用 Buffer:二进制数据处理模块 Event:事件模块 fs:文件系 ...

  6. Hexo - 快速,轻量,强大的 Node.js 博客框架

    Hexo 是一个快速,轻量,强大的 Node.js 博客框架.带给你难以置信的编译速度,瞬间生成静态文件:支持 Markdown,甚至可以在 Hexo 中集合 Octopress 插件:只需要一个命令 ...

  7. Node.js 博客搭建

    Node.js 博客搭建:https://www.linuxidc.com/Linux/2017-02/140115.htm https://www.cnblogs.com/mrcln/p/93087 ...

  8. node.js博客GitHub搭建(hexo)

    教程参考官网提供的: https://hexo.io/zh-cn/ 教程: https://hexo.io/zh-cn/docs/ 我的node.js环境: hexo博客全程采用markdown进行编 ...

  9. [技术博客] 通过ItemTouchHelper实现侧滑删除功能

    通过ItemTouchHelper实现侧滑删除功能 一.效果 二.具体实现 demo中演示的这种左滑删除的效果在手机APP中比较常用,安卓也为我们提供了专门的辅助类ItemTouchHelper来帮助 ...

随机推荐

  1. [Android学习笔记]使用getIdentifier()获取资源Id

    使用getIdentifier()获取资源Id Android中可以使用getIdentifier()获取资源ID ex: 根据图片名称获取图片Id private int getImageResId ...

  2. Java+7入门经典 - 6 扩展类与继承 Part 2/2

    6.12 设计类 1) 通过已定义的基类派生子类, 并且添加方法和数据成员来自定义子类, 创建出类的层次结构; Dog 'IS-A' Animal 2) 定义一系列没有层次结构, 由类对象作为数据成员 ...

  3. 【css基础】垂直外边距的合并

    近期在重温<CSS权威指南>,还是想把基础再打坚固点,如今对垂直外边距的合并问题进行简单总结. 1. 两个块级元素的外边距都大于0时,取那个最大值作为两个块级元素的垂直边距 请看以下一个小 ...

  4. [cocos2d-x][apk打包][Fatal signal 11][andriod]Eclipse编译Fatal signal 11报错-都是字符赋值惹的祸

    流程重现: 使用coco2d-x制作了一个2048,在xcode模拟器执行以及在pad上真机调试都是没有问题的. 可是在使用eclipse调试打包android可以执行,可是进入游戏之后会在随机的地方 ...

  5. DAO设计模式实现数据库的增删改查(进一步封装JDBC工具类)

    DAO设计模式实现数据库的增删改查(进一步封装JDBC工具类) 一.DAO模式简介 DAO即Data Access Object,数据访问接口.数据访问:故名思义就是与数据库打交道.夹在业务逻辑与数据 ...

  6. Office 2016九大新功能

    Office 2016将于2015年秋季正式公布,下面是九大新功能. 预測 基于数据透视表的时间分组建模 联机分析(OLAP)下的PowerView 数据透视表(PivotTable)建模的自己主动关 ...

  7. Python 实现的下载op海贼王网的图片(网络爬虫)

    没得事就爬一下我喜欢的海贼王上的图片 须要在d盘下建立一个imgcache目录 # -*- coding: utf-8 -*- import urllib import urllib2 import ...

  8. 为什么 as sysdba着陆方法oracle数据库,为什么刚刚输入username和password我们都可以登录?

    事实上,这是oracle问题数据库的身份验证方法 该 sqlnet.ora在文件 SQLNET.AUTHENTICATION_SERVICES= (NTS) 变 SQLNET.AUTHENTICATI ...

  9. scala akka 修炼之路5(scala特质应用场景分析)

    scala中特质定义:包括一些字段,行为(方法/函数/动作)和一些未实现的功能接口的集合,能够方便的实现扩展或混入到已有类或抽象类中. scala中特质(trait)是一个非常实用的特性,在程序设计中 ...

  10. ReentrantLock可重入锁的使用场景(转)

    摘要 从使用场景的角度出发来介绍对ReentrantLock的使用,相对来说容易理解一些. 场景1:如果发现该操作已经在执行中则不再执行(有状态执行) a.用在定时任务时,如果任务执行时间可能超过下次 ...