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.mzph.cn/news/867475.shtml

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

相关文章

GitHub Copilot API

GitHub Copilot API

1. 引言 GitHub Copilot&#xff1a;智能编程的革新者 在软件开发的浩瀚宇宙中&#xff0c;GitHub Copilot犹如一颗璀璨的新星&#xff0c;以其独特的魅力引领着智能编程的新纪元。作为GitHub与OpenAI合作推出的革命性工具&#xff0c;Copilot不仅仅是一个简单的代码补全插件…
阅读更多...
拉格朗日插值法【python，算法】

拉格朗日插值法【python，算法】

拉格朗日插值是一种在数值分析中用来构建通过一系列已知数据点的多项式插值的方法。这种方法以 18 世纪的法国数学家约瑟夫拉格朗日命名。当给定一组离散的数据点(&#x1d465;_0,&#x1d466;_0),(&#x1d465;_1,&#x1d466;_1),...,(&#x1d465;_&#x1d45b;,&…
阅读更多...
38 IO流

38 IO流

目录 C语言的输入和输出流是什么CIO流stringstream的简单介绍 1. C语言的输入与输出 C语言中我们用到的最频繁的输出方式是scanf和printf&#xff0c;scanf&#xff1a;从标准输入设备&#xff08;键盘&#xff09;读取数据&#xff0c;并将值存在变量中。printf&#xff1a;…
阅读更多...
JSP WEB开发(二) JavaBean

JSP WEB开发(二) JavaBean

目录 JavaBean JavaBean特征 JavaBean的标签 JavaBean 的范围 标签 JavaBean JavaBean 是一种符合某些命名和设计规范的 Java 类&#xff0c;它是一种可重用组件技术&#xff0c;主要用于封装数据&#xff0c;执行负责的计算任务&#xff0c;封装事务逻辑等。JavaBean 的实…
阅读更多...
高级计算机体系结构--期末教材复习

高级计算机体系结构--期末教材复习

Chap2 性能评测和并行编程性能评测并行编程为什么需要三次 barrier改进方法 Chap3 互连网络交换和路由二维网格中 XY 路由 死锁、活锁及饿死死锁避免的方法&#xff1a;虚通道、转弯模型二维网格中最小 西向优先、北向最后和负向优先算法转弯模型&#xff1a;超立方体的部分自适…
阅读更多...
安装 tesseract

安装 tesseract

安装 tesseract 1. Ubuntu-24.04 安装 tesseract2. Ubuntu-24.04 安装支持语言3. Windows 安装 tesseract4. Oracle Linux 8 安装 tesseract 1. Ubuntu-24.04 安装 tesseract sudo apt install tesseract-ocr sudo apt install libtesseract-devreference: https://tesseract-…
阅读更多...
绝区贰--及时优化降低 LLM 成本和延迟

绝区贰--及时优化降低 LLM 成本和延迟

前言 大型语言模型 (LLM) 为各行各业带来了变革性功能&#xff0c;让用户能够利用尖端的自然语言处理技术处理各种应用。然而&#xff0c;这些强大的 AI 系统的便利性是有代价的 — 确实如此。随着 LLM 变得越来越普及&#xff0c;其计算成本和延迟可能会迅速增加&#xff0c;…
阅读更多...
ctfshow web 36d 练手赛

ctfshow web 36d 练手赛

不知所措.jpg 没啥用然后测试了网站可以使用php伪达到目的 ?filephp://filter/convert.base64-encode/resourcetest/../index.<?php error_reporting(0); $file$_GET[file]; $file$file.php; echo $file."<br />"; if(preg_match(/test/is,$file)){inclu…
阅读更多...
如何处理 PostgreSQL 中由于表连接顺序不当导致的性能问题？

如何处理 PostgreSQL 中由于表连接顺序不当导致的性能问题？

文章目录 一、理解表连接和连接顺序二、识别由于表连接顺序不当导致的性能问题三、影响表连接顺序的因素四、解决方案手动调整连接顺序创建合适的索引分析数据分布和优化查询逻辑 五、示例分析手动调整连接顺序创建索引优化查询逻辑 六、总结 在 PostgreSQL 中&#xff0c;表连…
阅读更多...
uni-app优点有哪些？

uni-app优点有哪些？

uni-app的优点主要有以下几个方面&#xff1a; 跨平台开发&#xff1a;uni-app支持一套代码编写&#xff0c;多端运行&#xff0c;无需额外的适配工作&#xff0c;可以同时在iOS、Android、Web等多个平台上运行。这大大提高了开发效率&#xff0c;节省了开发成本和时间。统一的…
阅读更多...
论文回顾 | CVPR 2021 | How to Calibrate Your Event Camera | 基于图像重建的事件相机校准新方法

论文回顾 | CVPR 2021 | How to Calibrate Your Event Camera | 基于图像重建的事件相机校准新方法

论文速览 | CVPR 2021 | How to Calibrate Your Event Camera | 基于图像重建的事件相机校准新方法 1 引言 在计算机视觉和机器人领域,相机校准一直是一个基础而又重要的问题。传统的相机校准方法主要依赖于从已知校准图案中提取角点,然后通过优化算法求解相机的内参和外参。这…
阅读更多...
Vue表单输入绑定v-model

Vue表单输入绑定v-model

表单输入绑定 在前端处理表单时&#xff0c;我们常常需要将表单输入框的内容同步给Javascript中相应的变量。手动连接绑定和更改事件监听器可能会很麻&#xff0c;v-model 指令帮我们简化了这一步骤。 <template><h3>表单输入绑定</h3><hr> <inpu…
阅读更多...
Ubuntu基本环境配置

Ubuntu基本环境配置

#Jdk 安装 #--查看 已安装 的jdk软件 java -version # 安装jdk软件(如果有选择请选 y) sudo apt install openjdk-11-jdk # 自行学习 vi 或 vim 学习网址如下&#xff1a; # https://www.runoob.com/linux/linux-vim.html #-- 修改系统级 path : /etc/profile 文件 (注意要…
阅读更多...
ElasticSearch 如何计算得分及一个不太成熟的使用

ElasticSearch 如何计算得分及一个不太成熟的使用

1.背景 最近在做 ES 相关东西&#xff0c;只最会在查询的时候给不同的字段设置不同的权重&#xff0c;但是得分具体怎么算的不太明白&#xff0c;花了4-5 天研究和总结了一下。这样不至于被别人问到“这个分数怎么算出来的&#xff1f;”&#xff0c;两眼一抹黑&#xff0c;不…
阅读更多...
【vue组件库搭建05】vitePress中使用vue/antd/demo预览组件

【vue组件库搭建05】vitePress中使用vue/antd/demo预览组件

一、vitepress使用vue及antd组件 1.安装antd之后在docs\.vitepress\theme\index.ts引入文件 // https://vitepress.dev/guide/custom-theme import { h } from vue import type { Theme } from vitepress import DefaultTheme from vitepress/theme import ./style.css impor…
阅读更多...
Vue进阶（四十五）Jest集成指南

Vue进阶（四十五）Jest集成指南

文章目录 一、前言二、环境检测三、集成问题汇总四、拓展阅读 一、前言 在前期博文《Vue进阶&#xff08;八十八&#xff09;Jest》中&#xff0c;讲解了Jest基本用法及应用示例。一切顺利的话&#xff0c;按照文档集成应用即可&#xff0c;但是集成过程中遇到的问题可能五花八…
阅读更多...
基于Java的网上花店系统

基于Java的网上花店系统

目 录 1 网上花店商品销售网站概述 1.1 课题简介 1.2 设计目的 1.3 系统开发所采用的技术 1.4 系统功能模块 2 数据库设计 2.1 建立的数据库名称 2.2 所使用的表 3 网上花店商品销售网站设计与实现 1. 用户注册模块 2. 用户登录模块 3. 鲜花列表模块 4. 用户购物车…
阅读更多...
【ARMv8/v9 GIC 系列 1.5 -- Enabling the distribution of interrupts】

【ARMv8/v9 GIC 系列 1.5 -- Enabling the distribution of interrupts】

请阅读【ARM GICv3/v4 实战学习 】 文章目录 Enabling the distribution of interruptsGIC Distributor 中断组分发控制CPU Interface 中断组分发控制Physical LPIs 的启用Summary Enabling the distribution of interrupts 在ARM GICv3和GICv4体系结构中&#xff0c;中断分发…
阅读更多...
Windows上Docker的安装与初体验

Windows上Docker的安装与初体验

Docker Desktop下载地址 国内下载地址 一、基本使用 1. 运行官方体验镜像 docker run -d -p 80:80 docker/getting-started执行成功 停止体验服务 docker stop docker/getting-started删除体验镜像 docker rmi docker/getting-started2. 修改docker镜像的存储位置 3. …
阅读更多...
【初中数学选讲】二次根式练习题（20240706-01）

【初中数学选讲】二次根式练习题（20240706-01）

初中数学选讲&#xff1a;二次根式练习题&#xff08;20240706-01&#xff09; 1. 练习题目1.1 题目描述1.2 思路 2. 答题2.1 分析通项2.2 求通项的和 鸣谢 1. 练习题目 辅导初中学生数学的过程中&#xff0c;发现一道有意思的题目&#xff0c;分享如下。 1.1 题目描述 计算…
阅读更多...
最新文章

Copyright @ 2022~2023