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"/>