我们选择Vue 3作为前端框架，Spring Boot 2.7作为后端框架，MySQL 8作为数据库。这个组合技术成熟，社区资源丰富，能快速构建稳定应用。
首先确保你的开发环境已安装以下软件：
创建前端项目：
```bash npm create vue@latest vehicle-archive-frontend cd vehicle-archive-frontend npm install ```创建后端项目：
```bash 访问 https://start.spring.io/ 选择以下配置： Project: Maven Language: Java Spring Boot: 2.7.18 Group: com.vehicle Artifact: archive Packaging: Jar Java: 17 依赖：Spring Web, Spring Data JPA, MySQL Driver ```在MySQL中创建数据库和车辆档案核心表：
```sql CREATE DATABASE vehicle_archive DEFAULT CHARACTER SET utf8mb4; USE vehicle_archive; CREATE TABLE vehicle ( id BIGINT PRIMARY KEY AUTO_INCREMENT, vin VARCHAR(17) NOT NULL UNIQUE COMMENT '车辆识别码', license_plate VARCHAR(20) NOT NULL COMMENT '车牌号', brand VARCHAR(50) NOT NULL COMMENT '品牌', model VARCHAR(50) NOT NULL COMMENT '型号', production_date DATE NOT NULL COMMENT '生产日期', purchase_date DATE NOT NULL COMMENT '购买日期', engine_number VARCHAR(50) COMMENT '发动机号', color VARCHAR(20) COMMENT '颜色', mileage INT DEFAULT 0 COMMENT '里程数', status TINYINT DEFAULT 1 COMMENT '状态：1-正常 2-维修 3-报废', created_time DATETIME DEFAULT CURRENT_TIMESTAMP, updated_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, INDEX idx_license_plate (license_plate), INDEX idx_status (status) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; CREATE TABLE maintenance_record ( id BIGINT PRIMARY KEY AUTO_INCREMENT, vehicle_id BIGINT NOT NULL, maintenance_date DATE NOT NULL COMMENT '保养日期', mileage_at_maintenance INT NOT NULL COMMENT '保养时里程', cost DECIMAL(10,2) NOT NULL COMMENT '费用', service_type VARCHAR(50) NOT NULL COMMENT '服务类型', description TEXT COMMENT '详细描述', next_maintenance_date DATE COMMENT '下次保养日期', created_time DATETIME DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (vehicle_id) REFERENCES vehicle(id) ON DELETE CASCADE ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; ```创建Vehicle实体类：
```java @Entity @Table(name = "vehicle") @Data @NoArgsConstructor @AllArgsConstructor public class Vehicle { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; @Column(nullable = false, unique = true, length = 17) private String vin; @Column(nullable = false, length = 20) private String licensePlate; @Column(nullable = false, length = 50) private String brand; @Column(nullable = false, length = 50) private String model; @Column(nullable = false) private LocalDate productionDate; @Column(nullable = false) private LocalDate purchaseDate; @Column(length = 50) private String engineNumber; @Column(length = 20) private String color; @Column(nullable = false) private Integer mileage = 0; @Column(nullable = false) private Integer status = 1; @Column(updatable = false) private LocalDateTime createdTime; private LocalDateTime updatedTime; } ```创建VehicleRepository接口：
```java @Repository public interface VehicleRepository extends JpaRepository
创建VehicleService：
```java @Service @Transactional public class VehicleService { @Autowired private VehicleRepository vehicleRepository; public Vehicle addVehicle(Vehicle vehicle) { if (vehicleRepository.findByVin(vehicle.getVin()).isPresent()) { throw new IllegalArgumentException("VIN已存在"); } return vehicleRepository.save(vehicle); } public Vehicle updateVehicle(Long id, Vehicle vehicle) { Vehicle existing = vehicleRepository.findById(id) .orElseThrow(() -> new IllegalArgumentException("车辆不存在")); if (!existing.getVin().equals(vehicle.getVin())) { Optional创建VehicleController：
```java @RestController @RequestMapping("/api/vehicles") @CrossOrigin(origins = "http://localhost:5173") public class VehicleController { @Autowired private VehicleService vehicleService; @PostMapping public ResponseEntity在application.properties中配置数据库连接：
```properties spring.application.name=vehicle-archive server.port=8080 spring.datasource.url=jdbc:mysql://localhost:3306/vehicle_archive?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai spring.datasource.username=root spring.datasource.password=your_password spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver spring.jpa.hibernate.ddl-auto=update spring.jpa.show-sql=true spring.jpa.properties.hibernate.format_sql=true spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL8Dialect logging.level.com.vehicle.archive=DEBUG ```在前端项目中安装必要依赖：
```bash npm install axios element-plus @element-plus/icons-vue npm install pinia vue-router@4 ```创建src/services/api.js：
```javascript import axios from 'axios'; const api = axios.create({ baseURL: 'http://localhost:8080/api', timeout: 10000, headers: { 'Content-Type': 'application/json' } }); // 请求拦截器 api.interceptors.request.use( config => { // 可以在这里添加token等认证信息 return config; }, error => { return Promise.reject(error); } ); // 响应拦截器 api.interceptors.response.use( response => { return response.data; }, error => { if (error.response) { console.error('API Error:', error.response.data); } else { console.error('Network Error:', error.message); } return Promise.reject(error); } ); export default api; ```创建src/services/vehicleService.js：
```javascript import api from './api'; export const vehicleService = { // 添加车辆 addVehicle(vehicleData) { return api.post('/vehicles', vehicleData); }, // 更新车辆 updateVehicle(id, vehicleData) { return api.put(`/vehicles/${id}`, vehicleData); }, // 删除车辆 deleteVehicle(id) { return api.delete(`/vehicles/${id}`); }, // 获取单个车辆 getVehicle(id) { return api.get(`/vehicles/${id}`); }, // 搜索车辆 searchVehicles(keyword, status) { const params = {}; if (keyword) params.keyword = keyword; if (status) params.status = status; return api.get('/vehicles', { params }); } }; ```创建src/components/VehicleList.vue：
```vue