Spring + Spring MVC + MyBatis + React + Reflux + Webpack 全棧項目實戰：從零構建現代化 Java Web 應用

全棧分離架構實戰：Spring 全家桶後端 + React/Reflux/Webpack 前端，Maven 多模組構建，ES6 開發體驗

傳統 Java Web 開發模式 (JSP + Controller) 已難以應對複雜交互需求。本文展示一個生產級參考項目：**後端 Spring + Spring MVC + MyBatis 提供 REST API，前端 React + Reflux + Webpack 構建 SPA**，雙端通過 JSON 交互，Maven 統一構建，開箱即用。

專案整體架構

webbf/
├─ src/main/java/           # 後端源碼
│  ├─ config/               # Spring/MyBatis/MVC 配置類
│  ├─ controller/           # REST Controller
│  ├─ service/              # 業務邏輯
│  ├─ dao/                  # MyBatis Mapper
│  └─ entity/               # 實體類
├─ src/main/resources/      # 配置文件
│  ├─ applicationContext.xml
│  ├─ spring-mvc.xml
│  ├─ mybatis-config.xml
│  └─ mapper/*.xml
├─ src/main/webapp/         # 前端源碼 (Webpack 入口)
│  ├─ src/
│  │  ├─ components/        # React 組件
│  │  ├─ actions/           # Reflux Actions
│  │  ├─ stores/            # Reflux Stores
│  │  ├─ utils/             # 工具函數
│  │  └─ app.js             # 入口
│  ├─ index.html
│  └─ package.json          # 前端依賴
├─ pom.xml                  # Maven 總配置
└─ target/                  # 構建輸出

後端技術棧與核心配置

• Spring 4.x：IoC、AOP、事務管理 (@Transactional)
• Spring MVC：@RestController 直接返回 JSON，無視圖解析器
• MyBatis 3.x：Mapper 接口 + XML SQL、分頁插件 (PageHelper)
• Servlet 轉發器：專用 ForwardServlet 將所有 /** 轉發到 index.html，支援前端路由刷新
• 配置亮點：web.xml 僅配 DispatcherServlet + ForwardServlet + 編碼過濾器，其餘全 JavaConfig

前端技術棧與工作流

前端構建與運行命令

# 1. 進入前端目錄
cd src/main/webapp

# 2. 安裝依賴 (讀取 package.json)
npm install

# 3. 開發模式：熱更新 + Source Map
npm run dev   # 相當於 webpack-dev-server --inline --hot

# 4. 生產構建：壓縮、Hash、分包
npm run build # 相當於 webpack --display-error-details -p

核心前端架構：Reflux 數據流

// actions/UserActions.js
export default Reflux.createActions([
  'loadUsers',      // 異步加載
  'loadUsersCompleted', // 完成
  'loadUsersFailed',    // 失敗
  'addUser'         // 新增
]);

// stores/UserStore.js
import UserActions from '../actions/UserActions';
export default Reflux.createStore({
  listenables: UserActions,
  init() { this.users = []; },
  
  onLoadUsers() {
    // 觸發異步請求
    fetch('/api/users')
      .then(res => res.json())
      .then(data => this.users = data)
      .then(() => this.trigger(this.users)) // 通知組件更新
      .catch(err => UserActions.loadUsersFailed(err));
  },
  
  onAddUser(user) {
    fetch('/api/users', {method:'POST', body:JSON.stringify(user)})
      .then(() => UserActions.loadUsers()); // 重新加載
  }
});

// components/UserList.jsx
import UserStore from '../stores/UserStore';
class UserList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { users: [] };
  }
  componentDidMount() {
    this.unsubscribe = UserStore.listen(users => this.setState({ users }));
    UserActions.loadUsers();
  }
  componentWillUnmount() { this.unsubscribe(); }
  render() {
    return {this.state.users.map(u => )}
{u.name}
;
  }
}

React 核心思想速覽

• 虛擬 DOM：JS 對象模擬真實 DOM，state 變化觸發 render()，Diff 算法計算最小更新集，批量寫入真實 DOM
• 組件復用：class X extends React.Component，Props 輸入、State 內部、生命週期鉤子
• 單向數據流：Reflux 將 Flux 簡化為 Action → Store → View，避免雙向綁定混亂

運行效果展示

源碼地址與啟動指南

GitHub：https://github.com/peterchenhdu/webbf

1. 後端：導入 IDEA → Maven Reimport → 配置 Tomcat → 運行 ForwardServlet 啟動類
2. 前端：cd src/main/webapp && npm install && npm run dev
3. 訪問 https://localhost:8080/ 即可看到 React SPA

遷移建議：現代化技術棧升級路徑

這個項目雖然技術棧略顯「上一代」，但完整展示了 **前後端分離、REST API、單向數據流、模塊化構建** 的工程化落地全過程。克隆下來跑通，再按遷移表逐項升級，是理解現代 Java 全棧演進最低成本的路徑。