FastAPI+vue3+Primeflex教学20240706，渲染阶乘案例

子绝父相

相对定位是相对于自己原本的位置定位。
绝对定位，如果父元素设置了相对定位，则相对于父元素进行绝对定位，否则相对于最近的设置了相对定位的元素进行绝对定位，或者相对于根元素进行绝对定位。
定位有四个方向，分别是top上，bottom下，left左，right右。如果bottom是0，left是0，则在左下角，如果right是0，top是0，则在右上角。
在这里插入图片描述

<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="relative"><divclass="static bg-primary-100 p-4 border-round text-gray-800"style="min-width: 300px; min-height: 150px;"><p class="font-bold text-gray-900">Static</p><divclass="absolute bottom-0 left-0 bg-primary border-round p-4 font-bold "style="min-width: 120px; min-height: 70px">Absolute</div></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 () {// 总是会执行});
</script><template><div class="relative"><divclass="static bg-primary-100 p-4 border-round text-gray-800"style="min-width: 300px; min-height: 150px;"><p class="font-bold text-gray-900">Static</p><divclass="absolute top-0 right-0 bg-primary border-round p-4 font-bold "style="min-width: 120px; min-height: 70px">Absolute</div></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 () {// 总是会执行});
</script><template><div class="relative"><divclass="static bg-primary-100 p-4 border-round text-gray-800"style="min-width: 300px; min-height: 150px;"><p class="font-bold text-gray-900">Static</p><divclass="absolute top-0 right-50 bg-primary border-round p-4 font-bold "style="min-width: 120px; min-height: 70px">Absolute</div></div></div>
</template>

固定定位

<template><div style="height: 250px"><div class="relative bg-primary border-round border-1 border-primary-500" style="height: 200px"><div class="absolute top-0 left-0 px-4 py-3 w-full font-bold">Fixed</div><div class="absolute overflow-auto surface-overlay mt-6 p-4 line-height-3 text-red-300" style="height: 150px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.</div></div></div>
</template>

练习：渲染阶乘值

onMounted是vue的生命周期方法，会在页面刷新的时候自动触发。

后端代码：

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=["*"],
)def fac(n):if n <= 2:return ntotal = 1for i in range(2, n + 1):total *= ireturn total@app.get("/")
async def get_fac(n: int):return {"results": fac(n)}if __name__ == '__main__':import uvicornuvicorn.run(app, host='0.0.0.0', port=8001)

前端代码：

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";const n1 = ref(10)
const n2 = ref(9)
const n3 = ref(8)
const n4 = ref(7)
const n5 = ref(6)
const n6 = ref(5)onMounted(()=>{axios({method: 'get',url:"http://127.0.0.1:8001/?n="+n1.value}).then((res)=>{console.log(res.data)console.log(res.data.results)n1.value = res.data.results})axios({method: 'get',url:"http://127.0.0.1:8001/?n="+n2.value}).then((res)=>{console.log(res.data)console.log(res.data.results)n2.value = res.data.results})axios({method: 'get',url:"http://127.0.0.1:8001/?n="+n3.value}).then((res)=>{console.log(res.data)console.log(res.data.results)n3.value = res.data.results})axios({method: 'get',url:"http://127.0.0.1:8001/?n="+n4.value}).then((res)=>{console.log(res.data)console.log(res.data.results)n4.value = res.data.results})axios({method: 'get',url:"http://127.0.0.1:8001/?n="+n5.value}).then((res)=>{console.log(res.data)console.log(res.data.results)n5.value = res.data.results})axios({method: 'get',url:"http://127.0.0.1:8001/?n="+n6.value}).then((res)=>{console.log(res.data)console.log(res.data.results)n6.value = res.data.results})
})</script>
<template><div class="flex flex-wrap justify-content-center" style="min-height: 200px"><div class="z-5 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1" style="width: 100px; height: 100px; left:125px">{{ n1}}</div><div class="z-4 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1" style="width: 100px; height: 100px; left:100px; top:10px">{{ n2}}</div><div class="z-3 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1" style="width: 100px; height: 100px; left:75px; top:20px">{{ n3}}</div><div class="z-2 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1" style="width: 100px; height: 100px; left:50px; top:30px">{{ n4}}</div><div class="z-1 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1" style="width: 100px; height: 100px; left:25px; top:40px">{{ n5}}</div><div class="z-0 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1" style="width: 100px; height: 100px; top:50px">{{ n6}}</div></div>
</template>

渲染结果：
在这里插入图片描述

使用循环优化前端代码

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";const n1 = ref(10)
const n2 = ref(9)
const n3 = ref(8)
const n4 = ref(7)
const n5 = ref(6)
const n6 = ref(5)onMounted(() => {let arr = [n1, n2, n3, n4, n5, n6]for (let n of arr){console.log(n, n.value)axios({method: 'get',url: "http://127.0.0.1:8001/?n=" + n.value}).then((res) => {console.log(res.data)console.log(res.data.results)n.value = res.data.results})}
})</script>
<template><div class="flex flex-wrap justify-content-center" style="min-height: 200px"><divclass="z-5 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1"style="width: 100px; height: 100px; left:125px">{{ n1 }}</div><divclass="z-4 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1"style="width: 100px; height: 100px; left:100px; top:10px">{{ n2 }}</div><divclass="z-3 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1"style="width: 100px; height: 100px; left:75px; top:20px">{{ n3 }}</div><divclass="z-2 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1"style="width: 100px; height: 100px; left:50px; top:30px">{{ n4 }}</div><divclass="z-1 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1"style="width: 100px; height: 100px; left:25px; top:40px">{{ n5 }}</div><divclass="z-0 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1"style="width: 100px; height: 100px; top:50px">{{ n6 }}</div></div>
</template>

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

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

相关文章

uniapp 在手机上导出excel

uniapp 在手机上导出excel

1.创建excelDev.js文件 export default {exportExcel(fileData, documentName excel) {plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(fs) {let rootObj fs.rootlet fullPath rootObj.fullPathconsole.log("开始导出数据")// 创建文件夹rootObj…
阅读更多...
2.Python学习：数据类型和变量

2.Python学习：数据类型和变量

1.标识符命名规则 只能由数字、字母、下划线组成不能以数字开头不能是关键字&#xff08;如class等python内部已经使用的标识符&#xff09;区分大小写 查看关键字&#xff1a; print(keyword.kwlist)2.数据类型 2.1常见数据类型 2.1.1Number数值型&#xff1a; 整数int&a…
阅读更多...
java集合(2)

java集合(2)

目录 一. Map接口下的实现类 1. HashMap 1.1 HashMap常用方法 2. TreeMap 2.1 TreeMap常用方法 3. Hashtable 3.1 Hashtable常用方法 4.Map集合的遍历 4.1 根据键找值 4.2 利用map中的entrySet()方法 二.Collections类 1.Collections类中的常用方法 三. 泛型 1. 为什…
阅读更多...
uniapp 去掉小数末尾多余的0

uniapp 去掉小数末尾多余的0

文章目录 在uniapp或者一般的JavaScript环境中&#xff0c;要去掉小数末尾的0&#xff0c;可以使用以下几种方法&#xff1a; 使用parseFloat()函数 let num 123.4500; let result parseFloat(num); console.log(result); // 输出: 123.45字符串处理 将数字转换为字符串&am…
阅读更多...
Excel中按列的首行字母顺序，重新排列(VBA脚本)

Excel中按列的首行字母顺序，重新排列(VBA脚本)

排序前 要求对4列数据按照第一行abcd的顺序排列 VB脚本如下&#xff1a; 要使用这个脚本&#xff0c;请按照以下步骤操作&#xff1a; 打开Excel&#xff0c;然后按下 Alt F11 打开VBA编辑器。在VBA编辑器中&#xff0c;选择“插入” > “模块”&#xff0c;在打开的模块…
阅读更多...
C#——使用ini-parser第三方操作ini文件

C#——使用ini-parser第三方操作ini文件

使用ini-parser第三方操作ini文件 IniParser - 一个轻量级的.NET类库&#xff0c;用于读写INI文件。 安装 在NuGet程序包中下载IniParser第三方 使用IniParser第三方操作Ini文件 读取 // 初始化解析器var parser new FileIniDataParser();// 读取INI文件string iniFilePat…
阅读更多...
Lambda架构

Lambda架构

1.Lambda架构对大数据处理系统的理解 Lambda架构由Storm的作者Nathan Marz提出&#xff0c;其设计目的在于提供一个能满足大数据系统关键特性的架构&#xff0c;包括高容错、低延迟、可扩展等。其整合离线计算与实时计算&#xff0c;融合不可变性、读写分离和复杂性隔离等原则&…
阅读更多...
图片管理新纪元：高效批量横向拼接图片，一键生成灰色艺术效果，打造专业视觉体验！

图片管理新纪元：高效批量横向拼接图片，一键生成灰色艺术效果，打造专业视觉体验！

在数字时代&#xff0c;图片已成为我们生活和工作中不可或缺的一部分。但面对海量的图片&#xff0c;如何高效地进行批量管理、拼接和调色&#xff0c;成为许多人面临的难题。今天&#xff0c;我们为您带来了一款颠覆性的图片管理工具&#xff0c;让您轻松实现图片批量横向拼接…
阅读更多...
Linux 查看磁盘是不是 ssd 的方法

Linux 查看磁盘是不是 ssd 的方法

lsblk 命令检查 $ lsblk -d -o name,rota如果 ROTA 值为 1&#xff0c;则磁盘类型为 HDD&#xff0c;如果 ROTA 值为 0&#xff0c;则磁盘类型为 SSD。可以在上面的屏幕截图中看到 sda 的 ROTA 值是 1&#xff0c;表示它是 HDD。 2. 检查磁盘是否旋转 $ cat /sys/block/sda/q…
阅读更多...
使用 PCA 可视化数据的分类能力

使用 PCA 可视化数据的分类能力

使用 PCA 探索数据分类的效果&#xff08;使用 Python 代码&#xff09; 「AI秘籍」系列课程&#xff1a; 人工智能应用数学基础人工智能Python基础人工智能基础核心知识人工智能BI核心知识人工智能CV核心知识 主成分分析 (PCA) 是数据科学家使用的绝佳工具。它可用于降低特征…
阅读更多...
[VN2020 公开赛]strangeCpp

[VN2020 公开赛]strangeCpp

每天水一道题计划&#xff0c;打卡第三天 看着挺奇怪的&#xff0c;然后想动调&#xff0c;出现了一点错误 沉默&#xff0c;反思&#xff0c;不解&#xff0c;疑惑 然后观察&#xff0c;最开始有一堆数据&#xff0c;不知道干嘛的 对welcome中间的数据交叉引用发现 重点应该…
阅读更多...
leetcode判断二分图

leetcode判断二分图

判断二分图 图的问题肯定要用到深度优先遍历或者广度优先遍历&#xff0c;但又不是单纯的深度优先遍历算法和广度优先遍历算法&#xff0c;而是需要在遍历的过程中加入与解决题目相关的逻辑。 题干中说了&#xff0c;这个图可能不是连通图&#xff0c;这个提示有什么作用呢&a…
阅读更多...
Mysql慢日志、慢SQL

Mysql慢日志、慢SQL

慢查询日志 查看执行慢的SQL语句&#xff0c;需要先开启慢查询日志。 MySQL 的慢查询日志&#xff0c;记录在 MySQL 中响应时间超过阀值的语句&#xff08;具体指运行时间超过 long_query_time 值的SQL。long_query_time 的默认值为10&#xff0c;意思是运行10秒以上(不含10秒…
阅读更多...
用C#调用Windows API向指定窗口发送按键消息详解与示例

用C#调用Windows API向指定窗口发送按键消息详解与示例

文章目录 1. 按键消息的定义及功能2. 引入所需的命名空间3. 定义Windows API函数4. 定义发送消息的方法5. 获取窗口句柄6. 调用API发送按键消息7. 使用示例注意事项总结 在C#中调用Windows API向指定窗口发送按键消息是一种常见的操作&#xff0c;这通常用于自动化脚本、游戏辅…
阅读更多...
讲个SystemVerilog随机约束小坑

讲个SystemVerilog随机约束小坑

正文 记录个在写SystemVerilog随机约束时遇到的一个小坑&#xff0c;如果没有认真去查看随机结果是否符合预期&#xff0c;还真不容易发现。 为了方便讲述&#xff0c;写了如下示例代码。类cl_a里有个随机变量aa&#xff0c;初始值为222。在module top里对类cl_a例化并进行约…
阅读更多...
短链接学习day2

短链接学习day2

用户敏感信息脱敏展示&#xff1a; RequestParam 和 PathVariable的区别 注解是用于从request中接收请求的&#xff0c;两个都可以接收参数&#xff0c;关键点不同的是RequestParam 是从request里面拿取值&#xff0c;而 PathVariable 是从一个URI模板里面来填充。 PathVari…
阅读更多...
[leetcode hot 150]第一百一十七题，填充每个节点的下一个右侧节点

[leetcode hot 150]第一百一十七题，填充每个节点的下一个右侧节点

题目&#xff1a; 给定一个二叉树&#xff1a; struct Node {int val;Node *left;Node *right;Node *next; } 填充它的每个 next 指针&#xff0c;让这个指针指向其下一个右侧节点。如果找不到下一个右侧节点&#xff0c;则将 next 指针设置为 NULL 。 初始状态下&#x…
阅读更多...
数据结构试卷（一）王彬

数据结构试卷（一）王彬

一、单选题&#xff08;每题 2 分&#xff0c;共20分&#xff09; 栈和队列的共同特点是( )。 A.只允许在端点处插入和删除元素 B.都是先进后出 C.都是先进先出 D.没有共同点 用链接方式存储的队列&#xff0c;在进行插入运算时( ). A. 仅修改头指针 　 …
阅读更多...
深入理解C# log4Net日志框架：功能、使用方法与性能优势

深入理解C# log4Net日志框架：功能、使用方法与性能优势

文章目录 1、log4Net的主要特性2、log4Net框架详解配置日志级别 3、log4Net的使用示例4、性能优化与对比5、总结与展望 在软件开发过程中&#xff0c;日志记录是一个不可或缺的功能。它可以帮助开发者追踪错误、监控应用程序性能&#xff0c;以及进行调试。在C#生态系统中&…
阅读更多...
STM32-LED和蜂鸣器

STM32-LED和蜂鸣器

本内容是基于江协科技STM32视频整理而得。 1. LED和蜂鸣器 1.1 LED和蜂鸣器简介 LED&#xff1a;发光二极管&#xff0c;正向导通点亮&#xff0c;反向通电不亮 有源蜂鸣器&#xff1a;内部自带振荡源&#xff0c;将正负极接上直流电压即可持续发声&#xff0c;频率固定。 无…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发