足球赛事管理系统总结

今天我的选题基本功能都已实现，现在做一下总结。

1.生成并验证验证码

编写一个code类，生成并输出到一个文件夹，新建一个getCode的servlet，调用code类中的生成验证码图片的方法，在前台页面中的<image src="">中，src即为getCode的地址。在这个标签中绑定一个点击事件，可以点击验证码图片更换图片

package Login;

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.Random;

import javax.imageio.ImageIO;
    
public class code {
//生成验证码
    private int x = 200;
    private int y = 80;
    private int fontSize = 70;
    private StringBuilder sb = new StringBuilder();
    private Random random = new Random();
    private Color bgColor = new Color(255,255,255);
    private String[] fontsName = {"宋体", "华文楷体", "黑体", "华文新魏", "华文隶书", "微软雅黑", "楷体_GB2312"};
    private String codes = "23456789abcdefghjklmnopqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ";
    //获取随机的字体
    private String getFont(){
        int index = random.nextInt(fontsName.length);
        String fontName = fontsName[index];
        return fontName;
    }
    //获取字母
    private String getChar(){
        int index = random.nextInt(codes.length());
        String ch = codes.charAt(index)+"";
        return ch;
    }
    //获取颜色
    private Color getColor(){
        int red = random.nextInt(150);
        int green = random.nextInt(150);
        int blue = random.nextInt(150);
        return new Color(red,green,blue);
    }
    //设置缓冲区
    private BufferedImage getBufferedImage(){
        BufferedImage bi = new BufferedImage(x,y,BufferedImage.TYPE_INT_RGB);
        Graphics2D pen = (Graphics2D)bi.getGraphics();
        pen.setColor(this.bgColor);
        pen.fillRect(0,0,x,y);
        return bi;
    }
    //给缓冲区添加字符串,添加干扰线
    private BufferedImage addCharAndLine(){
        BufferedImage bi = getBufferedImage();
        Graphics2D pen = (Graphics2D)bi.getGraphics();
        for(int i=0;i<4;i++){
        String font = getFont();
        int style = random.nextInt(4);
        pen.setColor(getColor());
        pen.setFont(new Font(font,style,fontSize));
        String s = getChar();
        sb.append(s);
        pen.drawString(s, 10+i*50, 65);
        }
        int lineNumber = 3;
        pen.setColor(Color.BLUE);
//        pen.setStroke(new BasicStroke(1.5F));
        pen.setStroke(new BasicStroke(1.5F,BasicStroke.CAP_ROUND,BasicStroke.JOIN_MITER));
        for(int i=0;i<lineNumber;i++){
            int x1 = random.nextInt(x);
            int y1 = random.nextInt(y);
            int x2 = random.nextInt(x);
            int y2 = random.nextInt(y);
            pen.drawLine(x1, y1, x2, y2);
        }
        return bi;
    }
    //获取验证码的值
    public String getText(){
        System.out.print(sb.toString());
        return sb.toString();
    }
    //获取一张验证码图片
    public BufferedImage getImage(){
        return addCharAndLine();
    }
    //输出图片
    public void outputImage(BufferedImage bi){
        String path = "C:\Users\admin\Pictures\yanzhengma\"+System.currentTimeMillis()+".jpg";
        System.out.print(path);
        try {
            ImageIO.write(bi, "JPEG", new FileOutputStream(path));
        } catch (FileNotFoundException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

}

package Login;

import java.awt.image.BufferedImage;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class getCode
 */
@WebServlet("/getCode")
public class getCode extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public getCode() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        //response.getWriter().append("Served at: ").append(request.getContextPath());
        code code=new code();
        BufferedImage bi=code.getImage();
        String image_value=code.getText();
        System.out.print("image_value");
        code.outputImage(bi);
        request.getSession().setAttribute("image_value",image_value);
        //将图片响应给浏览器
        ImageIO.write(bi, "jpg", response.getOutputStream());
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

<script>
function getCode(){
        //点击验证码获取新的验证码
        var image=document.getElementById("code");
        var time=new Date().getTime();
        image.src="/shop/getCode?"+time;
        
    }
</script>

<img src="http://localhost:8080/shop/getCode" onclick="getCode()" name="code" id="code" style=" 100px;">

在code类中编写一个记录当前字母组合的方法，在getCode中调用这个方法，并将组合存入session中。在前台的输入框中绑定一个失去焦点事件，当焦点移开使用Ajax验证输入是否正确并进行提示。注意：使用Ajax需引入jquery.js

code类同上

getCode类同上

<script type="text/javascript" src="../public/js/jquery-1.11.3.min.js"></script>
<script>
function checkCode(){
        var code_input=document.getElementById("code_input").value;
        var image=document.getElementById("code").value;
        var message="";
        $.ajax({
            url:"http://localhost:8080/shop/checkCode",
            type:"post",
            data:{code_input:code_input,image:image},
            dataType:"text",
            success:function(data){
                if(data=="no"){
                    message="验证码输入不正确，请重新输入";
                    $("#code_message").css("color","red")
                }
                $("#code_message").html(message);
            }
        });
        if(message=="验证码输入不正确，请重新输入")
            code_flag=false;
        else code_falg=true;
    }
</script>


<input type="text" name="code" id="code_input" onblur="checkCode()" placeholder="验证码">
                <img src="http://localhost:8080/shop/getCode" onclick="getCode()" name="code" id="code" style=" 100px;">
                <span id="code_message"></span>

2.Ajax的使用

在这次的练习频繁练习使用了Ajax，现在做一下总结：

$.ajax({
type:"",//传输方式，get/post
url:"",//servlet地址
data:{uesrname:username},//需要传输的数据，json格式
success:function(data){
},//成功后的回调函数
dataType:""//返回的数据类型，最常用的text/json
});

dataType的选择要和后台所传类型相对应，如果要返回text，需要servlet中进行拼接：response.getWriter().write("{"isExit":"+isExit+"}");或直接输出想要输出的内容：response.getWriter().write("no");

此时前台调用返回数据的方法：

success:function(data){
var obj = data;
if(dbj==null){

}
if(obj!="yes"){

}

},

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商城登录页面</title>
<link rel="stylesheet" href="../public/css/login.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="../public/css/styles2.css">
<script type="text/javascript" src="../public/js/jquery-1.11.3.min.js"></script>
<script>
    var name_flag=false;
    var code_flag=false;
    function checkUsername(){
        var username=document.getElementById("username").value;
        var message="";
        //alert(username);
        $.ajax({
               type:"post",
               url:"http://localhost:8080/shop/checkLogin",
               data:{uesrname:username},
               success:function(data){
                   var obj = data;
                   if(dbj==null){
                       message="请输入用户名";
                      
                   }
                   if(obj!="yes"){
                      message="该用户名不存在";
                      alert(message)
                   }
                     
        },
          dataType:"text"
    });
        
}
    
     
</script>

</head>
<body>
<div class="htmleaf-container">
    <div class="wrapper">
        <div class="container">
            <h1>Welcome</h1>
            
            
                <input type="text" name="username" id="username" placeholder="Username" onblur="checkUsername()">
                
        </div>
        
        
    </div>
</div>
</body>
</html>

package Login;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

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 com.google.gson.Gson;

import database.dao;
import database.admin;
/**
 * Servlet implementation class checkLogin
 */
@WebServlet("/checkLogin")
public class checkLogin extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @return 
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        //response.getWriter().append("Served at: ").append(request.getContextPath());
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        
        String name=request.getParameter("username");
        dao dao=new dao();
        List<admin> list=new ArrayList<admin>();
        try {
            list=dao.getuser(name);
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        boolean isExit=true;
        if(list!=null) {
           isExit=true;
           System.out.print("该用户存在");
           request.getSession().setAttribute("name", name);
        }else {
            System.out.print("该用户不存在");
           isExit=false;    
        }
        response.getWriter().write("{"isExit":"+isExit+"}");
        //response.getWriter().write(isExit);
        
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

如果要返回json，需要在servlet中将数据写成json格式：

Gson gson=new Gson();
String json=gson.toJson(team);//team是一个list的数据
System.out.print(json);
response.getWriter().write(json);

此时在前台调用返回的数据，需使用data.键名的形式

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@page import="java.util.List" %>
    <%@page import="database.team" %>
     <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="../public/css/bootstrap.css" type="text/css" rel="stylesheet" />
    <link href="../public/css/custom.css"  rel="stylesheet" />
    <script src="../public/js/jquery-1.11.3.min.js"></script>
    <script src="../public/js/bootstrap.js"></script>

<script type="text/javascript">
function loadTeam(){
    $.ajax({
        type:"post",
        url:"http://localhost:8080/shop/searchTeam",
        success: function(data){
            $(data).each(
                    
                    function (i, values) {
                        $("#list").append(
                            "<tr><td>"+(++i)+"</td>"
                            +"<td>"+values.id+"</td>"
                            +"<td>"+values.name+"</td></tr>"
                        );
                    });
        },
        dataType:"json"
    });
}


window.onload=loadTeam
</script>
</head>
<body>
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">球队编号</th>
      <th scope="col">球队名称</th>
    </tr>
  </thead>
  <tbody id="list"> </tbody>
</table>


</body>
</html>

package team;

import java.io.IOException;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

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 com.google.gson.Gson;

import database.dao;
import database.team;


/**
 * Servlet implementation class searchTeam
 */
@WebServlet("/searchTeam")
public class searchTeam extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public searchTeam() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        //response.getWriter().append("Served at: ").append(request.getContextPath());
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        
        dao dao=new dao();
        List<team> list=new ArrayList<team>();
        try {
            list=dao.getAllTeam();
            if(list!=null) {
                //查询结果不为空，将list发送给show.jsp
                request.setAttribute("list", list);
                Gson gson=new Gson();
                String json = gson.toJson(list);
                System.out.println(json);
                response.getWriter().write(json);
                //response.getWriter().write("查询结果不为空");
            }
            else {
                //查询结果位空，返回一个信息
                response.getWriter().write("查询结果为空");
            }
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}