# 资产管理系统
**Repository Path**: mofees/RuoVea.Asset
## Basic Information
- **Project Name**: 资产管理系统
- **Description**: RuoVea.Asset是一个基于 .NET Core 8.0 构建的现代化企业级资产管理系统,专为企业和组织提供全面的资产管理解决方案。系统集成了丰富的企业级功能,包括认证授权、用户管理、角色管理、系统日志等核心功能,同时专注于资产全生命周期管理,从资产的采购、入库、领用、调拨、维修到报废的完整流程。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-08-18
- **Last Updated**: 2026-08-18
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 资产管理系统
## 介绍
资产管理系统是一个基于 .NET Core 8.0 构建的现代化企业级资产管理系统,专为企业和组织提供全面的资产管理解决方案。系统集成了丰富的企业级功能,包括认证授权、用户管理、角色管理、系统日志等核心功能,同时专注于资产全生命周期管理,从资产的采购、入库、领用、调拨、维修到报废的完整流程。
### 系统核心价值
- **全面的资产管理**:覆盖资产从采购到报废的全生命周期管理,提供完整的资产追踪能力
- **高效的工作流程**:优化资产申请、审批、处理等业务流程,提高管理效率
- **精准的数据分析**:提供多维度的资产数据统计和分析,辅助管理层决策
- **安全的权限控制**:基于角色的精细化权限管理,确保数据安全
- **灵活的配置选项**:支持多数据库、多语言、自定义字段等配置,适应不同企业需求
### 适用场景
- **企业资产管理**:适用于各类企业的固定资产、IT设备、办公设备等管理
- **政府机构资产**:满足政府部门、事业单位的国有资产管理需求
- **教育机构资产**:支持学校、科研机构的教学设备、科研仪器管理
- **医疗机构资产**:适用于医院、诊所的医疗设备和设施管理
资产管理系统 不仅是一个功能完备的资产管理系统,也是一个可扩展的开发框架,为开发者提供了快速搭建高质量 Web 应用的基础,可根据具体业务需求进行定制开发。
## 🛠️ 软件架构
**技术栈**:
- **后端**:.NET Core 8.0 + MVC
- **前端**:Vue.js 2.6.x + Element UI + Avue + axios
- **ORM**:SqlSugar
- **认证**:JWT + RuoVea.OmiLogin
- **数据库**:默认 SQLite,支持多数据库切换
- **日志**:RuoVea.OmiLog
- **国际化**:内置多语言支持
## **资产管理系统**
### **资产信息管理**
#### 资产信息列表

**功能描述**:资产信息列表界面展示所有资产的基本信息,包括资产编号、名称、类别、购买日期、使用状态等。支持资产的搜索、筛选、排序和批量操作。提供资产的导入导出功能。
#### 资产信息查看

**功能描述**:资产信息查看界面展示单条资产的详细信息,包括资产图片、规格型号、购买价格、使用部门、存放位置等。支持资产信息的修改和历史记录查看。
### **资产分类管理**
#### 资产分类列表

**功能描述**:资产分类列表界面展示所有资产分类信息,包括分类编号、名称、描述等。支持分类的层级管理和批量操作。
#### 资产分类查看

**功能描述**:资产分类查看界面展示分类的详细信息和该分类下的所有资产。支持分类信息的修改和资产的快速导航。
### **资产盘点管理**
#### 资产盘点列表

**功能描述**:资产盘点列表界面展示所有盘点任务的基本信息,包括盘点编号、盘点日期、盘点状态等。支持盘点任务的创建、启动和完成操作。
#### 资产盘点查看

**功能描述**:资产盘点查看界面展示盘点任务的详细信息和盘点结果。支持盘点差异的处理和盘点报告的生成。
### **资产维修管理**
#### 资产维修列表

**功能描述**:资产维修列表界面展示所有维修申请的基本信息,包括维修编号、资产名称、申请日期、维修状态等。支持维修申请的审核、分配和完成操作。
#### 资产维修查看

**功能描述**:资产维修查看界面展示维修申请的详细信息和维修历史记录。支持维修费用的录入和维修状态的更新。
### **资产调拨管理**
#### 资产调拨列表

**功能描述**:资产调拨列表界面展示所有调拨申请的基本信息,包括调拨编号、资产名称、调出部门、调入部门等。支持调拨申请的审核和执行操作。
#### 资产调拨查看

