fastapi+vue3+primeflex前后端分离开发项目第一个程序

安装axios

axios是用来请求后端接口的。

https://www.axios-http.cn/docs/intro

pnpm 是一个前端的包管理工具，当我们需要给前端项目添加新的依赖的时候，就可以使用pnpm install 命令进行安装。

pnpm install axios

安装 primeflex

primeflex是一个css样式库，用来帮助我们快速的开发前端的界面。

pnpm install primeflex

在 src/main.js 中引入 primeflex 相关的样式文件。

import { createApp } from 'vue'

import "primeflex/primeflex.css"
import "primeflex/themes/primeone-light.css"

import App from './App.vue'

createApp(App).mount('#app')

vue3请求后端数据

修改 src/App.vue

<script setup>
import axios from "axios"

axios.get('http://127.0.0.1:8000/')
    .then(function (response) {
      // 处理成功情况
      console.log(response);
    })
    .catch(function (error) {
      // 处理错误情况
      console.log(error);
    })
    .finally(function () {
      // 总是会执行
    });
</script>

<template>
  <h1>request fastapi data</h1>
</template>

此时，前端会报一个CORS跨域错误，这个是前后端分离开发中非常常见的错误。

在本项目中，将使用 fastapi 在后端解决此错误。

解决后端跨域问题

修改 main.py

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = [
    "*"
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)


@app.get("/")
async def main():
    return {"message": "Hello World"}

修改以后，记得重启服务。

vue 的挂载生命周期方法

生命周期方法，就是不需要我们手动调用，vue会在特殊的时刻自动调用的方法。

示例代码：

import {onMounted} from "vue";

onMounted(() => {
  console.log("on mounted")
})

onMounted这个生命周期方法，会在组件挂载的时候，自动触发。

直白的讲，就是我们每次刷新页面的时候，都会触发这个方法。

vue3 如何定义和渲染响应式变量

响应式变量，指的是，我们在程序运行过程中，动态修改了变量的值以后，页面中的渲染效果也会自动跟着改变的变量。如果我们在页面中，反向修改了响应式变量的值，内存中真实的响应式变量的值也会跟着修改。

有点抽象，直接看代码：

<script setup>
import axios from "axios"
import {onMounted, ref} from "vue";

const message = ref("frontend variable")

axios.get('http://127.0.0.1:8000/')
    .then(function (response) {
      // 处理成功情况
      console.log("response", response);
    })
    .catch(function (error) {
      // 处理错误情况
      console.log(error);
    })
    .finally(function () {
      // 总是会执行
    });

onMounted(() => {
  console.log("on mounted")
})

</script>

<template>
  <h1>{{ message }}</h1>
</template>

定义响应式变量：

import {onMounted, ref} from "vue";

const message = ref("frontend variable")

渲染响应式变量：

<h1>{{ message }}</h1>

提取后端数据

思路：

• 在页面加载的时候，请求后端数据
• 将请求到的后端数据，设置为响应式的变量
• 在页面中渲染响应式变量

直接上代码：

<script setup>
import axios from "axios"
import {onMounted, ref} from "vue";

const message = ref("frontend variable")

onMounted(() => {
  console.log("on mounted")
  axios.get('http://127.0.0.1:8000/')
      .then(function (response) {
        // 处理成功情况
        console.log("response", response);
        console.log("response", response.data.message);
        message.value = response.data.message
      })
      .catch(function (error) {
        // 处理错误情况
        console.log(error);
      })
      .finally(function () {
        // 总是会执行
      });
})

</script>

<template>
  <h1>{{ message }}</h1>
</template>

关键：将后端请求的数据赋值给前端响应式变量

message.value = response.data.message

练习

后端给我返回一个字符串，这个字符串有1到100的偶数组成，用逗号分隔，然后前端渲染。

后端代码：main.py

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = [
    "*"
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)


@app.get("/")
async def main():
    arr = [str(i) for i in range(2, 101, 2)]
    message = ",".join(arr)
    return {"message": message}

前端代码：App.vue

<script setup>
import axios from "axios"
import {onMounted, ref} from "vue";

const message = ref("frontend variable")

onMounted(() => {
  console.log("on mounted")
  axios.get('http://127.0.0.1:8000/')
      .then(function (response) {
        // 处理成功情况
        console.log("response", response);
        console.log("response", response.data.message);
        message.value = response.data.message
      })
      .catch(function (error) {
        // 处理错误情况
        console.log(error);
      })
      .finally(function () {
        // 总是会执行
      });
})

</script>

<template>
  <h1>{{ message }}</h1>
</template>