primeflex讲授条记20240720， FastAPI+Vue3+PrimeVue前后端分脱离辟

练习

先实现根本的页面结构：

代码如下：

2. <template>
3.   <div class="flex p-3 bg-gray-100 gap-3">
4.     <div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl">
5.       <input type="number" value="33" class="p-3 text-3xl w-10rem"/>
6.     </div>
7.     <div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl">+</div>
8.     <div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl">
9.       <input type="number" value="333" class="p-3 text-3xl w-10rem"/>
10.     </div>
11.     <div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl">=</div>
12.     <div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl">366</div>
13.   </div>
14. </template>

复制代码

接下来就是添加点击事故：

1. <script setup>
2. import axios from "axios";
3. import {
4.      
5.      ref} from "vue";
7. const message = ref("frontend variable")
8. axios.get('http://127.0.0.1:8001/')
9.     .then(function (response) {
10.      
11.      
12.       // 处理成功情况
13.       console.log(response);
14.       message.value = response.data.message
15.     })
16.     .catch(function (error) {
17.      
18.      
19.       // 处理错误情况
20.       console.log(error);
21.     })
22.     .finally(function () {
23.      
24.      
25.       // 总是会执行
26.     });
28. const onCalcClick = () => {
29.      
30.      
31.   alert("clicked...")
32. }
33. </script>
35. <template>
36.   <div class="flex p-3 bg-gray-100 gap-3">
37.     <div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl">
38.       <input type="number" value="33" class="p-3 text-3xl w-10rem"/>
39.     </div>
40.     <div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl">+
41.     </div>
42.     <div class="w-20rem h-12rem bg-indigo-200 flex justify-content-center align-items-center text-white text-5xl">
43.       <input type="number" value="333" class="p-3 text-3xl w-10rem"/>
44.    

复制代码