**功能描述**:资产调拨查看界面展示调拨申请的详细信息和调拨历史记录。支持调拨状态的跟踪和完成确认。
### **资产领用记录**

**功能描述**:资产领用记录界面展示所有资产的领用和归还记录。支持领用记录的查询、统计和导出。提供资产使用情况的分析报表。
---
## 🔄 业务逻辑流程图
> 以下流程图基于后端模型(`RuoVea.Asset.Server/Models`)与服务实现(`RuoVea.Asset.Server/Service`)及 Web 控制器(`RuoVea.Asset.Web/Controllers`)梳理,覆盖系统架构、认证授权、资产全生命周期及各业务模块的核心流转逻辑。
### 1、系统整体架构流程图
三层架构:Web 表示层(Controllers)→ Server 业务层(Service + Dto + Models)→ 数据访问层(SugarRepository / SqlSugar)
```mermaid
flowchart TD
A[用户浏览器] -->|HTTP请求| B[前端 Vue.js + Element UI + Avue]
B -->|axios 携带JWT| C[RuoVea.Asset.Web 表示层]
C --> D{GlobalAuthorizeFilter
全局鉴权过滤器}
D -->|未登录/匿名| E[重定向到 /auth/login]
D -->|已登录| F{角色与菜单权限校验}
F -->|无权限| G[403 无权限页面]
F -->|有权限| H[Controller 控制器]
H -->|调用| I[RuoVea.Asset.Server 业务服务层]
I -->|Mapster 对象映射| J[Dto 数据传输对象]
I -->|SugarRepository| K[SqlSugar ORM]
K -->|CodeFirst / CRUD| L[(数据库 SQLite/MySQL/SqlServer)]
I -->|返回| M[RestfulResult 统一响应]
M -->|JSON| C
C -->|渲染| B
B -->|展示| A
```
### 2、请求处理与统一响应流程图
所有业务接口统一返回 `RestfulResult`,分页接口返回 `RestfulResult>`。
```mermaid
flowchart LR
A[前端 axios 请求] -->|自动注入 Bearer Token| B[请求拦截器]
B --> C[Controller 路由匹配]
C --> D[参数校验 / 反序列化]
D --> E[Service 业务方法]
E --> F{业务校验}
F -->|失败| G[RestfulResult.BadRequest
Code=400]
F -->|通过| H[SugarRepository 数据操作]
H --> I{操作结果}
I -->|成功| J[RestfulResult.OK
Code=200]
I -->|失败| K[RestfulResult 失败信息]
J --> L[响应拦截器统一处理]
G --> L
K --> L
L --> M[前端接收 data 字段]
```
### 3、认证授权流程图
认证采用 JWT + RuoVea.OmiLogin;授权由 `GlobalAuthorizeFilter` 基于角色与菜单路径进行校验。
```mermaid
flowchart TD
A[用户访问系统] --> B{是否已登录?}
B -->|否| C[跳转登录页 /auth/login]
C --> D[输入账号密码]
D --> E[RuoVea.OmiLogin 验证]
E -->|验证失败| F[提示错误信息]
E -->|验证成功| G[生成 JWT Token]
G --> H[Token 存储 localStorage]
H --> I[加载用户菜单 GetLoginMenuTree]
I --> J[进入首页 /Home]
B -->|是| K{GlobalAuthorizeFilter 校验}
K -->|SuperAdmin 角色| L[放行所有请求]
K -->|普通角色| M{请求路径是否在
用户菜单路径列表?}
M -->|是| L
M -->|否| N[重定向 403 无权限]
L --> O[执行 Controller 业务]
```
### 4、资产全生命周期流程图
资产状态枚举(`InfoStatus`):InUse 在用、Repairing 维修中、Idle 闲置、Scrapped 已报废
```mermaid
flowchart LR
A[资产采购登记] --> B[录入资产信息
AssetInfo.AddAsync]
B --> C[状态: Idle 闲置]
C --> D[资产领用
UseRecord.AddAsync]
D --> E[状态: InUse 在用]
E --> F{资产异常?}
F -->|故障| G[报修申请
RepairRecord.AddAsync]
G --> H[状态: Repairing 维修中]
H --> I{维修结果}
I -->|修复| E
I -->|无法修复| J[资产报废
状态: Scrapped 已报废]
F -->|正常| K{需要调拨?}
K -->|是| L[资产调拨
TransferRecord.AddAsync]
L --> E
K -->|否| M{资产盘点}
M -->|账实相符| E
M -->|盘亏/盘盈| N[盘点差异处理
InventoryDetail]
E --> O[资产归还
UseRecord.UpdateAsync]
O --> C
J --> P[资产退役]
```
### 5、资产领用业务流程图
领用状态枚举(`UseStatus`):Used 已领用、PendingReturn 待归还、Returned 已归还
```mermaid
flowchart TD
A[选择闲置资产] --> B[填写领用信息
领用人/部门/时间]
B --> C[提交领用申请
POST /assetUse/add]
C --> D[AssetUseService.AddAsync]
D --> E{参数校验
AssetId > 0?}
E -->|失败| F[返回错误提示]
E -->|通过| G[Mapster 映射为 UseRecord]
G --> H[Repository.InsertAsync 入库]
H --> I{插入结果}
I -->|成功| J[状态: Used 已领用]
I -->|失败| K[返回添加失败]
J --> L[资产状态更新为 InUse]
L --> M[领用记录生效]
M --> N{是否归还?}
N -->|待归还| O[状态: PendingReturn]
N -->|已归还| P[更新归还时间
assetUse/update]
P --> Q[状态: Returned 已归还]
Q --> R[资产恢复 Idle 闲置]
```
### 6、资产维修业务流程图
维修状态枚举(`RepairStatus`):Pending 待维修、InRepair 维修中、Completed 已完成、Cancelled 已取消
```mermaid
flowchart TD
A[发现资产故障] --> B[填写报修单
报修单号/资产/报修人/故障描述]
B --> C[提交报修申请
POST /repair/add]
C --> D[RepairService.AddAsync]
D --> E{参数校验
报修单号/资产/报修人}
E -->|失败| F[返回错误信息]
E -->|通过| G[Mapster 映射为 RepairRecord]
G --> H[Repository.InsertAsync]
H --> I[创建报修记录
状态: Pending 待维修]
I --> J[资产状态置为 Repairing]
J --> K{审核处理}
K -->|分配维修| L[状态: InRepair 维修中]
L --> M[录入维修费用 RepairCost]
M --> N{维修结果}
N -->|修复完成| O[填写完成时间
状态: Completed 已完成]
N -->|取消维修| P[状态: Cancelled 已取消]
O --> Q[资产状态恢复 InUse]
P --> R[资产状态恢复/报废评估]
```
### 7、资产调拨业务流程图
调拨状态枚举(`TransferStatus`):PendingConfirm 待确认、Completed 已完成、Cancelled 已取消
```mermaid
flowchart TD
A[发起调拨申请] --> B[填写调拨单
调拨单号/资产/调出部门/调入部门/原因]
B --> C[提交调拨申请
POST /transfer/add]
C --> D[TransferService.AddAsync]
D --> E{参数校验
调拨单号/AssetId}
E -->|失败| F[返回错误信息]
E -->|通过| G[Mapster 映射为 TransferRecord]
G --> H[Repository.InsertAsync]
H --> I[创建调拨记录
状态: PendingConfirm 待确认]
I --> J{调入部门确认}
J -->|确认接收| K[状态: Completed 已完成]
J -->|拒绝/取消| L[状态: Cancelled 已取消]
K --> M[更新资产 DepartmentId
为调入部门]
M --> N[调拨完成]
L --> O[资产归属不变]
```
### 8、资产盘点业务流程图
盘点状态枚举(`InventoryStatus`):InProgress 进行中、Completed 已完成、Cancelled 已取消
盘点采用主子表结构:`Inventory`(主表)一对多 `InventoryDetail`(明细表,通过 `InventoryDetailNav` 导航属性关联)
```mermaid
flowchart TD
A[创建盘点任务] --> B[填写盘点单
盘点单号/名称/时间/盘点人]
B --> C[选择待盘点资产清单]
C --> D[提交盘点申请
POST /inventory/add]
D --> E[InventoryService.AddAsync]
E --> F{参数校验
盘点单号非空}
F -->|失败| G[返回错误信息]
F -->|通过| H[InsertNav 主子表级联插入
Inventory + InventoryDetail]
H --> I[盘点任务创建
状态: InProgress 进行中]
I --> J[逐项核对资产实物]
J --> K[录入实际状态 ActualStatus]
K --> L{比对 ExpectedStatus
与 ActualStatus}
L -->|一致| M[IsMatch=1 标记一致]
L -->|不一致| N[IsMatch=0 标记差异
更新 InventoryDetail]
N --> O[统计 MismatchCount 差异数量]
O --> P[更新盘点主表
POST /inventory/update]
P --> Q{盘点完成?}
Q -->|否| J
Q -->|是| R[状态: Completed 已完成]
R --> S[生成盘点报告]
S --> T[差异资产后续处理
维修/调拨/报废]
```
### 9、通用 CRUD 业务流程图
所有业务模块(资产信息、分类、领用、维修、调拨、盘点、盘点明细)均遵循统一的 CRUD 服务模式,服务类实现 `IApplicationService` 接口。
```mermaid
flowchart TD
A[前端 Avue CRUD 组件] --> B{操作类型}
B -->|查询| C[POST /xxx/pages
反序列化 QueryDto]
B -->|列表| D[GET /xxx/list]
B -->|详情| E[GET /xxx/detail]
B -->|新增| F[POST /xxx/add]
B -->|修改| G[POST /xxx/update]
B -->|删除| H[DELETE /xxx/delete]
C --> I[QueryExp 动态条件拼接
Expressionable.AndIF]
I --> J[ToPageAsync 分页查询]
J --> K[返回 PageResult OutDto]
F --> L[参数校验]
L --> M[Adapt 映射为实体]
M --> N{是否主子表?}
N -->|单表| O[Repository.InsertAsync]
N -->|主子表| P[Context.InsertNav 级联插入]
G --> Q[校验记录是否存在]
Q --> R[Adapt 映射]
R --> S{是否主子表?}
S -->|单表| T[Repository.UpdateAsync]
S -->|主子表| U[Context.UpdateNav 级联更新]
H --> V{是否主子表?}
V -->|单表| W[Repository.DeleteByIdAsync]
V -->|主子表| X[Context.DeleteNav 级联删除]
K --> Y[RestfulResult 统一封装]
O --> Y
P --> Y
T --> Y
U --> Y
W --> Y
X --> Y
```
### 10、数据库初始化流程图
系统启动时通过 `Program.cs` 自动执行 CodeFirst 建表与种子数据初始化(`SeedData` 目录)。
```mermaid
flowchart TD
A[应用启动 Program.Main] --> B[注册服务
SqlSugar/OmiLogin/OmiLog/OmiSystem]
B --> C[构建 WebApplication]
C --> D[配置中间件管道
路由/静态文件/本地化/日志UI]
D --> E[异步数据库初始化]
E --> F{AssetInfo 表是否存在?}
F -->|否| G[CodeFirst.InitTables 建表]
G --> H[插入 AssetInfoSeedData]
H --> I[插入 SysMenuSeedData 菜单]
I --> J[插入 SysDictTypeSeedData 字典]
J --> K[分配角色菜单权限 SysRoleMenu]
F -->|是| L{UseRecord 表是否存在?}
K --> L
L -->|否| M[建表并插入领用种子数据]
L -->|是| N{Category 表是否存在?}
M --> N
N -->|否| O[建表并插入分类种子数据]
N -->|是| P{Inventory 表是否存在?}
O --> P
P -->|否| Q[建表并插入盘点种子数据]
P -->|是| R{InventoryDetail / RepairRecord /
TransferRecord 表是否存在?}
Q --> R
R -->|否| S[依次检测建表并插入种子数据]
R -->|是| T[应用启动完成 app.Run]
S --> T
```
### 11、模块关系与数据流向图
```mermaid
flowchart TD
subgraph 基础数据
CAT[资产分类 Category
层级树 PId]
ASSET[资产信息 AssetInfo
核心实体]
end
subgraph 业务流转
USE[资产领用 UseRecord]
REPAIR[资产维修 RepairRecord]
TRANSFER[资产调拨 TransferRecord]
INV[资产盘点 Inventory]
INVD[盘点明细 InventoryDetail]
end
subgraph 系统支撑
USER[系统用户 SysUser]
ORG[机构部门 SysOrganization]
MENU[菜单权限 SysMenu]
DICT[数据字典 SysDictType/Value]
end
CAT -->|分类归属| ASSET
ASSET -->|领用| USE
ASSET -->|报修| REPAIR
ASSET -->|调拨| TRANSFER
ASSET -->|盘点| INVD
INV -->|一对多| INVD
USER -->|领用人/责任人| USE
USER -->|报修人/维修人| REPAIR
USER -->|调拨人/盘点人| TRANSFER
USER -->|盘点人| INV
ORG -->|使用部门| ASSET
ORG -->|调出/调入部门| TRANSFER
ORG -->|使用部门| USE
DICT -->|资产状态/枚举| ASSET
DICT -->|领用状态| USE
DICT -->|维修状态| REPAIR
DICT -->|调拨状态| TRANSFER
DICT -->|盘点状态| INV
```
---
### 前端技术栈详解
- Vue.js 2.6.x - 核心前端框架
- Element UI - UI组件库
- Avue - 高级表格组件库,提供CRUD表格快速实现
- axios - HTTP客户端,用于前后端数据交互
- i18n国际化支持 - 多语言切换功能
## 📥 安装教程
**部署方式**:IIS部署,简单几步即可完成安装。
### **详细步骤**
1. **下载软件**:从官方网站下载最新版本的RuoVea.Asset安装包。
2. **安装IIS**:确保您的服务器已安装IIS,并配置好相关设置。
3. **部署应用**:将安装包解压到指定目录,并在IIS中创建新的网站。
4. **配置数据库**:按照指南配置数据库连接,确保软件能够正常访问数据。
5. **启动服务**:启动IIS中的RuoVea.Asset服务,并通过浏览器访问以验证安装是否成功。
### 1、Docker部署
方式1、直接复制代码 控制台运行
```bash
docker run --name RuoVea.Asset-container ^
-p YOU_PORT:8080 ^
-e "ConnectionConfigs:0:DbType=Sqlite" ^
-e "ConnectionConfigs:0:ConnectionString=DataSource=./RuoVea.Asset.db" ^
-e "ConnectionConfigs:0:EnableUnderLine=false" ^
-e TZ=UTC ^
-e TZ=Asia/Shanghai ^
--restart=always ^
crpi-ued86xnwae548w9p.cn-shenzhen.personal.cr.aliyuncs.com/ruovea/RuoVea.Asset-img:latest
pause
```
方式2、docker-compose 部署
在文件下中 执行下面命令
```bash
version: '3.9'
services:
RuoVea.Asset-img:
image: 'crpi-ued86xnwae548w9p.cn-shenzhen.personal.cr.aliyuncs.com/ruovea/RuoVea.Asset-img:latest'
restart: always
environment:
- TZ=Asia/Shanghai
- TZ=UTC
- 'ConnectionConfigs:0:EnableUnderLine=false'
- 'ConnectionConfigs:0:ConnectionString=DataSource=./RuoVea.Asset.db'
- 'ConnectionConfigs:0:DbType=Sqlite'
ports:
- 'YOU_PORT:8080'
container_name: RuoVea.Asset-container
```
启动 运行
```bash
docker-compose up -d
```
其它配置参数
```basic
-e "ConnectionConfigs:0:DbType=Sqlite" ^
-e "ConnectionConfigs:0:ConnectionString=DataSource=/RuoVea.Asset.db" ^
-e "ConnectionConfigs:0:EnableUnderLine=true" ^
-e "DataAuditing:CreateTime=CreatedAt" ^
-e "DataAuditing:ModifyTime=UpdatedAt" ^
-e "DataAuditing:Creator=CreatedById" ^
-e "DataAuditing:Modifier=UpdatedById" ^
-e "DataAuditing:TenantId=TenantId" ^
-e "DataAuditing:IsDelete=IsDelete" ^
-e "ExceptionLog:Enabled=true" ^
-e "ExceptionLog:LogToFile=true" ^
-e "ExceptionLog:LogMore=true" ^
-e "RequestLog:Enabled=true" ^
-e "RequestLog:LogToFile=true" ^
-e "RequestLog:LogMore=true" ^
-e "RequestLog:IgnoreApis=" ^
-e TZ=Asia/Shanghai ^
```
## 📋 使用说明
### **默认管理员**
- **账号**:admin
- **密码**:123456
默认用户
- **账号**:ruovea
- **密码**:123456
初始化密码可在项目配置文件中配置,初始化后,数据库中的用户密码将是默认密码加密后的数据。提高安全性。
**提示**:首次登录后,建议立即修改默认密码,以确保账户安全。
### **登录界面**

**操作说明**:输入正确的账号和密码,点击“登录”按钮进入系统。如果忘记密码,可以点击“找回密码”进行重置。
### **用户管理**

**功能描述**:在用户管理界面,可以查看所有用户的基本信息,包括用户名、注册日期、最后登录时间等。支持用户搜索、筛选和批量操作。
### **用户添加**

**操作说明**:点击“添加用户”按钮,填写用户的基本信息,如用户名、密码、邮箱等,然后点击“创建”完成新用户添加。
### **系统设置**

**功能描述**:系统设置界面允许管理员配置软件的各项参数,如数据备份路径、邮件服务器设置、通知模板等。
### **系统设置-编辑**

**操作说明**:选择需要修改的设置项,点击“编辑”按钮,修改参数后点击“保存”应用更改。
---
### **系统日志**
- **差异日志**

**描述**:记录系统中数据的变更历史,帮助管理员追踪数据修改情况。
- **访问日志**

**描述**:记录用户的登录和访问行为,提供详细的访问时间、IP地址等信息。
- **操作日志**

**描述**:记录管理员和用户的操作行为,如添加、编辑、删除数据等。
- **异常日志**

**描述**:记录系统运行中的错误和异常情况,帮助开发者快速定位和解决问题。
---
### **系统设置后-登录界面**

