在基于MERN技术栈的用户管理系统中实现微前端

在现代 web 开发中，构建可扩展且易于维护的应用是首要任务。微前端通过将庞大的前端拆分为更小、更易于管理的模块，提供了一种引人注目的解决方案。在这篇文章中，我们将探讨如何在用户管理系统中实现微前端架构，使用 MERN 堆栈（MongoDB、Express.js、React 和 Node.js）。我们还将讨论在不同微前端间重用代码的策略。

微前端架构允许你将前端应用作为独立的模块进行开发，每个模块负责特定的功能。这种架构促进了团队的自治性，加快了开发速度，并且提高了扩展性。

（注：MERN指MongoDB, Express, React, Node.js）

MERN 堆栈因为它使用了 JavaScript 生态系统而成为构建 web 应用程序的热门选择，这使得开发人员可以使用同一门语言从上到下贯穿整个技术栈。每个组件在我们的微前端方法中的作用如下：

• MongoDB ：用于数据存储，提供基于文档的灵活性。
• Express.js ：一个轻量级的服务器框架，用于构建API。
• React ：一个强大的库，用于构建用户界面，非常适合创建可复用组件。
• Node.js ：用于在服务器上运行JavaScript的运行环境。

首先，为你的项目建立一个项目的目录结构。一个常见的做法是这样做：为每个微前端单独建立一个文件夹，并建立一个主应用来协调这些微前端。

    用户管理系统包含以下几个部分：  
      ├── 主应用/  
      ├── 用户列表/  
      ├── 用户信息/  
      └── 用户设定/

在每个微前端的文件夹内，使用 Create React App 创建一个 React 应用，，并用逗号增强句子流畅性，使表达更自然。此处删去多余的“应用程序”，并调整表达以符合日常口语习惯。最终译文如下：

在每个微前端的文件夹内，使用 Create React App 创建一个 React 应用，
（根据要求，最终版本应为）
在每个微前端的文件夹内，使用 Create React App 创建一个 React 应用。

注：最终处理去除多余逗号，以符合中文书写习惯。
在每个微前端的文件夹内，使用 Create React App 创建一个 React 应用。

npx create-react-app user-list  
npx create-react-app user-details  
npx create-react-app user-settings

1. 创建一个共享组件仓库

为了促进代码重用，创建一个共享的组件库。这个库可以包含各种组件，比如按钮、表单和布局，这些组件可以在各种微前端模块中重复使用。

1. 创建一个共享文件夹：

    mkdir 共享组件文件夹  
    cd 共享组件文件夹  
    npx create-react-app components # 此命令用于创建React应用

1. 开发一些可重用的组件：

在 src/components 文件夹里创建例如 Button.js、InputField.js 和 Modal.js 这样的文件。

1. 打包和发布软件库 （可选）：

你可以将你的共享模块发布到包管理器（如 npm），或使用 npm link 进行本地链接，以便更方便地开发。

主应用将充当编排器，将各种微前端结合在一起。你可以使用 Single SPA 或 Module Federation（来自 Webpack）等工具来管理这些组件的集成。

1. 在 main-app 目录下安装 Single SPA 库。

npm install single-spa

运行此命令来安装 single-spa 单独包

1. 配置 Single SPA：

在main-app目录中创建一个名为single-spa-config.js的文件：

    import { registerApplication, start } from 'single-spa';  

    // 注册用户列表应用
    registerApplication(  
      'user-list',  
      () => import('user-list/src/index.js'),  
      location => location.pathname.startsWith('/users')  
    );  
    // 注册用户详情应用
    registerApplication(  
      'user-details',  
      () => import('user-details/src/index.js'),  
      location => location.pathname.startsWith('/user/')  
    );  
    // 注册用户设置应用
    registerApplication(  
      'user-settings',  
      () => import('user-settings/src/index.js'),  
      location => location.pathname.startsWith('/settings')  
    );  
    start();

现在，让我们来做用户管理的部分功能。

在 user-list/src/App.js 文件中，创建一个组件来获取和显示一个用户列表。

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

