jsp第三天练习

ndex.jsp

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" language="java" errorPage="" %>
<html>
<head>
    <title>加密的验证码</title>
    <link rel="stylesheet" href="css/style.css" />
    <script  language="javascript">
        function myReload(){
            //document.createCheckCode.src="PictureCheckCode";
            document.getElementById("createCheckCode").src=document.getElementById("createCheckCode").src+"?nocache="+new Date().getTime();
        }
    </script>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#4F6D92',endColorStr='#ACCBE7',gradientType='0');">
<table width="100%" height="451" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center"><table width="509" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td height="142"><img src="images/login_top.jpg" width="509" height="142"></td>
            </tr>
            <tr>
                <td height="159" valign="top" background="images/login_bottom.jpg">
                    <table width="350"  border="0" cellpadding="0" cellspacing="0" background="KCM/login.gif">
                    <form  name="form1" method="post" action="check.jsp" onSubmit="return check();">
                        <tr>
                            <td width="84"> </td>
                            <td width="57" height="28">用户名：</td>
                            <td colspan="2"><input name="username" type="text" size="29"></td></tr>
                        <tr>
                            <td> </td>
                            <td height="28">密  码：</td>
                            <td colspan="2"><input name="password" type="password" size="29"></td></tr>
                        <tr>
                            <td height="24" align="center"> </td>
                            <td height="28" align="center">验证码：</td>
                            <td width="33" height="24" align="left">
                                <input name="checkCode" title="验证码区分大小写" type="text" size="4" maxlength="4">        </td>
                            <td width="176" align="left"> 
                                <img src="PictureCheckCode" id="createCheckCode" style="border:#999999 solid 1px">
                                <a href="#" onClick="myReload()">看不清?换一个</a>
                            </td>
                        </tr>
                        <tr>
                            <td height="37" colspan="4" align="center"><input name="submit" type="submit" class="btn_bg_manageLogin" value="登 录">
                                 
                                <input name="reset" type="reset" class="btn_bg_manageLogin" value="取 消">
                            </td>
                        </tr>
                    </form>
                </table></td>
            </tr>
        </table>
        </td>
    </tr>
</table>
</body>
</html>
<script language="javascript">
    function check(){
        if(form1.username.value==""){
            alert("请输入用户名！");
            form1.username.focus();
            return false;
        }
        if(form1.password.value==""){
            alert("请输入密码！");
            form1.password.focus();
            return false;
        }
        if(form1.checkCode.value==""){
            alert("请输入验证码！");
            form1.checkCode.focus();
            return false;
        }
    }
</script>

check.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:useBean id="encode" class="com.demo.Encode" scope="request"/>
<%
    String checkCode = request.getParameter("checkCode").toString();
    checkCode = encode.encodeByMD5(checkCode);	//进行MD5加密
    if("".equals(request.getParameter("username")) || "".equals(request.getParameter("password"))){
        out.println("<script>alert('请输入用户名或密码！');window.location.href='index.jsp';</script>");
    }
    else{
        if(!("mr".equals(request.getParameter("username")) && "mrsoft".equals(request.getParameter("password")))){
            out.println("<script>alert('您输入的用户名或密码不正确！');window.location.href='index.jsp';</script>");
        }
    }

    if ("".equals(checkCode) || checkCode == null) {
        out.println("<script>alert('请输入验证码！');window.location.href='index.jsp';</script>");
    }
    else {
        if (!checkCode.equals(session.getAttribute("randCheckCode"))) {
            out.println("<script>alert('您输入的验证码不正确！');window.location.href='index.jsp';</script>");
        }
    }

%>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link href="css/style.css" rel="stylesheet" type="text/css">


