Java教程项目实战案例分析

Java教程项目实战案例分析：构建一个全栈任务管理应用

在当今的软件开发领域，掌握单一技术栈已不足以应对复杂的业务需求。一个合格的开发者需要理解从前端到后端，再到数据库的完整数据流。本文将通过一个实战项目——“个人任务管理系统”，来串联Java后端、Vue.js前端以及PostgreSQL数据库，并在过程中穿插关键的CSS布局技巧。这个案例不仅是一个Java教程，更是一个微型的全栈开发演练，旨在展示如何将多种技术有机地结合，构建一个功能完整、结构清晰的Web应用。

项目架构与技术选型

我们的目标是构建一个允许用户创建、查看、更新和删除任务（CRUD）的应用。系统采用经典的前后端分离架构：

• 后端（API Server）：使用Java Spring Boot框架构建RESTful API，负责业务逻辑、数据验证和数据库交互。
• 数据库：选用开源、功能强大的PostgreSQL，利用其可靠性和对复杂查询的良好支持。
• 前端（Web Client）：使用Vue.js 3框架构建用户界面，通过组件化开发模式提升代码的可维护性和复用性。
• 样式与布局：使用纯CSS（结合Flexbox/Grid）进行响应式设计，确保应用在不同设备上都有良好的体验。

这种分离的架构使得前后端可以独立开发、测试和部署，是现代Web应用的主流模式。

后端实战：Spring Boot与PostgreSQL集成

首先，我们搭建后端服务。使用Spring Initializr创建一个新的Spring Boot项目，依赖选择Spring Web, Spring Data JPA以及PostgreSQL Driver。

1. 数据模型与JPA实体

我们定义一个Task实体，对应数据库中的tasks表。

import javax.persistence.*;
import java.time.LocalDateTime;

@Entity
@Table(name = "tasks")
public class Task {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(nullable = false)
    private String title;

    private String description;

    private boolean completed = false;

    private LocalDateTime createdAt;

    private LocalDateTime dueDate;

    // 构造方法、Getter和Setter省略...
}

2. 仓库层与业务逻辑

Spring Data JPA的强大之处在于其仓库接口。我们创建一个继承JpaRepository的接口，即刻拥有基本的CRUD方法。

import org.springframework.data.jpa.repository.JpaRepository;
import java.util.List;

public interface TaskRepository extends JpaRepository {
    // 自定义查询：查找所有未完成的任务
    List findByCompletedFalse();
    // 自定义查询：根据标题关键词搜索
    List findByTitleContainingIgnoreCase(String keyword);
}

3. RESTful API控制器

接下来，创建控制器来处理HTTP请求，并调用服务层（本例中直接调用Repository以简化）。

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.web.bind.annotation.*;
import java.util.List;

@RestController
@RequestMapping("/api/tasks")
public class TaskController {

    @Autowired
    private TaskRepository taskRepository;

    @GetMapping
    public List getAllTasks() {
        return taskRepository.findAll();
    }

    @PostMapping
    @ResponseStatus(HttpStatus.CREATED)
    public Task createTask(@RequestBody Task task) {
        task.setCreatedAt(LocalDateTime.now());
        return taskRepository.save(task);
    }

    @PutMapping("/{id}")
    public Task updateTask(@PathVariable Long id, @RequestBody Task taskDetails) {
        Task task = taskRepository.findById(id)
                .orElseThrow(() -> new RuntimeException("Task not found with id: " + id));
        task.setTitle(taskDetails.getTitle());
        task.setDescription(taskDetails.getDescription());
        task.setCompleted(taskDetails.isCompleted());
        task.setDueDate(taskDetails.getDueDate());
        return taskRepository.save(task);
    }

    @DeleteMapping("/{id}")
    @ResponseStatus(HttpStatus.NO_CONTENT)
    public void deleteTask(@PathVariable Long id) {
        taskRepository.deleteById(id);
    }
}

4. PostgreSQL连接配置

在application.properties文件中配置数据库连接：

spring.datasource.url=jdbc:postgresql://localhost:5432/taskdb
spring.datasource.username=your_username
spring.datasource.password=your_password
spring.datasource.driver-class-name=org.postgresql.Driver

spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.PostgreSQLDialect

至此，一个提供完整CRUD API的Java后端服务就搭建完成了。运行应用后，可以通过http://localhost:8080/api/tasks访问API。

前端实战：Vue.js 3组件化开发

前端部分，我们使用Vue CLI创建一个新项目，并构建几个核心组件。

1. 项目结构与核心组件

• TaskList.vue：显示任务列表。
• TaskForm.vue
• TaskItem.vue：代表单个任务项的展示与操作单元。
• App.vue：根组件，整合所有子组件并管理状态。

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                        .allowedOrigins("http://localhost:5173") // Vue开发服务器地址
                        .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                        .allowedHeaders("*")
                        .allowCredentials(false);
            }
        };
    }
}