Python全栈实战 Day 1FastAPI Vue3项目搭建前言这是“10天Python全栈项目实战”系列的第1篇。本系列将使用以下技术完成一个前后端分离的后台管理系统PythonFastAPIVue3MySQLSQLAlchemyJWTDockerNginx本系列所说的“10天”是指用10天时间完成一个完整的全栈项目闭环并不代表10天就能成为高级全栈工程师。系列完整目录在这里添加你已经发布的总目录文章链接。今天需要完成的目标非常明确创建FastAPI后端和Vue3前端并让Vue页面成功显示后端返回的数据。一、今天最终要实现的效果完成本文后我们将得到两个项目python-fullstack-project ├── backend # FastAPI后端 └── frontend # Vue3前端请求过程如下Vue3页面 ↓ Axios发送HTTP请求 FastAPI接口 ↓ 返回JSON数据 Vue3页面显示“后端连接成功”最终页面效果在这里插入Vue页面显示“后端连接成功”的截图。二、准备开发环境本文使用的主要环境工具作用Python后端开发语言FastAPIPython后端框架Uvicorn启动FastAPI服务Node.js运行Vue开发工具Vue3前端框架Vite前端开发和构建工具Axios调用后端接口先打开终端检查环境python --version node -v npm -v建议将自己的实际版本写在文章中例如Python以自己电脑显示的版本为准 Node.js以自己电脑显示的版本为准 npm以自己电脑显示的版本为准不要直接照抄别人的环境版本。在这里插入环境版本截图。三、创建项目目录打开终端执行mkdir python-fullstack-project cd python-fullstack-project mkdir backend最终目录python-fullstack-project └── backend接下来先创建后端项目。四、创建Python虚拟环境进入后端目录cd backend创建虚拟环境python -m venv .venvWindows CMD激活方式.venv\Scripts\activate.batWindows PowerShell激活方式.venv\Scripts\Activate.ps1激活成功后终端前面一般会出现(.venv)安装FastAPI和Uvicornpip install fastapi uvicorn[standard]生成依赖文件pip freeze requirements.txt当前目录结构backend ├── .venv └── requirements.txt五、创建第一个FastAPI接口在backend目录中创建main.py写入以下代码from fastapi import FastAPI from fastapi.middleware.cors import CORSMiddleware app FastAPI( title10天Python全栈项目实战, descriptionVue3 FastAPI全栈后台管理系统, version1.0.0, ) app.add_middleware( CORSMiddleware, allow_origins[ http://localhost:5173, http://127.0.0.1:5173, ], allow_credentialsTrue, allow_methods[*], allow_headers[*], ) app.get(/) def read_root() - dict[str, str]: return { message: FastAPI服务运行成功, } app.get(/api/hello) def hello() - dict[str, object]: return { code: 200, message: 后端连接成功, }代码中主要完成了三件事创建FastAPI应用配置前后端跨域创建/api/hello测试接口。六、启动FastAPI后端在backend目录执行uvicorn main:app --reload --port 8000成功启动后终端会出现类似内容Uvicorn running on http://127.0.0.1:8000在浏览器中访问http://127.0.0.1:8000/api/hello正常情况下会返回{ code: 200, message: 后端连接成功 }在这里插入接口返回JSON的截图。FastAPI还会自动生成接口文档访问http://127.0.0.1:8000/docs在接口文档中可以找到GET /api/hello点击“Try it out”再点击“Execute”即可直接测试接口。在这里插入FastAPI接口文档截图。七、创建Vue3前端项目不要关闭FastAPI终端重新打开一个终端窗口。回到项目根目录cd python-fullstack-project创建Vue3项目npm create vuelatest frontend初学阶段建议这样选择Add TypeScriptNo Add JSX SupportNo Add Vue RouterYes Add PiniaYes Add VitestNo Add an End-to-End Testing SolutionNo Add ESLintYes Add PrettierYes创建完成后进入前端目录cd frontend安装项目依赖npm install安装Axiosnpm install axios启动Vue项目npm run dev终端会显示访问地址一般为http://localhost:5173如果你的端口不是5173后端跨域配置也需要改成实际端口。八、使用Vue调用FastAPI接口打开文件frontend/src/App.vue将原来的内容替换成script setup import { onMounted, ref } from vue import axios from axios const message ref(正在连接FastAPI后端...) const errorMessage ref() const loadBackendData async () { try { const response await axios.get( http://127.0.0.1:8000/api/hello ) message.value response.data.message } catch (error) { message.value 后端连接失败 errorMessage.value 请检查FastAPI后端是否已经启动 console.error(请求后端失败, error) } } onMounted(() { loadBackendData() }) /script template main classpage section classcard p classday10天Python全栈项目实战 · Day 1/p h1FastAPI Vue3/h1 p classdescription 第一个前后端接口调用 /p div classresult {{ message }} /div p v-iferrorMessage classerror {{ errorMessage }} /p /section /main /template style scoped .page { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 24px; background: #f5f7fa; } .card { width: 100%; max-width: 480px; padding: 48px 32px; text-align: center; background: #ffffff; border-radius: 16px; box-shadow: 0 12px 40px rgb(0 0 0 / 8%); } .day { color: #666666; } h1 { margin: 12px 0; font-size: 36px; } .description { color: #888888; } .result { margin-top: 28px; padding: 18px; font-size: 22px; font-weight: 600; background: #f0f7ff; border-radius: 10px; } .error { margin-top: 16px; } /style为了避免Vue默认样式影响页面再打开frontend/src/assets/main.css替换成* { box-sizing: border-box; } html, body { margin: 0; min-width: 320px; min-height: 100vh; } body { font-family: Inter, Microsoft YaHei, Arial, sans-serif; } #app { min-height: 100vh; }保存文件然后打开http://localhost:5173页面显示后端连接成功说明Vue3已经成功调用FastAPI接口。在这里插入最终页面截图这张图也可以作为文章中的首图。九、完整项目结构完成Day 1后目录大致如下python-fullstack-project ├── backend │ ├── .venv │ ├── main.py │ └── requirements.txt │ └── frontend ├── node_modules ├── public ├── src │ ├── assets │ ├── router │ ├── stores │ ├── App.vue │ └── main.js ├── package.json └── vite.config.js十、常见问题1. 提示找不到uvicorn报错可能类似uvicorn 不是内部或外部命令先确认虚拟环境是否已经激活然后重新安装pip install fastapi uvicorn[standard]也可以使用python -m uvicorn main:app --reload2. 浏览器访问接口出现404检查访问地址是否正确http://127.0.0.1:8000/api/hello同时确认代码中存在app.get(/api/hello)修改代码后等待Uvicorn自动重启。3. Vue页面显示后端连接失败首先检查FastAPI终端是否还在运行。然后直接打开http://127.0.0.1:8000/api/hello如果浏览器无法访问说明问题在后端不是Vue。4. 浏览器提示CORS跨域错误检查FastAPI中是否已经加入from fastapi.middleware.cors import CORSMiddleware并确认允许的地址与Vue实际运行地址一致allow_origins[ http://localhost:5173, http://127.0.0.1:5173, ]5. npm命令无法执行先检查node -v npm -v如果两个命令都无法显示版本需要先正确安装Node.js并重新打开终端。十一、今日验收清单完成以下内容说明Day 1已经通过成功创建Python虚拟环境成功安装FastAPI和UvicornFastAPI后端可以正常启动浏览器能够访问/api/hello能够打开FastAPI的/docs文档Vue3项目可以正常启动Vue成功调用FastAPI接口页面显示“后端连接成功”浏览器控制台没有跨域错误十二、下一篇内容Day 2将实现使用MySQL保存业务数据并通过SQLAlchemy创建第一个用户数据模型。下一篇主要包括创建MySQL数据库安装SQLAlchemy配置数据库连接创建用户模型自动创建数据表测试数据库连接