FastAPI+VUE3创建一个项目的步骤模板(二)
接上文
修改VUE内容
打开文件 vue-frontend/src/App.vue，用以下代码替换其内容。我们使用浏览器的原生 fetch API 进行请求：
<script setup> import { ref, onMounted } from 'vue'; // ------------------------------------ // 1. 定义状态和常量 // ------------------------------------ const tasks = ref([]); // 存放从后端获取的任务列表 const newTaskTitle = ref(''); // 存储输入框的内容 const apiBaseUrl = 'http://127.0.0.1:8000'; // FastAPI 后端地址 // ------------------------------------ // 2. 获取任务的函数 (Read - 读取) // ------------------------------------ async function fetchTasks() { try { const response = await fetch(`${apiBaseUrl}/tasks`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } tasks.value = await response.json(); } catch (error) { console.error("获取任务失败:", error); alert('无法连接到 FastAPI 后端！请确保后端服务已运行在 http://127.0.0.1:8000'); } } // ------------------------------------ // 3. 增加新任务 (Create - 创建) // ------------------------------------ async function addTask() { if (!newTaskTitle.value.trim()) { alert('任务标题不能为空！'); return; } const taskData = { // ID 不需要提供，FastAPI 会自动分配 title: newTaskTitle.value, is_completed: false }; try { const response = await fetch(`${apiBaseUrl}/tasks`, { method: 'POST', // 使用 POST 方法 headers: { 'Content-Type': 'application/json', // 告诉后端我们发送的是 JSON }, body: JSON.stringify(taskData), // 将 JavaScript 对象转换为 JSON 字符串发送 }); if (response.ok) { const createdTask = await response.json(); tasks.value.push(createdTask); // 将新创建的任务（包含后端分配的ID）添加到前端列表 newTaskTitle.value = ''; // 清空输入框 } else { throw new Error('创建任务失败'); } } catch (error) { console.error("创建任务时发生错误:", error); alert('创建任务失败，请检查后端连接。'); } } // ------------------------------------ // 4. 切换任务完成状态 (Update - 更新) // ------------------------------------ async function toggleTask(task) { // 1. 立即在前端切换状态 (乐观更新) const newState = !task.is_completed; // 2. 准备发送给后端的数据 const updatedTaskData = { id: task.id, title: task.title, is_completed: newState // 发送新的状态 }; try { const response = await fetch(`${apiBaseUrl}/tasks/${task.id}`, { method: 'PUT', // 使用 PUT 方法进行全量更新 headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(updatedTaskData), }); if (response.ok) { // 3. 如果成功，更新本地状态 task.is_completed = newState; } else { // 4. 如果失败，回滚本地状态并报错 throw new Error(`更新任务状态失败, 状态码: ${response.status}`); } } catch (error) { console.error(`更新任务 ${task.id} 失败:`, error); alert('更新任务失败，请检查后端连接。'); // 如果请求失败，保持任务原有状态 } } // ------------------------------------ // 5. 删除任务 (Delete - 删除) // ------------------------------------ async function deleteTask(taskId) { if (!confirm('确定要删除这个任务吗？')) { return; } try { const response = await fetch(`${apiBaseUrl}/tasks/${taskId}`, { method: 'DELETE', // 使用 DELETE 方法 }); if (response.ok) { // 1. 如果后端删除成功，在前端列表中过滤掉该任务 tasks.value = tasks.value.filter(t => t.id !== taskId); } else { // 2. 如果后端返回 404 等，则抛出错误 throw new Error(`删除任务失败, 状态码: ${response.status}`); } } catch (error) { console.error(`删除任务 ${taskId} 失败:`, error); alert('删除任务失败，请检查后端连接。'); } } // ------------------------------------ // 6. 生命周期钩子 // ------------------------------------ // 组件挂载后立即调用 fetchTasks onMounted(fetchTasks); </script> <template> <div class="container"> <h1>📝 FastAPI & Vue 3 任务列表</h1> <div class="add-task-form"> <input type="text" v-model="newTaskTitle" @keyup.enter="addTask" placeholder="输入新的任务标题..." /> <button @click="addTask">添加任务</button> </div> <ul class="task-list" v-if="tasks.length"> <li v-for="task in tasks" :key="task.id" :class="{ completed: task.is_completed }"> <span class="title" @click="toggleTask(task)"> {{ task.title }} </span> <button class="delete-btn" @click="deleteTask(task.id)"> 删除 </button> </li> </ul> <p v-else class="empty-message"> 🎉 当前没有任务。快创建一个吧！ </p> <p class="status-info"> 已成功连接到后端：**{{ apiBaseUrl }}** </p> </div> </template> <style> /* 样式部分保持一致性 */ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f0f2f5; color: #333; } .container { max-width: 600px; margin: 50px auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } h1 { text-align: center; color: #42b883; /* Vue 绿色 */ margin-bottom: 25px; } .add-task-form { display: flex; gap: 10px; margin-bottom: 25px; } .add-task-form input { flex-grow: 1; padding: 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; } .add-task-form button { background-color: #42b883; color: white; border: none; padding: 12px 20px; border-radius: 6px; cursor: pointer; white-space: nowrap; transition: background-color 0.2s; } .add-task-form button:hover { background-color: #369c6b; } .task-list { list-style: none; padding: 0; } .task-list li { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; margin-bottom: 10px; background: #fcfcfc; border-radius: 6px; border-left: 5px solid #42b883; transition: all 0.3s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .task-list li.completed { opacity: 0.6; border-left-color: #aaa; background: #f4f4f4; } .title { cursor: pointer; flex-grow: 1; font-size: 1.1em; } .task-list li.completed .title { text-decoration: line-through; } .delete-btn { background-color: #ff4d4f; color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; } .delete-btn:hover { background-color: #d9363e; } .empty-message { text-align: center; padding: 20px; color: #666; font-style: italic; } .status-info { margin-top: 30px; padding-top: 15px; border-top: 1px solid #eee; font-size: 0.85em; text-align: center; color: #999; } </style>将上面的内容替换原文件。