├── main.py
└── templates
└── home.html
pip install fastapi[all]
pip install jinja2
我们在/中服务于我们的前端,并在该路径中呈现我们的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})
让我们创建一个有文本区域和按钮的虚拟应用程序。
我们正在使用Axios将请求发送到后端。
因为它们在同一个端口上运行,所以我们可以直接将/add传递给Axios。
<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>
uvicorn main:app --reload
最后,你会有一个可怕的文本区和一个按钮。但它会帮助你更好地理解事情。
手机扫一扫
移动阅读更方便
你可能感兴趣的文章