# app-platform

**Repository Path**: NBegin/app-platform

## Basic Information

- **Project Name**: app-platform
- **Description**: AI辅助编程示例：应用方舟是一个企业级移动端应用架构，支持登录、注册、个人中心、首页等核心功能，同时支持单机版和联网版打包方式，可生成安卓和iOS应用。采用前后端分离架构，基于JWT认证，使用元数据驱动技术和RESTful API设计，提供了完善的应用市场功能，支持动态模块加载和管理。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-02-28
- **Last Updated**: 2026-03-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 企业级移动端架构 - 应用方舟

## 项目概述

应用方舟是一个企业级移动端应用架构，支持登录、注册、个人中心、首页等核心功能，同时支持单机版和联网版打包方式，可生成安卓和iOS应用。采用前后端分离架构，基于JWT认证，使用元数据驱动技术和RESTful API设计，提供了完善的应用市场功能，支持动态模块加载和管理。

## 项目截图

<table>
  <tr>
    <td>
      <h3>登录页</h3>
      <p>登录页提供了简洁的用户登录界面，支持用户名密码登录，具有表单验证和错误提示功能。</p>
      <img src="frontend/src/assets/screenshots/登录.jpg" alt="登录页" style="width: 100%;">
    </td>
    <td>
      <h3>注册页</h3>
      <p>注册页支持新用户注册，包含表单验证和密码强度提示。</p>
      <img src="frontend/src/assets/screenshots/注册.jpg" alt="注册页" style="width: 100%;">
    </td>
  </tr>
  <tr>
    <td>
      <h3>首页</h3>
      <p>首页展示了应用的核心功能入口，包括应用市场、我的应用、消息中心等。</p>
      <img src="frontend/src/assets/screenshots/首页.jpg" alt="首页" style="width: 100%;">
    </td>
    <td>
      <h3>应用商城</h3>
      <p>应用商城提供了丰富的应用模块，支持搜索、浏览和下载安装。</p>
      <img src="frontend/src/assets/screenshots/商城.jpg" alt="应用商城" style="width: 100%;">
    </td>
  </tr>
  <tr>
    <td>
      <h3>我的应用</h3>
      <p>我的应用页面展示了用户已安装的应用，支持应用管理和更新。</p>
      <img src="frontend/src/assets/screenshots/应用.jpg" alt="我的应用" style="width: 100%;">
    </td>
    <td>
      <h3>消息中心</h3>
      <p>消息中心提供了系统通知和消息管理功能。</p>
      <img src="frontend/src/assets/screenshots/消息中心.jpg" alt="消息中心" style="width: 100%;">
    </td>
  </tr>
  <tr>
    <td>
      <h3>个人中心</h3>
      <p>个人中心展示了用户的个人信息，支持账号设置和密码修改。</p>
      <img src="frontend/src/assets/screenshots/个人中心.jpg" alt="个人中心" style="width: 60%;">
    </td>
    <td></td>
  </tr>
</table>

## 技术栈

### 前端技术栈
- **框架**: Vue 3
- **UI组件库**: Vant 4
- **状态管理**: Pinia
- **样式预处理器**: Less
- **HTTP客户端**: Axios
- **构建工具**: Vite
- **移动端打包**: Capacitor

### 后端技术栈
- **框架**: Express.js
- **数据库**: MongoDB
- **认证**: JWT (JSON Web Token)
- **API设计**: RESTful API
- **ORM**: Mongoose
- **元数据驱动**: 自定义元数据管理系统

## 项目结构

```
app-platform/
├── backend/               # 后端代码
│   ├── src/               # 源码目录
│   ├── .env               # 环境配置
│   ├── app.js             # 入口文件
│   └── package.json       # 依赖配置
├── frontend/              # 前端代码
│   ├── src/               # 源码目录
│   ├── public/            # 静态资源
│   ├── android/           # Android项目（Capacitor）
│   ├── ios/               # iOS项目（Capacitor）
│   ├── .env.*             # 环境配置文件
│   ├── vite.config.js     # Vite配置
│   ├── capacitor.config.json # Capacitor配置
│   └── package.json       # 依赖配置
├── ARCHITECTURE.md        # 架构设计文档
├── DATABASE.md            # 数据库设计文档
└── README.md              # 项目说明文档
```

## 快速开始

### 后端启动

1. 进入后端目录
   ```bash
   cd backend
   ```

2. 安装依赖
   ```bash
   npm install
   ```

3. 启动服务
   ```bash
   npm start
   ```

   服务将运行在 http://localhost:3000

### 前端启动

1. 进入前端目录
   ```bash
   cd frontend
   ```

2. 安装依赖
   ```bash
   npm install
   ```

3. 启动开发服务器
   ```bash
   npm run dev
   ```

   开发服务器将运行在 http://localhost:5173

## 构建与打包

### 前端构建

1. 在线模式构建
   ```bash
   npm run build
   # 或
   npm run build:online
   ```

