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

练习

在这里插入图片描述

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

代码如下：


<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><divclass="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><divclass="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><divclass="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 CORSMiddlewareapp = 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 uvicornuvicorn.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><divclass="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"><divclass="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"><divclass="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"><divclass="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"><divclass="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"><divclass="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 CORSMiddlewareapp = 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 uvicornuvicorn.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"><divclass="w-10rem h-8rem bg-yellow-500 "v-for="(v,k) in arr":key="k">{{ v }}</div></div>
</template>