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

  • 开发
  • 15

练习

在这里插入图片描述

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

代码如下：


<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>
    <div
        class="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>
    <div
        class="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>
    <div
        class="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 CORSMiddleware

app = 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 uvicorn

    uvicorn.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>
    <div
        class="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">
    <div
        class="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">
    <div
        class="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">
    <div
        class="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">
    <div
        class="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">
    <div
        class="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 CORSMiddleware

app = 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 uvicorn

    uvicorn.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">
    <div
        class="w-10rem h-8rem bg-yellow-500 "
        v-for="(v,k) in arr"
        :key="k"
    >
      {{ v }}
    </div>
  </div>
</template>
阅读全部

相关推荐

  3. 前后端分离开发

    2024-07-20 23:00:03       39 阅读

最近更新

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

    2024-07-20 23:00:03       52 阅读

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

    2024-07-20 23:00:03       54 阅读

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

    2024-07-20 23:00:03       45 阅读

  19. Python语言-面向对象

    2024-07-20 23:00:03       55 阅读

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

    2024-07-20 23:00:03       50 阅读

热门阅读

  7. 前端面试题日常练-day98 【Less】

    2024-07-20 23:00:03       16 阅读

  11. Uboot下的命令与环境变量

    2024-07-20 23:00:03       19 阅读

  21. 力扣第二十二题——括号生成

    2024-07-20 23:00:03       18 阅读

  23. WebKit简介及工作流程

    2024-07-20 23:00:03       15 阅读

  25. 编程中的智慧之设计模式一

    2024-07-20 23:00:03       16 阅读