項目結構
├── 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>
運行，訪問測試
uvicorn main:app --reload
最后，你會有一個可怕的文本區和一個按鈕。但它會幫助你更好地理解事情。
