python后台vue3前端构建网站最简单示范

NFTDigger

已于 2023-08-23 20:08:49 修改

阅读量3.2k

点赞数 1

文章标签：前端 python vue.js

于 2023-05-04 10:35:28 首次发布

本文链接：https://blog.csdn.net/sitebus/article/details/130482195

版权

这里是一个简单的样本程序，使用 Vue 3 作为前端框架，Python 的 FastAPI 作为后端 API。首先，我们将创建一个 FastAPI 后端，然后使用 Vue 3 创建前端应用程序来调用后端 API。

后端：FastAPI

确保已安装 Python（3.7+）和 pip。
安装 FastAPI 和 Uvicorn：

   pip install fastapi uvicorn

创建一个名为 main.py 的 Python 文件，内容如下：

   from fastapi import FastAPI

   app = FastAPI()

   @app.get("/api/message")
   async def get_message():
       return {"message": "Hello from FastAPI!"}

使用 Uvicorn 运行后端：

   uvicorn main:app --reload --host 0.0.0.0 --port 8000

现在你的 FastAPI 后端已经在 http://localhost:8000 上运行了。

前端：Vue 3

确保已安装 Node.js 和 npm。
安装 Vue CLI：

   npm install -g @vue/cli

使用 Vue CLI 创建一个新的 Vue 3 项目：

   vue create frontend

选择 Vue 3 作为默认框架，并继续安装过程。

进入项目目录并安装 Axios（用于调用 API）：

   cd frontend
   npm install axios

在 src 目录下创建一个名为 api.js 的文件，用于封装 API 调用：

   import axios from 'axios';

   const instance = axios.create({
       baseURL: 'http://localhost:8000/api',
   });

   export const getMessage = async () => {
       const response = await instance.get('/message');
       return response.data;
   };

打开 src/components/HelloWorld.vue 文件，将其修改为以下内容：

   <template>
     <div>
       <h1>{{ message }}</h1>
       <button @click="fetchMessage">Fetch Message</button>
     </div>
   </template>

   <script>
   import { ref } from 'vue';
   import { getMessage } from '../api';

   export default {
     name: 'HelloWorld',
     setup() {
       const message = ref('');
       const fetchMessage = async () => {
         const data = await getMessage();
         message.value = data.message;
       };
       return { message, fetchMessage };
     },
   };
   </script>