</head>
<body>
<table width="778" height="275" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td height="115" colspan="2">
            <table width="778"  border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="784" height="115" align="center" valign="top">
                        <img src="images/logo.jpg" width="778" height="115">
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td width="190"><a href="#" onClick="show_div('menu1')" >
            <img src="images/left_top.GIF" width="186" height="33"></a>
            <table width="186" height="331" border="0" cellpadding="0" cellspacing="0" class="tableBorder_bold">
                <tr>
                    <td height="323" align="center" valign="top">
                        <!--基础信息管理-->
                        <a href="#">
                            <img name="Imgmenu1" border="0"
                                         src="images/menu_1.JPG" align="ABSMIDDLE" width="165" height="26"></a>
                        <div id="menu1">
                            <table width="165" border="0" cellpadding="0" cellspacing="0" class="tableBorder">
                                <tr><td width="18%" height="24" align="center"> 
                                    <img src="images/subMenu_ico.GIF" width="4" height="7"></td>
                                    <td width="82%"><a href="#">客户信息管理</a></td>
                                </tr>
                                <tr><td height="24" align="center"> 
                                    <img src="images/subMenu_ico.GIF" width="4" height="7"></td>
                                    <td><a href="#">商品信息管理</a></td>
                                </tr>
                                <tr><td height="24" align="center"> 
                                    <img src="images/subMenu_ico.GIF" width="4" height="7"></td>
                                    <td><a href="#">供应商信息管理</a></td>
                                </tr>
                                <tr><td height="24" align="center"> 
                                    <img src="images/subMenu_ico.GIF" width="4" height="7"></td>
                                    <td><a href="#">商品信息查询</a></td>
                                </tr>
                                <tr><td height="24" align="center"> 
                                    <img src="images/subMenu_ico.GIF" width="4" height="7"></td>
                                    <td><a href="#">客户信息查询</a></td>
                                </tr>
                                <tr><td height="24" align="center"> 
                                    <img src="images/subMenu_ico.GIF" width="4" height="7"></td>
                                    <td><a href="#">供应商信息查询</a></td>
                                </tr>
                            </table>
                        </div>
                        <!--库存管理-->
                        <a href="#" >
                            <img name="Imgmenu3" align="ABSMIDDLE"
                                 src="images/menu_3.JPG" border="0" width="165" height="28"></a><br>
                        <!--销售管理-->
                        <a href="#">
                            <img name="Imgmenu4" align="ABSMIDDLE"
                                 src="images/menu_4.JPG" border="0" width="165" height="28"></a><br>
                        <a href="#">
                            <img name="Imgmenu5" align="ABSMIDDLE"
                                 src="images/menu_5.JPG" border="0" width="165" height="28"></a><br>

                        <a href="#">
                            <img name="Imgmenu6" align="ABSMIDDLE"
                                 src="images/menu_6.JPG" border="0" width="165" height="28"></a><br>
                        <a href="index.jsp" >
                            <img name="Imgmenu7" align="ABSMIDDLE"
                                 src="images/menu_7.JPG" border="0" width="165" height="28"></a><br>
                    </td>
                </tr>
            </table></td>
        <td width="588"> </td>
    </tr>
</table>
</body>
</html>

style.css

td {
    font-size: 9pt;
    color: #000000;
}
a:hover {
    font-size: 9pt;
    color: #FF6600;
}
a {
    font-size: 9pt;
    text-decoration: none;
    color: #676767;
    noline:expression(this.onfocus=this.blur);
}
img{
    border:0;
}
.img1{
    border:1px;
}
.blue {
    font-size: 9pt;
    color: #034683;
}
.bgcolor {
    font-size: 9pt;
    color: #1980DB;
}
.btn_grey {
    font-family:"宋体";
    font-size: 9pt;
    color: #333333;
    background-color: #eeeeee;
    cursor: hand;
    padding:1px;
    height:19px;
    border-top: 1px solid #FFFFFF;
    border-right:1px solid #666666;
    border-bottom: 1px solid #666666;
    border-left: 1px solid #FFFFFF;
}
.btn_bg_manageLogin{
    background-image:url(../images/login_btn_bg.gif);
    border:#436E9B solid 1px;
    width:51px;
    height:20px;
    padding:4px;
    color:#000000;
    outline-color:#FFFFFF;
}
input{
    font-family: "宋体";
    font-size: 9pt;
    color: #333333;
    border: 1px solid #999999;

}
.word_grey{
    color:#CFEAFD;
}
.word_deepgrey{
    color:#505050;
}
.word_orange{
    color:#FF6600;
}
.word_blue{
    color:#123F73;
}
.word_white{
    color:#FFFFFF;
}
.word_gray{
    color:#dddddd;
}
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.textarea {
    font-family: "宋体";
    font-size: 9pt;
    color: #333333;
    border: 1px solid #999999;
}
.tableBorder {
    border: #89B7D8 1px solid
}
.hidden_a_line{
    noline:expression(this.onfocus=this.blur);
}
.tableBorder_bold {
    border: #EEEEEE 4px solid;
    padding:5px;
}
.tableBorder_gray {
    border: #C7C7C7 1px solid
}
.table1{
    background-color:#AEAEAE;
    padding:5px;
}

