{"id":32635,"date":"2024-11-25T09:55:40","date_gmt":"2024-11-25T01:55:40","guid":{"rendered":"https:\/\/fwq.ai\/blog\/32635\/"},"modified":"2024-11-25T09:55:40","modified_gmt":"2024-11-25T01:55:40","slug":"%e5%9c%a8%e5%9f%ba%e4%ba%8e-react-%e7%9a%84%e5%8d%9a%e5%ae%a2%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e4%b8%ad%e6%9b%b4%e6%96%b0%e5%92%8c%e5%88%a0%e9%99%a4%e5%b8%96%e5%ad%90%ef%bc%9a%e7%ac%ac-4-%e9%83%a8","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/32635\/","title":{"rendered":"\u5728\u57fa\u4e8e React \u7684\u535a\u5ba2\u5e94\u7528\u7a0b\u5e8f\u4e2d\u66f4\u65b0\u548c\u5220\u9664\u5e16\u5b50\uff1a\u7b2c 4 \u90e8\u5206"},"content":{"rendered":"

\u5728\u672c\u6559\u7a0b\u7cfb\u5217\u7684\u524d\u4e00\u90e8\u5206\u4e2d\uff0c\u60a8\u4e86\u89e3\u4e86\u5982\u4f55\u5b9e\u73b0\u6dfb\u52a0\u548c\u663e\u793a\u5e16\u5b50\u529f\u80fd\u3002\u5728\u6709\u5173\u5728 react \u4e2d\u521b\u5efa\u535a\u5ba2\u5e94\u7528\u7a0b\u5e8f\u7684\u6559\u7a0b\u7cfb\u5217\u7684\u8fd9\u4e00\u90e8\u5206\u4e2d\uff0c\u60a8\u5c06\u5b9e\u73b0\u66f4\u65b0\u548c\u5220\u9664\u535a\u5ba2\u6587\u7ae0\u7684\u529f\u80fd\u3002<\/p>\n

\u5f00\u59cb\u4f7f\u7528<\/h2>\n

\u8ba9\u6211\u4eec\u5f00\u59cb\u514b\u9686\u672c\u7cfb\u5217\u6700\u540e\u4e00\u90e8\u5206\u7684\u6e90\u4ee3\u7801\u3002<\/p>\n

https:\/\/github.com\/royagasthyan\/ReactBlogApp-AddPost\n<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u514b\u9686\u76ee\u5f55\u540e\uff0c\u5bfc\u822a\u5230\u9879\u76ee\u76ee\u5f55\u5e76\u5b89\u88c5\u6240\u9700\u7684\u4f9d\u8d56\u9879\u3002<\/p>\n
cd ReactBlogApp-AddPost\nnpm install\n<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u542f\u52a8 Node.js \u670d\u52a1\u5668\uff0c\u5e94\u7528\u7a0b\u5e8f\u5c06\u5728 http:\/\/localhost:7777\/index.html#\/ \u4e0a\u8fd0\u884c\u3002<\/p>\n
\u521b\u5efa\u66f4\u65b0\u548c\u5220\u9664\u89c6\u56fe<\/h2>\n
\u8ba9\u6211\u4eec\u4fee\u6539\u535a\u5ba2\u6587\u7ae0\u5217\u8868\uff0c\u4ee5\u5e26\u6709\u66f4\u65b0\u548c\u5220\u9664\u56fe\u6807\u7684\u8868\u683c\u5f62\u5f0f\u663e\u793a\u6570\u636e\u3002\u5728 ShowPost \u7ec4\u4ef6\u7684 render \u65b9\u6cd5\u4e2d\uff0c\u5c06\u73b0\u6709\u7684 div \u66ff\u6362\u4e3a\u8868\u683c\uff0c\u5982\u4ee3\u7801\u6240\u793a\uff1a<\/p>\n
<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n\n\n\n\n   { this.state.posts.map(function(post,index) { return <\/p>\n\n
#<\/th>\nTitle<\/th>\nSubject<\/th>\n<\/th>\n<\/th>\n<\/tr>\n<\/thead>\n
{index+1}<\/td>\n{post.title}<\/td>\n{post.subject}<\/td>\n <\/span> <\/td>\n <\/span> <\/td>\n<\/tr>\n
 }.bind(this)) }
\n <\/tbody>\n<\/table>\n
\u5982\u4e0a\u9762\u7684\u4ee3\u7801\u6240\u793a\uff0c\u60a8\u5df2\u4fee\u6539\u73b0\u6709\u4ee3\u7801\u4ee5\u4ee5\u8868\u683c\u5f62\u5f0f\u663e\u793a\u5e16\u5b50\u3002\u60a8\u5df2\u6620\u5c04 posts \u53d8\u91cf\u4ee5\u8fed\u4ee3 posts \u96c6\u5408\u5e76\u52a8\u6001\u521b\u5efa\u6240\u9700\u7684 tr \u548c td\u3002<\/p>\n
\u4fdd\u5b58\u4ee5\u4e0a\u66f4\u6539\u5e76\u91cd\u65b0\u542f\u52a8\u670d\u52a1\u5668\u3002\u5c06\u6d4f\u89c8\u5668\u6307\u5411 http:\/\/localhost:7777\/home#\/\uff0c\u60a8\u5e94\u8be5\u80fd\u591f\u4ee5\u8868\u683c\u683c\u5f0f\u67e5\u770b\u535a\u5ba2\u6587\u7ae0\u5217\u8868\u3002<\/p>\n
\"\u5728\u57fa\u4e8e<\/p>\n
\u5b9e\u73b0\u66f4\u65b0\u53d1\u5e03\u529f\u80fd<\/h2>\n
\u8981\u5b9e\u73b0\u66f4\u65b0\u53d1\u5e03\u529f\u80fd\uff0c\u60a8\u9700\u8981\u5c06\u5355\u51fb\u4e8b\u4ef6\u9644\u52a0\u5230\u7f16\u8f91\u56fe\u6807\u3002\u4fee\u6539\u7f16\u8f91\u56fe\u6807span\u5982\u56fe\uff1a <\/p>\n
<span onclick=\"{this.updatePost.bind(this,post._id)}\" classname=\"glyphicon glyphicon-pencil\"><\/span>\n<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u5982\u4e0a\u9762\u7684\u4ee3\u7801\u6240\u793a\uff0c\u60a8\u5df2\u5c06\u5e16\u5b50 ID \u4f5c\u4e3a\u53c2\u6570\u4f20\u9012\u7ed9 updatePost \u65b9\u6cd5\u3002<\/p>\n
\u5728 ShowPost \u7ec4\u4ef6\u5185\u521b\u5efa\u4e00\u4e2a\u65b9\u6cd5 updatePost \u3002<\/p>\n
updatePost(id){\n  hashHistory.push('\/addPost\/' + id);\n}\n<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u5982\u4e0a\u9762\u7684\u4ee3\u7801\u6240\u793a\uff0c\u60a8\u5df2\u4f7f\u7528\u5df2\u7f16\u8f91\u9879\u76ee\u7684 ID \u89e6\u53d1\u4e86\u5230\u6dfb\u52a0\u5e16\u5b50\u9875\u9762\u7684\u91cd\u5b9a\u5411\u3002\u5728\u6dfb\u52a0\u5e16\u5b50\u9875\u9762\u4e2d\uff0c\u60a8\u5c06\u83b7\u5f97\u5e26\u6709\u4f20\u9012\u7684 ID \u7684\u535a\u5ba2\u5e16\u5b50\u7684\u8be6\u7ec6\u4fe1\u606f\u5e76\u586b\u5145\u8be6\u7ec6\u4fe1\u606f\u3002<\/p>\n
\u4fee\u6539\u8def\u7531\u5668\u4ee5\u5728\u6dfb\u52a0\u5e16\u5b50\u9875\u9762\u4e2d\u5305\u542b\u53ef\u9009\u7684 id \u53c2\u6570\u3002<\/p>\n
<route component=\"{AddPost}\" path=\"\/addPost(\/:id)\"><\/route><\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u5728 AddPost \u7ec4\u4ef6\u5185\uff0c\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a getPostWithId \u7684\u65b9\u6cd5\uff0c\u4ee5\u4f7f\u7528 id \u83b7\u53d6\u535a\u5ba2\u6587\u7ae0\u7684\u8be6\u7ec6\u4fe1\u606f\u3002\u5728 getPostWithId \u65b9\u6cd5\u5185\uff0c\u5bf9 app.js \u5185\u7684 getPostWithId API \u8fdb\u884c AJAX \u8c03\u7528\u3002<\/p>\n
getPostWithId(){\n  var id = this.props.params.id;\n  var self = this;\n  axios.post('\/getPostWithId', {\n    id: id\n  })\n  .then(function (response) {\n    if(response){\n      self.setState({title:response.data.title});\n      self.setState({subject:response.data.subject});  \n    }\n  })\n  .catch(function (error) {\n    console.log('error is ',error);\n  });\n}\n<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u901a\u8fc7\u4ece getPostWithId API \u65b9\u6cd5\u6536\u5230\u7684\u54cd\u5e94\uff0c\u60a8\u5df2\u66f4\u65b0\u72b6\u6001\u53d8\u91cf title \u548c subject\u3002 <\/p>\n
\u4fee\u6539 title \u548c subject \u6587\u672c\u6846\u4ee5\u663e\u793a\u72b6\u6001\u53d8\u91cf\u7684\u503c\u3002<\/p>\n
<div classname=\"form-group\">\n    <input value=\"{this.state.title}\" type=\"text\" onchange=\"{this.handleTitleChange}\" classname=\"form-control\" id=\"title\" name=\"title\" placeholder=\"Title\" required>\n<\/div>\n               \n<div classname=\"form-group\">\n    <textarea value=\"{this.state.subject}\" classname=\"form-control\" onchange=\"{this.handleSubjectChange}\" type=\"textarea\" id=\"subject\" placeholder=\"Subject\" maxlength=\"140\" rows=\"7\"><\/textarea>\n<\/div>\n<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u73b0\u5728\uff0c\u8ba9\u6211\u4eec\u5728 app.js \u4e2d\u521b\u5efa getPostWithId API\uff0c\u4ee5\u5bf9 MongoDB \u6570\u636e\u5e93\u8fdb\u884c\u6570\u636e\u5e93\u8c03\u7528\uff0c\u4ee5\u83b7\u53d6\u5177\u6709\u7279\u5b9a ID \u7684\u5e16\u5b50\u8be6\u7ec6\u4fe1\u606f\u3002\u8fd9\u662f getPostWithId API \u65b9\u6cd5\uff1a<\/p>\n
app.post('\/getPostWithId', function(req,res){\n  var id = req.body.id;\n  post.getPostWithId(id, function(result){\n    res.send(result)\n  })\n})\n<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u5728 post.js \u6587\u4ef6\u4e2d\uff0c\u521b\u5efa\u4e00\u4e2a\u65b9\u6cd5 getPostWithId \u6765\u67e5\u8be2\u6570\u636e\u5e93\u4ee5\u83b7\u53d6\u8be6\u7ec6\u4fe1\u606f\u3002\u5176\u5916\u89c2\u5982\u4e0b\uff1a<\/p>\n
getPostWithId: function(id, callback){\n\tMongoClient.connect(url, function(err, db){\n\t\t db.collection('post').findOne({\n\t\t \t_id: new mongodb.ObjectID(id)\n\t\t },\n\t\t function(err, result){\n\t\t\tassert.equal(err, null);\n\t    \tif(err == null){\n\t    \t\tcallback(result)\n\t    \t}\n\t    \telse{\n\t    \t\tcallback(false)\n\t    \t}\n\t\t});\n\t})\n}\n<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u5982\u4e0a\u9762\u7684\u4ee3\u7801\u6240\u793a\uff0c\u60a8\u4f7f\u7528\u4e86 findOne API \u6765\u83b7\u53d6\u5177\u6709\u7279\u5b9a ID \u7684\u535a\u5ba2\u6587\u7ae0\u7684\u8be6\u7ec6\u4fe1\u606f\u3002<\/p>\n
\u4fdd\u5b58\u4ee5\u4e0a\u66f4\u6539\u5e76\u5c1d\u8bd5\u8fd0\u884c\u7a0b\u5e8f\u3002\u5355\u51fb\u4e3b\u9875\u4e0a\u7684\u7f16\u8f91\u56fe\u6807\uff0c\u5b83\u5c06\u91cd\u5b9a\u5411\u5230\u6dfb\u52a0\u5e16\u5b50\u9875\u9762\u5e76\u586b\u5145\u6807\u9898\u548c\u4e3b\u9898\u3002<\/p>\n
\"\u5728\u57fa\u4e8e<\/p>\n
\u73b0\u5728\uff0c\u8981\u66f4\u65b0\u535a\u5ba2\u6587\u7ae0\u8be6\u7ec6\u4fe1\u606f\uff0c\u60a8\u9700\u8981\u68c0\u67e5 id\u5728 app.js \u4e2d\u7684 addPost API \u65b9\u6cd5\u5185\u3002\u5982\u679c\u662f\u65b0\u5e16\u5b50\uff0c\u5219 id \u5c06\u4e3a undefined\u3002<\/p>\n
\u4fee\u6539 AddPost \u7ec4\u4ef6\u4e2d\u7684 AddPost \u65b9\u6cd5\u4ee5\u5305\u542b id \u72b6\u6001\u53d8\u91cf\u3002<\/p>\n
axios.post('\/addPost', {\n    title: this.state.title,\n    subject: this.state.subject,\n    id: this.state.id\n})\n<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u5728 addPost API \u65b9\u6cd5\u4e2d\uff0c\u60a8\u9700\u8981\u68c0\u67e5 id \u53c2\u6570\u662f\u5426\u4e3a undefined \u3002\u5982\u679cundefined\uff0c\u5219\u8868\u793a\u8fd9\u662f\u4e00\u4e2a\u65b0\u5e16\u5b50\uff0c\u5426\u5219\u9700\u8981\u8c03\u7528update\u65b9\u6cd5\u3002 addPost API \u65b9\u6cd5\u5982\u4e0b\u6240\u793a\uff1a<\/p>\n
app.post('\/addpost', function (req, res) {\n  var title = req.body.title;\n  var subject = req.body.subject;\n  var id = req.body.id;\n  if(id == '' || id == undefined)\n    post.addPost(title, subject ,function(result){\n      res.send(result);\n    }); \n  }\n  else{\n    post.updatePost(id, title, subject ,function(result){\n      res.send(result);\n    }); \n  }\n})\n<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u5728 post.js \u6587\u4ef6\u4e2d\uff0c\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a updatePost \u7684\u65b9\u6cd5\u6765\u66f4\u65b0\u535a\u5ba2\u6587\u7ae0\u8be6\u7ec6\u4fe1\u606f\u3002\u60a8\u5c06\u5229\u7528 updateOne API \u6765\u66f4\u65b0\u5177\u6709\u7279\u5b9a id \u7684\u535a\u5ba2\u6587\u7ae0\u7684\u8be6\u7ec6\u4fe1\u606f\u3002\u4ee5\u4e0b\u662f updatePost \u65b9\u6cd5\u7684\u5916\u89c2\uff1a<\/p>\n
updatePost: function(id, title, subject, callback){\n\tMongoClient.connect(url, function(err, db) {\n\t  \tdb.collection('post').updateOne( \n\t  \t\t{ \"_id\": new mongodb.ObjectID(id) },\n\t  \t\t{ $set: \n\t  \t\t\t{ \"title\" : title,\n\t  \t\t\t  \"subject\" : subject \n\t  \t\t\t}\n\t  \t\t},function(err, result){\n\t\t\tassert.equal(err, null);\n\t    \tif(err == null){\n\t    \t\tcallback(true)\n\t    \t}\n\t    \telse{\n\t    \t\tcallback(false)\n\t    \t}\n\t\t});\n\t});\n}\n<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u4fdd\u5b58\u4ee5\u4e0a\u66f4\u6539\u5e76\u91cd\u65b0\u542f\u52a8\u670d\u52a1\u5668\u3002\u767b\u5f55\u5e94\u7528\u7a0b\u5e8f\u5e76\u70b9\u51fb\u7f16\u8f91\u56fe\u6807\u3002\u4fee\u6539\u73b0\u6709\u503c\u5e76\u5355\u51fb\u6309\u94ae\u66f4\u65b0\u8be6\u7ec6\u4fe1\u606f\u3002 <\/p>\n
\u5b9e\u73b0\u5220\u9664\u5e16\u5b50\u529f\u80fd<\/h2>\n
\u8981\u5b9e\u73b0\u5220\u9664\u5e16\u5b50\u529f\u80fd\uff0c\u60a8\u9700\u8981\u5c06\u70b9\u51fb\u4e8b\u4ef6\u9644\u52a0\u5230\u5220\u9664\u56fe\u6807\u3002\u4fee\u6539\u5220\u9664\u56fe\u6807\u8de8\u5ea6\u5982\u56fe\uff1a<\/p>\n
<span onclick=\"{this.deletePost.bind(this,post._id)}\" classname=\"glyphicon glyphicon-remove\"><\/span>\n<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u5982\u4e0a\u9762\u7684\u4ee3\u7801\u6240\u793a\uff0c\u60a8\u5df2\u5c06\u5e16\u5b50 ID \u4f5c\u4e3a\u53c2\u6570\u4f20\u9012\u7ed9 deletePost \u65b9\u6cd5\u3002 <\/p>\n
\u5728 ShowPost \u7ec4\u4ef6\u4e2d\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a deletePost \u7684\u65b9\u6cd5\u3002<\/p>\n
deletePost(id){\n      \n}\n<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u5728ShowPost\u7ec4\u4ef6\u6784\u9020\u51fd\u6570\u4e2d\u7ed1\u5b9a\u8be5\u65b9\u6cd5\u3002<\/p>\n
this.deletePost = this.deletePost.bind(this);\n<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u8981\u5728 map \u51fd\u6570\u56de\u8c03\u4e2d\u4f7f\u7528 this\uff0c\u60a8\u9700\u8981\u5c06 this \u7ed1\u5b9a\u5230 map \u51fd\u6570\u3002\u4fee\u6539map\u51fd\u6570\u56de\u8c03\u5982\u56fe\uff1a<\/p>\n
\n      {\n        this.state.posts.map(function(post,index) {\n           return \n{index+1}\n                    {post.title}\n                    {post.subject}\n                    \n                      <span onclick=\"{this.updatePost.bind(this,post._id)}\" classname=\"glyphicon glyphicon-pencil\"><\/span>\n                    \n                    \n                      <span onclick=\"{this.deletePost.bind(this,post._id)}\" classname=\"glyphicon glyphicon-remove\"><\/span>\n                    \n                  \n        }.bind(this))\n      }\n <\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u5728 deletePost \u65b9\u6cd5\u4e2d\uff0c\u5728\u8c03\u7528\u5220\u9664 API \u4e4b\u524d\u6dfb\u52a0\u786e\u8ba4\u63d0\u793a\u3002<\/p>\n
deletePost(id){\n  if(confirm('Are you sure ?')){\n    \/\/ Delete Post API call will be here !!\n  }\n}\n<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u73b0\u5728\u8ba9\u6211\u4eec\u5728 app.js \u6587\u4ef6\u4e2d\u6dfb\u52a0 deletePost API\u3002 API \u5c06\u4ece AJAX \u8c03\u7528\u4e2d\u8bfb\u53d6\u5e16\u5b50 ID \u5e76\u4ece MongoDB \u4e2d\u5220\u9664\u8be5\u6761\u76ee\u3002\u4ee5\u4e0b\u662f deletePost API \u7684\u5916\u89c2\uff1a<\/p>\n
app.post('\/deletePost', function(req,res){\n  var id = req.body.id;\n  post.deletePost(id, function(result){\n    res.send(result)\n  })\n})\n<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u5982\u4e0a\u9762\u7684\u4ee3\u7801\u6240\u793a\uff0c\u60a8\u5c06\u8c03\u7528 post.js \u6587\u4ef6\u4e2d\u7684 deletePost \u65b9\u6cd5\u5e76\u8fd4\u56de\u7ed3\u679c\u3002\u8ba9\u6211\u4eec\u5728 post.js \u6587\u4ef6\u4e2d\u521b\u5efa deletePost \u65b9\u6cd5\u3002<\/p>\n
deletePost: function(id, callback){\n\n\tMongoClient.connect(url, function(err, db){\n\t\t db.collection('post').deleteOne({\n\t\t \t_id: new mongodb.ObjectID(id)\n\t\t },\n\t\t function(err, result){\n\t\t\tassert.equal(err, null);\n\t    \tconsole.log(\"Deleted the post.\");\n\t    \tif(err == null){\n\t    \t\tcallback(true)\n\t    \t}\n\t    \telse{\n\t    \t\tcallback(false)\n\t    \t}\n\t\t});\n\t})\n}\n<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u5982\u4e0a\u9762\u7684\u4ee3\u7801\u6240\u793a\uff0cpost.js \u6587\u4ef6\u4e2d\u7684 deletePost \u65b9\u6cd5\u5c06\u4f7f\u7528 MongoClient \u8fde\u63a5\u5230MongoDB \u4e2d\u7684\u535a\u5ba2\u6570\u636e\u5e93\u3002\u4f7f\u7528\u4ece AJAX \u8c03\u7528\u4f20\u9012\u7684 Id \uff0c\u5b83\u5c06\u4ece\u6570\u636e\u5e93\u4e2d\u5220\u9664\u8be5\u5e16\u5b50\u3002 <\/p>\n
\u66f4\u65b0 home.jsx \u6587\u4ef6\u4e2d deletePost \u65b9\u6cd5\u5185\u7684\u4ee3\u7801\uff0c\u4ee5\u5305\u542b\u5bf9 deletePost API \u7684 AJAX \u8c03\u7528 app.js \u6587\u4ef6\u3002<\/p>\n
deletePost(id){\n  if(confirm('Are you sure ?')){\n    var self = this;\n    axios.post('\/deletePost', {\n      id: id\n    })\n    .then(function (response) {\n      \n    })\n    .catch(function (error) {\n      \n    });\n  }\n}\n<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u5220\u9664\u535a\u5ba2\u6587\u7ae0\u540e\uff0c\u60a8\u9700\u8981\u5237\u65b0\u535a\u5ba2\u6587\u7ae0\u5217\u8868\u4ee5\u53cd\u6620\u8fd9\u4e00\u70b9\u3002\u56e0\u6b64\uff0c\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a getPost \u7684\u65b0\u65b9\u6cd5\uff0c\u5e76\u5c06 componentDidMount \u4ee3\u7801\u79fb\u5230\u8be5\u51fd\u6570\u5185\u3002\u8fd9\u662f getPost \u65b9\u6cd5\uff1a<\/p>\n
getPost(){\n  var self = this;\n  axios.post('\/getPost', {\n  })\n  .then(function (response) {\n    console.log('res is ',response);\n    self.setState({posts:response.data})\n  })\n  .catch(function (error) {\n    console.log('error is ',error);\n  });\n}\n<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u4fee\u6539componentDidMount\u4ee3\u7801\uff0c\u5982\u56fe\uff1a<\/p>\n
componentDidMount(){\n  this.getPost();\n\n  document.getElementById('homeHyperlink').className = \"active\";\n  document.getElementById('addHyperLink').className = \"\";\n}\n<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u5728 deletePost AJAX \u8c03\u7528\u6210\u529f\u56de\u8c03\u5185\uff0c\u8c03\u7528 getPost \u65b9\u6cd5\u6765\u66f4\u65b0\u535a\u5ba2\u6587\u7ae0\u5217\u8868\u3002<\/p>\n
deletePost(id){\n  if(confirm('Are you sure ?')){\n    var self = this;\n    axios.post('\/deletePost', {\n      id: id\n    })\n    .then(function (response) {\n      self.getPost();\n    })\n    .catch(function (error) {\n      console.log('Error is ',error);\n    });\n  }\n}\n<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u4fdd\u5b58\u4ee5\u4e0a\u66f4\u6539\u5e76\u91cd\u65b0\u542f\u52a8\u670d\u52a1\u5668\u3002\u5c1d\u8bd5\u6dfb\u52a0\u65b0\u7684\u535a\u5ba2\u6587\u7ae0\uff0c\u7136\u540e\u4ece\u7f51\u683c\u5217\u8868\u4e2d\u5355\u51fb\u201c\u5220\u9664\u201d\u3002\u7cfb\u7edf\u5c06\u63d0\u793a\u60a8\u4e00\u6761\u5220\u9664\u786e\u8ba4\u6d88\u606f\u3002\u5355\u51fb\u786e\u5b9a<\/strong>\u6309\u94ae\u540e\uff0c\u8be5\u6761\u76ee\u5c06\u88ab\u5220\u9664\uff0c\u5e76\u4e14\u535a\u5ba2\u6587\u7ae0\u5217\u8868\u5c06\u88ab\u66f4\u65b0\u3002<\/p>\n
\"\u5728\u57fa\u4e8e<\/p>\n
\u603b\u7ed3<\/h2>\n
\u5728\u672c\u6559\u7a0b\u4e2d\uff0c\u60a8\u4e86\u89e3\u4e86\u5982\u4f55\u5728 React \u535a\u5ba2\u5e94\u7528\u7a0b\u5e8f\u4e2d\u5b9e\u73b0\u5220\u9664\u548c\u66f4\u65b0\u535a\u5ba2\u6587\u7ae0\u529f\u80fd\u3002\u5728\u672c\u6559\u7a0b\u7cfb\u5217\u7684\u4e0b\u4e00\u90e8\u5206\u4e2d\uff0c\u60a8\u5c06\u4e86\u89e3\u5982\u4f55\u4e3a\u767b\u5f55\u7528\u6237\u5b9e\u73b0\u4e2a\u4eba\u8d44\u6599\u9875\u9762\u3002<\/p>\n
\u8bf7\u5728\u4e0b\u9762\u7684\u8bc4\u8bba\u4e2d\u544a\u8bc9\u6211\u4eec\u60a8\u7684\u60f3\u6cd5\u548c\u5efa\u8bae\u3002\u672c\u6559\u7a0b\u7684\u6e90\u4ee3\u7801\u53ef\u5728 GitHub \u4e0a\u83b7\u53d6\u3002<\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u5728\u57fa\u4e8e React \u7684\u535a\u5ba2\u5e94\u7528\u7a0b\u5e8f\u4e2d\u66f4\u65b0\u548c\u5220\u9664\u5e16\u5b50\uff1a\u7b2c 4 \u90e8\u5206\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
\u5728\u672c\u6559\u7a0b\u7cfb\u5217\u7684\u524d\u4e00\u90e8\u5206\u4e2d\uff0c\u60a8\u4e86\u89e3\u4e86\u5982\u4f55\u5b9e\u73b0\u6dfb\u52a0\u548c\u663e\u793a\u5e16\u5b50\u529f\u80fd\u3002\u5728\u6709\u5173\u5728 react \u4e2d\u521b\u5efa\u535a\u5ba2\u5e94\u7528\u7a0b\u5e8f\u7684\u6559\u7a0b\u7cfb\u5217\u7684\u8fd9\u4e00\u90e8\u5206\u4e2d\uff0c\u60a8\u5c06\u5b9e\u73b0\u66f4\u65b0\u548c\u5220\u9664\u535a\u5ba2\u6587\u7ae0\u7684\u529f\u80fd\u3002 \u5f00\u59cb\u4f7f\u7528 \u8ba9\u6211\u4eec\u5f00\u59cb\u514b\u9686\u672c\u7cfb\u5217\u6700\u540e\u4e00\u90e8\u5206\u7684\u6e90\u4ee3\u7801\u3002 https:\/\/github.com\/royagasthyan\/ReactBlogApp-AddPost \u767b\u5f55\u540e\u590d\u5236 \u514b\u9686\u76ee\u5f55\u540e\uff0c\u5bfc\u822a\u5230\u9879\u76ee\u76ee\u5f55\u5e76\u5b89\u88c5\u6240\u9700\u7684\u4f9d\u8d56\u9879\u3002 cd ReactBlogApp-AddPost npm install \u767b\u5f55\u540e\u590d\u5236 \u542f\u52a8 Node.js \u670d\u52a1\u5668\uff0c\u5e94\u7528\u7a0b\u5e8f\u5c06\u5728 http:\/\/localhost:7777\/index.html#\/ \u4e0a\u8fd0\u884c\u3002 \u521b\u5efa\u66f4\u65b0\u548c\u5220\u9664\u89c6\u56fe \u8ba9\u6211\u4eec\u4fee\u6539\u535a\u5ba2\u6587\u7ae0\u5217\u8868\uff0c\u4ee5\u5e26\u6709\u66f4\u65b0\u548c\u5220\u9664\u56fe\u6807\u7684\u8868\u683c\u5f62\u5f0f\u663e\u793a\u6570\u636e\u3002\u5728 ShowPost \u7ec4\u4ef6\u7684 render \u65b9\u6cd5\u4e2d\uff0c\u5c06\u73b0\u6709\u7684 div \u66ff\u6362\u4e3a\u8868\u683c\uff0c\u5982\u4ee3\u7801\u6240\u793a\uff1a \u767b\u5f55\u540e\u590d\u5236 # Title Subject { this.state.posts.map(function(post,index) { return {index+1} {post.title} {post.subject} }.bind(this)) } \u5982\u4e0a\u9762\u7684\u4ee3\u7801\u6240\u793a\uff0c\u60a8\u5df2\u4fee\u6539\u73b0\u6709\u4ee3\u7801\u4ee5\u4ee5\u8868\u683c\u5f62\u5f0f\u663e\u793a\u5e16\u5b50\u3002\u60a8\u5df2\u6620\u5c04 posts \u53d8\u91cf\u4ee5\u8fed\u4ee3 posts \u96c6\u5408\u5e76\u52a8\u6001\u521b\u5efa\u6240\u9700\u7684 tr \u548c td\u3002 \u4fdd\u5b58\u4ee5\u4e0a\u66f4\u6539\u5e76\u91cd\u65b0\u542f\u52a8\u670d\u52a1\u5668\u3002\u5c06\u6d4f\u89c8\u5668\u6307\u5411 http:\/\/localhost:7777\/home#\/\uff0c\u60a8\u5e94\u8be5\u80fd\u591f\u4ee5\u8868\u683c\u683c\u5f0f\u67e5\u770b\u535a\u5ba2\u6587\u7ae0\u5217\u8868\u3002 \u5b9e\u73b0\u66f4\u65b0\u53d1\u5e03\u529f\u80fd \u8981\u5b9e\u73b0\u66f4\u65b0\u53d1\u5e03\u529f\u80fd\uff0c\u60a8\u9700\u8981\u5c06\u5355\u51fb\u4e8b\u4ef6\u9644\u52a0\u5230\u7f16\u8f91\u56fe\u6807\u3002\u4fee\u6539\u7f16\u8f91\u56fe\u6807span\u5982\u56fe\uff1a  <span onclick=”{this.updatePost.bind(this,post._id)}” classname=”glyphicon glyphicon-pencil”><\/span> […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-32635","post","type-post","status-publish","format-standard","hentry","category-cms"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/32635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=32635"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/32635\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=32635"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=32635"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=32635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}