一、先看下效果图：

在这里插入图片描述

点击登录后要是密码正确后会直接跳转到成功界面.
一.先在数据库创建一个用户表格.表名: user

存几个用户进去:

准备工作差不多了开始写代码.
打开我们上篇文章搭建成功SSM环境的项目.

二、完成登录模块

既然是登录模块我们就先完成用户对象的设计。
先看一下我的目录结构：（可以先建好文件，也可以后面跟着我一步一步建。）
在这里插入图片描述

先创建一个user类

1、创建User类

在entity包下创建一个用户类。

package com.wm.entity;

public class User {
String username;
String password;
String realname;

    public User(String username, String password, String realname) {
        this.username = username;
        this.password = password;
        this.realname = realname;
    }

    public String getUsername() {
        return username;
    }

    public String getPassword() {
        return password;
    }

    public String getRealname() {
        return realname;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public void setRealname(String realname) {
        this.realname = realname;
    }

    @Override
    public String toString() {
        return "User{" +
                "username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", realname='" + realname + '\'' +
                '}';
    }
}

2、设计登录接口

package com.wm.servicce;

import com.wm.entity.User;

public interface LoginService {
    /**
     * 登录模块的接口  根据输入的的username和password 在数据库进行查找并且返回查找到的User信息.
     * @param username
     * @param password
     * @return user
     *
     */
    public User getUserByNameAndPass(String username ,String password );

}

3、实现dao层的数据传递和参数绑定

在dao包下创建LoginDao

package com.wm.dao;

import com.wm.entity.User;

import org.apache.ibatis.annotations.Param;

public interface LoginDao {
    public User getUserByNameAndPass(@Param("username") String username, @Param("password")String password);

}

在resource下面

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

<mapper namespace="com.wm.dao.LoginDao">

    <select id="getUserByNameAndPass" resultType="user">
        select * from user
        where
            username=#{username}
          and password=#{password}
    </select>

</mapper>

先了解下：@Autowired 和 @Service

在使用Spring进行项目开发的时候，会大量使用到自动装配，那自动装配是什么呢？简单来说：Spring 利用依赖注入（DI）功能，完成SpringIOC容器中各个组件之间的依赖关系赋值管理。

@Autowired 的作用是什么？
@Autowired 是一个注释，它可以对类成员变量、方法及构造函数进行标注，让 spring 完成 bean 自动装配的工作。
@Autowired 默认是按照类去匹配，配合 @Qualifier 指定按照名称去装配 bean。

使用方法：
方式一：成员属性字段使用 @Autowired，无需字段的 set 方法

@Service注解作用
1、其getBean的默认名称是类名（头字母小写），可以@Service(“xxxx”)这样来指定，
2、其定义的bean默认是单例的，可以使用@Service(“beanName”) @Scope(“prototype”)来改变。
3、可以通过@PostConstruct和@PreDestroy指定初始化方法和销毁方法（方法名任意）

4、实现登录的接口

package com.wm.servicce.imp;

import com.wm.dao.LoginDao;
import com.wm.entity.User;
import com.wm.servicce.LoginService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class LoginServiceImp implements LoginService {



    @Autowired
    private LoginDao dao;

    @Override
    public User getUserByNameAndPass(String username, String password) {

        // TODO Auto-generated method stub
        User user= dao.getUserByNameAndPass(username, password);
        return user;
    }
}

5、完成控制器的编写

在这里插入图片描述

package com.wm.controller;


import com.wm.entity.User;
import com.wm.servicce.LoginService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.SessionAttributes;


@SessionAttributes("user")
@Controller
public class LoginController {
    @Autowired
    private LoginService service;

    @RequestMapping("Login")
    public String login(Model model, String username, String password){
        System.out.println(username+"----"+password);
        User user=service.getUserByNameAndPass(username, password);
        if(user!=null)
        {
            model.addAttribute("user", user);
            System.out.print(user.toString());
            return "success";
        }
        else
            return "fail";
    }
}

6、最后一步完成前端界面的编写
在这里插入图片描述

主要是在index中编写登录界面 index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
%>
<html>
<!DOCTYPE html>
<html>
<head lang="en">
    <link rel="stylesheet" type="text/css" href="<%=path%>/jquery-easyui-1.9.15/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/jquery-easyui-1.9.15/themes/default/panel.css" rel="external nofollow" >
    <link rel="stylesheet" type="text/css" href="<%=path%>/jquery-easyui-1.9.15/themes/icon.css">

