Answer a question

I'm building a project On Jobs Portal and i need Vue as frontend and Fastapi as backend for (add, delete update). I want to know if i can connect these both or not.

Answers

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

Quick answer: Yes, you can connect.

But there are many ways, you can render templates with something like Jinja or you can create a completely different project with something like Vue CLI and you might want to use something like Nginx or Apache etc to connect both.

So let's create an example app with Jinja

Structure

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

Backend- main.py

  • We are serving our frontend in / and rendering our home.html in that path.
  • We are using the templates folder to keep our HTML's and passing it to Jinja.
  • Also, we are going to send a request to /add from our front-end.
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})

Frontend - home.html

  • Let us create a dummy app that has a textarea and button.
  • We are using Axios to send our requests to backend.
  • Since they are running on the same port we can pass /add to Axios directly.
<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>

In the end, you will have a terrible looking textarea and a button. But it will help you to understand things better.

 {'content': 'Hello textarea!'}
INFO:     127.0.0.1:51682 - "POST /add HTTP/1.1" 200 OK
# vue.js
Logo
Vue

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐

具身智能测试题解析

问题1:具身智能（Embodied Intelligence）的核心观点强调智能的产生依赖于（ ） 正确答案：B. 智能体与环境的交互以及自身的物理形态 解析：具身智能的核心是 “智能离不开身体与环境的互动”，智能体的物理形态（如机械臂、人形机器人）和与外界的实时交互，是其产生认知、决策能力的基础，区别于纯软件的抽象智能模型。 问题2:以下哪一项是具身智能的典型应用场景？（ ） 正确答案：B.

avatar Vue

播客 | Fathym 关于 Vue 的观点

在科罗拉多州,我们有许多美景。从山顶到山谷和中间的山丘。 谈到 Vue.js,Fathym 是 JavaScript 框架的粉丝。 我们的工程总监 Jeremy Tomlinson 和品牌传播代表 Rich Kurtzman 很高兴成为 8 月中旬 Vue 播客观点的一部分。 在采访中,主持人史蒂夫爱德华兹向我们的团队询问了很多事情,包括: Fathym 是谁以及我们做什么 使用 Azure 和/

avatar Vue

带有浮动 Vue 和 Tailwind 的 Vue 下拉菜单

可用于在 Vue 应用程序中创建工具提示、弹出框和菜单的最流行的库之一是floating-vue。虽然floating-vue提供了一个Dropdown组件,但它的样式和添加其他功能(例如键盘导航)由用户决定。 我们将创建什么 我们将使用floating-vue的Dropdown组件作为基础,然后在顶部添加键盘功能。然后,我们将使用该组件使用 Tailwind 创建一个下拉菜单。 最终结果将类似于

avatar Vue