使用 FastAPI 和 Vue.js 实现前后端分离

# FastAPI 后端代码
from fastapi import FastAPI
from starlette.responses import JSONResponse
 
app = FastAPI()
 
# 假设的数据，将会从数据库中读取
items = {
    "items": [
        {"id": 1, "name": "Item 1"},
        {"id": 2, "name": "Item2"}
    ]
}
 
@app.get("/items/")
def read_items():
    return JSONResponse(items)
 
# 其他路由和服务逻辑...
 

<!-- Vue.js 前端代码 -->
<template>
  <div>
    <h1>Items List</h1>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: []
    };
  },
  created() {
    this.fetchItems();
  },
  methods: {
    async fetchItems() {
      try {
        const response = await fetch('http://localhost:8000/items/');
        const data = await response.json();
        this.items = data.items;
      } catch (error) {
        console.error('Error fetching items:', error);
      }
    }
  }
};
</script>
 
<!-- 样式和布局... -->

以上代码展示了如何使用FastAPI（后端）和 Vue.js（前端）创建一个简单的前后分离应用。后端提供RESTful API，前端通过AJAX调用这些API获取数据并展示在页面上。这样的架构让前后端开发可以同时进行，提高开发效率。