AS400 Web应用开发模板

用于使用AS400/IBM i数据开发Web应用程序的模板,包含FastAPI后端和React前端。

  • by omni-sano
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 omni-sano/as400-web-template

使用说明

AS400 Web模板

AS400/IBM i数据Web应用程序开发模板。

构成

as400-web-template/
├── backend/          # FastAPI + pyodbc
│   ├── main.py
│   ├── requirements.txt
│   └── .env.example  # 環境変数サンプル
├── frontend/         # React + TypeScript (Vite)
│   ├── src/
│   ├── package.json
│   └── vite.config.ts
├── CLAUDE.md         # Claude Code用の指示
└── README.md

安装,安装

前提条件

  • Python 3.11+
  • Node.js 20+
  • IBM i Access ODBC驱动程序
  • AS400的连接信息

后端

cd backend
cp .env.example .env

.env编辑AS400设置的连接信息:

AS400_CONNECTION_STRING=DRIVER={IBM i Access ODBC Driver};SYSTEM=YOUR_HOST;UID=YOUR_USER;PWD=YOUR_PASSWORD;CCSID=1208;EXTCOLINFO=1
python -m venv .venv

# Windows
.venv\Scripts\activate
# macOS/Linux
source .venv/bin/activate

pip install -r requirements.txt
uvicorn main:app --reload

APIhttp://localhost:8000

前端

cd frontend
npm install
npm run dev

应用程序:http://localhost:5173

Claude Code开发

MCP服务器设置

400 mcp设置后,在项目根目录中.mcp.json创建:

cp .mcp.json.example .mcp.json

.mcp.json编辑AS400的连接信息。command啊as400-mcp的,之venv内Python指定路径:

窗户:

{
  "mcpServers": {
    "as400": {
      "command": "C:/path/to/as400-mcp/.venv/Scripts/python.exe",
      "args": ["-m", "as400_mcp.server"],
      "env": {
        "AS400_CONNECTION_STRING": "DRIVER={IBM i Access ODBC Driver};SYSTEM=YOUR_HOST;UID=YOUR_USER;PWD=YOUR_PASSWORD;CCSID=1208;EXTCOLINFO=1"
      }
    }
  }
}

macOS/Linux:

{
  "mcpServers": {
    "as400": {
      "command": "/path/to/as400-mcp/.venv/bin/python",
      "args": ["-m", "as400_mcp.server"],
      "env": {
        "AS400_CONNECTION_STRING": "DRIVER={IBM i Access ODBC Driver};SYSTEM=YOUR_HOST;UID=YOUR_USER;PWD=YOUR_PASSWORD;CCSID=1208;EXTCOLINFO=1"
      }
    }
  }
}

开发流程

Claude Code在中打开此项目时as400-mcp通过,通过AS400的表格信息Web可自动生成画面。

详情CLAUDE.md来修改标记元素的显示属性。