PictureCheckCode.java

package com.demo;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.*;
import java.awt.geom.AffineTransform;
import java.awt.geom.Line2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

public class PictureCheckCode extends HttpServlet {
    public PictureCheckCode() {
        super();
    }

    public void destroy() {
        super.destroy();
    }

    public void init() throws ServletException {
        super.init();
    }
    //获取随机颜色
    Color getRandColor(int fc, int bc) {
        Random random = new Random();
        if (fc > 255) fc = 255;
        if (bc > 255) bc = 255;
        int r = fc + random.nextInt(bc - fc);
        int g = fc + random.nextInt(bc - fc);
        int b = fc + random.nextInt(bc - fc);
        return new Color(r, g, b);
    }
    public void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //禁止缓存图片
        response.setHeader("Pragma", "No-cache");
        response.setHeader("Cache-Control", "No-cache");
        response.setDateHeader("Expires", 0);
        // 指定生成的响应是图片
        response.setContentType("image/jpeg");
        int width = 70;
        int height = 17;
        BufferedImage image = new BufferedImage(width, height,
                BufferedImage.TYPE_INT_RGB);
        Graphics g = image.getGraphics();
        Graphics2D g2d=(Graphics2D)g;
        Random random = new Random();
        Font mFont = new Font("华文宋体", Font.BOLD, 17);
        g.setColor(getRandColor(200, 250));
        g.fillRect(0, 0, width, height);
        g.setFont(mFont);
        g.setColor(getRandColor(180, 200));
        //画随机的线条
        for (int i = 0; i < 130; i++) {
            int x = random.nextInt(width - 1);
            int y = random.nextInt(height - 1);
            int x1 = random.nextInt(6) + 1;
            int y1 = random.nextInt(12) + 1;
            BasicStroke bs=new BasicStroke(2f,BasicStroke.CAP_BUTT,BasicStroke.JOIN_BEVEL);
            Line2D line=new Line2D.Double(x,y,x+x1,y+y1);
            g2d.setStroke(bs);
            g2d.draw(line);
        }
        String sRand="";
        //输出随机的验证文字
        int itmp=0;
        for(int i=0;i<4;i++){
            if(random.nextInt(2)==1){
                //生成A~Z的字母
                itmp=random.nextInt(26)+65;
            }
            else{
                //生成0~9的数字
                itmp=random.nextInt(10)+48;
            }
            char ctmp=(char)itmp;
            sRand+=String.valueOf(ctmp);
            Color color=new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110));
            g.setColor(color);
            /****随机缩放文字并将文字旋转指定角度**/
            //将文字旋转指定角度
            Graphics2D g2d_word=(Graphics2D)g;
            AffineTransform trans=new AffineTransform();
            trans.rotate(random.nextInt(45)*3.14/180,15*i+10,6);
            //缩放文字
            float scaleSize=random.nextFloat()+0.5f;
            if(scaleSize<0.8 || scaleSize>1.1f) scaleSize=1f;
            trans.scale(scaleSize, scaleSize);
            g2d_word.setTransform(trans);

            g.drawString(String.valueOf(ctmp),15*i+10,14);

        }
        //将生成的验证码保存到Session中
        HttpSession session=request.getSession(true);
        //声明并实例化Encode的实例
        Encode encode=new Encode();
        //将加密后的验证码保存到Session
        session.setAttribute("randCheckCode",encode.encodeByMD5(sRand));
        g.dispose();
        ImageIO.write(image,"JPEG",response.getOutputStream());
    }
}

Encode.java

package com.demo;

import java.security.MessageDigest;

public class Encode {
    public String encode(String str, String algorithm) {
        if (str == null) {
            return null;
        }
        //声明并实例化StringBuilder类的对象
        StringBuilder sb = new StringBuilder();
        try {
            //创建使用MD5加密算法的对象
            MessageDigest code = MessageDigest.getInstance(algorithm);
            //将要加密信息中的所有字节提供给该对象
            code.update(str.getBytes());
            //调用digest方法完成消息摘要的计算，并以字节数组的形式返回消息摘要
            byte[] bs = code.digest();
            //将加密后的字节数组转换成十六进制的字符串，形成最终的密文
            for (int i = 0; i < bs.length; i++) {
                int v = bs[i] & 0xFF;
                if (v < 16) {
                    sb.append(0);
                }
                sb.append(Integer.toHexString(v));
            }
        }
        catch (Exception e) {
            e.printStackTrace();
        }
        //将加密后的字符串中的英文字母转换为大写
        return sb.toString().toUpperCase();
    }

