SpringBoot+Vue邮箱注册

第一部分前端代码：

<el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box" label-position="top">
            <h3 class="login-title">邮箱注册</h3>
            <div style="text-align: center;"><span class="login-info"></span></div>
            <el-form-item label="账号" prop="usname" size="small">
                <el-input id="name" v-model="form.usname" placeholder="请输入帐号">
                </el-input>
            </el-form-item>

            <el-form-item label="密码" prop="psword" size="small">
                <el-input id="password" v-model="form.psword" type="password" placeholder="请输入密码">
                </el-input>
            </el-form-item>
            <el-form-item label="邮箱地址" prop="email" size="small">
                <el-input id="password" v-model="form.email"  placeholder="请输入密码">
                </el-input>
                <el-button size="mini" @click="getCode">获取邮箱验证</el-button>
            </el-form-item>
            <el-form-item label="验证码" prop="codde" size="small">
                <el-input id="code" v-model="form.code"  placeholder="请输入邮箱验证码">
                </el-input>
            </el-form-item>

            <el-button class="login-sub" type="info" plain v-on:click="onSubmit('loginForm')">确 认 登 录</el-button>
            <div class="t-right" style="margin-top: 10px;">
                <el-link href="/index.html" type="info">返回登录</el-link>
            </div>
        </el-form>

        <!--    -->
        <el-dialog title="温馨提示" :visible.sync="dialogVisible">
            <span>请输入账号和密码</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="info" size="mini" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>


//这里是script的代码块
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            dialogVisible: false,
            form: {
                usname: '',
                psword: '',
                code:'',
                email:''
            },
            cap:"captcha",
            // 表单验证，需要在 el-form-item 元素中增加 prop 属性
            rules: {
                usname: [
                    { required: true, message: '账号不可为空', trigger: 'blur' }
                ],
                psword: [
                    { required: true, message: '密码不可为空', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ]
            }
        },
        methods: {
            getCode(){
                let t = this;
                // 方法的目的，向邮件发送一份验证码--调用对应接口就行了
                axios.get("/email?email="+t.form.email).then(resp=>{
                    if (resp.data.code == 200) {
                        t.$message.success("邮件发送成功！");
                    }
                });
            },
            getCaptcha(){
                this.cap="captcha?x="+Math.random();
            },
            onSubmit(formName) {
                // 为表单绑定验证功能
                let t = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //登录验证
                        axios.post("/regmail", t.form).then(resp => {
                            if (resp.data.code == 200) {
                                window.location.href = "/index.html";
                            } else {
                                t.$message.error(resp.data.message);
                                t.getCaptcha();
                            }
                        })
                    } else {
                        this.dialogVisible = true;
                        return false;
                    }
                });
            }
        }
    })

</script>

第二部分设置好一个第三方的邮件服务和pom.xml 还有application.yml
下面是pom.xml依赖：

		<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-mail</artifactId>
        </dependency>

下面是application.yml的配置：

最后在配置的自己邮箱服务

最后就是服务层的代码实现了

最后的效果：