Vue 表单提交实践与总结

一、Vue 提交表单没反应

检查表单是否绑定到正确的数据

<form v-on:submit.prevent="submitForm">
    <!-- ... -->
</form>

Vue.component({
    data: function() {
        return { form: {} };
    },
    methods: {
        submitForm: function() {
            console.log(this.form);
        }
    }
});

确保提交表单的方法已正确绑定

<form v-on:submit.prevent="submitForm">
    <!-- ... -->
</form>

Vue.component({
    methods: {
        submitForm: function() {
            console.log('form submitted');
        }
    }
});

查看前端和后端的请求和响应情况，看是否存在问题

二、Vue 提交表单后如何返回到上一页

在返回按钮中使用 history.go(-1) 方法回到上一页

<button v-on:click="goBack"> 返回 </button>

Vue.component({
    methods: {
        goBack: function() {
            history.go(-1);
        }
    }
});

在页面中使用 Vue Router 进行跳转实现页面返回
```
<router-link to="/"> 返回 </router-link>
```

三、Vue 提交表单数据

使用 v-model 绑定数据

<input v-model="form.userName">
<input v-model="form.email">
<button v-on:click="submitForm">提交</button>

Vue.component({
    data: function () {
        return {
            form: {
                userName: '',
                email: ''
            }
        }
    },
    methods: {
        submitForm: function () {
            console.log(form);
        }
    }
});

使用 ref 获取表单元素的值

<input ref="userName">
<input ref="email">
<button v-on:click="submitForm">提交</button>

Vue.component({
    methods: {
        submitForm: function () {
            console.log(this.$refs.userName.value);
            console.log(this.$refs.email.value);
        }
    }
});

四、Vue 提交表单时怎么校验信息

使用 Vuelidate 进行验证

<input v-model="form.userName">
<input v-model="form.email">
<button v-on:click="submitForm">提交</button>

Vue.component({
    data: function () {
        return {
            form: {
                userName: '',
                email: ''
            }
        }
    },
    validations: {
        form: {
            email: {
                required,
                email
            },
            userName: {
                required,
                minLength: minLength(3)
            }
        }
    },
    methods: {
        submitForm: function () {
            this.$v.form.$touch();
            if (!this.$v.form.$error) {
                console.log('submit success');
            }
        }
    }
});

手动验证信息

<input v-model="form.userName">
<input v-model="form.email">
<button v-on:click="submitForm">提交</button>

Vue.component({
    data: function () {
        return {
            form: {
                userName: '',
                email: ''
            },
            errors: {}
        }
    },
    methods: {
        validate: function () {
            this.errors = {};
            if (!this.form.userName) {
                this.errors.userName = '用户名不能为空';
            }
            if (!this.form.email) {
                this.errors.email = 'Email不能为空';
            }
            return Object.keys(this.errors).length === 0;
        },
        submitForm: function () {
            if (this.validate()) {
                console.log('submit success');
            }
        }
    }
});

五、Vue 提交表单数据到后端

使用 Axios 发送表单数据

<form v-on:submit.prevent="submitForm">
    <!-- ... -->
</form>

Vue.component({
    methods: {
        submitForm: function () {
            axios.post('url', this.form).then(function (response) {
                console.log(response);
            }).catch(function (error) {
                console.log(error);
            });
        }
    }
});

使用 Fetch 发送表单数据

<form v-on:submit.prevent="submitForm">
    <!-- ... -->
</form>

Vue.component({
    methods: {
        submitForm: function () {
            var data = this.form;
            var formData = new FormData();
            for (var key in data) {
                formData.append(key, data[key]);
            }
            fetch('url', {
                method: 'POST',
                body: formData
            }).then(function (response) {
                console.log(response);
            }).catch(function (error) {
                console.log(error);
            });
        }
    }
});

六、Vue 提交表单、后端 Map 接收

使用 JSON 的方式发送表单数据，并在后端进行 JSON 解析

<form v-on:submit.prevent="submitForm">
    <!-- ... -->
</form>

Vue.component({
    methods: {
        submitForm: function () {
            axios.post('url', JSON.stringify(this.form)).then(function (response) {
                console.log(response);
            }).catch(function (error) {
                console.log(error);
            });
        }
    }
});

使用 Spring MVC 将表单数据绑定到 Map 中

@RequestMapping("/saveUserInfo")
@ResponseBody
public String saveUserInfo(@RequestBody Map<String, Object> userInfo) {
    System.out.println(userInfo.get("userName"));
    System.out.println(userInfo.get("email"));
    return "success";
}

七、Vue 提交表单数据到邮箱

使用后端发送邮件的工具类发送邮件

public void sendMail(String subject, String content, String to) {
    JavaMailSenderImpl mailSender = new JavaMailSenderImpl();
    mailSender.setUsername("用户名");
    mailSender.setPassword("密码");
    mailSender.setHost("smtp.qq.com");
    mailSender.setPort(587);
    Properties properties = new Properties();
    properties.put("mail.smtp.auth", "true");
    properties.put("mail.smtp.starttls.enable", "true");
    properties.put("mail.smtp.timeout", 10000);
    mailSender.setJavaMailProperties(properties);
    MimeMessage message = mailSender.createMimeMessage();
    MimeMessageHelper helper = new MimeMessageHelper(message);
    helper.setSubject(subject);
    helper.setFrom("发件人");
    helper.setText(content, true);
    helper.setTo(to);
    mailSender.send(message);
}

使用第三方的邮件发送服务发送邮件

axios.get('http://api.sendcloud.net/apiv2/mail/send', {
    params: {
        apiUser: apiUser,
        apiKey: apiKey,
        to: to,
        from: from,
        fromName: senderName,
        subject: subject,
        html: content
    }
}).then(function(response) {
    console.log(response);
}).catch(function(error) {
    console.log(error);
});

八、Vue Form 表单提交

<template>
    <form v-on:submit.prevent="submitForm">
        <label> Name: <input v-model="form.name"> </label>
        <label> Email: <input v-model="form.email"> </label>
        <button type="submit"> Submit </button>
    </form>
</template>

Vue.component({
    data: function () {
        return {
            form: {
                name: '',
                email: ''
            }
        }
    },
    methods: {
        submitForm: function () {
            console.log('form submitted');
        }
    }
});

九、Vue 表单

<template>
    <form>
        <div class="form-group">
            <label for="name"> Name: </label>
            <input type="text" class="form-control" id="name" v-model="form.name">
        </div>
        <div class="form-group">
            <label for="email"> Email: </label>
            <input type="email" class="form-control" id="email" v-model="form.email">
        </div>
        <button type="submit" class="btn btn-primary" v-on:click="submitForm"> Submit </button>
    </form>
</template>

Vue.component({
    data: function () {
        return {
            form: {
                name: '',
                email: ''
            }
        }
    },
    methods: {
        submitForm: function () {
            console.log('form submitted');
        }
    }
});

十、Vue 获取表单数据

使用 v-model 绑定数据并在 submitForm 方法中获取

<div id="app">
    <input v-model="name">
    <input v-model="email">
    <button v-on:click="submitForm">提交</button>
</div>

new Vue({
    el: '#app',
    data: {
        name: '',
        email: ''
    },
    methods: {
        submitForm: function () {
            console.log(this.name);
            console.log(this.email);
        }
    }
});