使用Node Express和React实现用户可加入的UI展示群组页面是否有示例？

以下是可直接运行的最小实现示例，包含群组展示、申请加入全流程逻辑，可根据需求扩展功能。

依赖安装 #

运行npm install express cors安装所需依赖。

完整服务代码（server.js） #

const express = require('express');
const cors = require('cors');
const app = express();
const PORT = 3001;

// 全局中间件
app.use(cors());
app.use(express.json());

// 模拟内存存储，生产环境可替换为MySQL/MongoDB
let groups = [
  {
    id: 1,
    name: '前端开发交流群',
    description: '分享前端技术、招聘信息、学习经验，欢迎所有前端从业者加入',
    memberCount: 245,
    joinType: 'audit' // audit=需要审核，free=直接加入
  },
  {
    id: 2,
    name: 'Node.js技术群',
    description: '讨论Node.js服务端开发、性能优化、最佳实践',
    memberCount: 189,
    joinType: 'audit'
  },
  {
    id: 3,
    name: 'React爱好者交流群',
    description: 'React生态相关技术交流，包括Next.js、React Native等',
    memberCount: 312,
    joinType: 'free'
  }
];

let applications = [];
let applyIdCounter = 1;

// 接口1：获取全量公开群组列表
app.get('/api/groups', (req, res) => {
  res.json({ code: 0, data: groups });
});

// 接口2：提交加入群组申请
app.post('/api/applications', (req, res) => {
  const { groupId, userId, userName, applyReason } = req.body;
  // 重复申请校验
  const existApply = applications.find(item => item.groupId === groupId && item.userId === userId);
  if (existApply) {
    return res.json({ code: 1, msg: '你已提交过该群组的加入申请，请等待审核' });
  }
  const newApply = {
    id: applyIdCounter++,
    groupId,
    userId,
    userName,
    applyReason,
    status: 'pending', // pending=待审核，passed=通过，rejected=拒绝
    createTime: new Date().toISOString()
  };
  applications.push(newApply);
  // 直接加入类型的群组自动通过申请
  const targetGroup = groups.find(item => item.id === groupId);
  if (targetGroup.joinType === 'free') {
    targetGroup.memberCount += 1;
    newApply.status = 'passed';
    return res.json({ code: 0, msg: '加入成功', data: newApply });
  }
  res.json({ code: 0, msg: '申请已提交，请等待管理员审核', data: newApply });
});

app.listen(PORT, () => {
  console.log(`后端服务运行在http://localhost:${PORT}`);
});

依赖安装 #

运行npm install axios antd安装接口请求和UI组件依赖，也可自行替换为其他组件库。

群组列表组件代码（GroupList.jsx） #

import { useState, useEffect } from 'react';
import axios from 'axios';
import { Card, Button, Modal, Form, Input, message } from 'antd';
import './GroupList.css';

const GroupList = () => {
  const [groupList, setGroupList] = useState([]);
  const [applyModalVisible, setApplyModalVisible] = useState(false);
  const [currentGroup, setCurrentGroup] = useState(null);
  const [form] = Form.useForm();
  // 模拟当前登录用户信息，生产环境从登录态获取
  const currentUser = { id: 1001, name: '测试用户' };

  // 初始化拉取群组列表
  useEffect(() => {
    fetchGroups();
  }, []);

  const fetchGroups = async () => {
    const res = await axios.get('http://localhost:3001/api/groups');
    if (res.data.code === 0) {
      setGroupList(res.data.data);
    }
  };

  // 打开申请弹窗
  const handleApply = (group) => {
    setCurrentGroup(group);
    setApplyModalVisible(true);
    form.resetFields();
  };

  // 提交加入申请
  const submitApply = async (values) => {
    try {
      const res = await axios.post('http://localhost:3001/api/applications', {
        groupId: currentGroup.id,
        userId: currentUser.id,
        userName: currentUser.name,
        applyReason: values.applyReason
      });
      message.success(res.data.msg);
      setApplyModalVisible(false);
      fetchGroups();
    } catch (err) {
      message.error('提交申请失败，请稍后重试');
    }
  };

  return (
    <div className="group-list-container">
      <h2>公开群组列表</h2>
      <div className="group-card-wrap">
        {groupList.map(group => (
          <Card key={group.id} title={group.name} style={{ width: 300, marginBottom: 20 }}>
            <p>{group.description}</p>
            <p>当前成员数：{group.memberCount}</p>
            <p>加入方式：{group.joinType === 'audit' ? '需审核' : '直接加入'}</p>
            <Button type="primary" onClick={() => handleApply(group)}>
              申请加入
            </Button>
          </Card>
        ))}
      </div>

      <Modal
        title={`申请加入${currentGroup?.name || ''}`}
        open={applyModalVisible}
        onCancel={() => setApplyModalVisible(false)}
        onOk={() => form.submit()}
      >
        <Form form={form} onFinish={submitApply} layout="vertical">
          <Form.Item
            name="applyReason"
            label="申请理由"
            rules={[{ required: true, message: '请填写申请理由' }]}
          >
            <Input.TextArea rows={4} placeholder="请说明你加入该群的目的" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default GroupList;

样式文件（GroupList.css） #

.group-list-container {
  max-width: 1200px;
  margin: 30px auto;
  padding: 0 20px;
}
.group-card-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

• 后端：进入后端项目目录，运行node server.js，确认3001端口服务正常启动
• 前端：在React项目的App.jsx中引入GroupList组件，运行npm start启动前端服务即可访问

• 可添加JWT鉴权逻辑，实现用户登录态校验
• 可新增管理员端接口，实现申请审核、群组增删改管理功能
• 可接入数据库持久化存储数据，替换示例中的内存变量
• 可优化UI样式，增加群组分类、搜索、分页等交互功能

内容的提问来源于stack exchange，提问作者meo1992