\u6211\u4eec\u5c06\u9879\u76ee\u5206\u4e3a\u4e24\u4e2a\u90e8\u5206\uff1a<\/p>\n
\u9879\u76ee\u7ed3\u6784\u5982\u4e0b\uff1a<\/p>\n
task-manager\/\n\u251c\u2500\u2500 backend\/ # Spring Boot \u9879\u76ee\n\u2502 \u251c\u2500\u2500 src\/\n\u2502 \u2502 \u251c\u2500\u2500 main\/\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 java\/\n\u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 com\/\n\u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 example\/\n\u2502 \u2502 \u2502 \u2502 \u251c\u2500\u2500 controller\/\n\u2502 \u2502 \u2502 \u2502 \u251c\u2500\u2500 model\/\n\u2502 \u2502 \u2502 \u2502 \u251c\u2500\u2500 repository\/\n\u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 service\/\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 resources\/\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 application.properties\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 data.sql\n\u2502 \u2502 \u2514\u2500\u2500 test\/\n\u2502 \u2514\u2500\u2500 pom.xml\n\u2514\u2500\u2500 frontend\/ # Vue.js 3 \u9879\u76ee\n \u251c\u2500\u2500 public\/\n \u251c\u2500\u2500 src\/\n \u2502 \u251c\u2500\u2500 assets\/\n \u2502 \u251c\u2500\u2500 components\/\n \u2502 \u251c\u2500\u2500 router\/\n \u2502 \u251c\u2500\u2500 views\/\n \u2502 \u251c\u2500\u2500 App.vue\n \u2502 \u2514\u2500\u2500 main.js\n \u251c\u2500\u2500 package.json\n \u2514\u2500\u2500 vite.config.js<\/code><\/pre>\n
\n2. \u540e\u7aef\u5b9e\u73b0\uff08Spring Boot + Spring Data JPA + MySQL\uff09<\/h2>\n2.1 \u914d\u7f6e MySQL \u6570\u636e\u5e93<\/h3>\n
\u5728 application.properties<\/code> \u4e2d\u914d\u7f6e MySQL \u8fde\u63a5\uff1a<\/p>\nspring.datasource.url=jdbc:mysql:\/\/localhost:3306\/task_manager\nspring.datasource.username=root\nspring.datasource.password=yourpassword\nspring.jpa.hibernate.ddl-auto=update\nspring.jpa.show-sql=true<\/code><\/pre>\n2.2 \u521b\u5efa Task \u5b9e\u4f53\u7c7b<\/h3>\n
\u5728 model<\/code> \u5305\u4e2d\u521b\u5efa Task.java<\/code>\uff1a<\/p>\npackage com.example.model;\n\nimport jakarta.persistence.*;\nimport java.time.LocalDateTime;\n\n@Entity\npublic class Task {\n @Id\n @GeneratedValue(strategy = GenerationType.IDENTITY)\n private Long id;\n\n private String name;\n private String priority;\n private int duration; \/\/ in minutes\n private LocalDateTime scheduleTime;\n private LocalDateTime startTime;\n private LocalDateTime endTime;\n private LocalDateTime deadline;\n\n \/\/ Getters and Setters\n public Long getId() { return id; }\n public void setId(Long id) { this.id = id; }\n public String getName() { return name; }\n public void setName(String name) { this.name = name; }\n public String getPriority() { return priority; }\n public void setPriority(String priority) { this.priority = priority; }\n public int getDuration() { return duration; }\n public void setDuration(int duration) { this.duration = duration; }\n public LocalDateTime getScheduleTime() { return scheduleTime; }\n public void setScheduleTime(LocalDateTime scheduleTime) { this.scheduleTime = scheduleTime; }\n public LocalDateTime getStartTime() { return startTime; }\n public void setStartTime(LocalDateTime startTime) { this.startTime = startTime; }\n public LocalDateTime getEndTime() { return endTime; }\n public void setEndTime(LocalDateTime endTime) { this.endTime = endTime; }\n public LocalDateTime getDeadline() { return deadline; }\n public void setDeadline(LocalDateTime deadline) { this.deadline = deadline; }\n}<\/code><\/pre>\n2.3 \u521b\u5efa TaskRepository \u63a5\u53e3<\/h3>\n
\u5728 repository<\/code> \u5305\u4e2d\u521b\u5efa TaskRepository.java<\/code>\uff1a<\/p>\npackage com.example.repository;\n\nimport com.example.model.Task;\nimport org.springframework.data.jpa.repository.JpaRepository;\nimport java.util.List;\n\npublic interface TaskRepository extends JpaRepository<Task, Long> {\n List<Task> findByNameContaining(String name); \/\/ \u641c\u7d22\u529f\u80fd\n}<\/code><\/pre>\n2.4 \u521b\u5efa TaskService \u670d\u52a1\u7c7b<\/h3>\n
\u5728 service<\/code> \u5305\u4e2d\u521b\u5efa TaskService.java<\/code>\uff1a<\/p>\npackage com.example.service;\n\nimport com.example.model.Task;\nimport com.example.repository.TaskRepository;\nimport org.springframework.beans.factory.annotation.Autowired;\nimport org.springframework.stereotype.Service;\nimport java.util.List;\n\n@Service\npublic class TaskService {\n @Autowired\n private TaskRepository taskRepository;\n\n public List<Task> getAllTasks() {\n return taskRepository.findAll();\n }\n\n public Task getTaskById(Long id) {\n return taskRepository.findById(id).orElse(null);\n }\n\n public Task createTask(Task task) {\n return taskRepository.save(task);\n }\n\n public Task updateTask(Long id, Task taskDetails) {\n Task task = taskRepository.findById(id).orElse(null);\n if (task != null) {\n task.setName(taskDetails.getName());\n task.setPriority(taskDetails.getPriority());\n task.setDuration(taskDetails.getDuration());\n task.setScheduleTime(taskDetails.getScheduleTime());\n task.setStartTime(taskDetails.getStartTime());\n task.setEndTime(taskDetails.getEndTime());\n task.setDeadline(taskDetails.getDeadline());\n return taskRepository.save(task);\n }\n return null;\n }\n\n public void deleteTask(Long id) {\n taskRepository.deleteById(id);\n }\n\n public List<Task> searchTasks(String name) {\n return taskRepository.findByNameContaining(name);\n }\n}<\/code><\/pre>\n2.5 \u521b\u5efa TaskController \u63a7\u5236\u5668<\/h3>\n
\u5728 controller<\/code> \u5305\u4e2d\u521b\u5efa TaskController.java<\/code>\uff1a<\/p>\npackage com.example.controller;\n\nimport com.example.model.Task;\nimport com.example.service.TaskService;\nimport org.springframework.beans.factory.annotation.Autowired;\nimport org.springframework.web.bind.annotation.*;\n\nimport java.util.List;\n\n@RestController\n@RequestMapping("\/api\/tasks")\npublic class TaskController {\n @Autowired\n private TaskService taskService;\n\n @GetMapping\n public List<Task> getAllTasks() {\n return taskService.getAllTasks();\n }\n\n @GetMapping("\/{id}")\n public Task getTaskById(@PathVariable Long id) {\n return taskService.getTaskById(id);\n }\n\n @PostMapping\n public Task createTask(@RequestBody Task task) {\n return taskService.createTask(task);\n }\n\n @PutMapping("\/{id}")\n public Task updateTask(@PathVariable Long id, @RequestBody Task taskDetails) {\n return taskService.updateTask(id, taskDetails);\n }\n\n @DeleteMapping("\/{id}")\n public void deleteTask(@PathVariable Long id) {\n taskService.deleteTask(id);\n }\n\n @GetMapping("\/search")\n public List<Task> searchTasks(@RequestParam String name) {\n return taskService.searchTasks(name);\n }\n}<\/code><\/pre>\n
\n3. \u524d\u7aef\u5b9e\u73b0\uff08Vue.js 3\uff09<\/h2>\n3.1 \u521b\u5efa Vue.js \u9879\u76ee<\/h3>\n
\u4f7f\u7528 Vite \u521b\u5efa Vue.js \u9879\u76ee\uff1a<\/p>\n
npm create vite@latest frontend --template vue\ncd frontend\nnpm install<\/code><\/pre>\n3.2 \u5b89\u88c5 Axios<\/h3>\n
\u5b89\u88c5 Axios \u7528\u4e8e HTTP \u8bf7\u6c42\uff1a<\/p>\n
npm install axios<\/code><\/pre>\n3.3 \u521b\u5efa Task \u7ec4\u4ef6<\/h3>\n
\u5728 src\/components\/<\/code> \u4e0b\u521b\u5efa TaskList.vue<\/code> \u548c TaskForm.vue<\/code>\u3002<\/p>\nTaskList.vue<\/h4>\n<template>\n <div>\n <h1>Task List<\/h1>\n <input v-model="searchQuery" placeholder="Search tasks" @input="searchTasks" \/>\n <ul>\n <li v-for="task in tasks" :key="task.id">\n {{ task.name }} - {{ task.priority }}\n <button @click="editTask(task)">Edit<\/button>\n <button @click="deleteTask(task.id)">Delete<\/button>\n <\/li>\n <\/ul>\n <\/div>\n<\/template>\n\n<script>\nimport axios from 'axios';\n\nexport default {\n data() {\n return {\n tasks: [],\n searchQuery: ''\n };\n },\n created() {\n this.fetchTasks();\n },\n methods: {\n fetchTasks() {\n axios.get('http:\/\/localhost:8080\/api\/tasks').then(response => {\n this.tasks = response.data;\n });\n },\n searchTasks() {\n axios.get(`http:\/\/localhost:8080\/api\/tasks\/search?name=${this.searchQuery}`).then(response => {\n this.tasks = response.data;\n });\n },\n editTask(task) {\n this.$emit('edit-task', task);\n },\n deleteTask(id) {\n axios.delete(`http:\/\/localhost:8080\/api\/tasks\/${id}`).then(() => {\n this.fetchTasks();\n });\n }\n }\n};\n<\/script><\/code><\/pre>\nTaskForm.vue<\/h4>\n<template>\n <div>\n <h2>{{ editMode ? 'Edit Task' : 'Create Task' }}<\/h2>\n <form @submit.prevent="submitForm">\n <input v-model="task.name" placeholder="Name" required \/>\n <input v-model="task.priority" placeholder="Priority" required \/>\n <input v-model="task.duration" type="number" placeholder="Duration (minutes)" required \/>\n <input v-model="task.scheduleTime" type="datetime-local" placeholder="Schedule Time" \/>\n <input v-model="task.startTime" type="datetime-local" placeholder="Start Time" \/>\n <input v-model="task.endTime" type="datetime-local" placeholder="End Time" \/>\n <input v-model="task.deadline" type="datetime-local" placeholder="Deadline" \/>\n <button type="submit">{{ editMode ? 'Update' : 'Create' }}<\/button>\n <\/form>\n <\/div>\n<\/template>\n\n<script>\nimport axios from 'axios';\n\nexport default {\n props: {\n taskToEdit: {\n type: Object,\n default: () => ({})\n }\n },\n data() {\n return {\n task: { ...this.taskToEdit },\n editMode: !!this.taskToEdit.id\n };\n },\n methods: {\n submitForm() {\n if (this.editMode) {\n axios.put(`http:\/\/localhost:8080\/api\/tasks\/${this.task.id}`, this.task).then(() => {\n this.$emit('task-updated');\n });\n } else {\n axios.post('http:\/\/localhost:8080\/api\/tasks', this.task).then(() => {\n this.$emit('task-created');\n });\n }\n }\n }\n};\n<\/script><\/code><\/pre>\n3.4 \u5728 App.vue \u4e2d\u4f7f\u7528\u7ec4\u4ef6<\/h3>\n<template>\n <div>\n <TaskForm :taskToEdit="taskToEdit" @task-created="fetchTasks" @task-updated="fetchTasks" \/>\n <TaskList @edit-task="setTaskToEdit" \/>\n <\/div>\n<\/template>\n\n<script>\nimport TaskForm from '.\/components\/TaskForm.vue';\nimport TaskList from '.\/components\/TaskList.vue';\n\nexport default {\n components: {\n TaskForm,\n TaskList\n },\n data() {\n return {\n taskToEdit: {}\n };\n },\n methods: {\n fetchTasks() {\n this.$refs.taskList.fetchTasks();\n },\n setTaskToEdit(task) {\n this.taskToEdit = task;\n }\n }\n};\n<\/script><\/code><\/pre>\n
\n4. \u8fd0\u884c\u9879\u76ee<\/h2>\n\n- \u542f\u52a8 Spring Boot \u540e\u7aef\uff1a\n
cd backend\nmvn spring-boot:run<\/code><\/pre>\n<\/li>\n- \u542f\u52a8 Vue.js \u524d\u7aef\uff1a\n
cd frontend\nnpm run dev<\/code><\/pre>\n<\/li>\n- \u8bbf\u95ee
http:\/\/localhost:5173<\/code> \u5373\u53ef\u4f7f\u7528 Task \u7ba1\u7406\u529f\u80fd\u3002<\/li>\n<\/ol>\n
\n\u901a\u8fc7\u4ee5\u4e0a\u6b65\u9aa4\uff0c\u6211\u4eec\u5feb\u901f\u5b9e\u73b0\u4e86\u4e00\u4e2a\u57fa\u4e8e Spring Boot + Vue.js \u7684 Task CRUDS \u5e94\u7528\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
1. \u9879\u76ee\u7ed3\u6784 \u6211\u4eec\u5c06\u9879\u76ee\u5206\u4e3a\u4e24\u4e2a\u90e8\u5206\uff1a \u540e\u7aef\uff1aSpring Boot + Spring Data JPA + MySQL \u524d\u7aef\uff1aVue.js 3 \u9879\u76ee\u7ed3\u6784\u5982\u4e0b\uff1a task-manager\/ \u251c\u2500\u2500 backend\/ # Spring Boot \u9879\u76ee \u2502 \u251c\u2500\u2500 src\/ \u2502 \u2502 \u251c\u2500\u2500 main\/ \u2502 \u2502 \u2502 \u251c\u2500\u2500 java\/ \u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 com\/ \u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2500 example\/ \u2502 \u2502 \u2502 \u2502 \u251c\u2500\u2500 controller\/ \u2502 \u2502 \u2502 \u2502 […] →Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-1867","post","type-post","status-publish","format-standard","hentry","category-5"],"_links":{"self":[{"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1867"}],"collection":[{"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1867"}],"version-history":[{"count":1,"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1867\/revisions"}],"predecessor-version":[{"id":1868,"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1867\/revisions\/1868"}],"wp:attachment":[{"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1867"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1867"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1867"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}