当前位置: 首页 > 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模型,并针对聊天进行了优…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

怎么让Comfyui导出的图像不包含工作流信息,

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

【UE5 C++】通过文件对话框获取选择文件的路径

目录 效果 步骤 源码 效果 步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 &#xff0c;这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器&#xff0c;右键点击 .uproject 文件&#xff0c;选择 "Generate Visual Studio project files"&#xff0c;重…...

spring Security对RBAC及其ABAC的支持使用

RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型&#xff0c;它将权限分配给角色&#xff0c;再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...