Advertisement
  1. Code
  2. React
Code

使用React创建博客应用程序,第4部分:更新删除博客

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Creating a Blogging App Using React.
Creating a Blogging App Using React, Part 3: Add & Display Post
Creating a Blogging App Using React, Part 5: Profile Page

Chinese (Simplified) (中文(简体)) translation by Zuojianzifu 作茧自缚 (you can also view the original English article)

在本教程系列的前一部分中,您了解了如何实现添加和显示帖子功能。在本系列教程中,您可以在React中创建一个博客应用程序,您将实现更新和删除博客帖子的功能。

开始

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

克隆目录后,导航到项目目录并安装所需的依赖关系。

启动Node.js服务器,应用程序将运行在http://localhost:7777/index.html#/.

创建更新视图和删除视图

让我们修改博客帖子列表,通过更新和删除图标在表格中显示数据。在ShowPost组件的render方法中,将现有的div替换为一个表,如代码所示:

如上述代码所示,已修改现有代码以表格形式显示帖子。您已经将posts变量映射到遍历帖子集合并动态创建所需的trtd

保存上述更改并重新启动服务器。将浏览器指向http://localhost:7777/home.这时候将看到在表格中显示的帖子。

Blog Post Listing With Update Delete

实现更新帖子功能

要实现更新帖子功能,需要将点击事件附加到编辑图标。修改编辑图标span,如图所示:

如上面的代码所示,您已经将post id作为参数传递给updatePost方法。

ShowPost组件中创建一个方法updatePost

如上面的代码所示,你已经触发了通过编辑条目的id来重定向添加帖子的页面。在添加帖子页面中,您将获得已传递ID的博客文章的详细信息,并在页面中填充这些详细信息。

修改路由器以添加可选的参数id到添加帖子页面。

在AddPost组件中,创建一个名为getPostWithId的方法来获取id的博客文章的详细信息。在getPostWithId方法中,对app.js中的getPostWithId API进行AJAX调用。

getPostWithId API方法收到响应后,您已更新状态变量titlesubject

修改titlesubject文本框以显示状态变量的值。

现在让我们在app.js内创建一个getPostWithId API,以调用MongoDB数据库获取具有特定Id的帖子详细信息。这是getPostWithId API方法:

post.js文件中,创建一个方法getPostWithId来查询数据库以获取详细信息。这是它的代码:

如上面的代码所示,您已经使用findOne API来获取具有特定Id的帖子的详细信息。

保存上述更改并尝试运行该程序。单击主页上的编辑图标,它将重定向到添加帖子页面并填充标题和主题。

React Blog App Edit Screen

现在,要更新博客文章的详细信息,您需要检查app.jsaddPost API方法中的id。如果它是一个新的帖子,该id将是undefined的。

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

addPost API方法中,您需要检查id参数是否undefined。如果undefined,这意味着它是一个新的帖子,否则您需要调用更新方法。这是addPost API方法的代码:

post.js文件中,创建一个名为updatePost的方法来更新博客文章的详细信息。您将使用updateOneAPI来更新具有特定id的博客文章的详细信息。这是updatePost方法的实现:

保存上述更改并重新启动服务器。登录应用程序并单击编辑图标。修改现有值,单击按钮更新详细信息。

实现删除帖子函数

要实现删除帖子功能,您需要将点击事件附加到删除图标。修改删除图标如图所示:

如上面的代码所示,您已经将帖子id作为参数传递给deletePost方法。

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

ShowPost组件构造函数中绑定方法。

为了在map函数回调中使用this,你需要将this绑定到map函数。修改map函数回调,如图所示:

deletePost方法中,在调用delete API之前添加一个确认提示。

现在我们在app.js文件中添加deletePost API。 API将从AJAX调用中读取帖子ID,并从MongoDB中删除该条目。以下是deletePost API的代码:

如上面的代码所示,您将调用post.js文件中的deletePost方法并返回结果。让我们在post.js文件中创建deletePost方法。

如上代码所示,post.js文件中的deletePost方法将利用MongoClient连接到MongoDB中的博客数据库。使用从调用AJAX传递的Id,它将从数据库中删除该帖子。

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

一旦博客文章被删除,您需要刷新博客文章列表以反应这一点。因此,创建一个名为getPost的新方法,并将componentDidMount代码移动到该函数中。这是getPost方法:

修改componentDidMount代码,如图所示:

deletePost AJAX回调调用成功之后,调用getPost方法来更新博客帖子列表。

保存上述更改并重新启动服务器。尝试添加新的博客文章,然后单击网格列表中的删除。 系统将提示您删除确认消息。一旦您点击确定按钮,该条目将被删除,博客文章列表将被更新。

Delete Blog Post Confirmation

结束语

在本教程中,您了解了如何在React博客应用程序中实现删除和更新博客文章功能。在本教程系列的下一部分中,您将了解如何实现登录用户的配置文件页面。

请在下面的评论区中留下您的想法和建议。本教程的源代码可在GitHub上找到。

关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.