# 菜谱管理系统 **Repository Path**: starry123/KJ.Cook ## Basic Information - **Project Name**: 菜谱管理系统 - **Description**: KJ.Cook 是一款基于 .NET Core 8.0 开发的现代化菜谱管理系统，专为美食爱好者、厨师和餐饮从业者设计。系统提供了完整的菜谱管理、食材管理、工具管理和烹饪指南功能，支持多语言国际化，具备企业级的认证授权和日志系统。 - **Primary Language**: C# - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2025-12-10 - **Last Updated**: 2025-12-26 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # KJ.Cook ## 项目简介 KJ.Cook 是一款基于 .NET Core 8.0 开发的现代化菜谱管理系统，专为美食爱好者、厨师和餐饮从业者设计。系统提供了完整的菜谱管理、食材管理、工具管理和烹饪指南功能，支持多语言国际化，具备企业级的认证授权和日志系统。 ### 核心定位 - 面向个人用户：记录和分享美食菜谱 - 面向专业厨师：管理复杂菜谱和烹饪流程 - 面向餐饮企业：标准化菜品制作流程 - 开发学习模板：展示现代化 Web 应用架构 ![Img](Doc/img/home.jpeg) ## 🛠️ 软件架构 **技术栈**： - **后端**：.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. **下载软件**：从官方网站下载最新版本的KJ.Cook安装包。 2. **安装IIS**：确保您的服务器已安装IIS，并配置好相关设置。 3. **部署应用**：将安装包解压到指定目录，并在IIS中创建新的网站。 4. **配置数据库**：按照指南配置数据库连接，确保软件能够正常访问数据。 5. **启动服务**：启动IIS中的KJ.Cook服务，并通过浏览器访问以验证安装是否成功。 ### 1、Docker部署 方式1、直接复制代码 控制台运行 ```bash docker run --name kjcook-container ^ -p YOU_PORT:8080 ^ -e "ConnectionConfigs:0:DbType=Sqlite" ^ -e "ConnectionConfigs:0:ConnectionString=DataSource=./KJ.Cook.db" ^ -e "ConnectionConfigs:0:EnableUnderLine=false" ^ -e TZ=UTC ^ -e TZ=Asia/Shanghai ^ --restart=always ^ crpi-ued86xnwae548w9p.cn-shenzhen.personal.cr.aliyuncs.com/ruovea/kjcook-img:latest pause ``` 方式2、docker-compose 部署 在文件下中 执行下面命令 ```bash version: '3.9' services: kjcook-img: image: 'crpi-ued86xnwae548w9p.cn-shenzhen.personal.cr.aliyuncs.com/ruovea/kjcook-img:latest' restart: always environment: - TZ=Asia/Shanghai - TZ=UTC - 'ConnectionConfigs:0:EnableUnderLine=false' - 'ConnectionConfigs:0:ConnectionString=DataSource=./KJ.Cook.db' - 'ConnectionConfigs:0:DbType=Sqlite' ports: - 'YOU_PORT:8080' container_name: kjcook-container ``` 启动 运行 ```bash docker-compose up -d ``` 其它配置参数 ```basic -e "ConnectionConfigs:0:DbType=Sqlite" ^ -e "ConnectionConfigs:0:ConnectionString=DataSource=/KJ.Cook.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 ^ ``` ## 📋 功能说明 ### 1. 系统管理 #### 用户认证与授权 - **登录系统**：支持账号密码登录，提供默认管理员账号 - **权限管理**：基于角色的访问控制，细粒度权限分配 - **密码安全**：密码加密存储，支持密码重置功能 **默认账号**： - **管理员**：admin / 123456 - **普通用户**：ruovea / 123456 **安全建议**：首次登录后，请立即修改默认密码 #### 系统配置 - **基本设置**：系统标题、关键词、描述等配置 - **安全设置**：JWT密钥、过期时间等安全参数配置 - **日志设置**：操作日志、访问日志、异常日志开关配置 #### 日志管理 - **操作日志**：记录所有用户操作行为 - **访问日志**：追踪用户登录和访问记录 - **异常日志**：捕获系统运行错误和异常 - **差异日志**：记录数据变更历史，支持回溯 ### 2. 菜谱管理 #### 菜品管理 - **菜品创建**：支持添加菜品基本信息、难度等级、制作方法 - **菜品编辑**：实时修改菜品信息，支持Markdown格式制作方法 - **菜品查看**：详细展示菜品信息，包括制作步骤、所需食材等 - **菜品列表**：支持搜索、筛选、排序功能 ### 3. 食材管理 #### 产品分类 - **分类创建**：创建食材分类，如蔬菜、肉类、调料等 - **分类层级**：支持多级分类，构建食材分类体系 - **分类管理**：统一管理所有食材分类 ![Img](Doc/img/Category.jpeg) #### 菜品管理详情 ![Img](Doc/img/Dish.jpeg) #### 产品管理 - **食材录入**：添加食材基本信息、分类、单位等 - **食材编辑**：修改食材信息，支持批量操作 - **食材列表**：支持按分类筛选，快速查找食材 ![Img](Doc/img/Product.jpeg) #### 标签管理 - **标签创建**：为菜品添加分类标签 - **标签关联**：将标签与菜品关联，便于分类浏览 - **标签列表**：统一管理所有标签 ![Img](Doc/img/Tag.jpeg) #### 烹饪工具管理 - **工具录入**：添加烹饪工具信息 - **工具分类**：按功能分类管理工具 - **工具列表**：支持搜索和筛选功能 ![Img](Doc/img/Tool.jpeg) #### 产品单位管理 - **单位创建**：添加食材计量单位，如克、千克、个等 - **单位管理**：统一管理所有计量单位 ![Img](Doc/img/Unit.jpeg) ### 4. 国际化与响应式设计 #### 国际化支持 - **多语言切换**：支持中英文切换 - **语言配置**：通过I18n.xlsx文件配置语言包 - **自动适配**：根据浏览器语言自动切换语言 #### 响应式设计 - **移动端适配**：支持手机、平板等移动设备访问 - **桌面端优化**：提供最佳桌面浏览体验 - **响应式布局**：自适应不同屏幕尺寸 ### 5. 开发与部署 #### 开发特性 - **模块化设计**：清晰的代码结构，便于扩展和维护 - **API文档**：提供完整的API接口文档 - **开发工具支持**：支持VS Code、Visual Studio等开发工具 - **调试模式**：提供详细的调试信息 #### 部署选项 - **IIS部署**：支持Windows IIS服务器部署 - **Docker部署**：提供Docker镜像，支持容器化部署 - **Linux部署**：支持在Linux服务器上运行 - **云服务器部署**：支持阿里云、腾讯云等云服务器部署 ## 📖 界面说明 ### **登录界面** ![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 请求处理机制，提高了代码的可维护性和一致性。 ### 6. 其他配置 #### 跨域处理 - 项目已配置CORS支持 - 如需添加新的跨域来源，请修改Startup.cs中的CORS配置 #### 性能优化 - 使用缓存减少数据库访问 - 优化查询语句 - 启用异步操作 #### 安全建议 - 生产环境务必更换默认的密钥（IssuerSigningKey），使用强随机密钥 - 调整合适的过期时间（ExpiredTime），平衡安全性和用户体验 - 生产环境建议使用HTTPS传输，防止JWT令牌被窃取 - 定期更换JWT密钥，特别是在系统升级或安全事件发生时 ### 许可证 本项目使用 MIT 许可证，请查看 LICENSE 文件获取更多详情。