VPS参考、测评、推荐
分享你关注的VPS主机优惠信息

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

基于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#/,您应该能够以表格形式查看博客列表。

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

要实现更新发布将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的博客文章的详细信息。

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

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

现在,要更新博客文章的详细信息,您检查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在博客应用程序中更新和删除帖子:第4部分

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

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

:基于React在博客应用程序中更新和删除帖子:第4部分 https://vps.caogenba.com.com/109889.html

赞(0) 打赏
未经允许不得转载:草根吧VPS_最新VPS信息参考 » 基于React在博客应用程序中更新和删除帖子:第4部分
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址