一.需求
二.搭环境
1.新建 validCode web项目
2.在WebContent下新建images文件夹
放进去图片
3.新建index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!--实现看不清功能-->
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
//浏览器带有缓存功能,不会多次请求相同数据,加入时间戳
$("img").attr("src","validcode?date="+new Date());
return false;
})
})
</script>
</head>
<body>
${error }
<form action="login" method="post">
用户名:<input type="text" name="username"/><br/>
密码:<input type="password" name="password"/><br/>
验证码:<input type="text" size="1" name="code"/><img src="validcode" width="80" height="40"/><a href="">看不清</a><br/>
<input type="submit" value="登录"/><input type="reset" value="重置"/>
</form>
</body>
</html>
3.servlet
ValidCodeServlet.java
package com.bjsxt.servlet;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
@WebServlet("/validcode")
public class ValidCodeServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//创建一张图片
//单位:像素
BufferedImage image = new BufferedImage(200, 100, BufferedImage.TYPE_INT_RGB);
//透明的玻璃
//向画板上画内容之前必须先设置画笔.
Graphics2D gra = image.createGraphics();
gra.setColor(Color.WHITE);
//从哪个坐标开始填充, 后两个参数,矩形区域
gra.fillRect(0, 0, 200, 100);
List<Integer> randList = new ArrayList<Integer>();
Random random =new Random();
for (int i = 0 ;i<4;i++) {
randList.add(random.nextInt(10));
}
//设置字体
gra.setFont(new Font("宋体",Font.ITALIC|Font.BOLD,40));
Color[] colors = new Color[]{Color.RED,Color.YELLOW,Color.BLUE,Color.GREEN,Color.PINK,Color.GRAY};
for (int i = 0; i < randList.size(); i++) {
gra.setColor(colors[random.nextInt(colors.length)]);
gra.drawString(randList.get(i)+"", i*40, 70+(random.nextInt(21)-10));
}
for (int i = 0; i < 2; i++) {
gra.setColor(colors[random.nextInt(colors.length)]);
//画横线
gra.drawLine(0, random.nextInt(101), 200, random.nextInt(101));
}
ServletOutputStream outputStream = resp.getOutputStream();
//工具类
ImageIO.write(image, "jpg", outputStream);
//把验证码放入到session中
HttpSession session = req.getSession();
session.setAttribute("code", ""+randList.get(0)+randList.get(1)+randList.get(2)+randList.get(3));
}
}
4.将jquery库放在js文件夹中
5.导入相关jar包
6.WEB-INF下
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
<!-- 当tomcat加载web.xml时,把spring配置文件信息存放到application对象中 -->
<!-- WebApplicationContext 容器 ,是ApplicationContext子接口 -->
<!-- 设置spring配置文件路径 -->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<!-- 加载Spring配置文件 -->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
</web-app>
7.src下
applicationContext.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd">
<!-- 获取数据源 -->
<bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
<property name="driverClassName" value="com.mysql.jdbc.Driver"></property>
<property name="url" value="jdbc:mysql://localhost:3306/ssm"></property>
<property name="username" value="root"></property>
<property name="password" value="smallming"></property>
</bean>
<!-- spring帮助创建SqlSessionFactory -->
<bean id="factory" class="org.mybatis.spring.SqlSessionFactoryBean">
<!--session在创建的时候需要连接数据库,因此要获取数据源 -->
<property name="dataSource" ref="dataSource"></property>
</bean>
<!-- 扫描器,扫描接口,并创建接口对象-->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="basePackage" value="com.bjsxt.mapper"></property>
<property name="sqlSessionFactory" ref="factory"></property>
</bean>
<!-- 创建Service -->
<bean id="usersService" class="com.bjsxt.service.impl.UsersServiceImpl">
<property name="usersMapper" ref="usersMapper"></property>
</bean>
</beans>
三.数据库
1.
2.
四.代码
1.pojo
Users.java
package com.bjsxt.pojo;
public class Users {
private int id;
private String username;
private String password;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
2.mapper
UsersMapper.java(接口)
package com.bjsxt.mapper;
import org.apache.ibatis.annotations.Select;
import com.bjsxt.pojo.Users;
public interface UsersMapper {
@Select("select * from users where username=#{username} and password=#{password}")
Users selByUsersPwd(Users users);
}
3.service
UsersService.java
package com.bjsxt.service;
import com.bjsxt.pojo.Users;
public interface UsersService {
/**
* 登录
* @param users
* @return
*/
Users login(Users users);
}
4.impl
UsersServiceImpl.java
package com.bjsxt.service.impl;
import com.bjsxt.mapper.UsersMapper;
import com.bjsxt.pojo.Users;
import com.bjsxt.service.UsersService;
public class UsersServiceImpl implements UsersService {
private UsersMapper usersMapper;
public UsersMapper getUsersMapper() {
return usersMapper;
}
public void setUsersMapper(UsersMapper usersMapper) {
this.usersMapper = usersMapper;
}
@Override
public Users login(Users users) {
return usersMapper.selByUsersPwd(users);
}
}
5.servlet
LoginServlet.java
package com.bjsxt.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.context.ApplicationContext;
import org.springframework.web.context.support.WebApplicationContextUtils;
import com.bjsxt.pojo.Users;
import com.bjsxt.service.UsersService;
import com.bjsxt.service.impl.UsersServiceImpl;
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
private UsersService usersService;//因为service被spring容器管理,所以需要重新取
出来
@Override
public void init() throws ServletException {
ApplicationContext ac = WebApplicationContextUtils.getRequiredWebApplicationContext(getServletContext());
usersService=ac.getBean("usersService",UsersServiceImpl.class);
}
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
String code = req.getParameter("code");
String codeSession = req.getSession().getAttribute("code").toString();
if(codeSession.equals(code)){
String username = req.getParameter("username");
String password = req.getParameter("password");
Users users = new Users();
users.setPassword(password);
users.setUsername(username);
Users user = usersService.login(users);
if(user!=null){
resp.sendRedirect("main.jsp");
}else{
req.setAttribute("error", "用户名密码不正确");
req.getRequestDispatcher("index.jsp").forward(req, resp);
}
}else{
req.setAttribute("error", "验证码不正确");
req.getRequestDispatcher("index.jsp").forward(req, resp);
}
}
}