Vue表单提交与数据存储

原创已于 2023-03-03 14:22:25 修改 · 4.3k 阅读

35 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

于 2023-03-02 15:42:20 首次发布

笔记专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何对页面进行重命名，选择和精简Form组件来创建表单，并通过绑定和规则设置规范用户输入。接着讲解了后端如何对接测试接口，利用JPA的save方法存储数据，以及前端如何通过axios调用接口进行数据提交，成功后可显示提示或跳转页面。

学习内容来源：视频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("添加失败");
}

最终效果
请添加图片描述