当前位置: 首页 > news >正文

Vue表单提交与数据存储

学习内容来源:视频p5
书接

目录

  • 对页面重新命名
  • 选择组件
  • 后端对接
    • 测试接口
    • 设置接口
  • 前端调用

对页面重新命名

将之前的 Page1 Page2 进行重新命名,使其具有实际意义
Page1 → BookManage ; Page2 → AddBook
并且 /router/index.js 中配置页面信息
在这里插入图片描述

在这里插入图片描述

选择组件

一般填写内容都采用 Form 表单组件,选择一个复制粘贴即可
精简组件,留下需要的即可
在这里插入图片描述
表单通过 :model 绑定创建对象的属性,:ref 属性相当于表单名称
在这里插入图片描述
在这里插入图片描述

通过 :rule 属性规定填写格式
以预设的 name 规则为例

rules: {name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],}
属性含义
required是否为必填
message空缺时提示信息
trigger何时触发校验,blur意为鼠标没有聚焦时
min/max字段最小/最大长度
在表单的标签栏通过 prop 绑定具体规则

在这里插入图片描述
可以通过新增一个按钮来显示是否成功接收到了填写的数据
在这里插入图片描述
配置一下点击事件在这里插入图片描述
即可在控制台查看在这里插入图片描述

后端对接

测试接口

bookRepository 所继承的JPA自带了一个 save() 方法,可以直接传入对象存入数据库,并且返回一个从数据库读出的数据,此处可以打印以测试是否存入成功
在这里插入图片描述
但要注意,如果数据库中 id 是自增属性,而且后端没有手动赋值,则需要在实体类上标注此属性自增,否则会报错
在这里插入图片描述
需要在实体类添加一个自增注解
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
证明存入成功

设置接口

在Handler目录下创建存储数据接口
在这里插入图片描述
将传递来的对象映射为java对象,调用之前测试的 save() 方法进行存储

前端调用

在提交对应的函数下调用 axios 封装好的函数

axios.post("http://localhost:8181/book/save",this.ruleForm).then(function (resp) {if (resp.data == "success"){alert("上传成功");}else{alert("上传失败");}
})

在这里插入图片描述
到数据库查看,确实已经上传成功
在这里插入图片描述
可以选择一个合适的组件来显示报告信息
在这里插入图片描述
注意使用外层 this 指针就行,其余仿照官方文档即可
在这里插入图片描述
也可以选择添加成功后跳转至查询页面,进一步验证是否添加成功

if (resp.data == "success"){_this.$alert("《"+_this.ruleForm.name+"》添加成功", '成功', {confirmButtonText: '确定',callback: action => {_this.$router.push("/BookMange");}});
}else{_this.$message.error("添加失败");
}

最终效果
请添加图片描述

相关文章:

Vue表单提交与数据存储

学习内容来源:视频p5 书接目录对页面重新命名选择组件后端对接测试接口设置接口前端调用对页面重新命名 将之前的 Page1 Page2 进行重新命名,使其具有实际意义 Page1 → BookManage ; Page2 → AddBook 并且 /router/index.js 中配置页面信息…...

API网关(接入层之上业务层之上)以及业务网关(后端服务网关)设计思路(二)

文章目录 流量网关业务网关常见网关对比1. OpenResty2. KongKong解决了什么问题Kong的优点以及性能Kong架构3. Zuul1.0过滤器IncomingEndpointOutgoing过滤器类型Zuul 1.0 请求生命周期4. Zuul2.0Zuul 与 Zuul 2 性能对比5. Spring Cloud GatewaySpring Cloud Gateway 底层使用…...

有些笑话,外行人根本看不懂,只有程序员看了会狂笑不止

我一直都觉得我们写代码的程序员与众不同,就连笑话都跟别人不一样。 如果让外行人来看我们一些我们觉得好笑的东西,他们根本不知道笑点在哪里。 不信你来瞧瞧,但凡有看不懂的地方,说明你的道行还不够深。 1.大多数人开始学编程时…...

企业电子招投标采购系统——功能模块功能描述

​ 功能模块: 待办消息,招标公告,中标公告,信息发布 描述: 全过程数字化采购管理,打造从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理。通供应商门户具备内外协同的能力,为外…...

Presto 在美图的实践

导读:本文的主题是Presto高性能引擎在美图的实践,首先将介绍美图在处理ad-hoc场景下为何选择Presto,其次我们如何通过外部组件对Presto高可用与稳定性的增强。然后介绍在美图业务中如何做到合理与高效的利用集群资源,最后如何利用…...

Molecule:使用Jetpack Compose构建StateFlow流

