使用 Express.js 和 React 构建在线教育平台的完整教程-JavaScript中文网-JavaScript教程资源分享门户

引言

在当今信息时代，学习已经成为每个人都必须不断提升的技能。在线教育平台也因此而应运而生。本篇文章将详细介绍如何使用 Express.js 和 React 构建一个在线教育平台。我们将一步步地讲解如何搭建平台，实现注册、登录、课程上传等功能，让你了解如何使用这两个技术来创建一个高效的在线教育平台。

步骤 1：搭建 Express.js 后端

1.1 安装 Express.js

Express.js 是 Node.js 中最常用的 Web 框架之一，它帮助我们构建 Web 应用程序。具体的安装方法如下所示：

$ npm install express

1.2 创建一个 Express.js 应用

创建一个新的 Express.js 应用，首先需要创建一个新的项目目录，并通过 npm 初始化它。具体步骤如下：

$ mkdir education-platform
$ cd education-platform
$ npm init

npm init 会要求我们提供一些信息，例如项目名称、版本号、作者等。

1.3 扩展应用程序

使用 Express.js 构建 Web 应用程序过程中，我们需要使用以下命令来扩展应用：

$ npm install express-generator

该命令可帮助我们快速生成应用程序所需的文件和目录。接下来，我们可以使用以下命令来创建应用程序的第一个版本：

$ npx express-generator

该命令不仅可以帮助我们快速生成应用程序所需的文件和目录，还会将 Express.js 的各种功能添加到应用程序中。

1.4 添加路由

随着应用程序的不断扩展，我们需要添加路由。具体步骤如下所示：

创建一个路由文件夹。

$ mkdir routes

在 routes 文件夹下创建一个新的 js 文件，命名为 index.js。

// javascriptcn.com 代码示例
// routes/index.js

const express = require('express');
const router = express.Router();

router.get('/', (req, res) => {
  res.send('Welcome to the education platform');
});

module.exports = router;

在该示例中，我们使用了 Express.js 的 Router 中间件来处理内部路由。路由 / 对应着系统的首页，该首页将显示 Welcome to the education platform。

在 app.js 文件中引用路由。

// javascriptcn.com 代码示例
// app.js

const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
const logger = require('morgan');

const indexRouter = require('./routes/index');

const app = express();

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);

module.exports = app;

该示例中，我们将创建的路由引入到应用程序的主文件中。

1.5 启动应用程序

启动应用程序，我们需要执行以下命令：

$ npm start

通过执行该命令，我们将会看到以下信息：

> education-platform@0.0.0 start /Users/***/education-platform
> node ./bin/www

打开浏览器，访问 http://localhost:3000/，如果一切正常，将看到 Welcome to the education platform。

步骤 2：添加 React 前端

React 是一个高效的 JavaScript 库，它可以帮助我们构建复杂的用户界面。在教育平台中，我们可以使用 React 来构建用户界面，并使用它与 Express.js 后端进行交互，从而提供必要的功能。

2.1 安装 React

安装 React 可以使用以下命令：

$ npm install react react-dom

2.2 创建一个 React 应用

创建 React 应用程序需要使用 Create React App 工具，它是由 Facebook 团队创建和维护的。使用以下命令来安装它：

$ npx create-react-app education-platform-react

2.3 运行 React 应用

创建 React 应用程序后，可以使用以下命令将其运行在本地主机上：

$ cd education-platform-react/
$ npm start

该命令将启动 Web 服务器，并将 React 应用程序运行在 localhost:3000 上。

2.4 添加 React 组件

为了让 React 应用与 Express.js 后端进行交互，我们需要添加新的组件，并使用 Axios 库来处理 HTTP 请求和响应。Axios 是一个流行的 JavaScript 库，它可以让我们轻松进行网络请求。

以下是一个示例组件，它负责渲染用户信息的输入表单，包括用户名和密码：

// javascriptcn.com 代码示例
// src/components/Login.js

import React, { useState } from 'react';
import axios from 'axios';

const Login = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (event) => {
    event.preventDefault();
    const response = await axios.post('/login', { username, password });
    console.log(response.data);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
      </label>

      <label>
        Password:
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </label>

      <button type="submit">Login</button>
    </form>
  );
};

export default Login;

在该示例中，我们使用了 React hooks API 来管理表单数据。我们将用户名和密码作为 state 存储。当表单被提交时，我们使用 axios.post 发送 POST 请求，并且传递用户提供的用户名和密码作为参数。我们还在控制台中记录了服务器的响应。

2.5 添加路由

为了管理前端路由，我们可以使用 React Router 库。该库可以帮助我们在应用程序中使用 URL 路由，从而确保用户的浏览体验更为流畅。

创建一个新的路由可以使用以下代码：

// javascriptcn.com 代码示例
// src/App.js

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

import HomePage from './pages/HomePage';
import LoginPage from './pages/LoginPage';

const App = () => {
  return (
    <Router>
      <header>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/login">Login</Link>
            </li>
          </ul>
        </nav>
      </header>

      <Switch>
        <Route path="/" exact component={HomePage} />
        <Route path="/login" component={LoginPage} />
      </Switch>
    </Router>
  );
};

export default App;

在该示例中，我们使用了 BrowserRouter 组件来管理 React 路由，定义了两个路径：/ 和 /login，并相应地添加了两个页面：HomePage 和 LoginPage。

步骤 3：与后端进行交互

教育平台的前端和后端现在都已经准备就绪了，接下来我们需要将它们连接起来。

3.1 创建 Express.js 后端 API

启动 Express.js 服务器并创建 API，我们需要完成以下步骤：

创建一个新的路由文件，命名为 api.js，该文件将包含所有的后端 API。

// javascriptcn.com 代码示例
// routes/api.js

const express = require('express');
const router = express.Router();

router.post('/login', (req, res) => {
  const { username, password } = req.body;
  if (username && password) {
    res.json({ success: true });
  } else {
    res.status(400).json({ success: false, error: 'Invalid username or password' });
  }
});

module.exports = router;

在该示例中，我们定义了 /api/login 路由，当给定的 username 和 password 有效时，将返回成功的 JSON 响应，否则将返回失败的响应。

在 app.js 文件中引用 api.js 中的路由。

// app.js

...
const apiRouter = require('./routes/api');

...
app.use('/api', apiRouter);

3.2 将登录组件添加到应用程序

将登录组件添加到应用程序中，我们需要完成以下步骤：

在 LoginPage.js 文件中添加 Login 组件：

// javascriptcn.com 代码示例
// src/pages/LoginPage.js

import React from 'react';
import Login from '../components/Login';

const LoginPage = () => {
  return (
    <div>
      <h1>Login Page</h1>
      <Login />
    </div>
  );
};

export default LoginPage;

在后端 API 中创建供前端调用的登录路由。

// javascriptcn.com 代码示例
// routes/api.js

router.post('/login', (req, res) => {
  const { username, password } = req.body;

  if (username && password) {
    res.json({ success: true });
  } else {
    res.status(400).json({ success: false, error: 'Invalid username or password' });
  }
});

总结

Express.js 和 React 组合是构建现代 Web 应用程序的一种非常有效的方式。在本篇文章中，我们学习了如何构建一个在线教育平台，并使用了这两个技术来实现它。我们一步步地讲解了如何搭建平台，实现注册、登录、课程上传等功能。最终，我们将这两个技术组合在一起，实现了一个高效的在线教育平台。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653216487d4982a6eb4494e1