使用NanoHTTPD框架搭建web的后端服务器：
第一步添加WebHttpdServer.java,内容如下：
package com.example.weblanguagetest;

import java.io.BufferedReader;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Random;
import java.util.Timer;
import java.util.TimerTask;

import android.os.Handler;
import android.os.Message;
import android.util.Log;
import fi.iki.elonen.NanoHTTPD;
import fi.iki.elonen.NanoHTTPD.Response.Status;

public class WebHttpdServer extends NanoHTTPD {

public static final String tag = "debug";private String mFilePath = null;private String sessionId = "";private String DEFAULT_FILE_PATH = "/storage/sdcard0/www";public static final String MIME_PLAINTEXT = "text/plain";public static final String MIME_HTML = "text/html";public static final String MIME_JS = "application/javascript";public static final String MIME_CSS = "text/css";public static final String MIME_PNG = "image/png";public static final String MIME_DEFAULT_BINARY = "application/octet-stream";public static final String MIME_XML = "text/xml";public static final String MIME_MP4 = "video/mp4";public static final String MIME_MP3 = "audio/mpeg";public static final String EN_CONTENT_TYPE_MULT_DATA = "multipart/form-data";public static final String EN_CONTENT_TYPE_DEFAUL = "application/x-www-form-urlencoded";private static Timer timer = null;private static TimerTask task = null;private static WebHttpdServer mInterface = null;public static WebHttpdServer newInstance() {    if (mInterface == null) {           
        mInterface = new WebHttpdServer(8080);           
    }    
    return mInterface;
}public WebHttpdServer(int port) {    super(8080);
}@Overridepublic Response serve(IHTTPSession session) {
    String url = session.getUri();
    Method method = session.getMethod();    //Log.e(tag, "session.getUri()= " + url);
    //Log.e(tag, "session.getMethod()= " + method);

    if (url.equals("/")) {
        url = "/index.htm";
    }    
    if (url.contains(".js") || url.contains(".gif") || url.contains(".jpeg") || url.contains(".jpeg")
            || url.contains(".png") || url.contains(".css") || url.contains(".ico")) {        // 不做任何处理
    } else {        // 获取sessionId值
        String session_Id = session.getCookies().read("sessionId");        if (sessionId.equals("") || !session_Id.equals(sessionId)) {            // 登录鉴权
            if (Method.POST.equals(session.getMethod())) {
                Map<String, String> mMap = new HashMap<String, String>();
                Map<String, String> mFile = new HashMap<String, String>();                try {
                    session.parseBody(mFile);
                    mMap = session.getParms();                    if (mMap != null) {
                        String nonce = mMap.get("nonce");
                        String encoded = mMap.get("encoded");                        // MD5 计算
                        String password = "123456"; // GlobalConfigUtils.get("Password");
                        String pwd = password + ":" + nonce;
                        String md5Encode = Md5Utils.encode(pwd);                        // 校验登录密码
                        if (md5Encode.equals(encoded)) {                            // 跳到index.htm
                            StringBuilder FileName = new StringBuilder();
                            FileName = readFile(DEFAULT_FILE_PATH + "/index.htm");                            // 随机产生一个session id值
                            sessionId = randomNumber();
                            Cookie cookies = new Cookie("sessionId", sessionId);

                            Response deResponse = NanoHTTPD.newFixedLengthResponse(Status.OK, MIME_HTML, FileName.toString());
                            deResponse.addHeader("Set-Cookie", cookies.getHTTPHeader());                            return deResponse;
                        } else {                            // 返回登录界面
                            return cgiReadFile(DEFAULT_FILE_PATH + "/logon.htm", MIME_HTML);
                        }

                    }
                } catch (IOException e) {
                    e.printStackTrace();
                } catch (ResponseException e) {
                    e.printStackTrace();
                }
            }            // 随机产生一个session id 值 
            // Cookie cookies = new Cookie("sessionId", randomNumber());
            // deResponse.addHeader("Set-Cookie", cookies.getHTTPHeader());

            return cgiReadFile(DEFAULT_FILE_PATH + "/logon.htm", MIME_HTML);
        }
    }    
    if (Method.GET.equals(method)) {
        mFilePath = DEFAULT_FILE_PATH + url;        //Log.e(tag, "mFilePath = " + mFilePath);

        if (mFilePath != null) {            if (mFilePath.contains(".js")) {                return cgiReadFile(mFilePath, MIME_JS);

            } else if (mFilePath.contains(".css")) {                return cgiReadFile(mFilePath, MIME_CSS);

            } else if (mFilePath.contains(".htm") || mFilePath.contains(".html")) {                return cgiReadFile(mFilePath, MIME_HTML);

            } else if (mFilePath.contains(".png")) {                return cgiReadFile(mFilePath, MIME_PNG);

            } else {                // other operation
            }
        }
    } else if (Method.POST.equals(method)) {
        Map<String, String> Headers = null;
        Map<String, String> mFile = new HashMap<String, String>();
        Map<String, String> mMap = new HashMap<String, String>();        try {
            session.parseBody(mFile);            // 把上传的文件存到指定位置
            // copyFile(mFile.get("file"), NEW_FILE_PATH);

            mMap = session.getParms();
            Headers = session.getHeaders();            if (Headers.size() == 0) {                return newFixedLengthResponse(Status.INTERNAL_ERROR, NanoHTTPD.MIME_PLAINTEXT,                        "SERVER ERROR: Headers");
            }            if (mMap == null) {                return newFixedLengthResponse(Status.INTERNAL_ERROR, NanoHTTPD.MIME_PLAINTEXT,                        "SERVER ERROR: session.getParms");
            }

            String type = Headers.get("content-type");            if (type.equalsIgnoreCase(EN_CONTENT_TYPE_MULT_DATA)) { /* 文件上传 */

            } else if (type.equalsIgnoreCase(EN_CONTENT_TYPE_DEFAUL)) { /* 配置上传 */

                // F5 刷新时，如需post请求时重新响应index.htm界面
                if (url.equals("/index.htm")) {                    return cgiReadFile(DEFAULT_FILE_PATH + "/index.htm", MIME_HTML);
                }                //Log.e(tag, "先保存配置后动作！！！！！！！！");
                // 先保存配置后动作
                //cfgSaveGlobalVar(mMap);
                return cgiDoCgi(url.substring(url.lastIndexOf("/") + 1));
            }

        } catch (IOException ioe) {            return newFixedLengthResponse(Status.INTERNAL_ERROR, NanoHTTPD.MIME_PLAINTEXT,                    "SERVER INTERNAL ERROR: IOException: " + ioe.getMessage());
        } catch (ResponseException re) {            return newFixedLengthResponse(re.getStatus(), NanoHTTPD.MIME_PLAINTEXT, re.getMessage());
        }
    }    return response404(url);
}// 创建定时器(web页面超时时返回登录界面)Handler handler = new Handler() {    public void handleMessage(Message msg) {        if (msg.what == 1) {            //Log.e(tag, "超时重设 session id, 并返回登录界面！！！！！！！！");
            sessionId = "";
        }        super.handleMessage(msg);
    };
};private void startTimer() {    if (timer == null) {
        timer = new Timer();
    }    if (task == null) {
        task = new TimerTask() {            @Override
            public void run() {
                Message message = new Message();
                message.what = 1;                if (handler != null) {
                    handler.sendMessage(message);
                }
            }
        };
    }    if (timer != null && task != null)
        timer.schedule(task, 10000, 10000);
}private void stopTimer() {    if (timer != null) {
        timer.cancel();
        timer = null;
    }    if (task != null) {
        task.cancel();
        task = null;
    }
}// 配置上传的cgi : psot处理private Response cgiDoCgi(String url) {    if (url == null) {        return responseError();
    }    if (url.equalsIgnoreCase("logout.cgi")) {        // 返回登录界面,赋值sessionId为空
        sessionId = "";        return cgiReadFile(DEFAULT_FILE_PATH + "/logon.htm", MIME_HTML);
    } else if (url.equalsIgnoreCase("language.cgi")) {
        Log.e(tag, "has match language.cgi!");        return cgiReadFile(DEFAULT_FILE_PATH + "/post.htm", MIME_HTML);
    } else {
        Log.e(tag, "no match cgi!");        return cgiReadFile(DEFAULT_FILE_PATH + "/logon.htm", MIME_HTML);
    }
}// 生成随机数private String randomNumber() {
    Random rand = new Random();    int num = rand.nextInt();    return String.valueOf(num);
}// 拷贝文件到指定路径private void copyFile(String oldPath, String newPath) {    try {        int bytesum = 0;        int byteread = 0;
        File oldfile = new File(oldPath);        if (oldfile.exists()) {
            File newfile = new File(newPath);            if (!newfile.exists()) {
                newfile.createNewFile();
            }

            InputStream inStream = new FileInputStream(oldPath); // 读入原文件
            FileOutputStream fs = new FileOutputStream(newPath);            byte[] buffer = new byte[8192];            int length;            while ((byteread = inStream.read(buffer)) != -1) {                // 字节数 文件大小
                bytesum += byteread;
                fs.write(buffer, 0, byteread);
            }

            inStream.close();
        }
    } catch (Exception e) {
        Log.e(tag, "copy file failed!");
        e.printStackTrace();
    }
}// 响应文件没找到public Response response404(String url) {
    StringBuilder builder = new StringBuilder();
    builder.append("<!DOCTYPE html><html><body>");
    builder.append("Sorry, Can't Found " + url + " !");
    builder.append("</body></html>\n");    return newFixedLengthResponse(builder.toString());
}public Response responseError() {
    StringBuilder builder = new StringBuilder();
    builder.append("<!DOCTYPE html><html><body>");
    builder.append("Sorry, Can't Found file !");
    builder.append("</body></html>\n");    return newFixedLengthResponse(builder.toString());
}// cgiReadFilepublic Response cgiReadFile(String mFilePath, String MIME_TYPE) {    if (MIME_TYPE.equals(MIME_PNG)) {
        InputStream mbuffer = null;        try {
            mbuffer = new FileInputStream(mFilePath);
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        }        return newChunkedResponse(Status.OK, MIME_PNG, mbuffer);
    } else {
        StringBuilder FileName = new StringBuilder();
        FileName = readFile(mFilePath);        return newFixedLengthResponse(Status.OK, MIME_TYPE, FileName.toString());
    }
}// nanohttpd: get请求 时读取文件private StringBuilder readFile(String FileName) {    try {
        Boolean isHtmlFile = false;
        StringBuilder sb = new StringBuilder("");        if (FileName.contains(".html") || FileName.contains(".htm")) {
            isHtmlFile = true;
        }
        
        File file = new File(FileName);        try {
            InputStream instream = new FileInputStream(file);            if (instream != null) {
                InputStreamReader inputreader = new InputStreamReader(instream);
                BufferedReader buffreader = new BufferedReader(inputreader);
                String line = null;                while ((line = buffreader.readLine()) != null) {                    if (isHtmlFile) {                        if (line.contains("~%") && line.contains("%~")) {                            // String mLine = line;
                            // mLine = line.substring(line.indexOf("~%"),
                            // line.indexOf("%~") + 2);
                            // line = line.replace(mLine, "vogtec");
                            // sb.append(line + "\n");

                            sb.append(replaceMatchValue(line) + "\n");
                        } else {
                            sb.append(line + "\n");
                        }
                    } else {
                        sb.append(line + "\n");
                    }
                }

                instream.close();                return sb;
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    } catch (Exception e) {
        e.printStackTrace();
    }    return null;
}// 替换行中存在~% *** %~ 中的参数public String replaceMatchValue(String line) {    int mCount = 0;
    String temp = "";
    String mLine = null;    if (line == null) {        return temp;
    }

    mLine = line;    while (line.contains("~%") == true && line.contains("%~") == true) {
        mCount++;

        mLine = line.substring(line.indexOf("~%"), line.indexOf("%~") + 2);
        temp = cgiGetParams(mLine);
        line = line.replace(mLine, temp);        if (mCount > 3) {            break;
        }
    }    return line;
}// 获取~% *** %~ 内的参数public String cgiGetParams(String line) {
    String temp = null;
    String replaceLine = "";
    String[] mStr = null;
    List<String> argv = new ArrayList<String>();    if (line == null) {        return replaceLine;
    }    if (!line.contains("(")) {        return replaceLine;
    }    if (!line.contains(")")) {        return replaceLine;
    }    // 获取第一个参数
    temp = line.substring(line.indexOf("~%") + 2, line.indexOf("(")).trim();    if (temp == null) {        return replaceLine;
    } else {
        argv.add(temp);
    }    // 获取()内参数
    temp = line.substring(line.indexOf("(") + 1, line.indexOf(")"));    if (temp != null) {        if (temp.contains(",")) {
            mStr = temp.split("\\,");            for (int i = 0; i < mStr.length; i++) {
                argv.add(mStr[i].trim());
            }
        } else {
            argv.add(temp.trim());
        }
    }

    replaceLine = cgiCall(argv);    return replaceLine;
}// 替换对应参数public String cgiCall(List<String> argv) {
    String value = "";    if (argv == null || argv.size() == 0) {        return value;
    }    if (argv.get(0).toString().equals("GetGlobal")) {        //value = getGlobalDbVar(argv);

    } else if (argv.get(0).equals("GetOutTime")) {
        value = getOutTime(argv);

    } else if (argv.get(0).equals("GetPostResult")) {
        value = getPostResult(argv);

    } else if (argv.get(0).equals("GetHttpsPrivateKey")) {
        value = getHttpsPrivateKey(argv);

    } else if (argv.get(0).equals("GetHttpsCertificate")) {
        value = getHttpsCertificate(argv);

    } else if (argv.get(0).equals("GetDhcpOpt66")) {
        value = getDhcpOpt66(argv);

    } else if (argv.get(0).equals("GetDhcpOpt43")) {
        value = getDhcpOpt43(argv);

    } else if (argv.get(0).equals("GetDhcpClient")) {
        value = getDhcpClient(argv);

    } else if (argv.get(0).equals("GetRegState")) {
        value = getRegState(argv);

    } else if (argv.get(0).equals("GetRegCode")) {
        value = getRegCode(argv);

    } else if (argv.get(0).equals("GetProductModel")) {
        value = getProductModel(argv);

    } else if (argv.get(0).equals("GetBootVer")) {
        value = getBootVer(argv);

    } else if (argv.get(0).equals("GetSystemTime")) {
        value = getSystemTime(argv);

    } else if (argv.get(0).equals("GetFirmwareVer")) {
        value = getFirmwareVer(argv);

    } else if (argv.get(0).equals("GetWanInfo")) {
        value = getWanInfo(argv);

    } else if (argv.get(0).equals("GetLangName")) {
        value = getLangName(argv);

    } else if (argv.get(0).equals("CGI_GetErrPwdFlag")) {
        value = getErrPwdFlag(argv);

    } else if (argv.get(0).equals("CGI_GetDumpState")) {
        value = getDumpState(argv);

    } else if (argv.get(0).equals("CGI_AccessFile")) {
        value = getAccessFile(argv);

    } else {        return "";
    }    return value;
}public String getOutTime(List<String> argv) {
    String replaceLine = "1830";    return replaceLine;
}public String getPostResult(List<String> argv) {
    String replaceLine = "5060";    return replaceLine;

}public String getHttpsPrivateKey(List<String> argv) {
    String replaceLine = "";    return replaceLine;

}public String getHttpsCertificate(List<String> argv) {
    String replaceLine = "";    return replaceLine;

}public String getDhcpOpt66(List<String> argv) {
    String replaceLine = "";    return replaceLine;

}public String getDhcpOpt43(List<String> argv) {
    String replaceLine = "";    return replaceLine;

}public String getDhcpClient(List<String> argv) {
    String replaceLine = "";    return replaceLine;

}public String getRegState(List<String> argv) {
    String replaceLine = "";    return replaceLine;

}public String getRegCode(List<String> argv) {
    String replaceLine = "";    return replaceLine;

}public String getProductModel(List<String> argv) {
    String replaceLine = "";    return replaceLine;

}public String getBootVer(List<String> argv) {
    String replaceLine = "";    return replaceLine;

}public String getSystemTime(List<String> argv) {
    String replaceLine = "";
    SimpleDateFormat sDateFormat = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
    Date curDate = new Date(System.currentTimeMillis());
    replaceLine = sDateFormat.format(curDate);    return replaceLine;
}public String getFirmwareVer(List<String> argv) {
    String replaceLine = "";    return replaceLine;

}public String getWanInfo(List<String> argv) {
    String replaceLine = "";    return replaceLine;

}public String getLangName(List<String> argv) {
    String replaceLine = "";    return replaceLine;

}public String getErrPwdFlag(List<String> argv) {
    String replaceLine = "";    return replaceLine;
}public String getDumpState(List<String> argv) {
    String replaceLine = "";    return replaceLine;

}public String getAccessFile(List<String> argv) {
    String replaceLine = "";    return replaceLine;

}

}

