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>
*/
BaseMapper.java类的代码如下:
package com.activiti.spm.dao;
import java.util.List;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface BaseMapper<T,PK> {
/**
* 通过id查询
* @param id
* @return
*/
public T findEntityById(PK id);
/**
* 查询全部
* @param obj
* @return
*/
public List<T> findEntity(Object obj);
/**
* 条件查询
* @param obj
* @return
*/
public List<T> findLikeEntity(Object obj);
/**
* 新增
* @param t
*/
public int insertEntity(T t);
/**
* 更新
* @param t
*/
public int updateEntityById(T t);
/**
* 通过id删除
* @param id
*/
public int deleteEntityById(Object obj);
/**
* 条件删除
* @param obj
*/
public int deleteEntityByCondition(Object obj);
}
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保持一致