**说明**:完成系统设置后,登录界面会根据新的配置进行更新,确保用户体验的一致性。
### **角色管理**

**功能描述**:角色管理界面允许管理员创建、编辑和删除系统角色。每个角色可以分配不同的权限,控制用户对系统功能的访问范围。支持角色的批量操作和权限继承。
### 项目特点
- 培训文档完善,适合快速上手
- 支持多数据库连接配置
- 提供详细的日志系统,包含操作日志、访问日志、异常日志
- 前端使用 Avue 框架,支持响应式布局
- 支持国际化,提供 I18n.xlsx 配置
- 提供 SeedData 初始化资产类型和存放位置数据
**安全建议:**
- 生产环境务必更换默认的密钥(IssuerSigningKey),使用强随机密钥
- 调整合适的过期时间(ExpiredTime),平衡安全性和用户体验
- 生产环境建议使用HTTPS传输,防止JWT令牌被窃取
- 定期更换JWT密钥,特别是在系统升级或安全事件发生时
2. **性能优化**
- 使用缓存减少数据库访问
- 优化查询语句
- 启用异步操作
3. **部署建议**
- 使用 Docker 容器化部署
- 配置反向代理(Nginx/Apache)
- 启用负载均衡
4. **前端开发注意事项**
- 使用统一的axios实例(`this.$http`)进行Web方法调用
- 所有Web请求会自动添加Authorization token
- 响应数据已统一处理,直接获取`response.data`即可
- 错误信息由axios拦截器统一显示,无需重复处理
### **axios 使用说明**
本项目使用自定义配置的 axios 实例进行前后端数据交互,配置文件位于 `wwwroot/vue/axios.min.min.js`。
#### **axios 实例配置**
```javascript
// 创建axios实例
const axiosInstance = axios.create({
baseURL: Vue.prototype.$baseURL || "", // 基础URL,从Vue全局配置获取
withCredentials: false, // 不发送跨域Cookie
});
// 将axios实例挂载到Vue原型
Vue.prototype.$http = axiosInstance;
```
#### **请求拦截器**
自动在请求头中添加 Authorization token:
```javascript
axiosInstance.interceptors.request.use(config => {
const token = localStorage.getItem("token"); // 从localStorage获取token
token && (config.headers['Authorization'] = `Bearer ${token}`); // 添加Authorization头
return config;
}, error => {
// 请求错误处理
console.error('请求配置错误:', error);
if (error.message.indexOf('timeout') != -1) {
errorMessage('网络超时');
} else if (error.message == 'Network Error') {
errorMessage('网络连接错误');
} else {
if (error.response?.data) {
errorMessage(error.response.statusText);
} else {
errorMessage('接口路径找不到');
}
}
return Promise.reject(error);
});
```
#### **响应拦截器**
统一处理响应数据和错误:
```javascript
axiosInstance.interceptors.response.use(response => {
if (response.status >= 200 && response.status < 300) {
if (response.data.code == 200) {
return response.data.data; // 直接返回响应数据中的data字段
} else {
handleErrorData(response.data); // 处理业务错误
}
return response.data;
} else {
const error = new Error(response.statusText);
error.response = response;
throw error;
}
}, error => {
const { response, message } = error;
if (response) {
handleErrorData(response.status, response.data); // 处理HTTP错误
} else if (error.request) {
errorMessage('请求超时或服务器无响应');
} else {
errorMessage(message);
}
return Promise.reject(error);
});
```
#### **错误处理机制**
```javascript
function handleErrorData(a, b) {
switch (a) {
case 401: case 403: // 未授权或权限不足
errorMessage("未授权,请重新登录!");
// 可以在这里添加跳转到登录页的逻辑
break;
case 404: // 资源未找到
errorMessage("资源未找到");
break;
case 500: // 服务器错误
errorMessage("服务器错误");
break;
case 504: // 网关超时
errorMessage("网关超时");
break;
default:
errorMessage(a.message || '未知错误');
break;
}
}
// 使用Element UI的消息组件显示错误信息
function errorMessage(a) {
ELEMENT.Message.error({
showClose: true,
message: a
});
}
```
#### **在Vue组件中使用**
**GET请求示例:**
```javascript
// 获取用户列表
this.$http.get('/User/getList', {
params: { // URL查询参数
page: 1,
size: 10
}
}).then(data => {
// 直接使用响应数据
this.userList = data;
}).catch(error => {
// 错误已由拦截器统一处理,这里可以添加额外的处理逻辑
console.error('获取用户列表失败:', error);
});
```
**POST请求示例:**
```javascript
// 添加用户
this.$http.post('/User/add', {
username: 'newuser',
email: 'newuser@example.com',
password: '123456'
}).then(data => {
// 直接使用响应数据
this.$message.success('用户添加成功');
this.loadUserList(); // 重新加载用户列表
}).catch(error => {
// 错误已由拦截器统一处理
console.error('添加用户失败:', error);
});
```
**PUT请求示例:**
```javascript
// 更新用户信息
this.$http.put('/User/update', {
id: 1,
username: 'updateduser',
email: 'updateduser@example.com'
}).then(data => {
this.$message.success('用户信息更新成功');
this.loadUserList();
}).catch(error => {
console.error('更新用户信息失败:', error);
});
```
**DELETE请求示例:**
```javascript
// 删除用户
this.$http.delete('/User/delete', {
params: { id: 1 }
}).then(data => {
this.$message.success('用户删除成功');
this.loadUserList();
}).catch(error => {
console.error('删除用户失败:', error);
});
```
#### **使用注意事项**
1. **统一使用 this.$http**:项目已将配置好的 axios 实例挂载到 Vue.prototype.$http,所有组件应使用 this.$http 进行Web方法调用,避免直接使用 axios。
2. **自动添加 token**:请求拦截器会自动从 localStorage 获取 token 并添加到请求头中,无需手动处理。
3. **响应数据处理**:响应拦截器已处理响应数据,直接在 then 回调中使用 data 参数即可,无需再通过 response.data 获取数据。
4. **错误处理**:错误已由响应拦截器统一处理并显示,组件中可以根据需要添加额外的错误处理逻辑。
5. **超时处理**:请求超时会自动显示 "网络超时" 提示。
6. **网络错误**:网络连接错误会自动显示 "网络连接错误" 提示。
7. **跨域配置**:当前配置 withCredentials: false,如果需要发送跨域Cookie,请修改此配置。
通过以上配置,项目实现了统一的 HTTP 请求处理机制,提高了代码的可维护性和一致性。
5. **跨域处理**
- 项目已配置CORS支持
- 如需添加新的跨域来源,请修改Startup.cs中的CORS配置
### 许可证
本项目使用 MIT 许可证,请查看 LICENSE 文件获取更多详情。