React + Express 前端管理界面用户查看功能及后端接口开发全指南

2023-10-25 11:06:27

前言

在现代 Web 开发中，React 和 Express 作为两大主流技术框架，在构建全栈应用程序方面发挥着至关重要的作用。React 是一个用于构建用户界面的 JavaScript 库，而 Express 是一个轻量级的 Node.js 框架，用于构建 Web 应用程序和 API。将这两者结合起来，您可以创建功能强大、交互丰富的 Web 应用。

搭建 React + Express 全栈项目

首先，我们需要搭建一个 React + Express 全栈项目。您可以使用 create-react-app 和 express-generator 来快速创建一个项目。

npx create-react-app my-app
cd my-app
npm install express --save

创建用户管理模型

接下来，我们需要创建一个用户管理模型，来定义用户数据的结构和操作。在 MongoDB 中，我们可以使用 Mongoose 来轻松实现这一点。

const mongoose = require('mongoose');

const UserSchema = new mongoose.Schema({
  name: String,
  email: String,
  password: String,
});

const User = mongoose.model('User', UserSchema);

开发前端管理界面

在 React 中，我们可以使用状态管理库 Redux 来管理用户数据和界面状态。

import React, { useState } from 'react';
import { useSelector } from 'react-redux';

const UserList = () => {
  const users = useSelector(state => state.users);

  return (
    <ul>
      {users.map(user => (
        <li key={user._id}>{user.name}</li>
      ))}
    </ul>
  );
};

开发后端接口

在 Express 中，我们可以使用路由和控制器来处理用户查看请求。

const express = require('express');
const router = express.Router();
const User = require('../models/User');

router.get('/users', async (req, res) => {
  const users = await User.find();
  res.json(users);
});

集成前端和后端

最后，我们需要将前端和后端集成起来，以便前端能够调用后端接口来获取用户数据。

// 在 React 组件中
import axios from 'axios';

const UserList = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get('/users').then(res => setUsers(res.data));
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user._id}>{user.name}</li>
      ))}
    </ul>
  );
};