后端业务实现（一）登录功能实现

前两篇中我们分别进行了SSM框架的搭建与前端页面的简单搭建，这篇我们就进行登录业务的编写

目录

前言

一、页面跳转实现

二、验证码的实现

三、登录操作的实现

总结

前言

 这篇我们主要实现登录功能与页面的跳转

之前已经设置好了所有依赖，详情请看这篇文章：

基于SpringFramework + MyBatis + SpringMVC三大框架下的Maven项目-CSDN博客

一、页面跳转实现

1、由于我们已经在SpringMVC的配置文件中添加了视图解析器，而SpringMVC已经交由Spring容器管理，当我们在web.xml文件中进行servlet配置后，只需我们可以在控制类中添加一个页面跳转方法实现页面的跳转，这样就无需设置<welcome-file-list>标签；

@Controller
public class PageControl {
    @GetMapping("/")
    public ModelAndView index(){
        return new ModelAndView("mgrLogin");
    }
    
    @GetMapping("/page")
    public ModelAndView page(HttpServletRequest request, HttpServletResponse response){
        String path = request.getParameter("p");
        if (path !=null){
            return new ModelAndView(path);
        }else {
            return new ModelAndView("mgrLogin");
        }
    }
}

2、这时我们运行Tomcat服务器，可能会发现我们的CSS样式没有了

这是因为IDEA会自动为将路径更改为../的形式，我们只需要将这个../删除即可，

文件路径的含义可以参考这篇文章：文件路径中的‘.‘和‘..‘还有‘./‘和‘../‘分别都是什么意思，以及路径输入的问题_文件路径..-CSDN博客

注意如有引用JavaSrcipt文件，也需要更改路径

这样，我们的样式就恢复了

二、验证码的实现

上图，是我们的登录界面只是单纯的账号和密码，对于一个普通的登录页面来说可能都会有输入验证码的操作，所以在开始业务之前，我们可以先增加一个验证码

1、现在html中添加一个标签

<!-- 验证码 -->
 <div class="with-padding" style="margin-top: 30px;">
   <div class="input-group">
      <span class="input-group-addon" style="height: 40px;">验证码</span>
      <input id="code" type="text" class="form-control" placeholder="请输入验证码" style="height: 40px;">
      <span class="input-group-addon fix-border fix-padding" style="height: 40px;"></span>
      <img src="code" height="30px" width="150px" onclick="changeCode(this)" class="form-control" id="codeImg" style="height: 40px;">
   </div>
</div>

2、添加JavaScript

function changeCode(imgObj)  {
    imgObj.src = imgObj.src + '?' + Math.random();
}

3、在IDEA中新建类CodePicture用于设置验证码，并创建util包，方便管理

构造codePicture方法，实现验证码图片的显示

/**
 * @ Author wave
 * @ Date 2024/7/29 10:43
 * @ Description TODO 验证码图片显示
 */

public class CodePicture {
    private static final char[] chars = ("123456789" + "ABCDEFGHJKMNPQRSTUVWXYZ").toCharArray();  // 验证码字符集
    private static final int SIZE = 4;  // 字符数量
    private static final int LINES = 6;  // 干扰线数量
    private static final int WIDTH = 150;  // 宽度
    private static final int HEIGHT = 30;  // 高度
    private static final int FONT_SIZE = 30;  // 字体大小

    /**
     * 生成随机验证码及图片
     */
    public static Object[] createImage() {
        StringBuffer sb = new StringBuffer();
        // 1.创建空白图片
        BufferedImage image = new BufferedImage(
                WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
        // 2.获取图片画笔
        Graphics graphic = image.getGraphics();
        // 3.设置画笔颜色
        graphic.setColor(Color.WHITE);
        // 4.绘制矩形背景
        graphic.fillRect(0, 0, WIDTH, HEIGHT);
        // 5.画随机字符
        Random ran = new Random();
        for (int i = 0; i < SIZE; i++) {
            // 取随机字符索引
            int n = ran.nextInt(chars.length);
            // 设置随机颜色
            graphic.setColor(getRandomColor());
            // 设置字体大小
            graphic.setFont(new Font(
                    null, Font.BOLD + Font.ITALIC, FONT_SIZE));
            // 画字符
            graphic.drawString(
                    chars[n] + "", i * WIDTH / SIZE, HEIGHT / 2 + 10);
            // 记录字符
            sb.append(chars[n]);
        }
        // 6.画干扰线
        for (int i = 0; i < LINES; i++) {
            // 设置随机颜色
            graphic.setColor(getRandomColor());
            // 随机画线
            graphic.drawLine(ran.nextInt(WIDTH), ran.nextInt(HEIGHT),
                    ran.nextInt(WIDTH), ran.nextInt(HEIGHT));
        }
        // 7.返回验证码和图片
        return new Object[]{sb.toString(), image};
    }

    /**
     * 随机取色
     */
    public static Color getRandomColor() {
        Random ran = new Random();
        Color color = new Color(ran.nextInt(256),
                ran.nextInt(256), ran.nextInt(256));
        return color;
    }
}

 4、在IDEA中新建Crotrol类，添加@RestController注解，json解析便携处理

@RestController // @Controller 和 @ResponseBody 的组合注解
public class LoginControl {
    @GetMapping("code")
    public void codePicture(HttpServletRequest request, HttpServletResponse response) throws IOException {
        Object[] codeArr = CodePicture.createImage();
        Object codeStr = codeArr[0];
        request.getSession().setAttribute("code", codeStr);
        ImageIO.write((RenderedImage) codeArr[1], "jpg", response.getOutputStream());
    }
}

效果如图所示，点击图片后可以进行切换：

三、登录操作的实现

首先我们需要在config.properties将数据库信息填写好，并在数据库中添加一些数据，方便我们使用

1、将数据库中的字段在pojo层中进行实例化，我们可以通过IDEA的快捷操作进行实现

2、如果使用IDEA的快捷方式进行pojo的搭建，注意选择对应的包，更改实例的包名

由于之前我们添加了lombok的插件，所以只需要在方法前添加注解@Data，就无需在编写set()、get()方法，会自动生成

如果@Data注解无法使用，在IDEA中菜单栏中File-Settings-Plugings中进行插件的添加

3、在service层中进行登录方法接口的编写

4、在mapper层中进行登录SQL方法的接口编写

5、在impl层中进行service接口中方法的实现

6、在resources文件夹中的mapper文件夹中新建AdminInfoMapper.xml文件进行sql语句的编写

编写sql语句最好在navicat中进行，这样不容易出错

推荐添加一个MaBatisX的插件，十分好用，这样可以直接将mapper层接口与mapper.xml文件进行连接跳转，图中的小鸟logo

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="">

</mapper>

7、在控制类中进行编写登录相关的操作编写

        1）在此之前，我们可以先建一个dto层用于登录相关数据的传输

        2、dto类建好之后，就可以在控制层中编写方法，与前端页面进行交互

8、在js文件中进行ajax操作的编写

至此，我们的登录操作就完成了，启动Tomcat服务器即可进行登录

注：以上实现登录操作时并未添加验证码的判定

总结

以上便是对登录操作的基本实现，进行编码时注意对注解的正确使用，sql语句的写法也尤为重要