当前位置: 首页 > news >正文

primeflex教学笔记20240720, FastAPI+Vue3+PrimeVue前后端分离开发

练习

在这里插入图片描述

先实现基本的页面结构:
在这里插入图片描述

代码如下:


<template><div class="flex p-3 bg-gray-100 gap-3"><div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl"><input type="number" value="33" class="p-3 text-3xl w-10rem"/></div><div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl">+</div><div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl"><input type="number" value="333" class="p-3 text-3xl w-10rem"/></div><div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl">=</div><div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl">366</div></div>
</template>

接下来就是添加点击事件:

<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 () {// 总是会执行});const onCalcClick = () => {alert("clicked...")
}
</script><template><div class="flex p-3 bg-gray-100 gap-3"><div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl"><input type="number" value="33" class="p-3 text-3xl w-10rem"/></div><div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl">+</div><div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl"><input type="number" value="333" class="p-3 text-3xl w-10rem"/></div><divclass="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl"@click="onCalcClick">=</div><div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl">366</div></div>
</template>

将两个输入框的值变成双向绑定的动态值:ref

<script setup>
import axios from "axios";
import {ref} from "vue";const numA = ref(3)
const numB = ref(33)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 () {// 总是会执行});const onCalcClick = () => {const sumResult = numA.value + numB.value;alert(sumResult)
}
</script><template><div class="flex p-3 bg-gray-100 gap-3"><div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl"><input type="number" v-model="numA" class="p-3 text-3xl w-10rem"/></div><div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl">+</div><div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl"><input type="number" v-model="numB" class="p-3 text-3xl w-10rem"/></div><divclass="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl"@click="onCalcClick">=</div><div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl">366</div></div>
</template>

下一步就是动态渲值:{{}}

在这里插入图片描述

<script setup>
import axios from "axios";
import {ref} from "vue";const numA = ref(3)
const numB = ref(33)
const sumResult = ref(numA.value + numB.value)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 () {// 总是会执行});const onCalcClick = () => {sumResult.value = numA.value + numB.value;
}
</script><template><div class="flex p-3 bg-gray-100 gap-3"><div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl"><input type="number" v-model="numA" class="p-3 text-3xl w-10rem"/></div><div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl">+</div><div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl"><input type="number" v-model="numB" class="p-3 text-3xl w-10rem"/></div><divclass="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl"@click="onCalcClick">=</div><div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl">{{ sumResult}}</div></div>
</template>

练习升级

定义一个接口,接收两个整数,将这两个数相加的结果返回。改写上面的练习,通过接口获取结果并实时渲染。

先实现后端接口:

import random
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddlewareapp = FastAPI()app.add_middleware(CORSMiddleware,allow_origins=["*"],allow_credentials=True,allow_methods=["*"],allow_headers=["*"],
)@app.get("/")
async def main(a: int, b: int):return {"message": a + b}if __name__ == '__main__':import uvicornuvicorn.run(app, host='0.0.0.0', port=8001)

再实现前端代码:

<script setup>
import axios from "axios";
import {ref} from "vue";const numA = ref(3)
const numB = ref(33)
const sumResult = ref(numA.value + numB.value)const onCalcClick = () => {axios({method: "get",url: 'http://127.0.0.1:8001/',params: {a: numA.value,b: numB.value,}}).then(resp => {sumResult.value = resp.data.message})
}
</script><template><div class="flex p-3 bg-gray-100 gap-3"><div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl"><input type="number" v-model="numA" class="p-3 text-3xl w-10rem"/></div><div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl">+</div><div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl"><input type="number" v-model="numB" class="p-3 text-3xl w-10rem"/></div><divclass="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl"@click="onCalcClick">=</div><div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl">{{ sumResult }}</div></div>
</template>

vue循环渲染

在这里插入图片描述

<template><div class="flex gap-3"><divclass="w-10rem h-8rem bg-yellow-500"v-for="i in 9":key="i">{{i}}</div></div>
</template>

自动换行

在这里插入图片描述

<template><div class="flex flex-row flex-wrap gap-3"><divclass="w-10rem h-8rem bg-yellow-500 "v-for="i in 19":key="i">{{i}}</div></div>
</template>

反序

在这里插入图片描述

<template><div class="flex flex-row flex-wrap flex-row-reverse gap-3"><divclass="w-10rem h-8rem bg-yellow-500 "v-for="i in 9":key="i">{{i}}</div></div>
</template>

按列显示

