基于React在博客应用程序中更新和删除帖子:第4部分

在本系列教程的前一部分中，您学习了如何添加和显示帖子。在react中创建博客应用程序系列教程的这一部分中，您将实现更新和删除博客帖子的功能。

入门让我们开始克隆本系列最后一部分的源代码。

https://github.com/royagasthyan/ReactBlogApp-AddPost克隆目录后，导航到项目目录并安装所需的依赖项。

CD ReactBlogApp-AddPost NPM安装启动Node.js服务器，应用程序将在http://localhost:7777/index . html #/上运行。

创建更新和删除视图让我们修改博客文章列表，并使用更新和删除图标以表格形式显示数据。在ShowPost组件的render方法中，用表格替换现有的div，如代码所示:

& lttable className = & quot表格表格-条纹& quot& gt& ltthead & gt& lttr & gt& ltth & gt# & lt/th & gt；& ltth & gtTitle & lt/th & gt；& ltth & gt主题& lt/th & gt；& ltth & gt& lt/th & gt；& ltth & gt& lt/th & gt；& lt/tr & gt；& lt/thead & gt；& lttbody & gt{ this . state . posts . map（function（post，index）{ return & lt；tr key = { index } & gt& lttd & gt{ index+1 } & lt；/TD & gt；& lttd & gt{ post.title } & lt/TD & gt；& lttd & gt{ post.subject } & lt/TD & gt；& lttd & gt& ltspan className = & quot雕花铅笔& quot& gt& lt/span&gt。& lt/TD & gt；& lttd & gt& ltspan className = & quot雕花图标雕花图标-删除& quot& gt& lt/span&gt。& lt/TD & gt；& lt/tr & gt；}.bind（this））} } & lt；/tbody & gt；& lt/table & gt；如上面的代码所示，您已经修改了现有代码，以表格形式显示帖子。您已经映射了posts变量以迭代posts集合并动态创建所需的tr和td。

保存上述更改并重新启动服务器。将浏览器指向http://localhost:7777/home#/，您应该能够以表格形式查看博客文章列表。

要实现更新发布功能，需要将click事件附加到编辑图标上。如下图所示修改编辑图标范围:

& ltspan onClick = { this . update Post . bind（this，post。_ id）class name = & quot；雕花铅笔& quot& gt& lt/span&gt。如上面的代码所示，您已经将帖子ID作为参数传递给updatePost方法。

在ShowPost组件中创建一个updatePost方法。

update post（id）{ hash history . push（‘/add post/‘+id）；}如上面的代码所示，您已经触发了到添加文章页面的重定向，该页面具有已编辑项目的ID。在Add Post页面上，您将使用传递的ID获取博客文章的详细信息并填写详细信息。

修改路由器，在添加帖子页面中包含可选的id参数。

& lt路由组件={AddPost}路径= & quot/addPost（/:id）& quot；& gt& lt/Route & gt；在AddPost组件中，创建一个名为getPostWithId的方法，使用该Id获取博客文章的详细信息。在getPostWithId方法中，对app.js中的getPostWithId API进行AJAX调用

getPostWithId（）{ var id = this . props . params . id；var self = thisaxios . post（“/getPostWithId“，{ id: id }）。then（function（response）{ if（response）{ self . setstate（{ title:response . data . title }）；self . setstate（{ subject:response . data . subject }）；} }) .catch（function（error）{ console . log（‘error is‘，error）；});}您已经通过从getPostWithId API方法收到的响应更新了状态变量title和subject。

修改标题和主题文本框以显示状态变量的值。

& ltdiv className = & quot表单组& quot& gt& lt输入值={this.state.title}类型= & quot文本& quotonChange = { this . handletitlchange } class name = & quot；表单控件& quotid = & quot标题& quotname = & quot标题& quotplaceholder = & quot标题& quot必需/& gt；& lt/div & gt；& ltdiv className = & quot表单组& quot& gt& lttextarea value = { this . state . subject } class name = & quot；表单控件& quotonChange = { this . handlesubjectchange } type = & quot；textarea & quotid = & quot主题& quotplaceholder = & quot主题& quotmaxlength = & quot140 & quotrows = & quot7 & quot& gt& lt/textarea & gt；& lt/div & gt；现在，让我们在app.js中创建getPostWithId API来对MongoDB数据库进行数据库调用，以获取具有特定Id的帖子详细信息。这是getPostWithId API方法:

app . post（‘/getPostWithId‘，function（req，RES）{ var id = req . body . id；post . getPostWithId（ID，function（result）{ RES . send（result）}）在post.js文件中，创建一个getpostwithid方法来查询数据库以获取详细信息。其外观如下:

getPostWithId:function（id，callback）{ mongo client . connect（URL，function（err，db）{ db . collection（‘post‘）。find one（{ _ id:new MongoDB。ObjectID（id）}，function（err，result）{ assert . equal（err，null）；if（err = = null）{ callback（result）} else { callback（false）} }）；}）}如上面的代码所示，您使用findOne API获取了具有特定ID的博客文章的详细信息。

保存以上更改并尝试运行程序。单击主页上的编辑图标，这将重定向到添加文章页面并填写标题和主题。

现在，要更新博客文章的详细信息，您需要检查id是否在app.js的addPost API方法中。如果是新文章，id将未定义。

修改AddPost组件中的AddPost方法以包含id状态变量。

axios . post（‘/add post‘），{title: this.state.title，subject: this.state.subject，id: this.state.id}）在addPost API方法中，需要检查id参数是否未定义。如果未定义，则意味着这是一篇新帖子，否则需要调用update方法。addPost API方法如下:

app . post（‘/add post‘，function（req，RES）{ var title = req . body . title；var submit = req . body . subject；var id = req . body . id；if（id = =‘‘‘| | id = = undefined）post . add post（title，subject，function（result）{ RES . send（result）；});} else { post . update post（id，标题，主题，函数（结果）{ res.send（结果）；});}}）在post.js文件中，创建一个名为updatePost的方法来更新博客文章的详细信息。您将使用updateOne API来更新具有特定id的博客文章的详细信息。下面是updatePost方法的样子:

