FastAPI 教程、结合vue实现前后端分离

以下是一个简化的例子，展示如何使用FastAPI创建一个后端API，并使用Vue.js创建一个前端应用来与后端通信。

FastAPI后端 (main.py):

from fastapi import FastAPI
from pydantic import BaseModel
 
app = FastAPI()
 
class Item(BaseModel):
    name: str
    description: str = None
    price: float
    tax: float = None
 
@app.post("/items/")
async def create_item(item: Item):
    return item

Vue.js前端 (ItemForm.vue):

<template>
  <div>
    <input v-model="item.name" placeholder="Name">
    <input v-model="item.description" placeholder="Description">
    <input v-model="item.price" type="number" placeholder="Price">
    <button @click="addItem">Add Item</button>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      item: {
        name: '',
        description: '',
        price: 0,
      },
    };
  },
  methods: {
    async addItem() {
      try {
        const response = await axios.post('http://localhost:8000/items/', this.item);
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

在实际部署中，你需要确保FastAPI服务器正在运行，并且Vue.js应用程序正确配置以向正确的URL发送请求。这个例子展示了如何创建一个简单的项目，并在前端提交数据到后端API。