添加Md5Utils.java
package com.example.weblanguagetest;

import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;

public class Md5Utils {

public static String encode(String password){    try {
        MessageDigest digest = MessageDigest.getInstance("MD5");        byte[] result = digest.digest(password.getBytes());
        StringBuffer sb = new StringBuffer();        for(byte b : result){            int number = (int)(b & 0xff) ;
            String str = Integer.toHexString(number);            if(str.length()==1){
                sb.append("0");
            }
            sb.append(str);
        }        return sb.toString();
    } catch (NoSuchAlgorithmException e) {
        e.printStackTrace();        //can't reach
        return "";
    }
}

}

添加StatusUtils.java
package com.example.weblanguagetest;

public class StatusUtils {

/* post.htm */public static final int EN_WEB_AUTH_FAIL = 0;// 验证登录用户失败public static final int EN_WEB_AUTH_PASS = 1;// 验证登录用户通过public static final int EN_WEB_GET_REQ = 2;// GET请求public static final int EN_WEB_POST_SUCC = 3;// 提交成功public static final int EN_WEB_USER_NO_PERM = 4;// 用户没有权限提交public static final int EN_WEB_UPLOAD_FAILURE = 5;// 上传失败public static final int EN_WEB_DOWNLOAD_FAILURE = 6;// 下载失败public static final int EN_WEB_UPLOAD_FILE_TOO_BIG = 7;// 上传数据太大public static final int EN_WEB_INVALID_IMAGE = 8;// 无效的IMAGEpublic static final int EN_WEB_INVALID_FILENAME = 9;// 无效的文件名public static final int EN_WEB_CONTENT_TYPE_ERROR = 10; // 不能处理的提交类型，目前支持POST(application/x-www-form-urlencoded,multipart/form-data)public static final int EN_CGI_PACKCAPTURE = 11;public static final int EN_CGI_CONFIG = 12;public static final int EN_CGI_EXPORT_LOG_UPDATE = 13;public static final int EN_CGI_CRASH_LOG = 14;public static final int EN_WEB_EXTRACT_PWD_ERROR = 15; // 证书提取密码错误public static final int EN_WEB_CERT_INSTALL_FAILED = 16; // 证书安装失败public static final int EN_WEB_CERT_INSTALL_SUCCESSED = 17; // 证书安装成功public static final int EN_WEB_CERT_INSTALL_INVALID = 18; // 证书无效public static final int EN_WEB_OPERATION_FAILED = 19; // 操作失败public static final int EN_WEB_EXPORT_LOG = 20; // 导出日记public static final int EN_WEB_PCAP = 21;public static final String BROAD_EXTRACT_PWD_ERROR = "broad_extract_pwd_error"; // 证书提取密码错误广播public static final String BROAD_CERT_INSTALL_FAILED = "broad_cert_install_failed"; // 证书安装失败广播public static final String BROAD_CERT_INSTALL_SUCCESSED = "broad_cert_install_successed"; // 证书安装成功广播public static final String BROAD_CERT_INSTALL_INVALID = "broad_cert_install_invaild"; // 证书无效广播public static final int EN_CGI_LOGOUT = 100; // 返回登录界面public static final int EN_CGI_PROCESSED = 101; // 配置提交成功public static final int EN_CGI_FIRMWARE_INVALID = 102;public static final int EN_CGI_CONFIG_INVALID = 103; // 无效配置public static final int EN_CGI_CERTIFICATE_INVALID = 104;public static final int EN_CGI_PRIVATE_INVALID = 105;public static final int EN_CGI_CER_KEY_DONOT_MATCH = 106;public static final int EN_CGI_LANGUAGEPACK_INVALID = 107;public static final int EN_CGI_WAVFILE_INVALID = 108;public static final int EN_CGI_UNKNOWN_ERROR = 109;/* 页面动作与代码的交互信息 */public static final String BC_REQUEST_SIP = "bc_request_sip";public static final String BC_REQUEST_FEATURE = "bc_request_feature";public static final String BC_CONTACT_UPDATE = "bc_contact_update";public static final String BC_MANUL_TIME = "bc_manul_time";public static final String BC_SNTP_SETTING = "bc_sntp_setting";public static final String BC_REQUEST_WIFI = "bc_request_wifi";public static final String BC_REQUEST_QOS = "qosvlan.cgi";public static final String BC_AUTO_PROVISION = "autoprovision.cgi";public static final String BC_LANGUAGE = "language.cgi";public static final String BC_NATTRAVEL = "nattravel.cgi";public static final String CA_CERT_PURPOSES = "ca.cert.purposes";public static final String CA_CERT_NAME = "ca.cert.name";public static final String USER_CERT_PWD = "user.cert.pwd";public static final String USER_CERT_NAME = "user.cert.name";public static final String USER_CERT_PURPOSES = "user.cert.purposes";public static final String USER_EDIT_NAME = "user_edit_name";// 保存web端上传时用户填写的名称public static final String CERT_TYPE = "cert_type";// 用户上传时选择的证书用途public static final String CERT_PASSWORD = "cert_password";// 用户上传时选择的证书提取密码public static final String CERT_VPN = "VPN";// 证书用途是VPNpublic static final String CERT_WIFI = "WIFI";// 证书用途是WIFIpublic static final int CERT_CA = 0;// CA证书public static final int CERT_USER = 1;// 用户证书public static final String WEB_WWW_EN = "www";public static final String WEB_WWW_CN = "www_zh";public static final String WEB_WWW_IT = "www_it";public static final String WEB_WWW_ES = "www_es";public static String SAVE_CERT = "save_cert_"; // 保存用户证书的相关信息到本地private int resultStatus;public int getResultStatus() {return resultStatus;
}public void setResultStatus(int resultStatus) {this.resultStatus = resultStatus;
}

}

