web項目總結

時間 2019-11-06
標籤 web 項目總結欄目 HTML 简体版
原文原文鏈接
web項目 Webroot下面的index.jsp頁面的內容： <%@ page language="java" pageEncoding="UTF-8"%>
<%
response.sendRedirect("start.do");
%>

<!--在index.jsp中使用  start.do 跳轉到    /WEB-INF/jsp/user_login.jsp 受保護資源 --> Web.xml中定義監聽器 <listener>
        <listener-class>
            net.wanggd.mobile_scm.web.SysInit
        </listener-class>
</listener> 

net.wanggd.mobile_scm.web.SysInit是監聽類,當weblogic或tomcat啓動的時候加載 


package net.wanggd.mobile_scm.web;
import javax.servlet.ServletContext;
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;
public class SysInit implements ServletContextListener {
    @Override
    public void contextDestroyed(ServletContextEvent arg0) {
    }
   @Override
    public void contextInitialized(ServletContextEvent event) {
        ServletContext application = event.getServletContext();
        //系統名稱
        String sysname = application.getInitParameter("sysname");
        application.setAttribute("sysname", sysname);
        //全局上下文路徑
        application.setAttribute("ctx", application.getContextPath());        
    }
}

須要實現2個方法

在user_login.jsp中有 <head>  
<title>${sysname}</title>  
<!—
sysname就是在監聽器net.wanggd.mobile_scm.web.SysInit中定義的全局上下文 -->
</head> 驗證碼 Jsp頁面驗證碼的顯示和更換
<div class="validateCodeDiv"  style="cursor:pointer;display:none" onclick="changeCode();">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td height="60">
            請求驗證碼，使用servlet構建的,src指定訪問servlet的地址
            <img src="servlet/getVcode" id="imgVcode"/>
          </td>
        </tr>
        <tr>
          <td align="center" valign="middle" height="20" style="color:blue">若看不清，點圖片換一張
</td>
        </tr>
      </table>
</div> 驗證碼之servlet代碼 
package net.wanggd.mobile_scm.web;

import java.io.IOException;
import java.io.OutputStream;

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

import net.beifeng.mobile_scm.utils.VCodeGenerator;

public class GetValidateCodeServlet extends HttpServlet {

    private static final long serialVersionUID = 8244305529216943035L;

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        OutputStream os = response.getOutputStream();
        VCodeGenerator vg = new VCodeGenerator(os);
        String vcode = vg.drawCode();
        os.close();
        //把驗證碼放入session中
        request.getSession().setAttribute("vcode", vcode);
    }

}


驗證碼核心實現類 package net.wanggd.mobile_scm.utils;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;

import javax.imageio.ImageIO;

public class VCodeGenerator {

    final private char[] chars = "2345678ABCDEFGHJKLMPQRSTUVWXYabcdefhkmnqrstuvwx"
            .toCharArray();
    private static String[] fontNames = new String[] { "Courier", "Arial",
            "Verdana", "Georgia", "Times", "Tahoma" };
    private static int[] fontStyle = new int[] { Font.PLAIN, Font.BOLD,
            Font.ITALIC, Font.BOLD | Font.ITALIC };

    private int width = 160;
    private int height = 60;
    private int charCnt = 4;
    private int disturbLineNum = 10;

    private OutputStream os;

    public VCodeGenerator(OutputStream os) {
        this.os = os;
    }

    public VCodeGenerator(OutputStream os, int width, int height, int charCnt) {
        this.width = width;
        this.height = height;
        this.charCnt = charCnt;
        this.os = os;
    }

    public String drawCode() throws IOException {
        BufferedImage bi = new BufferedImage(this.width, this.height,
                BufferedImage.TYPE_INT_RGB);
        Graphics2D g = bi.createGraphics();
        g.setColor(new Color(245, 245, 245));
        g.fillRect(0, 0, this.width, this.height);

        drawDisturbLine(g);

        BufferedImage[] bis = new BufferedImage[charCnt];
        char[] codes = generateCode();
        for (int i = 0; i < charCnt; i++) {
            bis[i] = generateBuffImg(codes[i]);
            g.drawImage(bis[i], null, (int) (this.height * 0.7) * i, 0);
        }

        g.dispose();

        ImageIO.write(bi, "gif", os);
        return new String(codes);
    }