    public String encodeByMD5(String str){
        return encode(str,"MD5");
    }
}

web.xml

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<script> 标签

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

alert("我的第一个 JavaScript");

</script>

您无需理解上面的代码。只需明白，浏览器会解释并执行位于 <script> 和 </script>之间的 JavaScript 代码

	那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

<body> 中的 JavaScript

在本例中，JavaScript 会在页面加载时向 HTML 的 <body> 写文本：

实例

<!DOCTYPE html>

<html>

<body>

document.write("<h1>这是一个标题</h1>");

document.write("<p>这是一个段落</p>");

</script>

</body>

</html>

JavaScript 函数和事件

上面例子中的 JavaScript 语句，会在页面加载时执行。

通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。

如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。

您将在稍后的章节学到更多有关 JavaScript 函数和事件的知识。

在 <head> 或者 <body> 的JavaScript

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

<head> 中的 JavaScript 函数

在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分。

该函数会在点击按钮时被调用：

实例

<!DOCTYPE html>

<html>

<head>

function myFunction()

{

document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";

}

</script>

</head>

<body>

</body>

</html>

<body> 中的 JavaScript 函数

在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。

该函数会在点击按钮时被调用：

实例

<!DOCTYPE html>

<html>

<body>

function myFunction()

{

document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";

}

</script>

</body>

</html>

外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：

实例

<!DOCTYPE html>

<html>

<body>

</body>

</html>

你可以将脚本放置于 <head> 或者 <body>中实际运行效果与您在 <script> 标签中编写脚本完全一致。

myScript.js 文件代码如下：

function myFunction(){

document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";}

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

么是JavaScript

JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

JavaScript特点

是一种解释性脚本语言（代码不进行预编译）。

主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。

可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

JavaScript组成

JavaScript日常用途

1、嵌入动态文本于HTML页面。

2、对浏览器事件做出响应。

3、读写HTML元素。

4、在数据被提交到服务器之前验证数据。

5、检测访客的浏览器信息。

6、控制cookies，包括创建和修改等。

7、基于Node.js技术进行服务器端编程。

JavaScript的基本结构

<script type="text/javascript">
 <!—
 JavaScript 语句;
 —>
</script >

示例：

……
<title>初学JavaScript</title>
</head>
<body>
<script type="text/javascript">
 document.write("初学JavaScript");
 document.write("<h1>Hello，JavaScript</h1>");
</script>
</body>
</html>

<script>…</script>可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可

JavaScript的执行原理

网页中引用JavaScript的方式

1、使用<script>标签

2、外部JS文件

<script src="export.js" type="text/javascript"></script>

3.直接在HTML标签中

<input name="btn" type="button" value="弹出消息框" 
 onclick="javascript：alert('欢迎你');"/>

JavaScript核心语法：

1. 变量

①先声明变量再赋值

var width;
width = 5;
var － 用于声明变量的关键字
width － 变量名

②同时声明和赋值变量

var catName= "皮皮";
var x, y, z = 10;

③不声明直接赋值【一般不使用】

width=5;

变量可以不经声明而直接使用，但这种方法很容易出错，也很难查找排错，不推荐使用。

2. 数据类型

①undefined：示例：var width;

变量width没有初始值，将被赋予值undefined

②null：表示一个空值，与undefined值相等

③number：

var iNum=23; //整数

var iNum=23.0; //浮点数

④Boolean：true和false 但是JS会把他们解析成1；0

⑤String：一组被引号（单引号或双引号）括起来的文本 var string1="This is a string";

3. typeof运算符

typeof检测变量的返回值；typeof运算符返回值如下：

①undefined：变量被声明后，但未被赋值.

②string：用单引号或双引号来声明的字符串。

③boolean：true或false。

④number：整数或浮点数。

⑤object：javascript中的对象、数组和null。

在线咨询

上一篇：HTML中使用<a>标签实现文本内链接-零基础自学网页制作
下一篇：JSP 服务器响应

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

jsp第三天练习

您的项目需求