1, First look at the renderings:
After clicking login, if the password is correct, it will directly jump to the success interface
I First create a user table in the database Table name: user
Save several users:
The preparation is almost done. Start writing code
Open the project of building a successful SSM environment in our previous article
2, Complete login module
Since it is the login module, we will first complete the design of the user object.
Take a look at my directory structure first: (you can build files first or follow me step by step.)
First create a user class
1. Create User class
Create a user class under the entity package.
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. Design login interface
package com.wm.servicce;
import com.wm.entity.User;
public interface LoginService {
/**
* The interface of the login module searches the database according to the entered username and password, and returns the found User information
* @param username
* @param password
* @return user
*
*/
public User getUserByNameAndPass(String username ,String password );
}
3. Implement data transfer and parameter binding in dao layer
Create LoginDao under dao package
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);
}
Under 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>
Learn about @ Autowired and @ Service first
When using Spring for project development, automatic assembly will be widely used. What is automatic assembly? To put it simply: Spring uses the dependency injection (DI) function to complete the dependency assignment management between various components in the Spring IOC container.
@What is the role of Autowired?
@Autowired is an annotation that can annotate class member variables, methods and constructors, so that spring can complete the automatic assembly of bean s.
@Autowired matches by class by default, and assembles bean s by name according to @ Qualifier.
usage method:
Method 1: the member attribute field uses @ Autowired, without the set method of the field
@Service annotation function
1. The default name of its getBean is the class name (initial lowercase), which can be specified as @ Service("xxxx"),
2. The defined beans are singleton by default and can be changed using @ Service("beanName") @ Scope("prototype").
3. You can specify the initialization method and destruction method (any method name) through @ PostConstruct and @ PreDestroy
4. Interface to implement login
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. Complete the writing of the controller
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. The last step is to complete the preparation of the front-end interface
It is mainly to write the login interface index in 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>A very beautiful one CSS3 Login interface</title>
<style type="text/css">
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font: 16px/20px microsft yahei;
background-image: url("images/Sky 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 failed. Just change the interface yourself. I won't post it
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Login succeeded</title>
</head>
<body>
<h1>Login succeeded</h1>
</body>
</html>