const UserList = () => {  
  const [users, setUsers] = useState([]);  
  useEffect(() => {  
    // 获取用户数据
    axios.get('/api/users').then(response => {  
      setUsers(response.data);  
    });  
  }, []);  
  return (  
    <div>  
      <h1>用户</h1>  
      <ul>  
        {users.map(user => (  
          <li key={user.id}>{user.name}</li>  
        ))}  
      </ul>  
    </div>  
  );  
};  
export default UserList;

在 user-details/src/App.js 文件中创建一个视图来显示单个用户的详细信息。

    import React, { useEffect, useState } from 'react';  
    import axios from 'axios';  
    import { useParams } from 'react-router-dom';  

    const UserDetails = () => {  
      const { id } = useParams();  
      const [user, setUser] = useState(null);  
      useEffect(() => {  
        axios.get(`/api/users/${id}`).then(response => {  
          setUser(response.data);  
        });  
      }, [id]);  
      return (  
        <div>  
          {user ? (  
            <div>  
              <h1>{user.name}</h1>  
              <p>Email: {user.email}</p>  
            </div>  
          ) : (  
            <p>正在加载...</p>  
          )}  
        </div>  
      );  
    };  
    export default UserDetails;

注：微前端应用是指将一个大型Web应用拆分成多个小型独立的前端应用。

在 user-settings/src/App.js 文件中创建一个用户设置表单。

    import React, { useState } from 'react';  
    import axios from 'axios';  
    const UserSettings = () => {  
      const [email, setEmail] = useState('');  
      const handleSubmit = async (e) => {  
        e.preventDefault();  
        await axios.put('/api/users/settings', { email });  
        alert('设置更新成功！');  
      };  
      return (  
        <form onSubmit={handleSubmit}>  
          <label>  
            邮箱地址:  
            <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />  
          </label>  
          <button type="submit">保存设置</button>  
        </form>  
      );  
    };  
    export default UserSettings;

我们将使用 Node.js 和 Express 创建一个后端，用于处理与用户账户管理相关的所有 API 请求。

1. 创建一个新的Node.js项目

# 创建后端文件夹
mkdir backend  
# 进入后端文件夹
cd backend  
# 使用默认设置初始化npm项目
npm init -y  
# 安装必要的库
npm install express mongoose cors

1. 开始创建 API，

在 backend/index.js 文件中，配置 Express 服务和 MongoDB 连接。

    const express = require('express');  
    const mongoose = require('mongoose');  
    const cors = require('cors');  

    const app = express();  
    app.use(cors());  
    app.use(express.json());  
    // MongoDB 连接  
    mongoose.connect('mongodb://localhost:27017/userdb', {  
      useNewUrlParser: true,  
      useUnifiedTopology: true,  
    });  
    // 用户模式定义  
    const userSchema = new mongoose.Schema({ name: String, email: String });  
    const User = mongoose.model('User', userSchema);  
    // API 路由定义  
    app.get('/api/users', async (req, res) => {  
      const users = await User.find();  
      res.json(users);  
    });  
    app.get('/api/users/:id', async (req, res) => {  
      const user = await User.findById(req.params.id);  
      res.json(user);  
    });  
    app.put('/api/users/settings', async (req, res) => {  
      // 处理更新用户设置的逻辑  
      res.send('设置更新完成');  
    });  
    const PORT = process.env.PORT || 5000;  
    app.listen(PORT, () => {  
      console.log(`服务器正在端口 ${PORT} 运行`);  
    });

你现在可以启动你的微前端应用和后端了。

1. 运行后端程序：

运行 backend/index.js

1. 运行每个微前端应用：

导航到每个微前端目录，然后运行：

# 保持代码不变

    npm start

1. 启动主程序

在 main-app 目录下执行：

npm start

运行npm start命令来启动项目

实现微前端可以显著提高基于MERN栈的用户管理系统的扩展性和维护性。通过将应用拆分成更小的、独立的模块，可以促进团队的自主性，促进代码的复用，并提升整体开发效率。

当你继续推进这一架构时，记得不断评估项目的需求，并适时调整你的策略，以确保开发过程顺利。祝你编程愉快！

感谢您加入我们的Plain English社区！在您离开时：

• 别忘了给作者点赞👏并关注她
• 关注我们: X | LinkedIn | YouTube | Discord | 新闻通讯 | 播客
• 免费在 Differ 创建一个 AI 博客。
• 更多内容请看 PlainEnglish.io