SpringBoot---实现简单登录功能

1、新建登录页面,login.jsp页面如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   	 <title>登录页面</title>
  </head>
  <body>
    <center>
    	<h3>用户登录</h3>
    	<form id="loginForm" action="/spmBoot/login.do" method="post">
			<span id="msg" style="color: red"></span>
    		<table>
    			<tr>
    				<td>用户名:</td>
    				<td>
    					<input name="userCode"/>
    				</td>
    			</tr>
    			<tr>
    				<td>密码:</td>
    				<td>
    					<input  type="password"  name="pwd"/>
    				</td>
    			</tr>
    			<tr>
	                <td>验证码:</td>
	                <td>
	                	<input type="text" name="verifyCode"maxlength="4"  size="8" style="vertical-align: middle;"/>
	                    <img id="code" src="/spmBoot/verify/code.do" onclick="refreshCode()" style="vertical-align: middle;">
	                </td>
	            </tr>
	            <tr>
    				<td colspan="2" style="text-align: center">
    					<input type="button" value="登录" onclick="login()"/>
    				</td>
    			</tr>
    		</table>
    	</form>
    </center>
  </body>
</html>

2、编写js方法,进行必填项判断,并且进入后台进行登录判断:

(此代码写在login.jsp页面中)

<script type="text/javascript" src="/spmBoot/js/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<script type="text/javascript">
   	 //必填项校验方法
   	 function validate(){
   		 var userCode = $("input[name=userCode]").val();
   		 var pwd = $("input[name=pwd]").val();
   		 if(userCode == "" || userCode == null){
   			  $("#msg").html("用户名不能为空!");
   			  return false;
   		 }else if(pwd == "" || pwd == null){
   			 $("#msg").html("密码不能为空!");
   			 return false;
   		 }else{
   			var code = $("input[name=verifyCode]").val();
                        var flag = true;
                        if(code == ""){
            	            $("#msg").html("验证码不能为空!");
                            return false;
                        }else{
                            $.ajax({
                                url:"/spmBoot/verify/checkVerifyCode.do",
                                type:"post",
                                data:{"verifyCode":code},
                                dataType:"text",
                                async:false,
                                success:function(result){
                                    if(result == "false"){
                        	        $("#msg").html("验证码输入不正确!");
                                        flag = false;
                                    }
                                }
                                });
                        return flag;
                     }
   		 }
   	 }
   	 //登录方法
   	 function login(){
   		if(validate()){
	   		 $.ajax({
	                    type: "POST",//方法类型
	                    dataType: "json",//预期服务器返回的数据类型
	                    url: "/spmBoot/login.do" ,//url
	                    data: $("#loginForm").serialize(),//传递到后台的参数
	                    success: function (data) {
	                        var status = data.status;
	                        if (status == "y") {
	                	    $("#msg").html(data.msg);
	                            window.location.href='/spmBoot/index.do'
	                        }else{
	                	    $("#msg").html(data.msg);
	                        }
	                    },
	                    error : function() {
	                        alert("异常!");
	                    }
	                });
   		}
   	 }
   	 
  	// 刷新验证码
  	function refreshCode(){
  		 $("#code").attr("src", "/spmBoot/verify/code.do?r=" + Math.random());
  	}
</script>

3、新建用户类,UserModel.java类如下:

package com.activiti.spm.model;

import java.security.Timestamp;
/**
 * @Description:用户实体类
 * @author:zoey
 * @date:2018年6月14日
 */