在MainActivity.java添加服务启动
package com.example.weblanguagetest;

import java.io.IOException;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;

public class MainActivity extends Activity {

private WebHttpdServer myHttpServer;@Overrideprotected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    myHttpServer = WebHttpdServer.newInstance();    if (myHttpServer != null) {        try {
            myHttpServer.start();
        } catch (IOException e) {
            Log.e("debug", "start http server IOException.");
            e.printStackTrace();
        }
        
        Log.e("debug", "start http server.");
    } else {
        Log.e("debug", "start http server failed.");
    }
}@Overridepublic void onDestroy() {    super.onDestroy();    if (myHttpServer != null) {
        myHttpServer.stop();
        Log.e("debug", "stop http server.");
    }
}

}

页面文件 logon.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="author" content="Arsen Liu<arsenliu@gmail.com>">
<title>Wi-Fi SIP Phone</title>
<style>
body {

background-color: #036

}

container {

margin: 10% auto 0 auto

}

login-panel {

margin: 0 auto;
width: 400px;
min-height: 200px;
background-color: #fff;border: 1px solid #dfdfdf;

}

login-panel .panel-head {

min-height: 70px;
background-color: #edf3fe;border-bottom: 1px solid #dfdfdf;position: relative

}

login-panel .panel-content {

padding-left: 40px;
min-height: 40px

}

