fastapi+vue3前后端分离开发第一个案例整理

开发思路

1、使用fastapi开发第一个后端接口
2、使用fastapi解决cors跨域的问题。cors跨域是浏览器的问题,只要使用浏览器,不同IP或者不同端口之间通信,就会存在这个问题。前后端分离是两个服务,端口不一样,所以必须要解决跨域的问题。
3、使用vite创建一个JavaScript的vue3项目,整合primeflex依赖,编写一个简单的vue3界面
4、整合axios依赖,用来请求后端的数据,实现vue3和fastapi的前后端交互通信
5、在vue3中,使用axios请求fastapi开发的接口,并将接口的返回数据,渲染到vue3开发的页面中

后端代码

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}


if __name__ == '__main__':
    import uvicorn

    uvicorn.run(app, host='0.0.0.0', port=8001)

前端代码

<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:8001/')
      .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>

开发后端项目

创建虚拟环境:

python -m venv venv

使用pycharm选择虚拟环境:
在这里插入图片描述

选择venv目录下的python:
在这里插入图片描述

此时重新打开pycharm的终端,前面会多一个venv:
在这里插入图片描述

有了就说明我们的环境配置好了。

安装fastapi

pip install fastapi

开发第一个fastapi接口

文档地址:https://fastapi.tiangolo.com/zh/tutorial/first-steps/

from fastapi import FastAPI

app = FastAPI()


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


if __name__ == '__main__':
    import uvicorn

    uvicorn.run(app, host='0.0.0.0', port=8001)

解决跨域的问题

文档:https://fastapi.tiangolo.com/zh/tutorial/cors/

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

app = FastAPI()

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


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


if __name__ == '__main__':
    import uvicorn

    uvicorn.run(app, host='0.0.0.0', port=8001)

创建前端项目

pnpm create vite

在这里插入图片描述

使用webstorm打开项目,点击配置:
在这里插入图片描述

配置一个npm的启动:
在这里插入图片描述

安装依赖:

pnpm i

在这里插入图片描述

点击启动按钮:
在这里插入图片描述

浏览器访问:http://127.0.0.1:5173
在这里插入图片描述

安装axios

pnpm i axios

在这里插入图片描述

修改 src/App.vue,请求后端数据:

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

const message = ref("frontend variable")
axios.get('http://127.0.0.1:8001/')
    .then(function (response) {
      // 处理成功情况
      console.log(response);
      message.value = response.data.message
    })
    .catch(function (error) {
      // 处理错误情况
      console.log(error);
    })
    .finally(function () {
      // 总是会执行
    });
</script>

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

整合primeflex

文档:https://primeflex.org/

pnpm i primeflex

在这里插入图片描述

修改 src/main.js

import {createApp} from 'vue'
import 'primeflex/primeflex.css'
import 'primeflex/themes/primeone-light.css '
import App from './App.vue'

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

修改 src/App.vue

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

const message = ref("frontend variable")
axios.get('http://127.0.0.1:8001/')
    .then(function (response) {
      // 处理成功情况
      console.log(response);
      message.value = response.data.message
    })
    .catch(function (error) {
      // 处理错误情况
      console.log(error);
    })
    .finally(function () {
      // 总是会执行
    });
</script>

<template>
<div class="w-20rem h-12rem bg-indigo-300">{{ message }}</div>
</template>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

flex讲解

随着前端技术的不断发展和更新&#xff0c;flex布局成为前端布局的主流。但是仍然有很多前端新手搞不懂flex到底怎么用&#xff01;&#xff01;&#xff01;今天我们就来好好讲讲flex布局 老规矩先上定义 什么是flex布局 布局的传统解决方案&#xff0c;基于盒状模型&#x…

DNF手游鬼剑士攻略:全面解析流光星陨刀的获取与升级!云手机强力辅助!

《地下城与勇士》&#xff08;DNF&#xff09;手游是一款广受欢迎的多人在线角色扮演游戏&#xff0c;其中鬼剑士作为一个经典职业&#xff0c;因其强大的输出能力和炫酷的技能特效&#xff0c;吸引了众多玩家的青睐。在这篇攻略中&#xff0c;我们将详细介绍鬼剑士的一把重要武…

智慧路灯可视化:点亮城市管理的新篇章

智慧路灯可视化系统通过图扑 HT 实时数据采集和分析&#xff0c;将城市每一盏路灯的状态、能耗和故障信息一目了然地展示在管理平台上。高效的监控与管理不仅提升了公共照明的维护效率&#xff0c;减少人工巡检成本&#xff0c;还支持节能策略&#xff0c;实现智慧城市的可持续…

国际短信API的功能有哪些?如何配置使用?

国际短信API的合规性如何保障&#xff1f;国际短信API使用教程&#xff1f; 国际短信API不仅仅是一个发送短信的工具&#xff0c;它还包含了许多强大的功能&#xff0c;能够帮助企业更好地管理和优化他们的通信策略。AoKSend将详细探讨国际短信API的主要功能。 国际短信API&a…

Excel表格转Tex工具推荐

为了制作符合 SCI 论文要求的表格&#xff0c;直接用 LaTeX 编写通常比较复杂。我们可以先在 Excel 中绘制好所需的表格&#xff08;最好加上边框&#xff09;。最近我发现了一个非常好用的 Excel 转 LaTeX 工具&#xff0c;能够让 LaTeX 表格的编写变得非常方便。 工具&#…

跨境电商内卷时代,亚马逊卖家如何低成本提升产品曝光与销量?

