Vue+Springboot实现登录注册

一、Vue登录注册页面内容

二、后台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)、跨域问题,解决方法参考该博客中的四