2. 离线模式构建
   ```bash
   npm run build:offline
   ```

### 应用生成

Capacitor将Web应用打包到原生项目中，但实际生成APK（Android）或IPA（iOS）文件需要使用对应的原生开发工具。

#### Android应用生成

1. **生成在线版Android应用项目**
   ```bash
   npm run app:android
   ```
   此命令会构建Web应用，同步到Android项目，并打开Android Studio。

2. **生成离线版Android应用项目**
   ```bash
   npm run app:android:offline
   ```
   此命令会构建离线模式的Web应用，同步到Android项目，并打开Android Studio。

3. **在Android Studio中生成APK**
   - 在Android Studio中，等待Gradle同步完成
   - 点击顶部菜单栏的 `Build` → `Build Bundle(s) / APK(s)` → `Build APK(s)`
   - 构建完成后，点击 `locate` 按钮即可找到生成的APK文件
   - APK文件通常位于 `android/app/build/outputs/apk/release/` 目录下

4. **使用Gradle命令生成APK**
   ```bash
   cd android
   ./gradlew assembleRelease
   ```
   生成的APK文件将位于 `app/build/outputs/apk/release/` 目录下

#### iOS应用生成

1. **生成在线版iOS应用项目**
   ```bash
   npm run app:ios
   ```
   此命令会构建Web应用，同步到iOS项目，并打开Xcode。

2. **生成离线版iOS应用项目**
   ```bash
   npm run app:ios:offline
   ```
   此命令会构建离线模式的Web应用，同步到iOS项目，并打开Xcode。

3. **在Xcode中生成IPA**
   - 在Xcode中，选择正确的开发者证书和配置文件
   - 点击顶部菜单栏的 `Product` → `Archive`
   - 归档完成后，在Organizer中选择归档文件，点击 `Distribute App`
   - 按照向导选择分发方式，完成后即可生成IPA文件

### 应用签名与发布

#### Android应用签名
- 在Android Studio中，可以在 `Build` → `Generate Signed Bundle / APK` 中生成签名的APK或AAB
- 需要提前创建签名密钥库（.jks文件）

#### iOS应用签名
- 在Xcode中，需要配置开发者账号和Provisioning Profile
- 可以在 `Project Settings` → `Signing & Capabilities` 中配置

### 注意事项

1. **首次使用需要安装原生开发工具**
   - Android：Android Studio 4.2+ 和 Android SDK
   - iOS：Xcode 12+ 和 macOS

2. **同步Web资源**
   - 每次修改Web应用后，需要运行 `npm run cap:sync` 同步到原生项目
   - 或使用 `npm run cap:copy` 仅复制Web资源

3. **更新Capacitor插件**
   - 安装新插件后，需要运行 `npm run cap:sync` 同步到原生项目

4. **调试应用**
   - Android：在Android Studio中运行应用，使用Chrome DevTools调试Web部分
   - iOS：在Xcode中运行应用，使用Safari DevTools调试Web部分

### Capacitor命令

- 添加平台
  ```bash
  npm run cap:add <platform>  # platform: android | ios
  ```

- 同步Web资源到原生项目
  ```bash
  npm run cap:sync
  ```

- 打开原生项目
  ```bash
  npm run cap:open <platform>  # platform: android | ios
  ```

## 环境配置

### 后端环境变量

在 `backend/.env` 文件中配置：

```
PORT=3000
MONGO_URI=mongodb://localhost:27017/app-platform
JWT_SECRET=your-secret-key
JWT_EXPIRES_IN=15m
JWT_REFRESH_EXPIRES_IN=7d
CORS_ORIGIN=http://localhost:5173
```

### 前端环境变量

#### 开发环境 (.env.development)
```
VITE_APP_MODE=development
VITE_APP_API_URL=http://localhost:3000
```

#### 生产环境 (.env.production)
```
VITE_APP_MODE=production
VITE_APP_API_URL=http://your-api-server.com
```

#### 离线环境 (.env.offline)
```
VITE_APP_MODE=offline
VITE_APP_API_URL=http://your-api-server.com
```

## 核心功能

### 认证系统
- 用户名密码登录
- 注册功能
- JWT令牌认证
- 令牌刷新机制

### 元数据驱动
- 动态UI生成
- 动态表单生成
- 动态业务逻辑配置

### 双模式支持
- 在线模式：连接后端API
- 离线模式：使用本地存储和Mock数据

### 应用市场
- 模块展示与搜索
- 模块购买与支付
- 模块安装与更新

## 开发流程

1. 设计元数据模型
2. 实现后端API
3. 配置前端路由和状态管理
4. 开发前端组件
5. 测试功能
6. 构建打包
7. 生成移动端应用

## 文档

- [架构设计文档](ARCHITECTURE.md)
- [数据库设计文档](DATABASE.md)

## 许可证

Apache License 2.0

详见 [LICENSE](LICENSE) 文件。