    private BufferedImage generateBuffImg(char c) {
        String tmp = Character.toString(c);
        Color forecolor = getRandomColor();
        Color backcolor = new Color(255, 255, 255, 0);
        String fontName = getRandomFontName();
        int fontStyle = getRandomStyle();
        int fontSize = getRandomSize();
        int strX = (this.height - fontSize) / 2;
        int strY = (this.height - fontSize) / 2 + fontSize;
        double arch = getRandomArch();

        BufferedImage ret = new BufferedImage(this.height, this.height,
                BufferedImage.TYPE_INT_ARGB);
        Graphics2D g = ret.createGraphics();
        g.setColor(backcolor);
        g.fillRect(0, 0, this.height, this.height);

        g.setColor(forecolor);
        g.setFont(new Font(fontName, fontStyle, fontSize));
        g.rotate(arch, this.height / 2, this.height / 2);
        g.drawString(tmp, strX, strY);

        g.dispose();
        return ret;
    }

    private double getRandomArch() {
        return ((int) (Math.random() * 1000) % 2 == 0 ? -1 : 1) * Math.random();
    }

    private Color getRandomColor() {
        int r = (int) (Math.random() * 10000) % 200;
        int g = (int) (Math.random() * 10000) % 200;
        int b = (int) (Math.random() * 10000) % 200;
        return new Color(r, g, b);
    }

    private String getRandomFontName() {
        int pos = (int) (Math.random() * 10000) % (fontNames.length);
        return fontNames[pos];
    }

    private int getRandomStyle() {
        int pos = (int) (Math.random() * 10000) % (fontStyle.length);
        return fontStyle[pos];
    }

    private int getRandomSize() {
        int max = (int) (this.height * 0.98);
        int min = (int) (this.height * 0.75);
        return (int) (Math.random() * 10000) % (max - min + 1) + min;
    }

    private char[] generateCode() {
        char[] ret = new char[charCnt];
        for (int i = 0; i < charCnt; i++) {
            int letterPos = (int) (Math.random() * 10000) % (chars.length);
            ret[i] = chars[letterPos];
        }
        return ret;
    }

    private void drawDisturbLine(Graphics2D graphics) {
        for (int i = 0; i < disturbLineNum; i++) {
            graphics.setColor(getRandomColor());
            int x = (int) (Math.random() * 10000) % (this.width + 1) + 1;
            int x1 = (int) (Math.random() * 10000) % (this.width + 1) + 1;
            int y = (int) (Math.random() * 10000) % (this.height + 1) + 1;
            int y1 = (int) (Math.random() * 10000) % (this.height + 1) + 1;
            graphics.drawLine(x, y, x1, y1);
        }

    }

    public static void main(String[] args) throws IOException {
        FileOutputStream fos = new FileOutputStream("d:/tmp.gif");
        VCodeGenerator vg = new VCodeGenerator(fos);
        vg.drawCode();
    }
}
Js函數 使用jquery指定id爲magVcode的img元素的src,這是使用了參數ts=new date().getTime()防止頁面緩存致使驗證碼不變

function changeCode() {
$("#imgVcode").attr("src", "servlet/getVcode?ts=" + new Date().getTime());
}


定義外部的js user_login.js 文件的內容 以下(注意這裏沒有<script></script>)

function changeCode() {
$("#imgVcode").attr("src", "servlet/getVcode?ts=" + new Date().getTime());
}

在jsp頁面中引入外部js <head>
        <script type="text/javascript" src="js/user_login.js"></script> 
</head> Jquey鏈式編程 Jquery爲單個元素指定事件處理方式

//處理提交按紐圖片
    $("#submitBtn").mouseover(function(){
        this.src = "images/login_submitBtn2.gif";
    }).mouseout(function(){
        this.src = "images/login_submitBtn1.gif";
    }).click(function() {
        submitForm();//自定義函數
    });


Jquery爲多個元素一塊兒指定事件處理方式 $("input[name=account], input[name=passwd], #submitBtn").click(function(){
        $("div.validateCodeDiv").css("display", "none");
    }).focus(function() {
        $("div.validateCodeDiv").css("display", "none");
    });