login-panel .panel-content table {

border: none;
width: 300px;
margin-top: 40px;
margin-bottom: 40px;

}

login-panel .panel-foot {

text-align: center;
padding: 15px;
line-height: 8px;
background-color: #e5e5e5;border-top: 1px solid #dfdfdf;font-size: 12px;

}

login-panel .panel-error {

border: none;
width: 300px;
text-align: center;
color: red

}
. .btn-submit {
min-width: 70px
}
</style>

// e.g: <label data-locale="username">username:</label>var lang = "en";var langArray = new Array("en", "zh", "it", "es");var langIndex = "~%getCurrentLanguage()%~";    
    
if (!isNaN(langIndex)){        
    var i = parseInt(langIndex, 10);    if (i < langArray.length){            
        lang = langArray[i];
    }    //alert("menu lang2 = " + lang);    }
        

loadProperties();    
function loadProperties() { 
    //alert("loadProperties----------------------");    
     $.i18n.properties({    
         name:'strings',    //属性文件名     命名格式： 文件名_国家代号.properties  
         path:'./',   //注意这里路径是你属性文件的所在文件夹  
         mode:'map',    
         language:lang,     //这就是国家代号 name+language刚好组成属性文件名：strings+zh -> strings_zh.properties  如找不到则用默认的strings.properties来显示
         callback:function(){    
            $("[data-locale]").each(function(){    
                console.log($(this).data("locale"));  
                $(this).html($.i18n.prop($(this).data("locale")));    
               
            });    
         }    
     });    
 }function alertOutString(obj){    return $.i18n.prop(obj);
} 

function initButton(){
document.getElementById('nonce').value = alertOutString('login');

}

</script>

var l = openAnyWindow.arguments.length;var w = "";var h = "";var features = "";for (i = 2; i < l; i++)
{    var param = openAnyWindow.arguments[i];    if ((parseInt(param) == 0) || (isNaN(parseInt(param))))
    {
        features += param + ',';
    }    else
    {
        (w == "") ? w = "width=" + param + "," : h = "height=" + param;
    }
}
features += w + h;var code = "popupWin = window.open(url, name";if (l > 2) code += ", '" + features;
code += "')";eval(code);

}
function array(n)
{

for (i = 0; i < n; i++) this[i] = 0;this.length = n;

}
function integer(n)
{

return n % (0xffffffff + 1);

}
function shr(a, b)
{

a = integer(a);
b = integer(b);if (a - 0x80000000 >= 0)
{
    a = a % 0x80000000;
    a >>= b;
    a += 0x40000000 >> (b - 1);
}else a >>= b;return a;

}
function shl1(a)
{

a = a % 0x80000000;if (a & 0x40000000 == 0x40000000)
{
    a -= 0x40000000;
    a *= 2;
    a += 0x80000000;
}else a *= 2;return a;

}
function shl(a, b)
{

a = integer(a);
b = integer(b);for (var i = 0; i < b; i++)
    a = shl1(a);return a;

}
function and (a, b)
{

a = integer(a);
b = integer(b);var t1 = (a - 0x80000000);var t2 = (b - 0x80000000);if (t1 >= 0)    if (t2 >= 0)        return ((t1 & t2) + 0x80000000);    else
        return (t1 & b);else if (t2 >= 0)    return (a & t2);else
    return (a & b);

}
function or (a, b)
{

a = integer(a);
b = integer(b);var t1 = (a - 0x80000000);var t2 = (b - 0x80000000);if (t1 >= 0)    if (t2 >= 0)        return ((t1 | t2) + 0x80000000);    else
        return ((t1 | b) + 0x80000000);else if (t2 >= 0)    return ((a | t2) + 0x80000000);else
    return (a | b);

}
function xor(a, b)
{

a = integer(a);
b = integer(b);var t1 = (a - 0x80000000);var t2 = (b - 0x80000000);if (t1 >= 0)    if (t2 >= 0)        return (t1 ^ t2);    else
        return ((t1 ^ b) + 0x80000000);else if (t2 >= 0)    return ((a ^ t2) + 0x80000000);else
    return (a ^ b);

}
function not(a)
{

a = integer(a);return (0xffffffff - a);

}
/ Here begin the real algorithm /
var state = new array(4);
var count = new array(2);
count[0] = 0;
count[1] = 0;
var buffer = new array(64);
var transformBuffer = new array(16);
var digestBits = new array(16);
var S11 = 7;
var S12 = 12;
var S13 = 17;
var S14 = 22;
var S21 = 5;
var S22 = 9;
var S23 = 14;
var S24 = 20;
var S31 = 4;
var S32 = 11;
var S33 = 16;
var S34 = 23;
var S41 = 6;
var S42 = 10;
var S43 = 15;
var S44 = 21;
function F(x, y, z)
{

return or ( and (x, y), and (not(x), z));

}
function G(x, y, z)
{

return or ( and (x, z), and (y, not(z)));

}
function H(x, y, z)
{

return xor(xor(x, y), z);

}
function I(x, y, z)
{

return xor(y, or (x, not(z)));

}
function rotateLeft(a, n)
{

return or (shl(a, n), (shr(a, (32 - n))));

}
function FF(a, b, c, d, x, s, ac)
{

a = a + F(b, c, d) + x + ac;
a = rotateLeft(a, s);
a = a + b;return a;

}
function GG(a, b, c, d, x, s, ac)
{

a = a + G(b, c, d) + x + ac;
a = rotateLeft(a, s);
a = a + b;return a;

}
function HH(a, b, c, d, x, s, ac)
{

a = a + H(b, c, d) + x + ac;
a = rotateLeft(a, s);
a = a + b;return a;

}
function II(a, b, c, d, x, s, ac)
{

a = a + I(b, c, d) + x + ac;
a = rotateLeft(a, s);
a = a + b;return a;

}
function transform(buf, offset)
{

var a = 0, b = 0, c = 0, d = 0;var x = transformBuffer;
a = state[0];
b = state[1];
c = state[2];
d = state[3];for (i = 0; i < 16; i++)
{
    x[i] = and (buf[i * 4 + offset], 0xff);    for (j = 1; j < 4; j++)
    {
        x[i] += shl( and (buf[i * 4 + j + offset] , 0xff), j * 8);
    }
}/* Round 1 */a = FF(a, b, c, d, x[ 0], S11, 0xd76aa478);   /* 1 */d = FF(d, a, b, c, x[ 1], S12, 0xe8c7b756);   /* 2 */c = FF(c, d, a, b, x[ 2], S13, 0x242070db);   /* 3 */b = FF(b, c, d, a, x[ 3], S14, 0xc1bdceee);   /* 4 */a = FF(a, b, c, d, x[ 4], S11, 0xf57c0faf);   /* 5 */d = FF(d, a, b, c, x[ 5], S12, 0x4787c62a);   /* 6 */c = FF(c, d, a, b, x[ 6], S13, 0xa8304613);   /* 7 */b = FF(b, c, d, a, x[ 7], S14, 0xfd469501);   /* 8 */a = FF(a, b, c, d, x[ 8], S11, 0x698098d8);   /* 9 */d = FF(d, a, b, c, x[ 9], S12, 0x8b44f7af);   /* 10 */c = FF(c, d, a, b, x[10], S13, 0xffff5bb1);   /* 11 */b = FF(b, c, d, a, x[11], S14, 0x895cd7be);   /* 12 */a = FF(a, b, c, d, x[12], S11, 0x6b901122);   /* 13 */d = FF(d, a, b, c, x[13], S12, 0xfd987193);   /* 14 */c = FF(c, d, a, b, x[14], S13, 0xa679438e);   /* 15 */b = FF(b, c, d, a, x[15], S14, 0x49b40821);   /* 16 *//* Round 2 */a = GG(a, b, c, d, x[ 1], S21, 0xf61e2562);   /* 17 */d = GG(d, a, b, c, x[ 6], S22, 0xc040b340);   /* 18 */c = GG(c, d, a, b, x[11], S23, 0x265e5a51);   /* 19 */b = GG(b, c, d, a, x[ 0], S24, 0xe9b6c7aa);   /* 20 */a = GG(a, b, c, d, x[ 5], S21, 0xd62f105d);   /* 21 */d = GG(d, a, b, c, x[10], S22, 0x2441453);   /* 22 */c = GG(c, d, a, b, x[15], S23, 0xd8a1e681);   /* 23 */b = GG(b, c, d, a, x[ 4], S24, 0xe7d3fbc8);   /* 24 */a = GG(a, b, c, d, x[ 9], S21, 0x21e1cde6);   /* 25 */d = GG(d, a, b, c, x[14], S22, 0xc33707d6);   /* 26 */c = GG(c, d, a, b, x[ 3], S23, 0xf4d50d87);   /* 27 */b = GG(b, c, d, a, x[ 8], S24, 0x455a14ed);   /* 28 */a = GG(a, b, c, d, x[13], S21, 0xa9e3e905);   /* 29 */d = GG(d, a, b, c, x[ 2], S22, 0xfcefa3f8);   /* 30 */c = GG(c, d, a, b, x[ 7], S23, 0x676f02d9);   /* 31 */b = GG(b, c, d, a, x[12], S24, 0x8d2a4c8a);   /* 32 *//* Round 3 */a = HH(a, b, c, d, x[ 5], S31, 0xfffa3942);   /* 33 */d = HH(d, a, b, c, x[ 8], S32, 0x8771f681);   /* 34 */c = HH(c, d, a, b, x[11], S33, 0x6d9d6122);   /* 35 */b = HH(b, c, d, a, x[14], S34, 0xfde5380c);   /* 36 */a = HH(a, b, c, d, x[ 1], S31, 0xa4beea44);   /* 37 */d = HH(d, a, b, c, x[ 4], S32, 0x4bdecfa9);   /* 38 */c = HH(c, d, a, b, x[ 7], S33, 0xf6bb4b60);   /* 39 */b = HH(b, c, d, a, x[10], S34, 0xbebfbc70);   /* 40 */a = HH(a, b, c, d, x[13], S31, 0x289b7ec6);   /* 41 */d = HH(d, a, b, c, x[ 0], S32, 0xeaa127fa);   /* 42 */c = HH(c, d, a, b, x[ 3], S33, 0xd4ef3085);   /* 43 */b = HH(b, c, d, a, x[ 6], S34, 0x4881d05);   /* 44 */a = HH(a, b, c, d, x[ 9], S31, 0xd9d4d039);   /* 45 */d = HH(d, a, b, c, x[12], S32, 0xe6db99e5);   /* 46 */c = HH(c, d, a, b, x[15], S33, 0x1fa27cf8);   /* 47 */b = HH(b, c, d, a, x[ 2], S34, 0xc4ac5665);   /* 48 *//* Round 4 */a = II(a, b, c, d, x[ 0], S41, 0xf4292244);   /* 49 */d = II(d, a, b, c, x[ 7], S42, 0x432aff97);   /* 50 */c = II(c, d, a, b, x[14], S43, 0xab9423a7);   /* 51 */b = II(b, c, d, a, x[ 5], S44, 0xfc93a039);   /* 52 */a = II(a, b, c, d, x[12], S41, 0x655b59c3);   /* 53 */d = II(d, a, b, c, x[ 3], S42, 0x8f0ccc92);   /* 54 */c = II(c, d, a, b, x[10], S43, 0xffeff47d);   /* 55 */b = II(b, c, d, a, x[ 1], S44, 0x85845dd1);   /* 56 */a = II(a, b, c, d, x[ 8], S41, 0x6fa87e4f);   /* 57 */d = II(d, a, b, c, x[15], S42, 0xfe2ce6e0);   /* 58 */c = II(c, d, a, b, x[ 6], S43, 0xa3014314);   /* 59 */b = II(b, c, d, a, x[13], S44, 0x4e0811a1);   /* 60 */a = II(a, b, c, d, x[ 4], S41, 0xf7537e82);   /* 61 */d = II(d, a, b, c, x[11], S42, 0xbd3af235);   /* 62 */c = II(c, d, a, b, x[ 2], S43, 0x2ad7d2bb);   /* 63 */b = II(b, c, d, a, x[ 9], S44, 0xeb86d391);   /* 64 */state[0] += a;
state[1] += b;
state[2] += c;
state[3] += d;

}
function init()
{

count[0] = count[1] = 0;
state[0] = 0x67452301;
state[1] = 0xefcdab89;
state[2] = 0x98badcfe;
state[3] = 0x10325476;for (i = 0; i < digestBits.length; i++)
    digestBits[i] = 0;

}
function update(b)
{

var index, i;
index = and (shr(count[0], 3) , 0x3f);if (count[0] < 0xffffffff - 7)
    count[0] += 8;else{
    count[1]++;
    count[0] -= 0xffffffff + 1;
    count[0] += 8;
}
buffer[index] = and (b, 0xff);if (index >= 63)
{
    transform(buffer, 0);
}

}
function finish()
{

var bits = new array(8);var padding;var i = 0, index = 0, padLen = 0;for (i = 0; i < 4; i++)
{
    bits[i] = and (shr(count[0], (i * 8)), 0xff);
}for (i = 0; i < 4; i++)
{
    bits[i + 4] = and (shr(count[1], (i * 8)), 0xff);
}
index = and (shr(count[0], 3) , 0x3f);
padLen = (index < 56) ? (56 - index) : (120 - index);
padding = new array(64);
padding[0] = 0x80;for (i = 0; i < padLen; i++)
    update(padding[i]);for (i = 0; i < 8; i++)
    update(bits[i]);for (i = 0; i < 4; i++)
{    for (j = 0; j < 4; j++)
    {
        digestBits[i * 4 + j] = and (shr(state[i], (j * 8)) , 0xff);
    }
}

}
/ End of the MD5 algorithm /
function hexa(n)
{

var hexa_h = "0123456789abcdef";var hexa_c = "";var hexa_m = n;for (hexa_i = 0; hexa_i < 8; hexa_i++)
{
    hexa_c = hexa_h.charAt(Math.abs(hexa_m) % 16) + hexa_c;
    hexa_m = Math.floor(hexa_m / 16);
}return hexa_c;

}
var ascii = "01234567890123456789012345678901" + " !"#" + "$" + "%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ" + "[\]^_`abcdefghijklmnopqrstuvwxyz{|}~";
function md5(entree)
{

var l, s, k, ka, kb, kc, kd;
init();for (k = 0; k < entree.length; k++)
{
    l = entree.charAt(k);
    update(ascii.lastIndexOf(l));
}
finish();
ka = kb = kc = kd = 0;for (i = 0; i < 4; i++) ka += shl(digestBits[15 - i], (i * 8));for (i = 4; i < 8; i++) kb += shl(digestBits[15 - i], ((i - 4) * 8));for (i = 8; i < 12; i++) kc += shl(digestBits[15 - i], ((i - 8) * 8));for (i = 12; i < 16; i++) kd += shl(digestBits[15 - i], ((i - 12) * 8));
s = hexa(kd) + hexa(kc) + hexa(kb) + hexa(ka);return s;

}

