Vue+Springboot实现登录注册

一、Vue登录注册页面内容

<template>
<div id="login" v-loading="loading" element-loading-text="登录中...">
<el-form class="container" :model="loginForm" status-icon :rules="rules"
ref="loginForm" v-show="showLogin" label-width="100px">
<h3 class="title">MyVue 系统用户登录</h3>
<el-form-item label="用户名：" prop="username">
<el-input type="username" v-model="loginForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码：" prop="password">
<el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="验证码：" prop="validCode" class="validCode">
<el-input v-model.number="loginForm.validCode"></el-input>
<el-image :src="codeUrl" @click="getValidCode" class="login-code"></el-image>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login('loginForm')">登录</el-button>
<el-button @click="resetForm('loginForm')">重置</el-button>
<el-link type="primary" :underline="false" @click="showChange">-> 去注册</el-link>
</el-form-item>
</el-form>
<el-form class="container" :model="registerForm" status-icon :rules="rules"
ref="registerForm" v-show="!showLogin" label-width="100px">
<h3 class="title">MyVue 系统用户注册</h3>
<el-form-item label="用户名：" prop="username">
<el-input type="username" v-model="registerForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码：" prop="password">
<el-input type="password" v-model="registerForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码：" prop="rePassword">
<el-input type="rePassword" v-model="registerForm.rePassword" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="验证码：" prop="validCode" class="validCode">
<el-input v-model.number="registerForm.validCode"></el-input>
<el-image :src="codeUrl" @click="getValidCode" class="login-code"></el-image>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="register('registerForm')">注册</el-button>
<el-button @click="resetForm('registerForm')">重置</el-button>
<!--        #606266 #5cb6ff-->
<el-link type="primary" :underline="false" @click="showChange">-> 去登录</el-link>
</el-form-item>
</el-form>
</div>
</template>

<script>

export default {
name: 'Login',
data () {
var validateChkcode = (rule, value, callback) => {
if (value === '') {
return callback(new Error('请输入验证码！'))
}
callback()
}
var validateUsername = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入用户名！'))
} else if (!this.showLogin) {
// 异步原因，不会等待返回后再执行后面流程，而是直接执行else后面的语句
this.$get('user/chkUsername', this.registerForm).then(retDate => {
if (retDate === 1) {
callback(new Error('该用户名已经存在！'))
}
callback()
})
} else {
callback()
}
}
var validatePassword = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码！'))
}
callback()
}
var validateRePassword = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码！'))
} else if (value !== this.registerForm.password) {
callback(new Error('两次输入密码不一致！'))
}
callback()
}
return {
showLogin: true,
loading: false,
codeUrl: '',
cookiePass: '',
loginForm: {
username: '',
password: '',
validCode: '',
id: ''
},
registerForm: {
username: '',
password: '',
rePassword: '',
validCode: '',
id: ''
},
rules: {
username: [
{ validator: validateUsername, trigger: 'blur' }
],
password: [
{ validator: validatePassword, trigger: 'blur' }
],
validCode: [
{ validator: validateChkcode, trigger: 'blur' }
],
rePassword: [
{ validator: validateRePassword, trigger: 'blur' }
]
}
}
},
created () {
this.getValidCode()
},
methods: {
showMessage (message) {
this.$message.error(message)
},
login (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.loading = true
this.$post('user/login', this.loginForm).then(retDate => {
if (retDate.ok) {
this.$store.dispatch('setUser', retDate)
this.$router.push({path: '/'})
} else {
this.showMessage(retDate.message)
this.loading = false
}
})
} else {
console.log('error submit!!')
return false
}
})
},
register (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$post('user/register', this.registerForm).then(retDate => {
if (retDate.ok) {
this.$store.dispatch('setUser', retDate)
// 注册成功跳转到首页
this.$message.success(retDate.message)
this.$router.push({path: '/'})
} else {
this.showMessage(retDate.message)
}
})
} else {
console.log('error submit!!')
return false
}
})
},
resetForm (formName) {
this.$refs[formName].resetFields()
},
getValidCode () {
this.codeUrl = this.$global.baseURL + 'user/getCheckCode?' + new Date()
},
showChange () {
this.showLogin = !this.showLogin
this.getValidCode()
}
}
}
</script>

