vuejs之springboot+vue+element-ui之添加信息

前端开发作者： 2024-08-26 09:45:01

接上一节。点击导航一的页面二显示添加表单，表单可以去element官网上找一个，比如带验证的表单，此时PageTwo.vue <template> <el-form :model=

<template>
  el-form :model="ruleForm"
           :rules="rules"
           ref
           label-width="100px"
           class="demo-ruleForm">
    el-form-item label="姓名"
                  prop="username">
      el-input v-model="ruleForm.username"></el-input</el-form-item="年龄"="age"="ruleForm.age"="性别"="gender"el-radio-group ="ruleForm.gender">
        el-radio ="0"el-radio="1"el-radio-group="邮箱"="email"="ruleForm.email"="爱好"="hobby"="ruleForm.hobby"="介绍"="introduce"type="textarea"
                v-model="ruleForm.introduce"el-button ="primary"
                 @click="submitForm('ruleForm')">立即创建el-button@click="resetForm('ruleForm')">重置el-form>
>

script>
export default {
  data () {
    return {
      ruleForm: {
        username: '',age: '',gender: '',email: '',hobby: '',introduction: ''
      },rules: {
        username: [
          { required: true,message: '请输入姓名',trigger: 'blur' },{ min: 3,max: 5,message: '长度在 3 到 5 个字符',trigger: 'blur' }
        ],}
    };
  },methods: {
    submitForm (formName) {
      const that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post('http://localhost:8181/user/save',this.ruleForm)
            .then(function (response) {
              if (response.data == "success") {
                that.$alert('《' + that.ruleForm.username + '》 添加成功','消息',{
                  confirmButtonText: '确定',callback: action => {
                    that.$router.push('/pageOne');
                  }
                })
              }
            })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },resetForm (formName) {
      this.$refs[formName].resetFields();
    }
  }
}
>

    @ResponseBody
    @PostMapping("/save")
    public String save(@RequestBody User user){
        userRepository.save(user);
        return "success";
    }

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_68903.html

相关资讯： vuejs之springboot+vue+element-ui之添加信息