update post:function（id，title，subject，callback）{ mongo client . connect（URL，function（err，db）{ db . collection（‘post‘）。update one（{ & quot；_ id & quot:新mongodb。ObjectID（id）}，{ $ set:{ & quot；标题& quot:标题主题& quot:subject } }，function（err，result）{ assert . equal（err，null）；if（err = = null）{ callback（true）} else { callback（false）} }）；});}保存以上更改并重新启动服务器。登录应用程序并单击编辑图标。修改现有值并单击按钮更新详细信息。

要删除文章，您需要在删除图标上附加一个点击事件。如图所示修改和删除图标范围:

& ltspan onClick = { this . delete Post . bind（this，post。_ id）class name = & quot；雕花图标雕花图标-删除& quot& gt& lt/span&gt。如上面的代码所示，您已经将帖子ID作为参数传递给deletePost方法。

在ShowPost组件中创建一个名为deletePost的方法。

delete post（id）{ }在ShowPost组件的构造函数中绑定此方法。

this . delete post = this . delete post . bind（this）；要在映射函数回调中使用它，您需要将它绑定到映射函数。修改地图函数回调如下图所示:

{ this . state . posts . map（function（post，index）{ return { index+1 } { post . title } { post . subject } & lt；span onClick = { this . update Post . bind（this，post。_ id）class name = & quot；雕花铅笔& quot& gt& lt/span&gt。& ltspan onClick = { this . delete Post . bind（this，post。_ id）class name = & quot；雕花图标雕花图标-删除& quot& gt& lt/span&gt。}.bind（this）}在deletePost方法中，在调用delete API之前添加确认提示。

delete post（id）{ if（confirm（‘您确定吗？’））{ //删除Post API调用将在此处！！}}现在让我们将deletePost API添加到app.js文件中。API将从AJAX调用中读取文章ID并从MongoDB中删除条目。下面是deletePost API的样子:

app . post（“/delete post”，function（req，RES）{ var id = req . body . id；post . deletePost（ID，function（result）{ RES . send（result）}）如上面的代码所示，您将调用post.js文件中的delete post方法并返回结果。让我们在post.js文件中创建deletePost方法。

delete post:function（id，callback）{ mongo client . connect（URL，function（err，db）{ db . collection（‘post‘）。delete one（{ _ id:new MongoDB。ObjectID（id）}，function（err，result）{ assert . equal（err，null）；console . log（& quot；删除了帖子。");if（err = = null）{ callback（true）} else { callback（false）} }）；}）}如上面的代码所示，post.js文件中的deletePost方法将使用MongoClient连接到MongoDB中的博客数据库。使用AJAX调用传递的Id，它将从数据库中删除帖子。

更新home.jsx文件中deletePost方法的代码，将AJAX调用app.js文件包含到deletePost API中。

delete post（id）{ if（confirm（‘您确定吗？’））{ var self = thisaxios . post（“/delete post“，{ id: id }）。然后（function（response）{ }）。catch（function（error）{ }）；}}删除博客文章后，您需要刷新博客文章列表以反映这一点。因此，创建一个名为getPost的新方法，并将componentDidMount代码移到该函数中。这是getPost方法:

get post（）{ var self = this；axios . post（‘/get post‘，{ }）。then（function（response）{ console . log（‘RES is‘，response）；self . setstate（{ posts:response . data }）}）。catch（function（error）{ console . log（‘error is‘，error）；});}修改componentDidMount代码，如图:

componentidmount（）{ this . get post（）；document . getelementbyid（‘home hyperlink‘）。className = & quot活动& quot；document . getelementbyid（“add hyperlink“）。className = & quot"；}调用getPost方法在deletePost AJAX调用的成功回调中更新博客文章列表。

delete post（id）{ if（confirm（‘您确定吗？’））{ var self = thisaxios . post（“/delete post“，{ id: id }）。then（function（response）{ self . get post（）；}) .catch（function（Error）{ console . log（‘Error is‘，Error）；});}}保存以上更改并重新启动服务器。尝试添加新的博客文章，然后从网格列表中单击删除。系统将提示您删除确认消息。单击“确定”按钮后，该条目将被删除，博客文章列表将被更新。

总结在本教程中，您学习了如何在React博客应用程序中删除和更新博客文章。在本系列教程的下一部分中，您将学习如何为登录用户实现个人资料页面。

请在下面的评论中告诉我们你的想法和建议。本教程的源代码可以在GitHub上找到。

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：基于React在博客应用程序中更新和删除帖子:第4部分 https://zhujicankao.com/109889.html