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

  • 开发
  • 25

子绝父相

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

相关推荐

  4. 5.3 函数-递归与求阶乘

    2024-07-10 07:36:04       54 阅读

  6. 阶乘数码#洛谷

    2024-07-10 07:36:04       82 阅读

  8. C语言求阶乘

    2024-07-10 07:36:04       20 阅读

最近更新

  3. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-10 07:36:04       99 阅读

  4. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-10 07:36:04       107 阅读

  9. 在Django里面运行非项目文件

    2024-07-10 07:36:04       90 阅读

  19. Python语言-面向对象

    2024-07-10 07:36:04       98 阅读

  20. 如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

    2024-07-10 07:36:04       96 阅读

热门阅读

  1. python爬虫入门（二）之Requests库

    2024-07-10 07:36:04       24 阅读

  11. RTK_ROS_导航(4):ROS中空地图的生成与加载

    2024-07-10 07:36:04       25 阅读

  12. PCL + Qt + Ribbon 风格（窗口自由组合) demo展示

    2024-07-10 07:36:04       53 阅读

  14. Android Studio Download Gradle 时慢问题解决

    2024-07-10 07:36:04       23 阅读

  17. 无锡哲讯：SAP赋能汽车零配件行业，加速企业数字化转型

    2024-07-10 07:36:04       28 阅读

  18. ASPICE是汽车软件开发中的质量保证流程

    2024-07-10 07:36:04       34 阅读

  21. 游戏开发面试题2

    2024-07-10 07:36:04       36 阅读

  23. AI推介-大语言模型LLMs论文速览（arXiv方向）：2024.07.01-2024.07.05

    2024-07-10 07:36:04       20 阅读

  24. 4.10-7.9

    2024-07-10 07:36:04       38 阅读

  27. 自动驾驶中的逆透视变换（Inverse Perspective Mapping，IPM）详解

    2024-07-10 07:36:04       34 阅读

  28. Django ModelForm用法详解 —— Python

    2024-07-10 07:36:04       30 阅读

  30. uWSGI 配置 python django 进行发布

    2024-07-10 07:36:04       28 阅读