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

news2024/9/19 15:17:28

练习

在这里插入图片描述

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

代码如下：


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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1937801.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

RESTful API设计指南：构建高效、可扩展和易用的API

RESTful API设计指南：构建高效、可扩展和易用的API

文章目录 引言一、RESTful API概述1.1 什么是RESTful API1.2 RESTful API的重要性 二、RESTful API的基本原则2.1 资源导向设计2.2 HTTP方法的正确使用 三、URL设计3.1 使用名词而非动词3.2 使用复数形式表示资源集合 四、请求和响应设计4.1 HTTP状态码4.2 响应格式4.2.1 响应实…
阅读更多...
新能源汽车空调系统的四个工作过程

新能源汽车空调系统的四个工作过程

汽车空调制冷系统组成 1.汽车空调制冷系统组成 以R134a为制冷剂的汽车空调制冷系统主要包括压缩机、电磁离合器、冷凝器、 散热风扇、储液于燥器、膨胀阀、蒸发器、鼓风机、制冷连接管路、高低压检测 连接接头、调节与控制装置等组成。 汽车空调的四个过程 1压缩过程 传统车…
阅读更多...
nginx的access.log日志输出请求总数、QPS和平均带宽

nginx的access.log日志输出请求总数、QPS和平均带宽

适用格式 #log_format main $remote_addr - $remote_user [$time_local] "$request" # $status $body_bytes_sent "$http_referer" # "$http_user_agent" "$http_x_forwarded_for"; 形如&#…
阅读更多...
差分进化算法原理及其MATLAB/Python代码

差分进化算法原理及其MATLAB/Python代码

1.算法简介 引用自&#xff1a;Storn R, Price K. Differential evolution–a simple and efficient heuristic for global optimization over continuous spaces[J]. Journal of global optimization, 1997, 11: 341-359. 今天给大家带来的是一个非常经典的智能优化算法–差分…
阅读更多...
buu做题(6)

buu做题(6)

目录 [GWCTF 2019]我有一个数据库 [WUSTCTF2020]朴实无华 [GWCTF 2019]我有一个数据库 什么都没有, 尝试用dirsearch扫一下目录 可以扫到一个 /phpmyadmin 可以直接进入到数据库里面 但里面没什么东西 可以看到它的版本不是最新的, 搜一下相关的漏洞 phpMyAdmin 4.8.1后台文…
阅读更多...
OCR识别采购单小程序管理助手

OCR识别采购单小程序管理助手

千呼新零售2.0系统是零售行业连锁店一体化收银系统&#xff0c;包括线下收银线上商城连锁店管理ERP管理商品管理供应商管理会员营销等功能为一体&#xff0c;线上线下数据全部打通。 适用于商超、便利店、水果、生鲜、母婴、服装、零食、百货、宠物等连锁店使用。 详细介绍请…
阅读更多...
nodejs学习之process.env.NODE_ENV

nodejs学习之process.env.NODE_ENV

简介 process对象是 Node 的一个全局对象&#xff0c;提供当前 Node 进程的信息。它可以在脚本的任意位置使用&#xff0c;不必通过require命令加载。该对象部署了EventEmitter接口。 process.env 属性返回包含用户环境的对象 使用 pnpm init新建index.js const { env } r…
阅读更多...
在win10上通过WSL和docker安装Ubuntu子系统，并配置Ubuntu可成功使用宿主机GPU

在win10上通过WSL和docker安装Ubuntu子系统，并配置Ubuntu可成功使用宿主机GPU

本文主要记录win10系统上，通过WSL的Ubuntu系统以及Docker使用GPU的全部过程。 文章目录 1、 启用hyper-v2、 安装docker3、 安装WSL3.1 安装WSL23.1.1 检查是否安装了WSL23.1.1 安装和配置 WSL 23.2 安装Ubuntu 子系统3.3 检查并修改WSL版本4、docker配置ubuntu20.04 LTS5、下…
阅读更多...
linux系统下，matplotlib无法显示中文字体的解决办法

linux系统下，matplotlib无法显示中文字体的解决办法

1.查看自己系统是否安装了中文字体 看是否有这个目录&#xff0c;如果没有的话&#xff0c;则进行安装 2.安装中文的字体 sudo apt-get install ttf-wqy-zenhei3.测试matplotlib进行显示中文字体 from matplotlib.font_manager import FontProperties font FontProperties…
阅读更多...
什么？突降福利假日——Windows全球蓝屏！

什么？突降福利假日——Windows全球蓝屏！

