Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

使用React创建Blogging应用程序,第3部分:添加

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 2: User Sign-Up
Creating a Blogging App Using React, Part 4: Update & Delete Posts

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

在本系列教程的前一部分中,您了解了如何实现注册和登录功能。在本教程的这一部分中,您将实现用户主页以及添加和显示博客帖子的功能。

开始

让我们从本教程的第一部分克隆源代码开始吧。

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

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

创建用户主页

一旦用户尝试登录应用程序,您需要验证用户凭据,如果有效,则创建一个会话。要在Node.js应用程序中使用会话,您需要使用Node包管理器(npm)安装express-session

app.js文件中引入express-session

要使用会话,您首先需要设置会话密钥。

现在在全局范围中定义一个名为sessions的变量。

使用request参数在/signin方法中指定sessions变量。

使用会话变量,可以将登录的用户名保留在会话中。

在应用程序的html文件夹内创建名为home.html的文件。他看起来是这样的:

创建一个名为/home的路由,它将呈现有效用户的主页。

如上面的代码所示,当用户重定向到/home路由时,如果sessionssession.username存在,则会渲染主页。

修改signin方法以在验证用户成功时发送成功响应。

上述成功响应由React进行解析,如果成功,用户将被重定向到/home路径。在main.jsx文件中,在Signin组件内部的SignIn方法内,修改代码以重定向到主页。

保存上述更改并重新启动Node服务器。使用有效的用户名和密码登录,您将被重定向到主页。

React Blog App - User Home Page

将上述博客通过使用React组件进行展示。创建一个名为home.jsx的文件。在home.jsx文件中创建一个名为ShowPost的React组件,它将呈现博客文章列表。 移动静态的HTML页面至React组件的渲染方法中。ShowPost React组件如下所示:

修改home.html页面以包含所需的React库。以下是修改后的home.html页面:

如上述HTML代码所示,容器div已被命名为app,其中将显示React组件。

保存上述更改并重新启动Node服务器。登录博客应用程序,打开主页后,将显示ShowPost React组件。

现在,您需要动态填充帖子列表中的值。在这之前,让我们创建一个页面来添加一个帖子。点击上面的Add超链接,显示添加博客文章的页面。

添加帖子React组件

我们创建一个添加帖子的React组件来添加博客帖子。它将包括标题输入框和主题文本区域。在home.jsx中,创建一个AddPostReact组件来添加博客帖子。以下是AddPost React组件的代码:

当用户输入标题和帖子主题时,您需要处理React组件中的文本变化事件。将以下文本变化事件处理程序添加到AddPostReact组件。

AddPost添加变化监听事件来渲染HTML。

在React构造函数函数中绑定状态变量和事件。

当用户点击Add Post按钮时,您需要将标题和主题从React用户界面发布到Node.js后端,将其保存在MongoDB数据库中。 在AddPost React组件中创建一个名为addPost的方法来发布标题和主题文本到Node.js请求处理程序。 AddPost React组件中的addPost方法如下:

如上面的代码所示,您已经使用axios将博客文章的详细信息发布到Node.js服务器

现在,您需要创建一个博客处理模块,用来处理添加和获取博客的详细信息。在项目目录中创建一个名为post.js的文件。 在post.js文件中,导出一个addPost方法,该方法将把详细信息插入到MongoDB数据库中。引入MongoClient并创建addPost方法,以便在MongoDB数据库中插入详细信息。这是post.js文件的代码:

如上面的代码所示,使用连接器连接到MongoDB数据库并插入了一条记录。执行操作后,开始检查是否有错误,并将状态返回给回调函数。

app.js文件的内部,创建一个名为addPost的请求处理程序,它将从post.js调用addPost方法。看起来如下所示:

保存上述更改并重新启动Node.js服务器。登录到应用程序,单击Add链接,并输入详细信息以添加帖子。完成后,单击“Add Post”按钮,这时帖子详情将保存在MongoDB数据库中。

Add Post Screen

展示帖子的React组件

首先,您需要从MongoDB中获取保存的帖子详情。在post.js文件中,创建一个名为GetPost的方法,该方法将提取文章详情。它看起来如下:

上述代码从MongoDB集合中获取详细信息,将其转换为列表,并将其发送到回调函数。 在home.jsx文件中的ShowPost组件中,在componentDidMount方法中获取帖子的详细信息。如下所示:

上述代码向Node.js服务器方法/getPost发送一个请求,该方法将在post.js文件中调用getPost方法。这是app.js文件中的/getPost方法。

一旦文章详情在axios回调中成功获取,请将详情保留在状态数组变量中。在ShowPost构造函数中声明一个名为posts的变量。

axios的ajax回调成功成功时,设置状态变量如下所示:

一旦发布了博客详情,您需要在React组件的渲染方法中动态创建所需的HTML。如下所示:

上述代码迭代了posts状态变量,并动态地创建了HTML。保存上述更改并重新启动Node.js服务器。 登录博客应用程序并使用主页上的Add按钮创建一些博客帖子。一旦帖子被添加,他们将显示在主页上。

Display Post Page

结束语

在本教程中,您学习了如何创建用于添加和显示博客帖子的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.