对页面重新命名

将之前的 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 }
     ],
 }

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

后端对接

测试接口

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("添加失败");
}

最终效果