加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-16 23:03:56 所属栏目:百科 来源:网络整理
导读:接上一节。 点击导航一的页面二显示添加表单,表单可以去element官网上找一个,比如带验证的表单,此时PageTwo.vue template el-form :model ="ruleForm" :rules ="rules" ref label-width ="100px" class ="demo-ruleForm" el-form-item label ="姓名" prop

接上一节。

点击导航一的页面二显示添加表单,表单可以去element官网上找一个,比如带验证的表单,此时PageTwo.vue

<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();
    }
  }
}
>

修改springbootz中的id属性,为其加上:@GeneratedValue(strategy = GenerationType.IDENTITY),让其自增,然后在controller中加入:

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

点击确定之后:

?

数据是成功添加了,不过有个bug,就是 左边都会高亮显示,算了,不管了。主要是看看前后端分离的整个流程,至此springboot+vue就到这里了。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读