个人开发7

XML

org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-data-jpa mysql mysql-connector-java 配置数据库连接（application.properties）： Properties spring.datasource.url=jdbc:mysql://localhost:3306/data spring.datasource.username=root spring.datasource.password=root spring.jpa.hibernate.ddl-auto=update 前端（Vue）

使用Vue CLI创建项目：
Bash
vue create task-frontend
添加Element-UI和Axios：
Bash
npm install element-ui axios --save
配置全局Axios实例（src/utils/request.js）：
JavaScript
import axios from 'axios'
const service = axios.create({
baseURL: 'http://localhost:8080/api',
timeout: 5000
})
export default service
问题： 首次启动后端时MySQL连接失败。
解决： 检查MySQL服务是否启动，并确认spring.datasource.url中的端口和数据库名称正确。
目标： 实现任务创建、分配和状态查询接口。
实体类设计（Task.java）
@Entity
public class Task {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String title;
private String description;
private String assignee; // 分配对象
private String status; // 状态（待分配/进行中/已完成）
// Getters & Setters
}
Repository接口（TaskRepository.java）

Java
public interface TaskRepository extends JpaRepository<Task, Long> {
List findByAssignee(String assignee);
}
Controller（TaskController.java）

Java
@RestController
@RequestMapping("/api/tasks")
public class TaskController {
@Autowired
private TaskRepository taskRepository;

@PostMapping
public Task createTask(@RequestBody Task task) {
    task.setStatus("待分配");
    return taskRepository.save(task);
}

@PutMapping("/{id}/assign")
public Task assignTask(@PathVariable Long id, @RequestParam String assignee) {
    Task task = taskRepository.findById(id).orElseThrow();
    task.setAssignee(assignee);
    task.setStatus("进行中");
    return taskRepository.save(task);
}

}
问题： 使用@RequestBody接收JSON数据时报400错误。
解决： 检查前端请求头是否设置Content-Type: application/json，并确保字段名称与实体类一致。
目标： 实现任务列表展示和分配表单。
任务列表组件（TaskList.vue）

问题： 跨域请求被浏览器拦截。
解决： 后端添加CORS配置（WebMvcConfig.java）：
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:8081")
.allowedMethods("*");
}
}
优化点：

任务状态自动更新：在Vue组件中添加watch监听任务列表变化：
JavaScript
watch: {
tasks: {
handler(newVal) {
this.tasks = newVal
},
deep: true
}
}
后端添加数据校验：使用@Valid注解验证请求参数：
Java
@PostMapping
public Task createTask(@Valid @RequestBody Task task) {
// ...
}
跨域请求被拦截
现象：前端请求后端接口时出现CORS错误
解决：
// 添加CORS配置类
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:8081")
.allowedMethods("*");
}
} //
@RequestBody接收JSON报400错误
现象：后端无法解析前端发送的JSON数据
解决：
检查请求头是否设置Content-Type: application/json
使用@Valid注解进行数据校验：
Java
@PostMapping
public Task createTask(@Valid @RequestBody Task task) { ... } //
MySQL连接失败
现象：启动时提示数据库连接异常
解决：
检查MySQL服务是否启动（sudo systemctl status mysql）
确认application.properties中的URL、用户名密码正确
排查防火墙或云服务器安全组是否开放3306端口
ElementUI表单校验失效
现象：提交时未触发校验规则

rules: {
title: [{ required: true, message: '必填项', trigger: 'blur' }]
} //
动态显示/隐藏表单字段
现象：根据条件切换字段时布局错乱

...

// 使用v-show替代v-if避免DOM重建问题
弹窗无法拖拽
现象：任务分配弹窗需要支持拖拽
// 监听弹窗DOM的鼠标事件
bindDragEvent() {
const dialog = this.$refs.dialog.$el.querySelector('.el-dialog');
dialog.addEventListener('mousedown', this.handleMouseDown);
} //
接口返回数据格式不一致
现象：前端无法解析后端返回的嵌套对象
解决：统一响应格式：
public class Result {
private int code;
private String msg;
private T data;
} //
任务状态不同步
现象：修改状态后列表未实时更新
优化：
watch: {
tasks: {
handler(newVal) { this.tasks = newVal },
deep: true
}
} //