Jquey獲取表單元素的一種方式，使用name 屬性 function submitForm() {
    var oAcc = $("input[name=account]");
    if(oAcc.val().trim().length == 0) {
        $("#messBox").html("請輸入用戶名");
        oAcc.focus();
        return;
    }
    var oPass = $("input[name=passwd]");
    if(oPass.val().trim().length == 0) {
        $("#messBox").html("請輸入密碼");
        oPass.focus();
        return;
    }
    var oVcode = $("input[name=vcode]");
    if(oVcode.val().trim().length == 0) {
        $("#messBox").html("請輸入驗證碼");
        oVcode.focus();
        return;
    }
    
    var url = "userLogin.do";
//自定義表單的數據序列化
    //var para = getFormPara($("form[name=frm1]"));
使用jquey的函數獲取表單數據的集合 var para = $("form[name=frm1]").serialize(); 注意下面要使用$.post,不要使用$.get(會出現中文亂碼)     
    $.post(url, para, function(data) {
        if (data == "vcode error") {
            $("#messBox").html("驗證碼錯誤");
        } else if (data == "userpass error") {
            $("#messBox").html("用戶名或密碼錯誤");
        } else {
            location = "home.do";
        }
        
        changeCode(); //當即再改變驗證碼
    });
} 



對註冊頁面進行修改，測試jquery的serialize()獲取表單的數據,
這裏用到了
$.post(url, para, function(data) {})

修改後的Jsp的頁面截圖


 
使用下面的js代碼測試
var para = $("form[name=frm1]").serialize();
    alert(para);

 
彈出的內容轉碼了，可是在action中顯示的仍是中文，
多是在web.xml中配置的字符編碼過濾器起了做用
<filter>
        <filter-name>CharsetFilter</filter-name>
        <filter-class>
            org.springframework.web.filter.CharacterEncodingFilter
        </filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CharsetFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>



Java代碼,當jquey的$.post方法提交到下面的action時，各屬性會使用jquey傳過來的參數賦值 
public class UserLoginAction implements ServletResponseAware {

    private String account;
    private String passwd;
    private String vcode;
    private String sex;
    private String address;
    private String introduction;
    處理ajax的請求的java代碼
    Struts2的action中獲取session
    Map<String, Object> session = ActionContext.getContext().getSession();
        PrintWriter out = response.getWriter();
        //從session中獲取驗證碼
        String realVcode = (String) session.get("vcode");
        if (!realVcode.equalsIgnoreCase(vcode)) {
            out.print("vcode error");  //返回ajax的請求的數據
            out.close(); 
            return null;   //返回null，不指定result
        }

        if (!userLoginService.validateUser(account, passwd)) {
            out.print("userpass error");
            out.close();
            return null;     //返回null，不指定result 
        }

        //將用戶信息放入SESSION
        session.remove("vcode");
        session.put("loginUser", "張三");
        session.put("skin", "default");
        
        out.print("success");
        out.close();
        return null;   //返回null，不指定result 
 
}
斷點跟蹤java代碼,中文也正確的顯示

 


通過測試發現，<input>標籤中的text  radio，以及<select> 、<textarea>使用serialize()方法，都會正確的獲取表單的結合


js得到元素的絕對位置 function getAbsPosition(o){
   把傳進來的對象，(不管是dom對象仍是jquey對象均可以)轉爲jquey對象
    o = $(o);
    if (o.length == 0) {
        return false;
    }
    再從新轉換爲dom對象
    o = o[0];
    
    var left, top;
    left = o.offsetLeft;
    top = o.offsetTop;
    
    while (o = o.offsetParent) {
        left += o.offsetLeft;
        top += o.offsetTop;
    }
    
    return {
        left: left,
        top: top
    };
} 


自定義js的函數 
String.prototype.trim = function(){
    return this.replace(/(^\s*)|(\s*$)/g, "");
};
String.prototype.startWith = function(str){
    if (typeof(str) === "undefined") {
        return false;
    }
    str = str.toString();
    if (this.substr(0, str.length) == str) {
        return true;
    } else {
        return false;
    }
}

String.prototype.endWith = function(otherStr){
    if (typeof(otherStr) === "undefined") {
        return false;
    }
    otherStr = otherStr.toString();
    var startPos = this.length - otherStr.length;
    if (startPos >= 0) {
        var tmp = this.substr(startPos);
        if (tmp === otherStr) {
            return true;
        } else {
            return false;
        }
    } else {
        return false;
    }
}

String.prototype.contains = function(otherStr){
    if (typeof(otherStr) === "undefined") {
        return false;
    }
    if (this.indexOf(otherStr.toString()) == -1) {
        return false;
    } else {
        return true;
    }
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。