    <script type="text/javascript" src="<%=path%>/jquery-easyui-1.9.15/jquery.min.js"></script>
    <script type="text/javascript" src="<%=path%>/jquery-easyui-1.9.15/jquery.easyui.min.js"></script>
    <meta charset="UTF-8">
    <title>一款很漂亮的CSS3登录界面</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
        }
        body {
            margin: 0;
            padding: 0;
            font: 16px/20px microsft yahei;
            background-image: url("images/天空1.jpg");
        }
        .wrap {
            width: 100%;
            height: 400px;
            padding: 40px 0;
            position: fixed;
            top: 50%;
            margin-top: -200px;
            opacity: 0.8;
            background: linear-gradient(to bottom right,#50a3a2,#53e3a6);
            background: -webkit-linear-gradient(to bottom right,#50a3a2,#53e3a6);
        }
        .container {
            width: 60%;
            margin: 0 auto;
        }
        .container h1 {
            text-align: center;
            color: #FFFFFF;
            font-weight: 500;
        }
        .container input {
            width: 320px;
            display: block;
            height: 36px;
            border: 0;
            outline: 0;
            padding: 6px 10px;
            line-height: 24px;
            margin: 32px auto;
            -webkit-transition: all 0s ease-in 0.1ms;
            -moz-transition: all 0s ease-in 0.1ms;
            transition: all 0s ease-in 0.1ms;
        }
        .container input[type="text"] , .container input[type="password"]  {
            background-color: #FFFFFF;
            font-size: 16px;
            color: #50a3a2;
        }

        .container input[type='submit'] {
            font-size: 16px;
            letter-spacing: 2px;
            color: #666666;
            background-color: #FFFFFF;
        }
        .container input:focus {
            width: 400px;
        }
        .container input[type='submit']:hover {
            cursor: pointer;
            width: 400px;
        }

        .wrap ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -10;
        }
        .wrap ul li {
            list-style-type: none;
            display: block;
            position: absolute;
            bottom: -120px;
            width: 15px;
            height: 15px;
            z-index: -8;
            background-color:rgba(255, 255, 255, 0.15);
            animotion: square 25s infinite;
            -webkit-animation: square 25s infinite;
        }
        .wrap ul li:nth-child(1) {
            left: 0;
            animation-duration: 10s;
            -moz-animation-duration: 10s;
            -o-animation-duration: 10s;
            -webkit-animation-duration: 10s;
        }
        .wrap ul li:nth-child(2) {
            width: 40px;
            height: 40px;
            left: 10%;
            animation-duration: 15s;
            -moz-animation-duration: 15s;
            -o-animation-duration: 15s;
            -webkit-animation-duration: 15s;
        }
        .wrap ul li:nth-child(3) {
            left: 20%;
            width: 25px;
            height: 25px;
            animation-duration: 12s;
            -moz-animation-duration: 12s;
            -o-animation-duration: 12s;
            -webkit-animation-duration: 12s;
        }
        .wrap ul li:nth-child(4) {
            width: 50px;
            height: 50px;
            left: 30%;
            -webkit-animation-delay: 3s;
            -moz-animation-delay: 3s;
            -o-animation-delay: 3s;
            animation-delay: 3s;
            animation-duration: 12s;
            -moz-animation-duration: 12s;
            -o-animation-duration: 12s;
            -webkit-animation-duration: 12s;
        }
        .wrap ul li:nth-child(5) {
            width: 60px;
            height: 60px;
            left: 40%;
            animation-duration: 10s;
            -moz-animation-duration: 10s;
            -o-animation-duration: 10s;
            -webkit-animation-duration: 10s;
        }
        .wrap ul li:nth-child(6) {
            width: 75px;
            height: 75px;
            left: 50%;
            -webkit-animation-delay: 7s;
            -moz-animation-delay: 7s;
            -o-animation-delay: 7s;
            animation-delay: 7s;
        }
        .wrap ul li:nth-child(7) {
            left: 60%;
            animation-duration: 8s;
            -moz-animation-duration: 8s;
            -o-animation-duration: 8s;
            -webkit-animation-duration: 8s;
        }
        .wrap ul li:nth-child(8) {
            width: 90px;
            height: 90px;
            left: 70%;
            -webkit-animation-delay: 4s;
            -moz-animation-delay: 4s;
            -o-animation-delay: 4s;
            animation-delay: 4s;
        }
        .wrap ul li:nth-child(9) {
            width: 100px;
            height: 100px;
            left: 80%;
            animation-duration: 20s;
            -moz-animation-duration: 20s;
            -o-animation-duration: 20s;
            -webkit-animation-duration: 20s;
        }
        .wrap ul li:nth-child(10) {
            width: 120px;
            height: 120px;
            left: 90%;
            -webkit-animation-delay: 6s;
            -moz-animation-delay: 6s;
            -o-animation-delay: 6s;
            animation-delay: 6s;
            animation-duration: 30s;
            -moz-animation-duration: 30s;
            -o-animation-duration: 30s;
            -webkit-animation-duration: 30s;
        }

        @keyframes square {
            0%  {
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }
            100% {
                bottom: 400px;
                transform: rotate(600deg);
                -webit-transform: rotate(600deg);
                -webkit-transform: translateY(-500);
                transform: translateY(-500)
            }
        }
        @-webkit-keyframes square {
            0%  {
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }
            100% {
                bottom: 400px;
                transform: rotate(600deg);
                -webit-transform: rotate(600deg);
                -webkit-transform: translateY(-500);
                transform: translateY(-500)
            }
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="container" >
        <h1>Welcome</h1>
        <form method="post"  action="Login" >
            <input   type="text"  placeholder="user login"   name="username"   id="username"  />
            <input  type="password" placeholder="password"  name="password"   id="password"/>
            <input type="submit" value="Login"/>
        </form>
    </div>
    <ul  >
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>

success.jsp 失败界面的自己改改就好了我就不贴了.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录成功</title>
</head>
<body>
<h1>登录成功</h1>
</body>
</html>

原文链接：https://blog.csdn.net/AmbitionMM/article/details/119296808