Molecule:使用Jetpack Compose构建StateFlow流 看下面的jetpack compose片段: Composable fun MessageCard(message: Message) {Column {Text(text message.author)Text(text message.body)} }这段代码最有趣的部分是它实际上是reactive。其反应性为 通过Composa…...

计算机组成原理(2.2)--系统总线

目录 一、总线结构 1.单总线结构 1.1单总线结构框图 ​编辑1.2单总线性能下降的原因 2.多总线结构 2.1双总线结构 2.2三总线结构 2.3四总线结构 ​编辑 二、总线结构举例 1. 传统微型机总线结构 2. VL-BUS局部总线结构 3. PCI 总线结构 4. 多层 PCI 总线结构 …...

如何使用dlinject将一个代码库实时注入到Linux进程中

关于dlinject dlinject是一款针对Linux进程安全的注入测试工具,在该工具的帮助下,广大研究人员可以在不使用ptrace的情况下,轻松向正在运行的Linux进程中注入一个共享代码库(比如说任意代码)。之所以开发该工具&#…...

Docker安装Cassandra数据库,在SpringBoot中连接Cassandra

简介 Apache Cassandra是一个高度可扩展的高性能分布式数据库,旨在处理许多商用服务器上的大量数据,提供高可用性而没有单点故障。它是NoSQL数据库的一种。首先让我们了解一下NoSQL数据库的作用。 NoSQL 数据库 NoSQL数据库(有时称为“Not …...

Linux常用命令总结(建议收藏)

Linux常用命令总结(建议收藏) 这里收集了一些常用命令以便需要时查看,欢迎作补充。(这里的提到操作都默认以CentOS系统为基础) 文件管理 目录操作 切换目录 cd 查看目录 ls -l 列出文件详细信息 或者直接ll-a 列出当前目录下所有文件及…...

【Java】P1 基础知识与碎碎念

Java 基础知识 碎碎念安装 Intellij IDEAJDK 与 JREJava 运行过程Java 系统配置Java 运行过程Java的三大分类前言 本节内容主要围绕Java基础内容,从Java的安装到helloworld,什么是JDK与什么是JRE,系统环境配置,不深入Java代码知识…...

Jackson CVE-2017-7525 反序列化漏洞

0x00 前言 Jackson 相对应fastjson来说利用方面要求更加苛刻,默认情况下无法进行利用。 同样本次的调用链也可以参考fastjson内容:Java代码审计——Fastjson TemplatesImpl调用链 相关原理,可以参考:Jackson 反序列化漏洞原理 …...

【2023】DevOps、SRE、运维开发面试宝典之Kubernetes相关面试题

文章目录 1、Kubernetes集群的特点?2、Kubernetes集群各节点的组件有那些?分别有什么作用?3、简述Kubernetes集群的工作原理4、什么是Pod资源5、Label标签的作用?6、Deployment控制器与Statfulset控制器的区别?7、Pod拉取镜像的三种策略?8、简述Pod的生命周期9、Pod的生命…...

【算法】PatchMatch立体匹配算法_原理解析

目录 前言 原理解析 1.倾斜支持窗口(Slanted Support Windows) 什么是视差平面? 为什么视差和像素坐标点之间的关系可以解释为平面方程? 视差平面的通用参数方程和点加法向量方程 什么是倾斜支持窗口? 2.基于倾…...

【同步工具类:CyclicBarrier】

同步工具类:CyclicBarrier介绍源码分析CyclicBarrier 基于ReetrantLock Condition实现。构造函数await() 函数业务场景方案一:代码实现测试截图方案二代码实现测试打印总结介绍 官方介绍: 一种同步辅助工具,允许一组线程都等待对方到达共同的障碍点。CyclicBarrie…...

Android 12.0 Settings 去掉打开开发者模式和USB调试模式的广播

1.概述 在12.0的系统产品rom定制化开发中,在系统Settings的开发者模式中,打开开发者模式和usb调试模式都会发出开发者模式改变广播和usb调试模式改变广播, 项目开发功能需要要求去掉这两个广播以免影响其他功能,所以就要看哪里发出广播来屏蔽掉就可以了,这样就可以去掉开发…...

OSI七层网络模型和TCP/IP四层网络模型的异同

文章目录前言一、什么是OSI?二、什么是TCP/IP四层模型?三、OSI七层网络模型和TCP/IP四层网络模型的关系:四、 OSI七层和TCP/IP的区别:前言 本节系统总结: 一、什么是OSI?二、什么是TCP/IP四层模型&#xf…...

接口测试必备技能 - 加密和签名

1、什么是加密以及解密? 加密:在网络上传输的原始数据(明文)经过加密后形成(密文)传输,防止被窃取。 解密:将加密还原成原始数据 2、加密方式分类? 对称式加密&#xf…...

JVM虚拟机概述(1)

1.JVM概述 1.1为什么要学习JVM 通过学习JVM ( java Virtual Machine )可以帮助我们理解java程序运行的过程,了解虚拟机中各种机制的实现原理。为后期写出优质的代码做好准备,为向更高的层次提升打好基础。 1.2虚拟机 虚拟机的本质就是在windows中&…...

学习.NET MAUI Blazor(七)、实现一个真正的ChatGPT聊天应用

今天在新闻上看到一条消息,OpenAI已经开放了ChatGPT的接口,也就是GPT-3.5,对比原来的GPT-3,增加了gpt-3.5-turbo、gpt-3.5-turbo-0301两个模型。 gpt-3.5-turbo:使用最新的GPT-3.5模型,并针对聊天进行了优…...

1.1 AI技术全景图:从传统ML到大模型

AI技术全景图:从传统ML到大模型本文适合谁:完全没有AI背景的读者。读完这篇,你会知道"AI/机器学习/深度学习/大模型"这几个词是什么关系,以及你将要学的东西在整个AI世界里处于什么位置。AI发展经历了三个时代——本文带…...

OpenCore Configurator:革新性黑苹果配置工具,让复杂引导设置化繁为简

OpenCore Configurator:革新性黑苹果配置工具,让复杂引导设置化繁为简 【免费下载链接】OpenCore-Configurator A configurator for the OpenCore Bootloader 项目地址: https://gitcode.com/gh_mirrors/op/OpenCore-Configurator 价值定位&#…...

Adafruit DPS310传感器驱动库深度解析与嵌入式实践

1. Adafruit DPS310 压力传感器驱动库深度解析与工程实践 1.1 项目定位与硬件基础 Adafruit DPS310 是一款高精度、低功耗的数字气压/温度传感器,基于 Infineon(原 Bosch Sensortec)DPS310 芯片设计。该芯片采用 MEMS 技术,集成…...

3步打造专属游戏体验:面向MOD爱好者的整合包使用指南

3步打造专属游戏体验:面向MOD爱好者的整合包使用指南 【免费下载链接】DOL-CHS-MODS Degrees of Lewdity 整合 项目地址: https://gitcode.com/gh_mirrors/do/DOL-CHS-MODS 你是否曾因MOD安装流程复杂而放弃尝试?面对众多版本选择时是否感到无从下…...

GPStar Audio串口控制库:嵌入式多轨音频系统开发指南

1. GPStar Audio Serial Library 技术深度解析GPStar Audio Serial Library 是专为 GPStar Technologies 公司推出的 GPStar Audio 与 GPStar Audio XL 系列嵌入式音频播放器设计的串行通信控制库。该库并非通用音频驱动,而是针对特定硬件平台深度定制的、面向实时交…...

知识引导上下文优化(KgCoOp):一种解决灾难性遗忘的 Prompt Tuning 机制

来源:DeepHub IMBA 本文约3000字,建议阅读5分钟本文提出了一种简单有效的约束机制。视觉-语言模型(VLMs)如 CLIP 彻底改变了零样本图像识别的处理方式。这类模型在包含 4 亿个图像-文本对的大规模数据集上进行训练,捕获…...

73.基于matlab的weber能量法求解齿轮时变啮合刚度的能够跑出刚度图,通过求解轮齿部分...

73.基于matlab的weber能量法求解齿轮时变啮合刚度的能够跑出刚度图,通过求解轮齿部分变形、基体变形及局部接触变形这三部分的变形,进而求得综合弹性变形,最终求出时变啮合刚度 程序已调通,可直接运行齿轮传动系统的时变啮合刚度计…...

中集集团2025年经营现金流翻倍增长至185亿,有息负债下降约48亿元

据3月27日年报显示,2025年中集集团经营质量持续提升,经营活动产生的现金流量净额大幅增长99.9%至185亿元,反映出主营业务回款能力增强与运营效率改善。与此同时,公司持续推进资产负债结构优化,年末有息债务规模下降至3…...

2024具身智能技术全景解析:从人形机器人到AGI的硬件与算法协同进化

1. 具身智能:当机器人学会"思考"和"行动" 想象一下,你家的扫地机器人不仅能自动规划路线清洁地板,还能在你做饭时递调料瓶、在你工作疲惫时泡一杯咖啡——这不是科幻电影,而是具身智能技术正在实现的场景。具…...

不止于仿真:用COMSOL LiveLink玩转超声相控阵动态聚焦与参数化扫描

超越静态仿真:COMSOL LiveLink在超声相控阵动态聚焦中的高阶应用 当超声相控阵技术遇上COMSOL的多物理场仿真能力,工程师们便获得了一把打开声波精准操控之门的钥匙。不同于传统静态仿真,动态聚焦与参数化扫描技术让声场控制如同探照灯般灵活…...