在跨境电商领域&#xff0c;随着市场的日益饱和和竞争的加剧&#xff0c;卖家们普遍面临着一个共同的挑战&#xff1a;流量稀缺&#xff0c;转化率低。为了在这个“内卷”严重的环境中脱颖而出&#xff0c;许多卖家不惜投入大量资金和资源&#xff0c;尝试各种站内和站外推广手…

20240701 每日AI必读资讯

&#x1f3eb;AI真炼丹&#xff1a;整整14天&#xff0c;无需人类参与 - 英矽智能推出全球首个AI参与决策的生物学实验室&#xff0c;实现了14天内完成靶点发现和验证的全自动化闭环实验。 - 该实验室由PandaOmics平台驱动&#xff0c;集成多种预测模型和海量数据&#xff0…

前端:多服务端接口资源整合与zip打包下载

项目需求 前端项目开发中,有一个页面需要去整合多个服务接口返回的数据资源,并且需要将这多个服务接口接口返回的数据进行资源压缩,最终打包成zip压缩包,并在客户端完成下载。 基本需求梳理如下, 实现思路 这个需求点其实本质上还是传统的“文件下载”功能需求,常见的例如…

Golang基础问题

Go基础 文章目录 Go基础● Go有那些关键字&#xff1f;● Go方法与函数的区别&#xff1f;● Go函数返回局部变量的指针是否安全&#xff1f;● Go函数参数传递是值传递还是引用传递&#xff1f;● defer关键字的实现原理&#xff1f;● 内置函数make和new的区别&#xff1f;●…

ollama+Dify大模型本地化部署打造个人知识库 (2)

ollama大模型部署-CSDN博客文章浏览阅读26次。Ollama 是一个能在本地机器上轻松构建和运行大型语言模型的轻量级、可扩展框架&#xff0c;适用于多种场景&#xff0c;具有易于使用、资源占用少、可扩展性强等特点。https://blog.csdn.net/weixin_72819498/article/details/1400…

LED裸眼3D显示屏:开启视觉新体验

随着科技的不断进步&#xff0c;LED显示屏作为一种新型的显示技术&#xff0c;已经被广泛应用于各个领域。而其中&#xff0c;LED裸眼3D显示屏更是因其独特的技术原理和令人震撼的视觉效果&#xff0c;成为了业界关注的焦点。 裸眼3D显示屏是一种前沿的显示技术&#xff0c;它…

NLP特征提取的惊人历史演变

NLP特征提取的惊人演变 1.理解特征提取2. 文本表示的演变2.1.词袋的简单性2.2. N-Gram 模型的进步2.3. TF-IDF 的崛起 3. 深入研究词嵌入3.1.探索 Word2Vec3.2.深入了解 GloVe3.3.深入研究 FastText 4. 上下文嵌入的影响4.1 ELMo 的突破4.2 理解 BERT 的机制4.3 Transformer的出…

ctfshow-web入门-命令执行(web71-web74)

目录 1、web71 2、web72 3、web73 4、web74 1、web71 像上一题那样扫描但是输出全是问号 查看提示&#xff1a;我们可以结合 exit() 函数执行php代码让后面的匹配缓冲区不执行直接退出。 payload&#xff1a; cvar_export(scandir(/));exit(); 同理读取 flag.txt cinclud…

[数据集][目标检测]电缆钢丝绳线缆缺陷检测数据集VOC+YOLO格式1800张3类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;1800 标注数量(xml文件个数)&#xff1a;1800 标注数量(txt文件个数)&#xff1a;1800 标注…

uniapp H5端使用百度地图

1、登录百度地图开放平台 https://lbsyun.baidu.com/&#xff08;没有账号则先去创建一个百度账号&#xff09; 2、进入百度地图开放平台控制台&#xff08;导航栏“控制台”&#xff09;&#xff0c;点击“应用管理”-“我的应用” 3、选择“创建应用”&#xff0c;应用模块选…

[图解]企业应用架构模式2024新译本讲解19-数据映射器1

1 00:00:01,720 --> 00:00:03,950 下一个我们要讲的就是 2 00:00:04,660 --> 00:00:07,420 数据映射器这个模式 3 00:00:09,760 --> 00:00:13,420 这个也是在数据源模式里面 4 00:00:13,430 --> 00:00:14,820 用得最广泛的 5 00:00:16,250 --> 00:00:19,170…

一、Redis简介

一、Redis介绍与一般应用 1.1 基本了解 Redis全称Remote Dictionary Server(远程字典服务)&#xff0c; 是一个开源的高性能键值存储系统&#xff0c;通常用作数据库、缓存和消息代理。使用ANSI C语言编写遵守BSD协议&#xff0c;是一个高性能的Key-Value数据库提供了丰富的数…

2024.07使用gradle上传maven组件到central.sonatype,非常简单

本文基于sonatypeUploader2.0版本 在1.0版本我们还需要手动去添加maven-publish和signing插件&#xff0c;在2.0版本他已经内置了&#xff0c;如果你仍然需要手动配置&#xff0c;你可以手动添加这两个插件及逻辑。 具体信息参考开源仓库&#xff1a; 插件仓库&#xff1a;h…

【Linux】部署NFS服务实现数据共享

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;CSDN博客专家   &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01…

(四)Appdesigner-文件存在判断及对话框设计

目录 前言 一、文件存在判断 &#xff08;一&#xff09;基础知识 &#xff08;二&#xff09;实际操作 二、对话框设计 &#xff08;一&#xff09;基础知识 1.提示对话框 2.询问对话框 3.文件选择对话框 &#xff08;二&#xff09;实际操作 1.提示对话框 2.询问…