在科技界，任何大型软件公司的产品出现问题都可能成为头条新闻，而当这个问题是“蓝屏死机”（Blue Screen of Death, BSOD），并且影响范围覆盖全球时，其影响力更是无法估量。 近日，微软公司就经历了一场史无前例的全球性蓝屏事件，这一事件不仅考验了微软的技术应对能力，也…
阅读更多...
员工泄密公司资料起诉有用吗或者用什么软件管控防止

员工泄密公司资料起诉有用吗或者用什么软件管控防止

员工泄密公司资料时&#xff0c;公司采取法律行动起诉员工确实是一种有效的应对方式&#xff0c;尤其是当泄密行为对公司造成了显著的经济或名誉损失时。 因为法律有专门的条款规定。 法律界定 民事责任 当员工泄密对公司造成经济损失时&#xff0c;公司可以依据《中华人民共…
阅读更多...
pytorch的17个Loss和10个优化函数

pytorch的17个Loss和10个优化函数

pytorch的17个Loss和10个优化函数 一、 17个Loss 函数二、10个优化器 一、 17个Loss 函数 二、10个优化器 开始&#xff1a;
阅读更多...
C#定时发送邮件功能

C#定时发送邮件功能

C#定时发送邮件功能 背景 自动运维监控客户端在自动关闭时&#xff0c;需要给实施同学发送提醒邮件。支持163邮箱、qq邮箱、火狐邮箱等各种通用邮箱。 定时器发送邮件 代码 邮件功能模块 using ITSLog.LogManage; using System; using System.Collections.Generic; using…
阅读更多...
FLINK-运行架构

FLINK-运行架构

为什么要学习Flink运行架构&#xff1f; 虽然现在大厂的开发工具都非常高效、只需要进行参数配置、Flink-sql写业务逻辑&#xff0c;但是在资源配置逻辑优化上不可避免需要了解底层的组件配置。面试时可能也会被问到FLINK是如何进行资源分配、作业运行的等。 以下是在学习时记录…
阅读更多...
【一刷《剑指Offer》】面试题 34：丑数

【一刷《剑指Offer》】面试题 34：丑数

力扣对应题目链接&#xff1a;264. 丑数 II - 力扣&#xff08;LeetCode&#xff09; 牛客对应题目链接&#xff1a;丑数_牛客题霸_牛客网 (nowcoder.com) 一、《剑指Offer》对应内容 二、分析题目 根据题意&#xff0c;每个丑数都可以由其他较小的丑数通过乘以 2 或 3 或 5 …
阅读更多...
C++字体库开发之fontconfig使用五

C++字体库开发之fontconfig使用五

代码 #include <cassert> #include <algorithm> #include "fontconfig/fontconfig.h" #include <stdexcept> #include <iostream>#define HAS_FALLBACK_CONFIGURATIONenum FontStyle : uint16_t {Regular 0,Italic 0x01,Bold 0x02, };en…
阅读更多...
如何在 Mac 上恢复丢失或删除的文件

如何在 Mac 上恢复丢失或删除的文件

也许您放错了 Mac 上的某个文件&#xff0c;或者永久删除了现在需要的文件。根据您丢失或删除文件的时间&#xff0c;有多种方法可以恢复 MacOS 上的项目。 我们从最快、最简单的方法开始&#xff0c;然后逐渐采用更耗时或更昂贵的方法来恢复 Mac 上的文件、文件夹和其他项目。…
阅读更多...
MySQL添加索引时会锁表吗？

MySQL添加索引时会锁表吗？

目录 简介Online DDL概念Online DDL用法总结 简介 在MySQL5.5以及之前的版本&#xff0c;通常更改数据表结构操作&#xff08;DDL&#xff09;会阻塞对表数据的增删改操作&#xff08;DML&#xff09;。 MySQL5.6提供Online DDL之后可支持DDL与DML操作同时执行&#xff0c;降低…
阅读更多...
CentOS 7 yum官方源失效

CentOS 7 yum官方源失效

问题 2024年7月&#xff0c;官方对centos 7停止了维护&#xff0c;yum的源网址mirror.centos.org也已经无法访问。 在此情况下&#xff0c;无法正常使用yum进行安装和更新工具。 在尝试了更换阿里源之后&#xff0c;仍然有部分工具库无法访问。 通用解决方案 1. 打开/etc/y…
阅读更多...
react页面指定dom转pdf导出

react页面指定dom转pdf导出

1. 使用jsPDFhtml2canvas将页面转成图片然后导出2. 自定义创建iframe调用iframe.print()进行页面打印转pdf导出3. 使用react-to-print插件打印pdf4. 利用media print样式打印页面局部元素 1. 使用jsPDFhtml2canvas将页面转成图片然后导出 缺点&#xff1a;页面过长可能会导出失…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023