如何连接 Vue.js 作为前端和 Fastapi 作为后端

Question

我正在 Jobs Portal 上构建一个项目，我需要 Vue 作为前端，Fastapi 作为后端（添加、删除更新）。我想知道我是否可以将这两者都连接起来。

Answer 1

我想知道我是否可以将这两者都连接起来。

快速回答：是的，您可以连接。

但是有很多方法，你可以用 Jinja 之类的东西来渲染模板，或者你可以用 Vue CLI 之类的东西创建一个完全不同的项目，你可能想使用 Nginx 或 Apache 之类的东西来连接两者。

所以让我们用 Jinja 创建一个示例应用程序

结构

??? main.py
??? templates
    ??? home.html

后端- main.py

• 我们正在为我们的前端提供服务/并home.html在该路径中呈现我们的。
• 我们使用模板文件夹来保存我们的 HTML 并将其传递给 Jinja。
• 此外，我们/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>

最后，您将拥有一个看起来很糟糕的 textarea 和一个按钮。但它会帮助你更好地理解事物。

 {'content': 'Hello textarea!'}
INFO:     127.0.0.1:51682 - "POST /add HTTP/1.1" 200 OK