# 可婕后端管理系统-NETMVC版本 **Repository Path**: starry123/kegie-admin-web ## Basic Information - **Project Name**: 可婕后端管理系统-NETMVC版本 - **Description**: 可婕后端管理系统 是一个专注于后台管理系统开发的开源项目，提供简洁高效的界面和强大的功能模块，适用于各种管理平台的快速搭建。 - **Primary Language**: C# - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2025-04-18 - **Last Updated**: 2025-12-26 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # KeGie.Admin ## 介绍 KeGie.Admin 是一个基于 .NET Core 8.0 构建的现代化 Web 应用开发模板，集成了丰富的企业级功能，如认证授权、用户管理、角色管理、系统日志等，为开发者提供了一个快速搭建高质量 Web 应用的基础框架。 ## 🛠️ 软件架构 **技术栈**： - **后端**：.NET Core 8.0 + MVC - **前端**：Vue.js 2.6.x + Element UI + Avue + axios - **ORM**：SqlSugar - **认证**：JWT + RuoVea.OmiLogin - **数据库**：默认 SQLite，支持多数据库切换 - **日志**：RuoVea.OmiLog - **国际化**：内置多语言支持 ### 前端技术栈详解 - Vue.js 2.6.x - 核心前端框架 - Element UI - UI组件库 - Avue - 高级表格组件库，提供CRUD表格快速实现 - axios - HTTP客户端，用于前后端数据交互 - i18n国际化支持 - 多语言切换功能 ## 📥 安装教程 **部署方式**：IIS部署，简单几步即可完成安装。 ### **详细步骤** 1. **下载软件**：从官方网站下载最新版本的KeGie.Admin安装包。 2. **安装IIS**：确保您的服务器已安装IIS，并配置好相关设置。 3. **部署应用**：将安装包解压到指定目录，并在IIS中创建新的网站。 4. **配置数据库**：按照指南配置数据库连接，确保软件能够正常访问数据。 5. **启动服务**：启动IIS中的KeGie.Admin服务，并通过浏览器访问以验证安装是否成功。 ### 1、Docker部署 方式1、直接复制代码 控制台运行 ```bash docker run --name KeGie.Admin-container ^ -p YOU_PORT:8080 ^ -e "ConnectionConfigs:0:DbType=Sqlite" ^ -e "ConnectionConfigs:0:ConnectionString=DataSource=./KeGie.Admin.db" ^ -e "ConnectionConfigs:0:EnableUnderLine=false" ^ -e TZ=UTC ^ -e TZ=Asia/Shanghai ^ --restart=always ^ crpi-ued86xnwae548w9p.cn-shenzhen.personal.cr.aliyuncs.com/ruovea/KeGie.Admin-img:latest pause ``` 方式2、docker-compose 部署 在文件下中 执行下面命令 ```bash version: '3.9' services: KeGie.Admin-img: image: 'crpi-ued86xnwae548w9p.cn-shenzhen.personal.cr.aliyuncs.com/ruovea/KeGie.Admin-img:latest' restart: always environment: - TZ=Asia/Shanghai - TZ=UTC - 'ConnectionConfigs:0:EnableUnderLine=false' - 'ConnectionConfigs:0:ConnectionString=DataSource=./KeGie.Admin.db' - 'ConnectionConfigs:0:DbType=Sqlite' ports: - 'YOU_PORT:8080' container_name: KeGie.Admin-container ``` 启动 运行 ```bash docker-compose up -d ``` 其它配置参数 ```basic -e "ConnectionConfigs:0:DbType=Sqlite" ^ -e "ConnectionConfigs:0:ConnectionString=DataSource=/KeGie.Admin.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) **说明**：完成系统设置后，登录界面会根据新的配置进行更新，确保用户体验的一致性。 ### 项目特点 - 培训文档完善，适合快速上手 - 支持多数据库连接配置 - 提供详细的日志系统，包含操作日志、访问日志、异常日志 - 前端使用 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 文件获取更多详情。