<style>
#login {
background:url("../assets/backImg.jpg") no-repeat;
background-position: center;
height: 100%;
width: 100%;
background-size: cover;
position: fixed;
}

body{
margin: 0px;
}

.container {
border-radius: 15px;
background-clip: padding-box;
margin: 8% auto;
width: 350px;
padding: 35px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
}

.title {
margin: 0px auto 40px auto;
text-align: center;
color: #505458;
}

.login-code {
display: inline-block;
height: 40px;
float: right;
}

.validCode .el-input {
float: left;
width: 50%;
}

.el-link {
margin-left: 25px;
}

img {
float: right;
}
</style>

二、后台controller文件内容:

package com.login.controller;

import com.login.util.DateUtil;
import com.login.util.Md5Util;
import com.login.util.StringUtil;
import com.login.util.VerifyCodeUtil;
import com.mydatasource.entity.User;
import com.mydatasource.service.UserService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Date;

/**
* 文件描述: 用户登录，注册
*
* @author yuzonghao
* @date 2020/05/22 14:43
**/
@RestController
public class LoginController {
private static Logger log = LoggerFactory.getLogger(LoginController.class);

@Autowired
private UserService userService;

@RequestMapping("/register")
public String register(HttpServletRequest request, @RequestBody User user){
String verifyCode = (String) request.getSession().getAttribute("verifyCode");
log.info("获取验证码的值为: {}",verifyCode);
if (!user.getValidCode().equalsIgnoreCase(verifyCode)){
user.setOk(false);
user.setMessage("验证码输入错误！");
return StringUtil.toJson(user);
}
user.setId(DateUtil.dataFormat(new Date(),DateUtil.DateTimeNum)
+ StringUtil.getRandomStr());
user.setPassword(Md5Util.encoderByMd5(user.getPassword()));
int num = userService.insertUser(user);
if (num <= 0){
user.setOk(false);
user.setMessage("注册失败！");
return StringUtil.toJson(user);
}
user.setMessage("注册成功！");
return StringUtil.toJson(user);
}

@RequestMapping("/login")
public String login(HttpServletRequest request, @RequestBody User user){
String verifyCode = (String) request.getSession().getAttribute("verifyCode");
log.info("获取验证码的值为: {}",verifyCode);
if (!user.getValidCode().equalsIgnoreCase(verifyCode)){
user.setOk(false);
user.setMessage("验证码输入错误！");
return StringUtil.toJson(user);
}
user = userService.selectUser(user.getUsername(), Md5Util.encoderByMd5(user.getPassword()));
if (user == null){
return StringUtil.toJson(new User(false,"账号或密码错误！"));
}
return StringUtil.toJson(user);
}

@GetMapping("/chkUsername")
public String chkUsername(@RequestParam String username){
if (userService.chkUsername(username)) return "1";
return "0";
}

/**
* description: 获取验证码图片
* param [response, request]
* author yuzonghao
* createTime 2020/3/7 13:36
**/
@GetMapping("/getCheckCode")
public void getCheckCode(HttpServletResponse response, HttpServletRequest request) {
try {
int width = 120;
int height = 40;
BufferedImage verifyImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
//生成对应宽高的初始图片
String randomText = VerifyCodeUtil.drawRandomText(width, height, verifyImg);
request.getSession().setAttribute("verifyCode", randomText);
//            request.getSession().setAttribute("startTime",new Date());
response.setContentType("image/png");//必须设置响应内容类型为图片，否则前台不识别
OutputStream os = response.getOutputStream(); //获取文件输出流
ImageIO.write(verifyImg, "png", os);//输出图片流
os.flush();
os.close();//关闭流
} catch (IOException e) {
log.error("获取验证码图片失败!", e);
}
}

}

三、效果图:

四、开发过程中的问题:

1)、跨域问题,解决方法参考该博客中的四