fastapi+vue3前后端分离开发第一个案例整理

开发思路

1、使用fastapi开发第一个后端接口
2、使用fastapi解决cors跨域的问题。cors跨域是浏览器的问题，只要使用浏览器，不同IP或者不同端口之间通信，就会存在这个问题。前后端分离是两个服务，端口不一样，所以必须要解决跨域的问题。
3、使用vite创建一个JavaScript的vue3项目，整合primeflex依赖，编写一个简单的vue3界面
4、整合axios依赖，用来请求后端的数据，实现vue3和fastapi的前后端交互通信
5、在vue3中，使用axios请求fastapi开发的接口，并将接口的返回数据，渲染到vue3开发的页面中

后端代码

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = [
    "*"
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)


@app.get("/")
async def main():
    arr = [str(i) for i in range(2, 101, 2)]
    message = ",".join(arr)
    return {
   "message": message}


if __name__ == '__main__':
    import uvicorn

    uvicorn.run(app, host='0.0.0.0', port=8001)

前端代码

<script setup>
import axios from "axios"
import {
     onMounted, ref} from "vue";

const message = ref("frontend variable")