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就到这里了。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |