当前位置：首页 > article >正文

vue3+fastAPI最简单例子

article 2025/3/1 9:16:05

我想学习vue3和fastAPI，我想做一个最简单的项目练习一下。网页中只有一个输入框和按钮。按钮实现的功能是，把输入框中的数值加2.这个加法由python语言实现。

0、项目结构：

my_project/
│
├── frontend/  # Vue 3前端项目
│   ├── src/
│   │   ├── App.vue
│   │   ├── main.js
│   │   └── components/
│   │       └── HelloWorld.vue
│   ├── public/
│   │   └── index.html
│   └── package.json
│
└── backend/  # FastAPI后端项目
    ├── main.py
    └── requirements.txt

一、后端（FastAPI）

1、安装FastAPI和Uvicorn（用于运行FastAPI应用）：

pip install fastapi uvicorn

2、在backend/main.py中编写以下代码：

from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel

app = FastAPI()

# 添加 CORS 中间件
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # 允许所有来源，或指定特定的来源
    allow_credentials=True,
    allow_methods=["*"],  # 允许所有方法
    allow_headers=["*"],  # 允许所有头部
)

class Item(BaseModel):
    number: int

@app.post("/add_two/")
async def add_two(item: Item):
    if item.number is None:
        raise HTTPException(status_code=400, detail="Number is required")
    return {"result": item.number + 2}

3、运行后端服务：

uvicorn backend.main:app --reload

二、前端（Vue 3）

1、安装Axios（用于发送HTTP请求）：

npm install axios

2、代码

<template>
  <div id="app">
    <input v-model="number" type="number" placeholder="Enter a number" />
    <button @click="addTwo">Add Two</button>
    <p>Result: {{ result }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'App',
  data() {
    return {
      number: 0,
      result: 0,
    };
  },
  methods: {
    async addTwo() {
      console.log("addTwo method called");
      try {
        console.log("Current number:", this.number); // 调试信息
        const response = await axios.post('http://127.0.0.1:8000/add_two/', { number: this.number });
        this.result = response.data.result;
        console.log("Result:", this.result); // 调试信息
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

3、运行前端项目：