# 资产管理系统 **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 - **国际化**:内置多语言支持 ## **资产管理系统** ### **资产信息管理** #### 资产信息列表 ![Img](/Doc/img/资产信息.png) **功能描述**:资产信息列表界面展示所有资产的基本信息,包括资产编号、名称、类别、购买日期、使用状态等。支持资产的搜索、筛选、排序和批量操作。提供资产的导入导出功能。 #### 资产信息查看 ![Img](/Doc/img/资产信息-查看.png) **功能描述**:资产信息查看界面展示单条资产的详细信息,包括资产图片、规格型号、购买价格、使用部门、存放位置等。支持资产信息的修改和历史记录查看。 ### **资产分类管理** #### 资产分类列表 ![Img](/Doc/img/资产分类.png) **功能描述**:资产分类列表界面展示所有资产分类信息,包括分类编号、名称、描述等。支持分类的层级管理和批量操作。 #### 资产分类查看 ![Img](/Doc/img/资产分类-查看.png) **功能描述**:资产分类查看界面展示分类的详细信息和该分类下的所有资产。支持分类信息的修改和资产的快速导航。 ### **资产盘点管理** #### 资产盘点列表 ![Img](/Doc/img/资产盘点.png) **功能描述**:资产盘点列表界面展示所有盘点任务的基本信息,包括盘点编号、盘点日期、盘点状态等。支持盘点任务的创建、启动和完成操作。 #### 资产盘点查看 ![Img](/Doc/img/资产盘点-查看.png) **功能描述**:资产盘点查看界面展示盘点任务的详细信息和盘点结果。支持盘点差异的处理和盘点报告的生成。 ### **资产维修管理** #### 资产维修列表 ![Img](/Doc/img/资产维修.png) **功能描述**:资产维修列表界面展示所有维修申请的基本信息,包括维修编号、资产名称、申请日期、维修状态等。支持维修申请的审核、分配和完成操作。 #### 资产维修查看 ![Img](/Doc/img/资产维修-查看.png) **功能描述**:资产维修查看界面展示维修申请的详细信息和维修历史记录。支持维修费用的录入和维修状态的更新。 ### **资产调拨管理** #### 资产调拨列表 ![Img](/Doc/img/资产调拨.png) **功能描述**:资产调拨列表界面展示所有调拨申请的基本信息,包括调拨编号、资产名称、调出部门、调入部门等。支持调拨申请的审核和执行操作。 #### 资产调拨查看 ![Img](/Doc/img/资产调拨-查看.png) **功能描述**:资产调拨查看界面展示调拨申请的详细信息和调拨历史记录。支持调拨状态的跟踪和完成确认。 ### **资产领用记录** ![Img](/Doc/img/资产领用记录.png) **功能描述**:资产领用记录界面展示所有资产的领用和归还记录。支持领用记录的查询、统计和导出。提供资产使用情况的分析报表。 --- ## 🔄 业务逻辑流程图 > 以下流程图基于后端模型(`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 初始化密码可在项目配置文件中配置,初始化后,数据库中的用户密码将是默认密码加密后的数据。提高安全性。 **提示**:首次登录后,建议立即修改默认密码,以确保账户安全。 ### **登录界面** ![Img](/Doc/img/login.png) **操作说明**:输入正确的账号和密码,点击“登录”按钮进入系统。如果忘记密码,可以点击“找回密码”进行重置。 ### **用户管理** ![Img](/Doc/img/user.png) **功能描述**:在用户管理界面,可以查看所有用户的基本信息,包括用户名、注册日期、最后登录时间等。支持用户搜索、筛选和批量操作。 ### **用户添加** ![Img](/Doc/img/user-add.png) **操作说明**:点击“添加用户”按钮,填写用户的基本信息,如用户名、密码、邮箱等,然后点击“创建”完成新用户添加。 ### **系统设置** ![Img](/Doc/img/setting.png) **功能描述**:系统设置界面允许管理员配置软件的各项参数,如数据备份路径、邮件服务器设置、通知模板等。 ### **系统设置-编辑** ![Img](/Doc/img/setting-edit.png) **操作说明**:选择需要修改的设置项,点击“编辑”按钮,修改参数后点击“保存”应用更改。 --- ### **系统日志** - **差异日志** ![Img](/Doc/img/log-diff.png) **描述**:记录系统中数据的变更历史,帮助管理员追踪数据修改情况。 - **访问日志** ![Img](/Doc/img/log-vis.png) **描述**:记录用户的登录和访问行为,提供详细的访问时间、IP地址等信息。 - **操作日志** ![Img](/Doc/img/log-op.png) **描述**:记录管理员和用户的操作行为,如添加、编辑、删除数据等。 - **异常日志** ![Img](/Doc/img/log-ex.png) **描述**:记录系统运行中的错误和异常情况,帮助开发者快速定位和解决问题。 --- ### **系统设置后-登录界面** ![Img](/Doc/img/login-after.png) **说明**:完成系统设置后,登录界面会根据新的配置进行更新,确保用户体验的一致性。 ### **角色管理** ![Img](/Doc/img/role.png) **功能描述**:角色管理界面允许管理员创建、编辑和删除系统角色。每个角色可以分配不同的权限,控制用户对系统功能的访问范围。支持角色的批量操作和权限继承。 ### 项目特点 - 培训文档完善,适合快速上手 - 支持多数据库连接配置 - 提供详细的日志系统,包含操作日志、访问日志、异常日志 - 前端使用 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 文件获取更多详情。