function encode()
{

GetNonce();
document.submitForm.encoded.value = md5(document.getElementById("password").value + ":" + document.getElementById("nonce").value); // sets the hidden field value to whatever md5 returns.//alert(document.getElementById("nonce").value);//alert(document.submitForm.encoded.value);

}

function KeyDown(event)
{

if (event.keyCode == 13)
{
    event.returnValue = false;
    event.cancel = true;
    document.submitForm.goto.click();
}

}

function refreshpage()
{

document.getElementById("password").focus();if (window.top.parent.frames["main"] != null)    parent.location.href = parent.location.href;

}

function ShowSystemTime()
{

var dateTime = new Date();var yy = dateTime.getFullYear();
document.getElementById("system_time").innerHTML = yy;

}

function randomString(len)
{

len = len || 32;var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';var maxPos = $chars.length;var pwd = '';for (i = 0; i < len; i++)
{
    pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
}return pwd;

}

function GetNonce()
{

document.getElementById("nonce").value = randomString(32);

}

document.onkeydown = function(e)
{

e = e || event;if (e.keyCode == 116)
{    return false;
}

}
</script>
<script type="text/javascript">
function myrefresh()
{

window.location.href = 'logon.htm';

}

function pwdtips()
{

if (~%CGI_GetErrPwdFlag()%~)
{
    document.getElementById("PWDTIPS").style.display = 'block';
    setTimeout('myrefresh()', 1000);
}else{
    document.getElementById("PWDTIPS").style.display = 'none';
}

}
</script>
</head>
<body onLoad="initButton();refreshpage();ShowSystemTime();pwdtips();">
<div id='container'>

