Vue笔记05 表单
coconutnut
 2020-03-16 11:25:30      

https://www.bilibili.com/video/av85793766?p=5

新增书籍页面

继续实现对图书完整的增删改查

官网找一个form表单

数据是双向绑定的，:model和v-model用来绑定对象

可以添加校验规则，通过rules绑定。校验规则中，触发事件blur指失去焦点时触发校验

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="书名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item label="作者" prop="author">
        <el-input v-model="ruleForm.author"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
</el-form>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script>
    export default {
        data() {
            return {
                ruleForm: {
                    name: '',
                    author: '',
                },
                rules: {
                    name: [
                        { required: true, message: '请输入书名', trigger: 'blur' },
                    ],
                    author: [
                        { required: true, message: '请输入作者', trigger: 'blur' },
                    ],
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

后端

Book的id要加自增注解，否则会出问题

1
2
3
4
5
6
7
8
9
@Entity
@Data
public class Book {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)  // id自增
    private Integer id;
    private String name;
    private String author;
}

controller中加

1
2
3
4
5
6
7
8
9
10
@PostMapping("/save")
// @RequestBody把json格式转成java对象
public String save(@RequestBody Book book){
  Book result = bookRepository.save(book);
  if(result != null){
    return "sucess";
  }else{
    return "error";
  }
}

对接

传Book对象，直接追加就行了，不需要拼接

提示信息可以再去官网找一个合适的拿来用

添加成功后跳转到查询页面，用router.push

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
submitForm(formName) {
  const _this = this
  this.$refs[formName].validate((valid) => {
    if (valid) {
      axios.post('http://localhost:8181/book/save',this.ruleForm).then(function(resp){
        if(resp.data == 'success'){
          _this.$message({
            message: '《'+_this.ruleForm.name+'》'+'添加成功',
            type: 'success'
          })
          _this.$router.push('/book-manage')
        }
      })
    }
  });
},

发现一个小问题

这样弹出顶部提示之后直接切换页面，左侧的选中状态有问题，原页面和新页面都选中了

但是用需要点击确定的提示框之后切回去，选中状态就没有问题

1
2
3
4
5
6
7
8
9
10
_this.$alert('添加成功','MSG',{
  confirmButtonTest: 'OK',
  callback: action => {
    this.$message({
      type: 'info',
      message: `action: ${action}`
    });
  }
});
_this.$router.push('/book-manage')