Vue+SpringBoot用户注册功能实现

avatar 2020年05月18日16:04:35 0 2375 views
周末帮一个朋友写了一个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);
}

}



 

需要完整代码,可以联系博主

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
avatar

发表评论

avatar 登录者:匿名
可以匿名评论或者登录后台评论,评论回复后会有邮件通知

  

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