public class UserModel {
	private int id;
	private String userCode;
	private String name;
	private String pwd;
	private int sex;
	private String address;
	private Timestamp createDate;
	private String createUser;
	private Timestamp updateDate;
	private String updateUser;
	private String deleteFlag;
	
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getUserCode() {
		return userCode;
	}
	public void setUserCode(String userCode) {
		this.userCode = userCode;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPwd() {
		return pwd;
	}
	public void setPwd(String pwd) {
		this.pwd = pwd;
	}
	public int getSex() {
		return sex;
	}
	public void setSex(int sex) {
		this.sex = sex;
	}
	public String getAddress() {
		return address;
	}
	public void setAddress(String address) {
		this.address = address;
	}
	public Timestamp getCreateDate() {
		return createDate;
	}
	public void setCreateDate(Timestamp createDate) {
		this.createDate = createDate;
	}
	public String getCreateUser() {
		return createUser;
	}
	public void setCreateUser(String createUser) {
		this.createUser = createUser;
	}
	public Timestamp getUpdateDate() {
		return updateDate;
	}
	public void setUpdateDate(Timestamp updateDate) {
		this.updateDate = updateDate;
	}
	public String getUpdateUser() {
		return updateUser;
	}
	public void setUpdateUser(String updateUser) {
		this.updateUser = updateUser;
	}
	public String getDeleteFlag() {
		return deleteFlag;
	}
	public void setDeleteFlag(String deleteFlag) {
		this.deleteFlag = deleteFlag;
	}
	@Override
	public String toString() {
		return "UserModel [id=" + id + ", userCode=" + userCode + ", name="
				+ name + ", pwd=" + pwd + ", sex=" + sex + ", address="
				+ address + ", createDate=" + createDate + ", createUser="
				+ createUser + ", updateDate=" + updateDate + ", updateUser="
				+ updateUser + ", deleteFlag=" + deleteFlag + "]";
	}
	
}

4、新建控制器,实现用户登录功能,LoginController.java类如下:

package com.activiti.spm.controller;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import com.activiti.spm.model.PersonModel;
import com.activiti.spm.model.UserModel;
import com.activiti.spm.service.UserService;

@Controller
public class LoginController {
	@Autowired
	private UserService userService;

	@RequestMapping(value="/index")
	public String index(){
		return "index";
	}
	
	/**
	 * @Description:进入用户登录页面
	 * 访问地址:http://localhost:8081/spmBoot/toLogin.do
	 * @return
	 * @date:2018年6月19日
	 */
	@RequestMapping("/toLogin.do")
	public String toLogin(){
		System.out.println("进入用户登录页面");
		return "login";
	}
	
	/**
	 * @Description:用户登录,判断用户名和密码是否正确
	 * 访问地址:http://localhost:8081/spmBoot/login.do
	 * @param user
	 * @param request
	 * @return
	 * @throws IOException 
	 * @date:2018年6月19日
	 */
	@RequestMapping("/login.do")
	@ResponseBody
	public Map<String,String> login(UserModel user,HttpServletRequest request) throws IOException{
		//判断用户是否存在
		UserModel existUser = userService.login(user);
		Map<String,String> map = new HashMap<String,String>();
		if(existUser != null){
			request.getSession().setAttribute("user", existUser);//保存用户信息在session中
			map.put("status", "y");
			map.put("msg", "登录成功!");
		}else{
			map.put("status", "n");
			map.put("msg", "用户名或密码错误!");
		}
		return map;
	}

}

5、编写UserService.java类如下:

package com.activiti.spm.service;
import com.activiti.spm.model.UserModel;
/**
 * @Description:用户Service
 * @author:zoey
 * @date:2018年6月19日
 */
public interface UserService {
	UserModel login(UserModel user);
}

6、编写UserServiceImpl.java类如下:

package com.activiti.spm.service.impl;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

import com.activiti.spm.dao.UserMapper;
import com.activiti.spm.model.UserModel;
import com.activiti.spm.service.UserService;
/**
 * @Description:用户Service具体实现类
 * @author:zoey
 * @date:2018年6月19日
 */
@Service("userService")
public class UserServiceImpl implements UserService{
	@Autowired
	private UserMapper userMapper;
	
