连接Vue.js作为前端，Fastapi作为后端-CFANZ编程社区

连接Vue.js作为前端，Fastapi作为后端

项目结构

├── main.py
└── templates
    └── home.html

环境安装

pip install fastapi[all]
pip install jinja2

Backend- main.py

我们在/中服务于我们的前端，并在该路径中呈现我们的home.html。
我们使用templates文件夹保存我们的HTML并将其传递给Jinja。
另外，我们将从我们的front-end向/add发送一个请求。

from fastapi import FastAPI, Request
from fastapi.templating import Jinja2Templates
from pydantic import BaseModel

templates = Jinja2Templates(directory="templates") 

app = FastAPI()


class TextArea(BaseModel):
    content: str

@app.post("/add")
async def post_textarea(data: TextArea):
    print(data.dict())
    return {**data.dict()}

@app.get("/")
async def serve_home(request: Request):
    return templates.TemplateResponse("home.html", {"request": request})

前端-home.html

让我们创建一个有文本区域和按钮的虚拟应用程序。
我们正在使用Axios将请求发送到后端。
因为它们在同一个端口上运行，所以我们可以直接将/add传递给Axios。

<html>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<body>
    <div id="app">
        <textarea name="" id="content" cols="30" rows="10" v-model="content"></textarea>
        <button @click="addText" id="add-textarea">click me</button>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                title: '',
                content: ''
            },
            methods: {
                addText() {
                    return axios.post("/add", {
                        content: this.content
                    }, {
                        headers: {
                            'Content-type': 'application/json',
                        }
                    }).then((response) => {
                        console.log("content: " + this.content);
                    });
                }
            }
        });
    </script>
</body>

</html>