<template><div class="flex flex-column flex-wrap gap-3"><divclass="w-10rem h-8rem bg-yellow-500 "v-for="i in 9":key="i">{{i}}</div></div>
</template>

渲染数组

const arr = ref([3, 33, 333, 33333, 333333, 333333333333])
<template><div class="flex lex-wrap gap-3"><divclass="w-10rem h-8rem bg-yellow-500 "v-for="(v,k) in arr":key="k">{{ v }}</div></div>
</template>

在这里插入图片描述

前后端分离的循环渲染

后端:

import random
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddlewareapp = FastAPI()app.add_middleware(CORSMiddleware,allow_origins=["*"],allow_credentials=True,allow_methods=["*"],allow_headers=["*"],
)@app.get("/")
async def main():return {"message": [333, 33, 333, 33333, 333333, 333333333333]}if __name__ == '__main__':import uvicornuvicorn.run(app, host='0.0.0.0', port=8001)

前端:

<script setup>
import axios from "axios";
import {onMounted, ref} from "vue";const arr = ref([])
onMounted(() => {axios({method: "get",url: 'http://127.0.0.1:8001/',}).then(resp => {arr.value = resp.data.message})
})
</script><template><div class="flex lex-wrap gap-3"><divclass="w-10rem h-8rem bg-yellow-500 "v-for="(v,k) in arr":key="k">{{ v }}</div></div>
</template>

相关文章:

primeflex教学笔记20240720, FastAPI+Vue3+PrimeVue前后端分离开发

练习 先实现基本的页面结构&#xff1a; 代码如下&#xff1a; <template><div class"flex p-3 bg-gray-100 gap-3"><div class"w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl">…...

移动设备安全革命:应对威胁与解决方案

移动设备已成为我们日常工作和家庭生活中不可或缺的工具&#xff0c;然而&#xff0c;对于它们安全性的关注和投资仍然远远不够。本文深入分析了移动设备安全的发展轨迹、目前面临的威胁态势&#xff0c;以及业界对于这些安全漏洞响应迟缓的深层原因。文中还探讨了人们在心理层…...

【C语言】 链表实现学生管理系统(堆区开辟空间)

总体思路都能写出来&#xff0c;问题是感觉稍微比之前的麻烦一些&#xff0c;在刚开始创建结构体的时候&#xff0c;并没有去按照链表的思路去写&#xff0c;导致写成了顺序表&#xff0c;后面就一直纠结空间怎么开辟。 链表是由一个头节点和其它申请出来的小节点连起来的&…...

STM32实战篇:按键(外部输入信号)触发中断

功能要求 将两个按键分别与引脚PA0、PA1相连接&#xff0c;通过按键按下&#xff0c;能够触发中断响应程序&#xff08;不需明确功能&#xff09;。 代码流程如下&#xff1a; 实现代码 #include "stm32f10x.h" // Device headerint main() {//开…...

Android SurfaceView 组件介绍,挖洞原理详解

文章目录 组件介绍基本概念关键特性使用场景 SurfaceHolder介绍主要功能使用示例 SurfaceView 挖洞原理工作机制 使用SurfaceView展示图片示例创建一个自定义的 SurfaceView类在 Activity 中使用 ImageSurfaceView注意事项效果展示 组件介绍 在 Android 开发中&#xff0c;Sur…...

day2加餐 Go 接口型函数的使用场景

文章目录 问题价值使用场景其他语言类似特性 问题 在 动手写分布式缓存 - GeeCache day2 单机并发缓存 这篇文章中&#xff0c;有一个接口型函数的实现&#xff1a; // A Getter loads data for a key. type Getter interface {Get(key string) ([]byte, error) }// A Getter…...

摄像头 RN6752v1 视频采集卡

摄像头 AHD倒车摄像头比较好&#xff0c;AHD英文全名Analog High Definition&#xff0c;即模拟高清&#xff0c;拥有比较好的分辨率与画面质感。 RN6752v1 GQW AKKY2 usb 采集卡 FHD&#xff08;1080p&#xff09;、HD&#xff08;720p&#xff09;和D1&#xff08;480i&am…...

记录vivado自带IP iBert眼图近端回环

记录利用vivado自带IP核工具测试信号质量 ibert是测试眼图的工具&#xff0c;在使用的时候并不用改太多的内容&#xff0c;只需要注意参考时钟及所需要的引脚即可。由于条件的限制&#xff0c;并没有使用光纤和电缆进行连接进行外部回环&#xff0c;仅使用内部回环做测试&…...

js | Core

