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

news2025/2/25 14:18:53

子绝父相

相对定位是相对于自己原本的位置定位。
绝对定位，如果父元素设置了相对定位，则相对于父元素进行绝对定位，否则相对于最近的设置了相对定位的元素进行绝对定位，或者相对于根元素进行绝对定位。
定位有四个方向，分别是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">
    <div
        class="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>
      <div
          class="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">
    <div
        class="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>
      <div
          class="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">
    <div
        class="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>
      <div
          class="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 CORSMiddleware

app = FastAPI()

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


def fac(n):
    if n <= 2:
        return n

    total = 1
    for i in range(2, n + 1):
        total *= i
    return total


@app.get("/")
async def get_fac(n: int):
    return {"results": fac(n)}


if __name__ == '__main__':
    import uvicorn

    uvicorn.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">
    <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>

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

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

相关文章

白嫖A100-interLM大模型部署试用活动，亲测有效-2.Git

白嫖A100-interLM大模型部署试用活动，亲测有效-2.Git

申明 以下部分内容来源于活动教学文档&#xff1a; Docs git 安装 是一个开源的分布式版本控制系统&#xff0c;被广泛用于软件协同开发。程序员的必备基础工具。 常用的 Git 操作 git init 初始化一个新的 Git 仓库&#xff0c;在当前目录创建一个 .git 隐藏文件夹来跟踪…
阅读更多...
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 文件 (注意要…
阅读更多...
每周算法：无向图的双连通分量

每周算法：无向图的双连通分量

题目链接 冗余路径, Redundant Paths G 题目描述 为了从 F F F 个草场中的一个走到另一个&#xff0c;奶牛们有时不得不路过一些她们讨厌的可怕的树。 奶牛们已经厌倦了被迫走某一条路&#xff0c;所以她们想建一些新路&#xff0c;使每一对草场之间都会至少有两条相互分离…
阅读更多...
【踩坑】解决undetected-chromedriver报错cannot connect to-chrome

【踩坑】解决undetected-chromedriver报错cannot connect to-chrome

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 更新&#xff1a; 发现一个非常好用的项目&#xff0c;直接内置uc&#xff1a; GitHub - seleniumbase/SeleniumBase: &#x1f4ca; Pythons all-in…
阅读更多...
内网通讯软件有哪些？

内网通讯软件有哪些？

企业内部内网通讯工具是为了满足企业内部沟通和协作需求而设计的软件工具&#xff0c;其主要特点是在内网环境下进行通讯&#xff0c;以保证安全性和可控性。以下是一些常见的内网通讯软件&#xff0c;在企业内部通讯中起着重要的作用。 1. Microsoft Teams Microsoft Teams是…
阅读更多...
批导会计凭证程序报错，通过监控点和消息类来定位触发的位置

批导会计凭证程序报错，通过监控点和消息类来定位触发的位置

ZFIU001 批导会计凭证报错&#xff0c;通过监控点和消息类来定位触发的位置 在使用程序导入会计凭证的时候&#xff0c;发现报错&#xff0c;后面找了很久很久的系统标准程序&#xff0c;打断点才找到这个位置&#xff0c;使用监控点还是可以比较快速找到报错的原因的&#xff…
阅读更多...
代码随想录算法训练营第74天：路径总结[1]

代码随想录算法训练营第74天：路径总结[1]

代码随想录算法训练营第74天&#xff1a;路径总结 ‍ A * 算法精讲 &#xff08;A star算法&#xff09; 卡码网&#xff1a;126. 骑士的攻击(opens new window) 题目描述 在象棋中&#xff0c;马和象的移动规则分别是“马走日”和“象走田”。现给定骑士的起始坐标和目标…
阅读更多...
Android 如何通过代码实时设置EditTextView光标

Android 如何通过代码实时设置EditTextView光标

背景&#xff1a;换肤框架下&#xff0c;QA进行深色浅色切换说输入框光标颜色没有改变&#xff0c;转UI结果UI说需要修改&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 本来有方法可以设置&#xff0c;但是 设置后未生效。重新进入该页面才生效&#xff01;&a…
阅读更多...
用Excel处理数据图像，出现交叉怎么办？

用Excel处理数据图像，出现交叉怎么办？

一、问题描述 用excel制作X-Y散点图&#xff0c;意外的出现了4个交叉点&#xff0c;而实际上的图表数据是没有交叉的。 二、模拟图表 模拟部分数据&#xff0c;并创建X-Y散点图&#xff0c;数据区域&#xff0c;X轴数据是依次增加的&#xff0c;因此散点图应该是没有交叉的。…
阅读更多...
AI大模型时代的存储发展趋势

AI大模型时代的存储发展趋势

从2022年下半年&#xff0c;大模型和AIGC这两个词变得极其火热&#xff0c;而GPU的市场也是一卡难求。对于这种迷乱和火热&#xff0c;让我想起了当年的比特币挖矿和IPFS。似乎世界一年一个新风口&#xff0c;比特币、元宇宙、NFT、AIGC&#xff0c;金钱永不眠&#xff0c;IT炒…
阅读更多...
拉曼光谱入门：2.拉曼光谱发展史、拉曼效应与试样温度的确定方法

拉曼光谱入门：2.拉曼光谱发展史、拉曼效应与试样温度的确定方法

1.拉曼光谱技术发展史 这里用简单的箭头与关键字来概括一下拉曼光谱技术的发展史 1928年&#xff1a;拉曼效应的发现 → 拉曼光谱术的初步应用20世纪40年代&#xff1a;红外光谱术的发展 → 拉曼光谱术的限制20世纪60年代&#xff1a;激光作为光源的引入 → 拉曼光谱术的性能提…
阅读更多...
【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;中断分发…
阅读更多...
Linux操作系统中逻辑卷的缩减

Linux操作系统中逻辑卷的缩减

流程&#xff1a;第一步先是要缩减逻辑卷的文件系统。 第二步就是要去缩减逻辑卷的物理边界。 注意事项&#xff1a; 1.逻辑卷要处于卸载状态&#xff0c; 2.建议先备份数据 3.在缩减逻辑卷的时候&#xff0c;要注意xfs文件系统的逻辑卷是不支持直接进行缩减的。 4.在缩减…
阅读更多...
2024亚太杯中文赛数学建模B题word+PDF+代码

2024亚太杯中文赛数学建模B题word+PDF+代码

2024年第十四届亚太地区大学生数学建模竞赛&#xff08;中文赛项&#xff09;B题洪水灾害的数据分析与预测&#xff1a;建立指标相关性与多重共线性分析模型、洪水风险分层与预警评价模型、洪水发生概率的非线性预测优化模型&#xff0c;以及大规模样本预测与分布特征分析模型 …
阅读更多...
日志自动分析-Web---360星图GoaccessALBAnolog

日志自动分析-Web---360星图GoaccessALBAnolog

目录 1、Web-360星图(IIS/Apache/Nginx) 2、Web-GoAccess &#xff08;任何自定义日志格式字符串&#xff09; 源码及使用手册 安装goaccess 使用 输出 3-Web-自写脚本&#xff08;任何自定义日志格式字符串&#xff09; 4、Web-机器语言analog&#xff08;任何自定义日…
阅读更多...
策略模式的应用

策略模式的应用

前言 系统有一个需求就是采购员审批注册供应商的信息时&#xff0c;会生成一个供应商的账号&#xff0c;此时需要发送供应商的账号信息&#xff08;账号、密码&#xff09;到注册填写的邮箱中&#xff0c;通知供应商账号信息&#xff0c;当时很快就写好了一个工具类&#xff0…
阅读更多...
容器：queue(队列)

容器：queue(队列)

以下是关于queue容器的总结 1、构造函数&#xff1a;queue [queueName] 2、添加、删除元素: push() 、pop() 3、获取队头/队尾元素&#xff1a;front()、back() 4、获取栈的大小&#xff1a;size() 5、判断栈是否为空&#xff1a;empty() #include <iostream> #include …
阅读更多...
论文辅助笔记：ST-LLM

论文辅助笔记：ST-LLM

1 时间嵌入 2 PFA&#xff08;Partial Frozen Architecture&#xff09; 3 ST_LLM 3.1 初始化 3.2 forward
阅读更多...
[FreeRTOS 内部实现] 事件组

[FreeRTOS 内部实现] 事件组

文章目录 事件组结构体创建事件组事件组等待位事件组设置位 事件组结构体 // 路径&#xff1a;Source/event_groups.c typedef struct xEventGroupDefinition {EventBits_t uxEventBits;List_t xTasksWaitingForBits; } EventGroup_t;uxEventBits 中的每一位表示某个事件是否…
阅读更多...
CDN节点是什么

CDN节点是什么

CDN 节点是什么 CDN 主要依靠部署在各地的边缘服务器&#xff0c;利用全局负载技术将用户的访问指向距离最近且正常工作的缓存服务器上&#xff0c;用户访问网站时由缓存服务器直接响应用户请求。CDN 节点作为用来缓存数据的服务器&#xff0c;会将用户请求自动指向距离最近的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023