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

2024-06-23 14:44
文章标签 javascript 分离 程序 项目 开发 vue vue3 第一个 frontend fastapi primeflex

本文主要是介绍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>

在这里插入图片描述

这篇关于fastapi+vue3+primeflex前后端分离开发项目第一个程序的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1087451。

相关文章

springboot将lib和jar分离的操作方法

springboot将lib和jar分离的操作方法

《springboot将lib和jar分离的操作方法》本文介绍了如何通过优化pom.xml配置来减小SpringBoot项目的jar包大小,主要通过使用spring-boot-maven-plugin... 遇到一个问题，就是每次maven package或者maven install后target中的ja
阅读更多...
在不同系统间迁移Python程序的方法与教程

在不同系统间迁移Python程序的方法与教程

《在不同系统间迁移Python程序的方法与教程》本文介绍了几种将Windows上编写的Python程序迁移到Linux服务器上的方法,包括使用虚拟环境和依赖冻结、容器化技术（如Docker）、使用An... 目录使用虚拟环境和依赖冻结1. 创建虚拟环境2. 冻结依赖使用容器化技术（如 docker）1. 创
阅读更多...
CSS弹性布局常用设置方式

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re
阅读更多...
配置springboot项目动静分离打包分离lib方式

配置springboot项目动静分离打包分离lib方式

《配置springboot项目动静分离打包分离lib方式》本文介绍了如何将SpringBoot工程中的静态资源和配置文件分离出来,以减少jar包大小,方便修改配置文件,通过在jar包同级目录创建co... 目录前言1、分离配置文件原理2、pom文件配置3、使用package命令打包4、总结前言默认情况下，
阅读更多...
CSS3中使用flex和grid实现等高元素布局的示例代码

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》：本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法，通过简单的两列实现、每行放置3列以及全部代码的展示，展示了这两种布局方式的实现细节和效果，详细内容请阅读本文，希望能对你有所帮助... 过往的实现方法是使用浮动加
阅读更多...
css渐变色背景|＜gradient示例详解

css渐变色背景|＜gradient示例详解

《css渐变色背景|＜gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变，本文介绍css渐变色背景|＜gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背
阅读更多...
python实现简易SSL的项目实践

python实现简易SSL的项目实践

《python实现简易SSL的项目实践》本文主要介绍了python实现简易SSL的项目实践,包括CA.py、server.py和client.py三个模块,文中通过示例代码介绍的非常详细,对大家的学习... 目录运行环境运行前准备程序实现与流程说明运行截图代码CA.pyclient.pyserver.py参
阅读更多...
基于Python开发PPTX压缩工具

基于Python开发PPTX压缩工具

《基于Python开发PPTX压缩工具》在日常办公中,PPT文件往往因为图片过大而导致文件体积过大,不便于传输和存储,所以本文将使用Python开发一个PPTX压缩工具,需要的可以了解下... 目录引言全部代码环境准备代码结构代码实现运行结果引言在日常办公中，PPT文件往往因为图片过大而导致文件体积过大，
阅读更多...
CSS自定义浏览器滚动条样式完整代码

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》：本文主要介绍了如何使用CSS自定义浏览器滚动条的样式，包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式，并提供了完整的CSS代码示例，通过这些技巧，你可以为你的网站添加个性化的滚动条样式，从而提升用户体验，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
css实现图片旋转功能

css实现图片旋转功能

《css实现图片旋转功能》：本文主要介绍了四种CSS变换效果：图片旋转90度、水平翻转、垂直翻转，并附带了相应的代码示例，详细内容请阅读本文，希望能对你有所帮助... 一 css实现图片旋转90度.icon{ -moz-transform:rotate(-90deg); -webkit-transfo
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2