# BillCat **Repository Path**: ningmeng2000/BillCat ## Basic Information - **Project Name**: BillCat - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-11-07 - **Last Updated**: 2025-11-17 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # BillCat 账单管理系统 这是一个基于前后端分离架构的账单管理系统。 ## 技术栈 ### 后端 - **框架**: Spring Boot 2.1.18 - **JDK版本**: 1.8 - **数据库**: MySQL 8.0 - **ORM框架**: MyBatis Plus 3.4.3 - **数据库连接池**: Druid 1.2.8 - **构建工具**: Maven ### 前端 - **框架**: Vue 2.6 - **UI组件库**: Element UI 2.15 - **状态管理**: Vuex 3.6 - **路由**: Vue Router 3.5 - **HTTP客户端**: Axios - **构建工具**: Vue CLI 5.0 ## 项目结构 ``` BillCat/ ├── backend/ # 后端项目 │ ├── src/ │ │ ├── main/ │ │ │ ├── java/ │ │ │ │ └── com/ │ │ │ │ └── billcat/ │ │ │ │ ├── BillCatApplication.java # 启动类 │ │ │ │ ├── common/ # 公共类 │ │ │ │ ├── config/ # 配置类 │ │ │ │ ├── controller/ # 控制器 │ │ │ │ ├── entity/ # 实体类 │ │ │ │ ├── mapper/ # Mapper接口 │ │ │ │ └── service/ # Service层 │ │ │ └── resources/ │ │ │ ├── mapper/ # Mapper XML文件 │ │ │ ├── sql/ # SQL脚本 │ │ │ ├── application.yml # 主配置文件 │ │ │ ├── application-dev.yml # 开发环境配置 │ │ │ └── application-prod.yml # 生产环境配置 │ │ └── test/ # 测试代码 │ ├── pom.xml # Maven依赖配置 │ └── .gitignore │ ├── frontend/ # 前端项目 │ ├── public/ │ │ └── index.html # HTML模板 │ ├── src/ │ │ ├── api/ # API接口 │ │ │ ├── request.js # axios封装 │ │ │ └── health.js # 健康检查API │ │ ├── assets/ # 静态资源 │ │ ├── components/ # 公共组件 │ │ ├── router/ # 路由配置 │ │ │ └── index.js │ │ ├── store/ # Vuex状态管理 │ │ │ └── index.js │ │ ├── styles/ # 全局样式 │ │ │ ├── index.scss │ │ │ └── variables.scss │ │ ├── views/ # 页面组件 │ │ │ ├── Home.vue │ │ │ └── About.vue │ │ ├── App.vue # 根组件 │ │ └── main.js # 入口文件 │ ├── package.json # npm依赖配置 │ ├── vue.config.js # Vue CLI配置 │ ├── babel.config.js # Babel配置 │ ├── .eslintrc.js # ESLint配置 │ └── .gitignore │ └── README.md # 项目说明文档 ``` ## 快速开始 ### 环境要求 #### 后端 - JDK 1.8+ - Maven 3.6+ - MySQL 8.0+ #### 前端 - Node.js 14+ - npm 6+ 或 yarn 1.22+ ### 安装步骤 #### 1. 克隆项目 ```bash git clone cd BillCat ``` #### 2. 数据库配置 创建数据库并初始化表结构： ```bash # 方式一：执行SQL脚本 mysql -u root -p < backend/src/main/resources/sql/init.sql # 方式二：手动创建 ``` ```sql CREATE DATABASE billcat CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; ``` 然后执行 `backend/src/main/resources/sql/init.sql` 中的SQL语句创建表结构。 修改后端配置文件 `backend/src/main/resources/application.yml` 中的数据库连接信息： ```yaml spring: datasource: url: jdbc:mysql://localhost:3306/billcat?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai username: root password: your_password ``` #### 3. 启动后端 ```bash cd backend mvn clean install mvn spring-boot:run ``` 后端服务将在 `http://localhost:8080` 启动。 #### 4. 启动前端 ```bash cd frontend npm install npm run serve ``` 前端应用将在 `http://localhost:3000` 启动。 ### 访问应用 在浏览器中访问：`http://localhost:3000` ## 开发指南 ### 后端开发 #### 添加新的API接口 1. 在 `controller` 包下创建控制器类 2. 使用 `@RestController` 和 `@RequestMapping` 注解 3. 返回统一的 `Result` 格式 示例： ```java @RestController @RequestMapping("/users") public class UserController { @Autowired private UserService userService; @GetMapping("/{id}") public Result getUser(@PathVariable Long id) { User user = userService.getById(id); return Result.success(user); } } ``` #### 数据库操作 使用MyBatis Plus进行数据库操作： 1. 在 `entity` 包下创建实体类，使用 `@TableName` 注解指定表名 2. 在 `mapper` 包下创建Mapper接口，继承 `BaseMapper` 3. 在 `service` 包下创建Service接口，继承 `IService` 4. 在 `service/impl` 包下创建Service实现类，继承 `ServiceImpl` 示例： ```java // 实体类 @Data @TableName("user") public class User { @TableId(type = IdType.AUTO) private Long id; private String username; } // Mapper接口 @Mapper public interface UserMapper extends BaseMapper { } // Service接口 public interface UserService extends IService { } // Service实现类 @Service public class UserServiceImpl extends ServiceImpl implements UserService { } ``` #### MyBatis Plus常用功能 **CRUD操作**： ```java // 插入 userService.save(user); // 根据ID查询 User user = userService.getById(1L); // 条件查询 QueryWrapper wrapper = new QueryWrapper<>(); wrapper.eq("username", "admin"); User user = userService.getOne(wrapper); // 更新 userService.updateById(user); // 删除 userService.removeById(1L); // 分页查询 Page page = new Page<>(1, 10); IPage pageResult = userService.page(page); ``` ### 前端开发 #### 添加新页面 1. 在 `src/views/` 下创建Vue组件 2. 在 `src/router/index.js` 中添加路由配置 #### 调用后端API 1. 在 `src/api/` 下创建API文件 2. 使用封装好的 `request` 方法 示例： ```javascript import request from './request' export function getUserList() { return request({ url: '/users', method: 'get' }) } ``` ## 构建部署 ### 后端打包 ```bash cd backend mvn clean package ``` 生成的jar包位于 `backend/target/billcat-backend-1.0.0.jar` 运行： ```bash java -jar billcat-backend-1.0.0.jar --spring.profiles.active=prod ``` ### 前端打包 ```bash cd frontend npm run build ``` 生成的静态文件位于 `frontend/dist/` 目录，可以部署到Nginx等Web服务器。 ## 配置说明 ### 后端配置 - `application.yml`: 主配置文件，包含MyBatis Plus配置 - `application-dev.yml`: 开发环境配置 - `application-prod.yml`: 生产环境配置 **MyBatis Plus配置说明**： ```yaml mybatis-plus: mapper-locations: classpath*:/mapper/**/*.xml # Mapper XML文件位置 type-aliases-package: com.billcat.entity # 实体类包路径 global-config: db-config: id-type: AUTO # 主键策略（自动递增） logic-delete-field: deleted # 逻辑删除字段 logic-delete-value: 1 logic-not-delete-value: 0 configuration: map-underscore-to-camel-case: true # 驼峰命名转换 log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # SQL日志 ``` 切换环境： ```bash # 开发环境 mvn spring-boot:run -Dspring-boot.run.profiles=dev # 生产环境 java -jar app.jar --spring.profiles.active=prod ``` ### 前端配置 - `vue.config.js`: Vue CLI配置，包括开发服务器、代理等 - `.env.local`: 本地环境变量（需自行创建） ## API文档 后端API接口说明： ### 健康检查 - **URL**: `/api/health` - **方法**: GET - **说明**: 检查后端服务是否正常运行 **响应示例**： ```json { "status": "UP", "timestamp": "2025-10-30T12:00:00", "application": "BillCat Backend", "version": "1.0.0" } ``` ### 用户管理 #### 分页查询用户列表 - **URL**: `/api/user/page` - **方法**: GET - **参数**: - `current`: 当前页码（默认1） - `size`: 每页大小（默认10） #### 查询所有用户 - **URL**: `/api/user/list` - **方法**: GET #### 根据ID查询用户 - **URL**: `/api/user/{id}` - **方法**: GET #### 根据用户名查询用户 - **URL**: `/api/user/username/{username}` - **方法**: GET #### 新增用户 - **URL**: `/api/user` - **方法**: POST - **请求体**: ```json { "username": "test", "password": "123456", "nickname": "测试用户", "email": "test@example.com", "phone": "13800138000" } ``` #### 更新用户 - **URL**: `/api/user` - **方法**: PUT #### 删除用户 - **URL**: `/api/user/{id}` - **方法**: DELETE ## 常见问题 ### 1. 跨域问题 后端已配置CORS，允许所有域名访问。如需修改，请编辑 `backend/src/main/java/com/billcat/config/CorsConfig.java`。 ### 2. 端口冲突 - 后端默认端口：8080 - 前端默认端口：3000 如需修改： - 后端：修改 `application.yml` 中的 `server.port` - 前端：修改 `vue.config.js` 中的 `devServer.port` ### 3. 数据库连接失败 请确保： - MySQL服务已启动 - 数据库已创建 - 配置文件中的用户名和密码正确 ## 贡献指南 欢迎提交Issue和Pull Request！ ## 许可证 MIT License ## 联系方式 如有问题，请联系：[your-email@example.com](mailto:your-email@example.com)