# WebAppMom

**Repository Path**: JsuneCloud/web-app-mom

## Basic Information

- **Project Name**: WebAppMom
- **Description**: 一个专注于构建高效Web应用的开源项目，集成了前后端分离架构，提供RESTful API接口，适用于快速开发和部署现代化Web应用。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-20
- **Last Updated**: 2026-03-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# MOM 系统项目概述

本项目旨在构建一个全面的制造运营管理 (MOM) 系统，涵盖仓储、制造、质量和用户管理等核心模块。系统采用前后端分离的架构，后端使用 .NET，前端使用 Vue 3。

## 功能模块

### 1. 用户管理

*   **用户认证**: 基于 JWT (JSON Web Token) 实现用户登录和授权。
*   **用户注册**: 提供用户注册功能。
*   **用户管理**: 管理员可对用户进行增删改查操作。
*   **权限控制**: 通过路由守卫实现前端页面的权限控制，后端 API 通过 `[Authorize]` 属性进行访问控制。

### 2. 仓储管理

*   **条码出入库**: 支持基于条码的物料出入库操作。
*   **库存管理**: 实时管理库存数量和位置。
*   **拆分与合并**: 实现物料的拆分和合并操作。

### 3. 制造管理

*   **生产订单管理**
*   **工单排程**
*   **生产过程跟踪**

### 4. 质量管理

*   **质量检测**: 定义和执行质量检测流程。
*   **质量标准**: 管理产品的质量标准。
*   **不合格品处理**: 记录和处理不合格品。

## 技术栈

### 后端 (API)

*   **框架**: C#, ASP.NET Core Web API
*   **数据库**: SQL Server
*   **ORM**: Entity Framework Core (Code-First 模式，包含数据库迁移)
*   **认证/授权**: ASP.NET Core Identity, JWT Bearer 认证
*   **其他**: CORS (跨域资源共享) 配置

### 前端 (Web)

*   **框架**: Vue 3 (Composition API)
*   **构建工具**: Vite
*   **UI 组件库**: Element Plus
*   **路由**: Vue Router
*   **HTTP 客户端**: Axios (配置了请求拦截器，自动携带 JWT Token)
*   **语言**: JavaScript

## 实现方法

### 1. 后端架构

*   **分层架构**: 采用控制器 (Controller)、服务 (Service)、仓储 (Repository) 等分层模式，提高代码可维护性和可扩展性。
*   **依赖注入**: 广泛使用依赖注入，管理组件间的依赖关系。
*   **数据库上下文**: 使用 `ApplicationDbContext` 继承 `IdentityDbContext`，整合用户身份管理和业务数据。
*   **JWT 认证**: 配置 `appsettings.json` 和 `Program.cs`，生成和验证 JWT Token，实现无状态认证。
*   **CORS 配置**: 在 `Program.cs` 中配置 CORS 策略，允许前端应用跨域访问后端 API。
*   **EF Core 迁移**: 使用 Code-First 模式，通过 `dotnet ef migrations add` 和 `dotnet ef database update` 管理数据库结构。
*   **级联删除**: 针对 EF Core 中的“多重级联路径”问题，通过 `OnDelete(DeleteBehavior.NoAction)` 显式配置关系，避免循环删除。

### 2. 前端架构

*   **组件化开发**: 使用 Vue 单文件组件 (`.vue`) 进行模块化开发。
*   **路由管理**: 使用 Vue Router 管理前端路由，实现页面导航和懒加载。
*   **API 封装**: 统一封装 Axios 实例，创建 `apiClient` 并配置请求拦截器，自动在每个请求头中添加 `Authorization: Bearer <token>`。
*   **状态管理**: 使用 Vue 3 的 `ref` 和 `reactive` 进行响应式状态管理。
*   **路由守卫**: 实现全局前置守卫 (`router.beforeEach`)，检查用户登录状态和路由权限，确保只有登录用户才能访问受保护页面。
*   **Vite 配置**: 配置 Vite 代理 (`server.proxy`)，解决开发环境下的跨域问题和 API 404 问题。
*   **UI 适配**: 调整全局 CSS (`style.css`)，确保界面能够完全适配整个浏览器界面。

## 运行项目

### 后端

1.  进入 `api/MOM.Api` 目录。
2.  配置 `appsettings.json` 中的数据库连接字符串。
3.  运行数据库迁移：`dotnet ef database update`。
4.  启动后端服务：`dotnet run`。

### 前端

1.  进入 `web` 目录。
2.  安装依赖：`npm install`。
3.  启动前端服务：`npm run dev`。
4.  访问浏览器中显示的地址 (通常是 `http://localhost:5173/`)。