http://dmitrysoshnikov.com/ecmascript/javascript-the-core/ Object 是什么&#xff1f; 属性[[prototype]]对象。 例如&#xff0c;下面的&#xff0c;son是对象&#xff0c;foo不是对象。打印出来的son&#xff0c;能看到有一个prototype 对象。 prototype vs _proto_ v…...

Log4J reminder

Java JNDI and Log injection https://docs.oracle.com/javase/jndi/tutorial/ See also https://telegra.ph/Log4J-Vulnerability-Explained-07-21...

Unity XR Interaction Toolkit(VR、AR交互工具包)记录安装到开发的流程,以及遇到的常见问题(一)!

提示&#xff1a;文章有错误的地方&#xff0c;还望诸位大神不吝指教&#xff01; 文章目录 前言一、XR Interaction Toolkit是什么&#xff1f;二、跨平台交互三、 AR 功能四、XR Interaction Toolkit的特点五、XR Interaction Toolkit 示例总结 前言 随着VR行业的发展&#…...

MongoDB文档整理

过往mongodb文档&#xff1a; https://blog.csdn.net/qq_46921028/article/details/123361633https://blog.csdn.net/qq_46921028/article/details/131136935https://blog.csdn.net/qq_46921028/article/details/139247847 1. MongoDB前瞻 1、MongoDB概述&#xff1a; MongoDB是…...

【AI学习】关于Scaling Law的相关学习

一、苦涩的教训 首先&#xff0c;学习一段重要话语&#xff1a; The biggest lesson that can be read from 70 years of AI research is that general methods that leverage computation are ultimately the most effective, and by a large margin. 从70年的人工智能研究中…...

学习小记-Kafka相较于其他MQ有啥优势?

Kafka 相比于 RocketMQ 有以下几个优势&#xff1a; 1. 高吞吐量和低延迟&#xff1a; Kafka 以其出色的 I/O 性能和分布式架构设计&#xff0c;能够实现极高的吞吐量&#xff0c;每秒数百万的消息处理能力&#xff0c;适合大规模数据流处理。同时&#xff0c;Kafka 设计为…...

技能 | postman接口测试工具安装及使用

哈喽小伙伴们大家好!今天来给大家分享一款轻量级,高效好用的接口测试工具-postman. Postman是一个流行的API开发工具&#xff0c;主要用于测试、开发和文档化API。以下是关于Postman的介绍及其主要使用场景&#xff1a; Postman介绍&#xff1a; 1. 功能丰富的API客户端&#…...

移动UI:任务中心的作用,该如何设计更合理?

任务中心是移动应用中用于展示和管理用户待办任务、提醒事项、用户福利、打卡签到等内容的功能模块。合理设计任务中心可以提升用户体验和工作效率。 以下是一些设计任务中心的合理建议&#xff1a; 1. 易于查看和管理&#xff1a; 任务中心的设计应该使用户能够快速、直观地…...

pytorch学习(十)优化函数

优化函数主要有&#xff0c;SGD, Adam&#xff0c;RMSProp这三种&#xff0c;并且有lr学习率&#xff0c;momentum动量&#xff0c;betas等参数需要设置。 通过这篇文章&#xff0c;可以学到pytorch中的优化函数的使用。 1.代码 代码参考《python深度学习-基于pytorch》&…...

Ubuntu22.04:安装Samba

1.安装Samba服务 $ sudo apt install samba samba-common 2.创建共享目录 $ mkdir /home/xxx/samba $ chmod 777 /home/xxx/samba 3.将用户加入到Samba服务中 $ sudo smbpasswd -a xxx 设置用户xxx访问Samba的密码 4.配置Samba服务 $ sudo vi /etc/samba/smb.conf 在最后加入 …...

Powershell 使用介绍

0 Preface/Foreword 0.1 参考文档 Starting Windows PowerShell - PowerShell | Microsoft Learn 1 Powershell 介绍 2 命令介绍 2.1 新建文件夹 New-Item -Path C:\GitLab-Runner -ItemType Directory 2.2 切换路径 cd C:\GitLab-Runner 2.3 下载文件 Invoke-WebRequ…...

【Langchain大语言模型开发教程】记忆

&#x1f517; LangChain for LLM Application Development - DeepLearning.AI 学习目标 1、Langchain的历史记忆 ConversationBufferMemory 2、基于窗口限制的临时记忆 ConversationBufferWindowMemory 3、基于Token数量的临时记忆 ConversationTokenBufferMemory 4、基于历史…...

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...