	/**
	 * @Description:判断用户登录是否成功
	 * @param user
	 * @return
	 * @author:zoey
	 * @date:2018年6月14日
	 */
	@Override
	public UserModel login(UserModel user) {
		return userMapper.login(user);
	}

}

7、编写UserMapper.java类如下:

package com.activiti.spm.dao;
import com.activiti.spm.model.UserModel;

/**
 * @Description:用户的增删查改操作
 * @author:zoey
 * @date:2018年6月14日
 */
public interface UserMapper extends BaseMapper<UserModel,Integer>{	
	UserModel login(UserModel user);
}
/**
报错:
Description:

Field userMapper in com.activiti.spm.service.UserServiceImp required a bean of type 'com.activiti.spm.dao.userMapper' that could not be found.

Action:

Consider defining a bean of type 'com.activiti.spm.dao.UserMapper' in your configuration.
解决方式:
1、在SpmApplication.java类上加上注解:
	@MapperScan(basePackages = {"com.activiti.spm.*"}, markerInterface = BaseMapper.class)
2、UserMapper.java类实现BaseMapper<UserModel,Integer>
*/

8、编写UserMapper.xml文件如下:

<?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.activiti.spm.dao.UserMapper">
	<!-- User结果集 -->
	<resultMap id="userMap" type="com.activiti.spm.model.UserModel">  
	        <id column="id" property="id" javaType="int" jdbcType="INTEGER"/>  
	        <result column="id" property="id" javaType="int" jdbcType="INTEGER"/>  
	        <result column="user_code" property="userCode" javaType="String" jdbcType="VARCHAR"/>  
	        <result column="name" property="name" javaType="String" jdbcType="VARCHAR"/>  
	        <result column="pwd" property="pwd" javaType="String" jdbcType="VARCHAR"/>  
	        <result column="sex" property="sex" javaType="int" jdbcType="INTEGER"/>  
	        <result column="address" property="address" javaType="String" jdbcType="VARCHAR"/>  
	        <result column="create_date" property="createDate" javaType="String" jdbcType="TIMESTAMP"/>  
	        <result column="create_user" property="createUser" javaType="String" jdbcType="VARCHAR"/>  
	        <result column="update_date" property="updateDate" javaType="String" jdbcType="TIMESTAMP"/>  
	        <result column="update_user" property="updateUser" javaType="String" jdbcType="VARCHAR"/>  
	        <result column="delete_flag" property="deleteFlag" javaType="String" jdbcType="VARCHAR"/>  
	</resultMap>  
	
	<!-- 用户登录 -->
	<select id="login" resultMap="userMap" parameterType="com.activiti.spm.model.UserModel">
		select 
			t.id,t.user_code,t.name,t.pwd,t.sex,t.address,t.create_date,
			t.create_user,t.update_date,t.update_user,t.delete_flag
		from
			userbean t
		where t.user_code = #{userCode} and t.pwd = #{pwd}
	</select>


	<!-- 
	报错:No typehandler found for property createDate
	错误写法:
		<result column="create_date" property="createDate"/>  
	正确写法:
		<result column="create_date" property="createDate" javaType="String" jdbcType="TIMESTAMP"/>  
	注意:sql语句中,传递参数使用#{}获取传递的参数,传递的参数变量是java类中的属性,不是表中字段
		正确写法:
			#{userCode}
		错误写法:
			#{user_code}
	 -->
</mapper>

9、编写验证码的VerifyCodeControllerL.java类如下:

package com.activiti.spm.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import java.awt.*;
import java.awt.image.BufferedImage;
import java.util.Random;


@Controller
@RequestMapping("verify")
public class VerifyCodeController {
    // 验证码图片的宽度。
    private int width = 80;
    // 验证码图片的高度。
    private int height = 25;
    // 验证码字符个数
    private int codeCount = 4;
    private int x = 0;
    // 字体高度
    private int fontHeight;
    private int codeY;
    char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
            'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',
            'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };
    /**
     * 初始化验证图片属性
     */
    public void init() throws ServletException {
        String strWidth ="80";// 宽度
        String strHeight ="25";// 高度
        String strCodeCount = "4";// 字符个数
        // 将配置的信息转换成数值
        try {
            if (strWidth != null && strWidth.length() != 0) {
                width = Integer.parseInt(strWidth);
            }
            if (strHeight != null && strHeight.length() != 0) {
                height = Integer.parseInt(strHeight);
            }
            if (strCodeCount != null && strCodeCount.length() != 0) {
                codeCount = Integer.parseInt(strCodeCount);
            }
        } catch (NumberFormatException e) {
        }
        x = width / (codeCount + 1);
        fontHeight = height - 2;
        codeY = height - 4;
    }



