Modern.js 项目中的 BFF 框架支持详解

前言

在现代 Web 应用开发中，BFF（Backend For Frontend）模式已经成为解决前后端协作问题的重要架构模式。Modern.js 作为一个现代化的前端开发框架，提供了强大的 BFF 支持，允许开发者选择不同的后端框架来实现服务端逻辑。本文将深入探讨 Modern.js 中 BFF 功能的框架支持特性。

BFF 框架支持概述

Modern.js 的 BFF 功能目前支持两种主流 Node.js 框架：

1. Express.js - 最流行的 Node.js Web 框架，以简洁和灵活著称
2. Koa.js - 由 Express 原班人马打造的下一代框架，采用异步中间件机制

这两种框架各有特点，开发者可以根据项目需求和个人偏好进行选择。

函数模式开发

中间件机制

在函数模式下，Modern.js 提供了统一的中间件添加方式。无论底层使用 Express 还是 Koa，开发者都可以通过 addMiddleware 方法添加自定义中间件。

import { hook } from '@modern-js/runtime/server';
import { Request, Response, NextFunction } from 'express';

export default hook(({ addMiddleware }) => {
  addMiddleware(async (req: Request, res: Response, next: NextFunction) => {
    // 中间件逻辑
    if (req.url !== '/api/login') {
      const sid = req?.cookies?.sid;
      if (!sid) {
        res.status(400).json({ code: -1, message: '需要登录' });
      } else {
        next();
      }
    } else {
      next();
    }
  });
});

实际应用示例

让我们通过一个完整的登录验证流程来说明函数模式的应用：

1. 创建 BFF 函数 - 定义简单的 API 端点

// api/hello.ts
export default async () => {
  return 'Hello Modern.js';
};

2. 前端调用 - 集成式调用 BFF 接口

import { useState, useEffect } from 'react';
import { get as hello } from '@api/hello';

export default () => {
  const [text, setText] = useState('');

  useEffect(() => {
    async function fetchMyApi() {
      const { message } = await hello();
      setText(message);
    }
    fetchMyApi();
  }, []);

  return <p>{text}</p>;
};

3. 添加登录验证 - 修改前端调用逻辑

import { useState, useEffect } from 'react';
import { get as hello } from '@api/hello';
import { post as login } from '@api/login';

export default () => {
  const [text, setText] = useState('');

  useEffect(() => {
    async function fetchAfterLogin() {
      const { code } = await login();
      if (code === 0) {
        const { message } = await hello();
        setText(message);
      }
    }
    fetchAfterLogin();
  }, []);

  return <p>{text}</p>;
};

框架模式开发

Express 框架模式

在框架模式下，开发者可以完全控制 Express 应用的初始化过程：

// api/app.ts
import express from 'express';

const app = express();

// 自定义路由
app.put('/user', function (req, res) {
  res.send('在/user收到PUT请求');
});

// 全局中间件
app.use(async (req, res, next) => {
  console.info(`访问URL: ${req.url}`);
  next();
});

export default app;

重要特性：

• BFF 函数路由会在 app.ts 定义的路由之后注册
• 可以在 app.ts 中拦截 BFF 函数的路由进行预处理

Koa 框架模式

Koa 框架模式与 Express 类似，但有一些关键区别：

// api/app.ts
import Koa from 'koa';

const app = new Koa();

// 自定义路由
app.put('/user', function (ctx) {
  ctx.body = '在/user收到PUT请求';
});

// 全局中间件
app.use(async (ctx, next) => {
  console.info(`访问URL: ${ctx.url}`);
  await next();
});

export default app;

特别注意：

• 当存在 app.ts 时，如果 BFF 函数需要使用请求体，开发者必须手动添加 koa-body 中间件
• 没有 app.ts 时，Modern.js 会自动添加 koa-body 中间件

选择建议

1. 函数模式适合：

   • 快速开发简单 API
   • 需要 Modern.js 提供更多自动化功能的场景
   • 对底层框架无特殊要求的项目

2. 框架模式适合：

   • 需要精细控制服务端行为的项目
   • 已有 Express/Koa 代码需要迁移的场景
   • 需要深度定制路由和中间件顺序的情况

总结

Modern.js 的 BFF 功能提供了灵活的开发模式选择，无论是偏好简洁的函数式开发，还是需要完整框架控制的场景，都能找到合适的解决方案。通过本文的介绍，开发者应该能够根据项目需求，选择最适合的 BFF 实现方式，构建高效可靠的前后端集成应用。

在实际开发中，建议从函数模式开始，当遇到需要更精细控制的场景时，再切换到框架模式。这种渐进式的开发方式能够平衡开发效率和控制灵活性。