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 CORSMiddlewareapp = 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 CORSMiddlewareapp = 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>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/32625.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

知乎客户端跨平台-Hybrid-调试实战

在开发上述功能的过程中&#xff0c;发现了 flipper 这个工具 flipper 提供了一个桌面客户端&#xff0c;然后这个桌面客户端提供了一个和手机客户端通信的机制&#xff0c;免去了 socket 服务的开销&#xff0c;依靠这个通信机制&#xff0c;我们可以把上述的功能复制过来 基…

Python数列求和

1 问题 如何用python解决数学问题&#xff1f;如何用python数列求和&#xff1f; 2 方法 代码清单 1 Courier New字体&#xff0c;23磅行间距>>> def sum_num(): input_num input("输入一个0-9的整数:") try: input_num int(input_num) …

AI时代的音乐革命:创作更简单,灵魂在哪里?

#AI在创造还是毁掉音乐# 我是李涛&#xff0c;一名音乐创作者&#xff0c;最近一直在思考一个问题&#xff1a;AI到底是在创造音乐&#xff0c;还是在毁掉音乐&#xff1f; 几个月前&#xff0c;我第一次接触到AI音乐创作工具。它让我震惊&#xff0c;只需要输入几个关键词&a…

Apollo9.0 PNC源码学习之Planning模块(一)—— 规划概览

0 前言 规划本质就是搜索问题,数学角度来看就是寻找函数最优解 规划模块复杂的就是相关的逻辑处理和过程计算 对于规划的三维问题,目前解决方案:降维+迭代 将SLT问题分解为ST和SL二维优化问题:在一个维度优化之后,再另一个维度再进行优化,最后整合成三维的轨迹。 虽然降…

人机交互中的真问题与假问题

在人机交互领域&#xff0c;存在一些真正的挑战和问题&#xff0c;这些问题影响着如何有效地设计、开发和使用人机界面和交互系统。具体涉及&#xff1a; 人机交互系统需要尽可能自然和普适&#xff0c;以便用户可以轻松理解和使用。例如&#xff0c;语音识别系统需要能够准确地…

Excel使用小技巧

1、快速求和 选中数据区域&#xff0c;然后按组合键<Alt> 2、Excel表格美化 选中单元格区域&#xff0c;插入——表格&#xff0c;确定。也可以按快捷键CtrlT。 3、多个单元格同时输入 选中所有单元格&#xff0c;在编辑栏输入数据&#xff0c;按下Ctrl键的同时&#xf…

How to create a langchain doc from an str

问题背景&#xff1a; Ive searched all over langchain documentation on their official website but I didnt find how to create a langchain doc from a str variable in python so I searched in their GitHub code and I found this : 在 langchain 的官方文档中&#…

链表题目之模拟类

还有一些题目是没有特别复杂的技巧&#xff0c;但是考察仔细程度以及基本的链表处理能力&#xff0c;从而考察在基本的逻辑处理上考虑的全面和细致层度。这类题目对于业务代码编码能力的鉴定的确是有一些帮助。 分隔链表(86) 题目&#xff1a;86. 分隔链表 把大于等于的放到一…

游戏工厂:AI(AIGC/ChatGPT)与流程式游戏开发

游戏工厂&#xff1a;AI&#xff08;AIGC/ChatGPT&#xff09;与流程式游戏开发 码客 卢益贵 ygluu 关键词&#xff1a;AI&#xff08;AIGC、ChatGPT、文心一言&#xff09;、流程式管理、好莱坞电影流程、电影工厂、游戏工厂、游戏开发流程、游戏架构、模块化开发 一、前言…

Vue76-路由对浏览器历史记录的影响

一、push模式 默认是push 二、replace模式 替换当前记录&#xff01; &#xff08;当前指针指向的那一条记录&#xff09; 三、小结

完全禁用 Windows Defender

