本章节将指导你如何从零开始搭建项目的开发环境。我们将分为前端和后端两个部分进行。 ## 一、前端环境搭建前端项目我们已经准备好了现成的代码模板，你只需要导入并启动即可。 ### 1.1 导入前端程序将提供的 `lite-ims/frontend` 文件夹导入到你的代码编辑器（如 VSCode或IDEA）中。 ### 1.2 下载启动依赖在前端项目根目录下打开终端，执行以下命令安装项目所需的依赖库：这个已经下载好了 ```bash npm install ``` ### 1.3 启动测试依赖安装完成后，执行以下命令启动开发服务器： ```bash npm run dev ``` ### 1.4 明确接口访问地址启动成功后，控制台会输出访问地址，通常为：`http://localhost:5173`。在浏览器中打开该地址，你应该能看到系统的登录页面。此时尝试登录会报错，因为后端服务尚未启动。 --- ## 二、后端项目初始化后端项目我们将基于 Spring Boot + MyBatis-Plus 进行搭建。为了简化开发，我们将模拟“逆向工程”的过程，直接导入基础的实体类、Mapper 和 Service 代码。 ### 2.1 创建 Spring Boot 项目创建一个标准的 Spring Boot Maven 项目，项目结构如下： ```text com.atguigu.liteims ├── common // 通用工具类 (Result等) ├── config // 配置类 (MyBatisPlus, Knife4j等) ├── controller // 控制器层 (处理Web请求) ├── entity // 实体类 (对应数据库表) ├── mapper // DAO层 (MyBatis Mapper接口) ├── service // 业务逻辑层接口 │ └── impl // 业务逻辑层实现 └── LiteImsApplication.java // 启动类 ``` ### 2.2 引入依赖 (pom.xml) 在 `pom.xml` 中引入 Web、MySQL、MyBatis-Plus、Lombok 和 Knife4j 等核心依赖： ```xml org.springframework.boot spring-boot-starter-web com.mysql mysql-connector-j runtime com.baomidou mybatis-plus-boot-starter 3.5.3.1 org.projectlombok lombok true com.github.xiaoymin knife4j-openapi3-jakarta-spring-boot-starter 4.3.0 org.springframework.boot spring-boot-starter-aop org.springframework.boot spring-boot-starter-test com.alibaba easyexcel 3.3.2 ``` ### 2.3 配置文件 (application.yml) 在 `src/main/resources/application.yml` 中配置端口、数据库连接和 MyBatis-Plus： ```yaml server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver # 注意：修改为你的数据库名，createDatabaseIfNotExist=true 表示库不存在时自动创建 url: jdbc:mysql://localhost:3306/lite_ims?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai&createDatabaseIfNotExist=true username: root password: password # 修改为你的数据库密码 # 全局时间格式化配置 jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: Asia/Shanghai # 禁用 data.sql 自动执行 (防止重复初始化) sql: init: mode: never mybatis-plus: configuration: # 开启驼峰命名映射 (user_name -> userName) map-underscore-to-camel-case: true # 控制台打印 SQL 语句 (开发调试用) log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: # 逻辑删除字段配置 (0:正常, 1:删除) logic-delete-field: isDeleted logic-delete-value: 1 logic-not-delete-value: 0 ``` --- ## 三、导入基础代码 ### 3.1 统一返回结果 (Result) 在 `common` 包下导入 `Result.java`。这是一个泛型类，用于统一后端接口的返回格式（code, msg, data）。 ```java package com.atguigu.liteims.common; import lombok.Data; @Data public class Result { private Integer code; // 状态码: 200成功, 其他失败 private String message; // 提示信息 private T data; // 返回数据 // ... 省略 success/fail 等静态工厂方法 } ``` --- ## 四、导入业务代码 (模拟逆向工程) 在实际开发中，我们通常会使用 MyBatis-Plus 的代码生成器根据数据库表自动生成 Entity、Mapper 和 Service 代码。为了节省时间，请将提供的以下包中的代码直接复制到项目中： 1. **Entity (实体类)**: 复制到 `entity` 包 * `SysUser.java` (用户) * `Product.java` (商品) * `Category.java` (分类) * `Customer.java` (客户) * `SaleOrder.java` (订单) * `SaleOrderItem.java` (订单项) 2. **Mapper (持久层)**: 复制到 `mapper` 包 * 包含对应的接口，如 `ProductMapper.java`。 * **注意**: 它们都继承了 `BaseMapper`，因此自带了 CRUD 方法。 3. **Service (业务层)**: 复制到 `service` 包及其 `impl` 子包 * 接口继承 `IService` * 实现类继承 `ServiceImpl` * **注意**: 此时这些 Service 中只有基础的增删改查功能，没有任何复杂的业务逻辑。 ### 示例代码结构 **Product.java (实体类示例)** ```java @Data @TableName("product") // 指定数据库表名 public class Product { @TableId(type = IdType.AUTO) // 主键自增 private Long id; private String name; private BigDecimal price; // ... 其他字段 } ``` **ProductMapper.java (Mapper示例)** ```java @Mapper public interface ProductMapper extends BaseMapper { // 继承 BaseMapper，自动拥有 insert, delete, update, select 等方法 } ``` **ProductService.java (Service接口示例)** ```java public interface ProductService extends IService { // 继承 IService，自动拥有 save, remove, update, get, list, page 等方法 } ``` --- ## 五、下一步至此，我们的项目骨架已经搭建完成。 * 前端可以启动并访问页面。 * 后端已经拥有了连接数据库的能力，并且所有表的增删改查基础代码都已就绪。但目前后端还没有对外提供 API 接口（**Controller 层为空**），因此前端页面还无法显示数据。在下一章节 `05_进销存系统_功能实现.md` 中，我们将手动编写 Controller 层代码，并完善复杂的业务逻辑，让系统真正“活”起来。

04_进销存系统_项目搭建