    /**
     * 生成验证码
     *TODO
     *LIU
     * @param req
     * @param resp
     * @throws ServletException
     * @throws java.io.IOException
     *下午12:36:55
     */
    @RequestMapping(value="/code.do",method= RequestMethod.GET)
    public void service(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, java.io.IOException {
        init();
        // 定义图像buffer
        BufferedImage buffImg = new BufferedImage(width, height,
                BufferedImage.TYPE_INT_RGB);
        Graphics2D g = buffImg.createGraphics();
        // 创建一个随机数生成器类
        Random random = new Random();
        // 将图像填充为白色
        g.setColor(Color.WHITE);
        g.fillRect(0, 0, width, height);
        // 创建字体,字体的大小应该根据图片的高度来定。
        Font font = new Font("Fixedsys", Font.PLAIN, fontHeight);
        // 设置字体。
        g.setFont(font);
        // 画边框。
        g.setColor(Color.BLACK);
        g.drawRect(0, 0, width - 1, height - 1);
        // 随机产生160条干扰线,使图象中的认证码不易被其它程序探测到。
        g.setColor(Color.BLACK);
        for (int i = 0; i < 20; i++) {
            int x = random.nextInt(width);
            int y = random.nextInt(height);
            int xl = random.nextInt(12);
            int yl = random.nextInt(12);
            g.drawLine(x, y, x + xl, y + yl);
        }
        // randomCode用于保存随机产生的验证码,以便用户登录后进行验证。
        StringBuffer randomCode = new StringBuffer();
        int red = 0, green = 0, blue = 0;
        // 随机产生codeCount数字的验证码。
        for (int i = 0; i < codeCount; i++) {
            // 得到随机产生的验证码数字。
            String strRand = String.valueOf(codeSequence[random.nextInt(36)]);
            // 产生随机的颜色分量来构造颜色值,这样输出的每位数字的颜色值都将不同。
            red = random.nextInt(255);
            green = random.nextInt(255);
            blue = random.nextInt(255);
            // 用随机产生的颜色将验证码绘制到图像中。
            g.setColor(new Color(red, green, blue));
            g.drawString(strRand, (i + 1) * x, codeY);
            // 将产生的四个随机数组合在一起。
            randomCode.append(strRand);
        }
        // 将四位数字的验证码保存到Session中。
        HttpSession session = req.getSession();
        session.setAttribute("validateCode", randomCode.toString());
        // 禁止图像缓存。
        resp.setHeader("Pragma", "no-cache");
        resp.setHeader("Cache-Control", "no-cache");
        resp.setDateHeader("Expires", 0);
        resp.setContentType("image/jpeg");
        // 将图像输出到Servlet输出流中。
        ServletOutputStream sos = resp.getOutputStream();
        ImageIO.write(buffImg, "jpeg", sos);
        sos.close();
    }



    /**
     * 验证验证码是否匹配
     *TODO
     *LIU
     * @param verifyCode
     * @param req
     * @param resp
     * @return
     *下午12:37:50
     */
    @RequestMapping(value="/checkVerifyCode.do",method= RequestMethod.POST)
    @ResponseBody
    public Object checkVerifyCode(@RequestParam(value = "verifyCode") String verifyCode,HttpServletRequest req, HttpServletResponse resp){
      String flag = "false";
      if(verifyCode!=null){
          HttpSession session = req.getSession();
          String validateCode= (String) session.getAttribute("validateCode");
          if(validateCode!=null&&validateCode.equals(verifyCode.toUpperCase())){
              flag = "true";
          }else{
              flag = "false";
          }
      }else{
          flag = "false";
      }
      return flag;
    }
}

10、启动类如下:

package com.activiti.spm;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

import com.activiti.spm.dao.BaseMapper;

@SpringBootApplication
@MapperScan(basePackages = {"com.activiti.spm.*"}, markerInterface = BaseMapper.class)
public class SpmApplication {
	public static void main(String[] args) {
		SpringApplication.run(SpmApplication.class, args);
		System.out.println("启动完成");
	}

}

11、application.properties配置文件如下:

#server
server.port=8081
server.context-path=/spmBoot
#server.servlet-path=*.do

#static path
spring.mvc.static-path-pattern=/**

#dataSource	
#spring.datasource.url=jdbc:db2://172.40.1.3:60009/BEIJIAN
#spring.datasource.username=spm
#spring.datasource.password=spm
#spring.datasource.driver-class-name=com.ibm.db2.jcc.DB2Driver

spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp

spring.datasource.url=jdbc:mysql://192.168.15.90:3306/ssq?useUnicode=true&characterEncoding=UTF-8
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

#mybatis
mybatis.mapperLocations=classpath:com/activiti/spm/model/mapper/*.xml
mybatis.typeAliasesPackage=com.activiti.spm.model

spring.devtools.restart.enabled: true
#spring.devtools.restart.additional-paths: src/main/java
spring.devtools.restart.exclude: webapp/**

spring.jpa.show.sql=true
spring.jpa.hibernate.ddl.auto=update
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL5Dialect
spring.jpa.properties.hibernate.format_sql=true
spring.jpa.properties.hibernate.use_sql_comments=true

12、pom.xml配置文件如下:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>

	<groupId>com.activiti</groupId>
	<artifactId>spm</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>

	<name>spm</name>
	<description>Demo project for Spring Boot</description>

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>1.5.10.RELEASE</version>
		<relativePath /> <!-- lookup parent from repository -->
	</parent>

	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<!-- 热部署 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<optional>true</optional>
		</dependency>

		<dependency>
			<groupId>org.mybatis.spring.boot</groupId>
			<artifactId>mybatis-spring-boot-starter</artifactId>
			<version>1.3.1</version>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter</artifactId>
			<exclusions>
				<exclusion>
					<groupId>org.springframework.boot</groupId>
					<artifactId>spring-boot-starter-logging</artifactId>
				</exclusion>
			</exclusions>
		</dependency>

		<!-- JSTL (JSP standard Tag Library) JSP 标准标签库 -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
		</dependency>

		<dependency>
			<groupId>org.apache.tomcat.embed</groupId>
			<artifactId>tomcat-embed-jasper</artifactId>
			<scope>provided</scope>
		</dependency>
		<!-- activiti -->
		<dependency>
		<groupId>org.activiti</groupId>
		<artifactId>activiti-spring-boot-starter-basic</artifactId>
		<version>6.0.0</version>
		<exclusions>  
		  	<exclusion>  
		    	<groupId>de.odysseus.juel</groupId>  
		   	 	<artifactId>juel-spi</artifactId>  
		  	</exclusion>  
		</exclusions>  
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-log4j</artifactId>
			<version>1.2.5.RELEASE</version>
		</dependency>
		<dependency>
			<groupId>com.google.code.gson</groupId>
			<artifactId>gson</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>

		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<scope>runtime</scope>
		</dependency>

	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
			<plugin>
		        <groupId>org.apache.maven.plugins</groupId>
		        <artifactId>maven-compiler-plugin</artifactId>
		        <version>3.1</version>
		        <configuration>
		            <source>1.7</source> 
		            <target>1.7</target> 
		        </configuration>
		    </plugin>

		</plugins>
	</build>
</project>

13、数据库结构图如下:

14、项目结构图如下:





15、效果图如下:


16、提示:

(1)将input和msg水平对齐:

        设置input和msg的样式 vertical-align:middle;

(2)UserMapper.java中的方法名称需要和UserMapper.xml中对应sql的id保持一致

猜你喜欢

转载自blog.csdn.net/zz2713634772/article/details/80735657