gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 14:32:42 36 4
gpt4 key购买 nike

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

最佳答案

I want to know if i can connect these both or not.


快速回答:是的,您可以连接。
但是有很多方法,你可以用 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

    关于vue.js - 如何连接 Vue.js 作为前端和 Fastapi 作为后端,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64522736/

    36 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com