Vue+SpringBoot用户注册功能实现

avatar 2020年05月18日16:04:35 6 7475 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
周末帮一个朋友写了一个vue+springboot的项目，接上上文的登录介绍一下注册的实现。
代码地址：https://github.com/saysky/petition-system-server

一、效果图

效果图如下


二、前端代码

Register.vue
<template>
    <div class="login-wrap">
        <div class="ms-title">XX市信访系统-欢迎注册</div>
        <div class="ms-login">
            <el-form ref="form" :model="form" :rules="rules">
                <div v-if="errorInfo" style="margin-bottom: 5px;">
                    <span>{{errInfo}}</span>
                </div>
                <el-form-item prop="name">
                    <el-input v-model="form.name" placeholder="登录名"></el-input>
                </el-form-item>
                <el-form-item prop="realName">
                    <el-input v-model="form.realName" placeholder="真实姓名"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="form.password" type="password" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item prop="sex">
                    <el-select class="select-sex" v-model="form.sex" placeholder="性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="phone">
                    <el-input v-model="form.phone" placeholder="手机号"></el-input>
                </el-form-item>
                <el-form-item prop="email">
                    <el-input v-model="form.email" placeholder="电子邮箱"></el-input>
                </el-form-item>
                <el-form-item prop="address">
                    <el-input v-model="form.address" placeholder="联系地址"></el-input>
                </el-form-item>
                <el-form-item prop="card">
                    <el-input v-model="form.card" placeholder="身份证号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('form')">确定</el-button>
                    <el-button @click="onCancle()">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    import Util from '../../utils/utils';
    export default {
        data() {
            var validateEmail = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入电子邮箱邮箱'));
                } else if (!Util.emailReg.test(this.form.email)) {
                    callback(new Error('请输入正确的电子邮箱'));
                } else {
                    callback();
                }
            };
            var validatePhone = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入手机号'));
                } else if (!Util.phoneReg.test(this.form.phone)) {
                    callback(new Error('请输入正确的手机号'));
                } else {
                    callback();
                }
            };
            var validateCard = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入身份证号'));
                } else if (!Util.idCardReg.test(this.form.card)) {
                    callback(new Error('请输入正确的身份证号'));
                } else {
                    callback();
                }
            };
            return {
                errorInfo: false,
                form: {
                    name: '',
                    realName: '',
                    password: '',
                    email: '',
                    phone: '',
                    card: '',
                    sex: '',
                    address: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入登录名', trigger: 'blur'},
                        {min: 4, message: '登录名最少4个字符', trigger: 'blur'},
                        {max: 20, message: '登录名最多20个字符', trigger: 'blur'}
                    ],
                    realName: [
                        {required: true, message: '请输入真实姓名', trigger: 'blur'},
                        {min: 2, message: '姓名最少2个字符', trigger: 'blur'},
                        {max: 20, message: '姓名最多20个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 6, message: '密码最少6个字符', trigger: 'blur'},
                        {max: 20, message: '密码最多20个字符', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, validator: validateEmail, trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, validator: validatePhone, trigger: 'blur'}
                    ],
                    card: [
                        {required: true, validator: validateCard, trigger: 'blur'}
                    ],
                    sex: [
                        {required: true, message: '请输入性别', trigger: 'blur'}
                    ],
                    address: [
                        {required: true, message: '请输入家庭住址', trigger: 'blur'},
                        {min: 10, message: '家庭地址最少10个字符', trigger: 'blur'},
                        {max: 50, message: '家庭地址最多50个字符', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            onSubmit(formName) {
                const self = this;
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        self.$http.post('/api/user/register', self.form).then(function (response) {
                            console.log(response);
                            if (response.data.code == -1) {
                                self.errorInfo = true;
                                self.errInfo = response.data.msg;
                                self.$message.error(response.data.msg);
                            } else if (response.data.code == 0) {
                                self.$message.success(response.data.msg);
                                self.$router.push('/login');
                            }
                        }).then(function (error) {
                            console.log(error);
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            onCancle() {
                this.$router.push('/login');
            },
            getDateTimes(str) {
                var str = new Date(str);
                return str;
            }
        }
    }
</script>
<style scoped>
    .login-wrap {
        position: relative;
        width: 100%;
        height: 100%;
    }
    .ms-title {
        position: absolute;
        top: 50%;
        width: 100%;
        margin-top: -320px;
        text-align: center;
        font-size: 30px;
        color: #fff;
    }
    .ms-login {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 300px;
        height: 490px;
        margin: -250px 0 0 -190px;
        padding: 40px;
        border-radius: 5px;
        background: #fff;
    }
    .ms-login span {
        color: red;
    }
    .login-btn {
        text-align: center;
    }
    .login-btn button {
        width: 100%;
        height: 36px;
    }
    .select-sex {
        width: 300px;
    }
</style>

三、后端代码

后端采用SpringBoot,
以下是web接口代码
@PostMapping("/register")
@SystemLog(type = LogTypeEnum.REGISTER)
public Response register(@RequestBody User user) {
    User checkName = userService.findByUserName(user.getName());
    if (checkName != null) {
        return Response.no("用户名已注册！");
    }
    User checkPhone = userService.findByPhone(user.getPhone());
    if (checkPhone != null) {
        return Response.no("手机号已注册！");
    }
    User checkEmail = userService.findByEmail(user.getEmail());
    if (checkEmail != null) {
        return Response.no("电子邮箱已注册！");
    }
    User checkCard = userService.findByCard(user.getCard());
    if (checkCard != null) {
        return Response.no("身份证已注册！");
    }
    user.setId(null);
    user.setCreateTime(new Date());
    user.setType(UserType.USER.getValue());
    user.setRealName(user.getRealName());
    userService.saveByUser(user);
    return Response.yes("注册成功", user);
}

顺便贴一下 User 类
package com.example.sens.entity;
import lombok.Data;
import java.io.Serializable;
import java.util.Date;
/**
 * <pre>
 *     用户信息
 * </pre>
 */
@Data
public class User implements Serializable {
    private static final long serialVersionUID = -5144055068797033748L;
    /**
     * 用户ID
     */
    private Long id;
    /**
     * 用户名
     */
    private String name;
    /**
     * 密码
     */
    private String password;
    /**
     * 姓名
     */
    private String realName;
    /**
     * 性别
     */
    private String sex;
    /**
     * 电子邮箱
     */
    private String email;
    /**
     * 身份证号码
     */
    private String card;
    /**
     * 地址
     */
    private String address;
    /**
     * 手机号
     */
    private String phone;
    /**
     * 用户类型：群众user,  员工staff
     */
    private String type;
    /**
     * 员工等级：普通1，领导2
     */
    private Integer staffLevel;
    /**
     * 创建时间
     */
    private Date createTime;
    /**
     * 生日
     */
    private Date birth;
}

Response类
package com.example.sens.util;
import lombok.Data;
@Data
public class Response<T> {
    private Integer code;
    private String msg;
    private T data;
    public Response() {
    }
    public Response(Integer code) {
        this.code = code;
    }
    public Response(Integer code, String msg) {
        this.code = code;
        this.msg = msg;
    }
    public Response(Integer code, String msg, T data) {
        this.code = code;
        this.msg = msg;
        this.data = data;
    }
    public static <T> Response<T> yes() {
        return new Response(0, "操作成功");
    }
    public static <T> Response<T> yes(String msg,T data) {
        return new Response(0, msg, data);
    }
    public static <T> Response<T> yes(T data) {
        return new Response(0, "操作成功", data);
    }
    public static <T> Response<T> no() {
        return new Response(-1, "操作失败");
    }
    public static <T> Response<T> no(String msg) {
        return new Response(-1, msg);
    }
}


需要完整代码，可以联系博主
历史上的今天
May
18日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：0   待审核评论数：0