网站建设与管理李洪心西湖区高端网站建设

网站建设与管理李洪心,西湖区高端网站建设,广州燃气集团有限公司,毕业设计 建设旅游网站先不细究功能细节#xff0c;先把项目跑起来 一篇文章最多5606个字#xff0c;因此同样分多P来记录 为fastapi准备环境 # 1. 创建项目文件夹 mkdir fastvue-todo cd fastvue-todo# 2. 创建并激活虚拟环境 (推荐) python -m venv venv # Windows: # venv\Scripts\activate # L…先不细究功能细节先把项目跑起来一篇文章最多5606个字因此同样分多P来记录为fastapi准备环境# 1. 创建项目文件夹 mkdir fastvue-todo cd fastvue-todo # 2. 创建并激活虚拟环境 (推荐) python -m venv venv # Windows: # venv\Scripts\activate # Linux/macOS: source venv/bin/activate # 3. 安装必要的库 # fastapi: 核心框架 # uvicorn: ASGI 服务器用于运行应用 # pydantic: FastAPI 用它来进行数据验证和序列化 (用于定义你的 Task 模型) # python-multipart: 用于处理表单数据尽管我们主要用 JSON但装上无妨 pip install fastapi uvicorn pydantic python-multipart # ❗ 我们还需要安装 CORS 库用于让前端可以访问后端 pip install python-multipart uvicorn[standard] fastapi建立fastapi文件在 fastvue-todo 目录下创建一个文件 main.py并输入以下代码# main.pyfromfastapiimportFastAPIfrompydanticimportBaseModelfromtypingimportList,Optionalfromfastapi.middleware.corsimportCORSMiddleware# 导入 CORS# --------------------------# 1. Pydantic 模型定义# --------------------------# 它定义了任务的数据结构与你刚才确定的字段一致classTask(BaseModel):id:int# 唯一标识title:str# 任务内容/描述is_completed:boolFalse# 状态默认未完成# --------------------------# 2. FastAPI 初始化# --------------------------appFastAPI()# --------------------------# 3. 配置 CORS# --------------------------# 这允许在不同端口运行的前端 (Vue 3) 访问这个后端 (FastAPI)。# ⚠️ 注意: 在实际生产环境中你应该将 * 替换为你的前端域名例如: [http://localhost:5173]origins[http://localhost,http://localhost:8000,http://localhost:5173,# Vue 3/Vite 默认端口]app.add_middleware(CORSMiddleware,allow_originsorigins,# 允许的来源列表allow_credentialsTrue,# 允许 Cookie/认证信息allow_methods[*],# 允许所有 HTTP 方法 (GET, POST, PUT, DELETE)allow_headers[*],# 允许所有 HTTP 头)# --------------------------# 4. 简单的数据存储 (内存中)# --------------------------# 生产环境应该使用数据库这里为了快速启动我们使用一个列表来模拟存储tasks_db:List[Task][Task(id1,title学习 FastAPI,is_completedFalse),Task(id2,title搭建 Vue 3 前端,is_completedTrue),]next_id3# 用于分配下一个任务 ID# --------------------------# 5. API 路由定义 (CRUD)# --------------------------# GET /tasks: 读取所有任务 (R - Read All)app.get(/tasks,response_modelList[Task])defread_tasks():returntasks_db# POST /tasks: 创建新任务 (C - Create)app.post(/tasks,response_modelTask)defcreate_task(task:Task):globalnext_id task.idnext_id next_id1tasks_db.append(task)returntask# PUT /tasks/{task_id}: 更新任务状态 (U - Update)app.put(/tasks/{task_id},response_modelTask)defupdate_task(task_id:int,task:Task):# 查找任务fori,tinenumerate(tasks_db):ift.idtask_id:tasks_db[i]task# 替换整个任务对象returntask# 如果没找到FastAPI 默认会返回 404fromfastapiimportHTTPExceptionraiseHTTPException(status_code404,detailTask not found)# DELETE /tasks/{task_id}: 删除任务 (D - Delete)app.delete(/tasks/{task_id})defdelete_task(task_id:int):globaltasks_db initial_lenlen(tasks_db)# 使用列表推导式删除任务tasks_db[tfortintasks_dbift.id!task_id]iflen(tasks_db)initial_len:fromfastapiimportHTTPExceptionraiseHTTPException(status_code404,detailTask not found)return{message:Task deleted successfully}运行后端(fastapi)在命令行中确保你在 fastvue-todo 目录下并执行uvicorn main:app --reload 这里的main是指文件名main.py 是将其映射为app 现在你的 FastAPI 后端应该已经在运行了默认地址是 http://127.0.0.1:8000。测试运行起来的API接口FastAPI 的一个巨大优势是它基于OpenAPI (Swagger)规范自动生成交互式文档。这使得测试接口变得非常简单无需额外工具。1. 访问 API 文档请确保后端仍在运行中如果在命令行中运行了uvicorn main:app --reload它应该一直运行着。打开浏览器访问以下地址[http://127.0.0.1:8000/docs](http://127.0.0.1:8000/docs)\text{[http://127.0.0.1:8000/docs](http://127.0.0.1:8000/docs)}[http://127.0.0.1:8000/docs](http://127.0.0.1:8000/docs)将看到一个名为“Swagger UI”的界面列出了刚才定义的所有 API 接口。2. 测试 CRUD 操作A. 读取所有任务 (R - Read All)接口:GET /tasks操作:点击/tasks旁边的GET标签展开它。点击右侧的“Try it out”按钮。点击“Execute”按钮。预期结果:在Response body中你应该会看到一个包含我们初始定义的两个任务的 JSON 数组[{id:1,title:学习 FastAPI,is_completed:false},{id:2,title:搭建 Vue 3 前端,is_completed:true}]B. 创建新任务 (C - Create)接口:POST /tasks操作:点击/tasks旁边的POST标签展开它。点击“Try it out”按钮。在Request body区域修改 JSON 内容id字段可以省略或设置为任意值因为后端会分配新的 ID{title:连接前端和后端,is_completed:false}点击“Execute”按钮。预期结果:在Response body中你会看到新创建的任务对象其中id应该被分配为3{id:3,title:连接前端和后端,is_completed:false}C. 更新任务状态 (U - Update)接口:PUT /tasks/{task_id}操作:我们来将 ID 为 3 的新任务标记为已完成。点击/tasks/{task_id}旁边的PUT标签展开它。点击“Try it out”按钮。在task_id路径参数中输入3。在Request body区域输入完整的任务对象确保包含 ID{id:3,title:连接前端和后端,is_completed:true}点击“Execute”按钮。预期结果:在Response body中你会看到任务 3 的is_completed字段变成了true。Vue的创建# 1. 退出当前的fastvue-todo目录回到父级目录cd..# 2. 使用 npm (Node Package Manager) 初始化一个 Vue 项目# 如果你没有安装 Node.js/npm请先安装。npmcreate vuelatest# 提示: 遇到提示时输入以下选项# Project name: (输入) vue-frontend# Add TypeScript? (输入) No# Add JSX Support? (输入) No# Add Vue Router? (输入) No# Add Pinia? (输入) No# Add Vitest? (输入) No# Add Cypress? (输入) No# Add ESLint? (输入) No# 3. 进入新的前端目录cdvue-frontend# 4. 安装依赖npminstall# 5. 运行开发服务器npmrun dev