你有没有这样的情况&#xff0c;安装软件时&#xff0c;关闭了Windows实时保护&#xff0c;过几天&#xff0c;打开软件时&#xff0c;发现里面的附件被吞噬&#xff0c;因为Defender又自动打开了&#xff0c;那么&#xff0c;有没有一款可以完全禁用Defender的工具&#xff0c…

年薪50w+的项目经理,手把手教你如何复盘

复盘是一种重要的学习和改进工具&#xff0c;对于项目经理来说&#xff0c;能帮助识别项目中的成功与失败&#xff0c;为未来的项目管理提供宝贵经验。 理论部分 定义目标。在开始复盘之前&#xff0c;明确复盘的目标是什么。是为了找出项目中的问题并提出解决方案&#xff0c…

Linux的设备模型

在设备模型出现以前,Linux的驱动存在以下问题: 1,设备和驱动没有分离。也就是说设备的信息是硬编码在驱动代码中的,这给驱动程序造成了极大的限制。如果硬件有所改动,那么必然要修改驱动代码。比如LED如果修改了管脚,那么就必然要修改驱动程序。这样就导致驱动的通用性很…

腾讯大牛,手把手教你建立自己的Android学习知识体系,附实例+面经+建议!

主要让我介绍了我的项目&#xff0c;又出了几个题让我做。 项目就是让我介绍我科研做的那个流式二维码数据传输系统&#xff0c;我介绍的时候面试官听的很仔细&#xff0c;让我详细介绍了拍到的二维码是如何定位、采样和识别转换成二进制流的。然后问我传输速率是多少&#xff…

Android开启wifi调试

1.首先需要电脑和手机设备在同一个局域网下 1.1 手机和电脑连接同一个wifi&#xff0c;这样就是在同一个局域网下 1.2 可以用手机开一个热点&#xff0c;然后电脑连接手机开启的热点&#xff0c;这样也算在同一个局域网下 2.开启手机设备的无线调试功能 这个功能好像是可以在…

yarn安装配置及使用教程

Yarn 是一款 JavaScript 的包管理工具&#xff0c;是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具&#xff0c;它提供了确定性、依赖关系树扁平化等特性&#xff0c;并且与 npm 完全兼容。以下是 Yarn 的安装及使用教程&#xff1a; Yarn 安装…

stm32学习笔记---新建工程步骤和点灯演示

目录 STM32的三种开发方式 基于寄存器的方式 基于库函数的方式 基于Hal库的方式 固件库介绍 新建基于标准库的工程步骤 配置寄存器来完成点灯操作 添加库函数来完成点灯操作 添加库函数 开始点灯操作 第一步&#xff1a;使能时钟 第二步&#xff1a;配置端口模式 …

JVM专题六:JVM的内存模型

前面我们通过Java是如何编译、JVM的类加载机制、JVM类加载器与双亲委派机制等内容了解到了如何从我们编写的一个.Java 文件最终加载到JVM里的&#xff0c;今天我们就来剖析一下这个Java的‘中介平台’JVM里面到底长成啥样。 JVM的内存区域划分 Java虚拟机&#xff08;JVM&…

使用 Ubuntu x86_64 平台交叉编译适用于 Linux aarch64(arm64) 平台的 QT5(包含OpenGL支持) 库

使用 Ubuntu AMD64 平台交叉编译适用于 Linux ARM64 平台的 QT5(包含 OpenGL/WebEngine 支持) 库 目录 使用 Ubuntu AMD64 平台交叉编译适用于 Linux ARM64 平台的 QT5(包含 OpenGL/WebEngine 支持) 库写在前面前期准备编译全流程1. 环境搭建2. 复制源码包并解压&#xff0c;创…

【Python机器学习】NMF——将NMF应用于人脸图像

将NMF应用于之前用过的Wild数据集中的Labeled Faces。NMF的主要参数是我们想要提取的分量个数。通常来说&#xff0c;这个数字要小于输入特征的个数&#xff08;否则的话&#xff0c;将每个像素作为单独的分量就可以对数据进行解释&#xff09;。 首先&#xff0c;观察分类个数…