在前端开发中，登录页是一个非常基础的页面，但它的实现却涉及到很多知识点，例如前后端交互、表单验证、状态管理等等。本教程将介绍如何使用 Express.js 和 React 构建一个简单的登录页，并涵盖相关知识点的详细讲解和示例代码。
准备工作
在开始之前，我们需要安装一些必要的工具和库：
- Node.js：用于运行后端 Express.js 代码。
- npm 或 yarn：用于安装依赖。
- create-react-app：用于创建 React 项目。
安装完以上工具和库后，我们就可以开始构建项目了。
创建项目
首先，我们需要创建一个 Express.js 项目。在命令行中输入以下命令：
----- ------------------- -- -- ------------------- --- ---- -- --- ------- ------- ----------- ----
以上命令将创建一个名为 express-react-login 的文件夹，并初始化一个 Node.js 项目。接着，我们安装了 Express.js、body-parser 和 cors 这三个依赖。其中，body-parser 用于解析前端发送的 POST 请求体，cors 用于处理跨域请求。
接下来，我们需要创建一个 server.js 文件，并在其中编写 Express.js 代码：
----- ------- - -------------------
----- ---------- - -----------------------
----- ---- - ----------------
----- --- - ----------
---------------------------
----------------
------------------ ----- ---- -- -
----- - --------- -------- - - ---------
-- --------- --- ------- -- -------- --- --------- -
---------- -------- ---- ---
- ---- -
---------- -------- ------ -------- ---------- ---
-
---
---------------- -- -- -
------------------- -- ------- -- ---- -------
---以上代码创建了一个 Express.js 应用，并监听了 3001 端口。app.use() 方法用于注册中间件，其中，bodyParser.json() 解析前端发送的 JSON 格式请求体，cors() 处理跨域请求。app.post() 方法用于处理 POST 请求，其中，我们验证了用户名和密码，如果匹配则返回 { success: true }，否则返回 { success: false, message: '用户名或密码错误' }。
接下来，我们需要创建一个 React 项目。在命令行中输入以下命令：
--- ---------------- ------
以上命令将创建一个名为 client 的 React 项目。接着，我们需要安装一些必要的依赖：
-- ------ --- ------- ----- ----------------
其中，axios 用于与后端进行 HTTP 请求，react-router-dom 用于实现路由导航。
实现登录页
在 src 文件夹下创建一个名为 Login.js 的文件，并编写以下代码：
------ ------ - -------- - ---- --------
------ - ---------- - ---- -------------------
------ ----- ---- --------
-------- ------- -
----- ---------- ------------ - -------------
----- ---------- ------------ - -------------
----- --------- ----------- - -------------
----- ------- - -------------
----- ------------ - ----- ------- -- -
-----------------------
--- -
----- -------- - ----- ----------------------------------------- - --------- -------- ---
-- ----------------------- -
---------------------------
- ---- -
----------------------------------
-
- ----- ------- -
---------------------
--------------------------
-
--
------ -
----- ------------------------
-----
------ -------------------------------
------ ----------- ------------- ---------------- ----------------- -- -------------------------------- --
------
-----
------ ------------------------------
------ --------------- ------------- ---------------- ----------------- -- -------------------------------- --
------
-------- -- ---------------------
------- -------------------------
-------
--
-
------ ------- ------以上代码实现了一个简单的登录表单，并使用了 React 的 Hooks API。useState() 用于定义组件内部的状态变量，useHistory() 用于获取路由导航对象。axios.post() 用于发送 POST 请求，如果登录成功则跳转到 /dashboard 页面，否则显示错误消息。
在 src 文件夹下创建一个名为 Dashboard.js 的文件，并编写以下代码：
------ ----- ---- --------
-------- ----------- -
------ -
-----
--------------
-----------------
------
--
-
------ ------- ----------以上代码实现了一个简单的欢迎页面。
在 src 文件夹下创建一个名为 App.js 的文件，并编写以下代码：
------ ----- ---- --------
------ - ------------- -- ------- ------ ------ - ---- -------------------
------ ----- ---- ----------
------ --------- ---- --------------
-------- ----- -
------ -
--------
--------
------ ----- -------- ----------------- --
------ ----- ----------------- --------------------- --
---------
---------
--
-
------ ------- ----以上代码实现了路由导航，将 / 路径映射到登录页，将 /dashboard 路径映射到欢迎页面。
运行项目
在命令行中分别进入 express-react-login 和 client 文件夹，并运行以下命令：
-- ------------------- -- --- ----- -- ------ -- --- -----
以上命令将启动 Express.js 服务器和 React 开发服务器，打开浏览器并访问 http://localhost:3000，即可看到我们的登录页。
总结
本教程介绍了如何使用 Express.js 和 React 构建一个简单的登录页，并涵盖了相关知识点的详细讲解和示例代码。希望本教程能够对你有所帮助，也欢迎大家提出宝贵的意见和建议。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6575860ed2f5e1655dec0403