<div id='login-panel'>
    <div class='panel-head'></div>         
    <div class="panel-content" id="login-form">
        <table class='table table-form'>
            <tr>
                <th align="right"><label data-locale="password">Password</label></th>
                <td><input class="Logoninput" type="password" name="password" id="password" size="20" maxLength="20" style="width:120px;height:20px;" onKeyDown="KeyDown(event);"></td>
                <form method='post' name="submitForm">
                    <td><input type="submit" name="goto" value="Login" onClick="encode()" class="gwt-Button">
                        <input type="hidden" name="encoded">
                        <input type="hidden" id="nonce" name="nonce" value="Login"></td>
                </form>
            </tr>
            <div class='panel-error' id="PWDTIPS" style="display:none;"><label data-locale="passwordError">Password Error!</label></div>
        </table>
        <div style="height:10px;"></div>
    </div>
        <div class="panel-foot">Copyright &copy; 2012 - <span id='system_time'></span> All Rights Reserved.</div> </div>

</div>
</body>
</html>

index页面如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="author" content="Arsen Liu<arsenliu@gmail.com>">
<title>Wi-Fi SIP Phone</title>
</head>
<frameset rows=117,*,35 frameborder="no" framespacing="0px" id="all">
<frame src="title.htm" frameBorder="no" noresize="noresize" framespacing="0px" scrolling="no" name="title_top" id="title_top">
<frameset cols=175,* frameborder="no" framespacing="0px" id="mc">

<frame noresize="noresize" src="menu.htm" name="menu" frameBorder="no" framespacing="0px" scrolling="no" noresize="noresize" id="menu"/><frame noresize="noresize" src="status.htm" name="main" frameBorder="no" framespacing="0px" style="background-color:#EEF6F8; border-bottom:5px solid #FFFFFF;"/>

</frameset>
<frame src="bottom.htm" frameborder="0" noresize="noresize" framespacing="0px" scrolling="no"/>
</frameset>
<noframes>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</noframes>
</html>

menu.html页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="author" content="Arsen Liu<arsenliu@gmail.com>">
<style type="text/css">
html {

overflow-x: hidden;
overflow-y: hidden;

}
.unOperater {

position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 3;
background: #003366;Opacity: 0.2;
filter: Alpha(opacity =20);

}
/ left menu style /

原文链接：http://www.apkbus.com/blog-930411-77066.html