CryptoJS v3.1.2下载地址： https://code.google.com/p/crypto-js/downloads/list 或 http://www.oschina.net/p/crypto-js/
1、项目结构
2、项目需要导入的jar包
本项目后台用的是struts2，所以需要导入struts2的jar包。把下面的包导入到项目的WebRoot/WEB-INF/lib目录下
3、项目需要导入的js文件
下载CryptoJS v3.1.2后，解压，解压后的文件夹的根目录下有两个目录，其中core-min.js 在components目录下，md5.js在rollups目录下。找到这两个js文件，然后在项目的WebRoot根目录下新建js文件夹，把这两个js文件放在WebRoot/js目录下
4、各个文件的源码
(1) 在src根目录下新建包com.md5.action ， 在该包下建立EncryptAction.java
EncryptAction.java
package com.md5.action;
import com.opensymphony.xwork2.ActionContext;
public class EncryptAction {
private String userName;
private String password;
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;
}
public String encryptByMd5() {
ActionContext context = ActionContext.getContext();
context.put("userName", this.userName);
context.put("password", this.password);
return "success";
}
}
(2) 在src根目录下新建xml文件struts.xml
struts.xml
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd"> <struts> <!-- 配置 Struts 2 应用中的常量 --> <constant name="struts.i18n.encoding" value="UTF-8"/> <package name="md5" extends="struts-default"> <action name="md5Action" class="com.md5.action.EncryptAction" method="encryptByMd5"> <result name="success">/success.jsp</result> </action> </package> </struts>
(3) 修改web.xml文件
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">
<!-- 设置struts 2过滤器 -->
<filter>
<filter-name>struts 2</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts 2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!-- 设置欢迎页面 -->
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<!-- session超时定义,单位为分钟 -->
<session-config>
<session-timeout>30</session-timeout>
</session-config>
</web-app>
(4) 在WebRoot根目录下建立分别index.jsp 、md5Demo.jsp、success.jsp
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>首页</title>
</head>
<body>
<a href="md5Demo.jsp">去测试md5实例</a>
</body>
</html>
md5Demo.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>md5加密实例</title>
<script type="text/javascript" src="js/core-min.js"></script>
<script type="text/javascript" src="js/md5.js"></script>
<script type="text/javascript">
//md5加密函数
function EncryptByMd5(){
//获取表单中的密码文本框的值
var password = document.getElementById("password").value;
//用CryptoJS库的md5加密算法给密码加密
var passwordMd5 = CryptoJS.MD5(password);
//把加密后的密码值重新赋值给表单中的密码
document.getElementById("password").value = passwordMd5;
}
</script>
</head>
<body>
<form action="md5Action" method="post">
用户名：<input type="text" name="userName" id="userName" /><br />
密 码：<input type="password" name="password" id="password" /><br />
<input type="submit" value="提交" onclick="EncryptByMd5()" /><br />
</form>
</body>
</html>
success.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>成功跳转</title>
</head>
<body>
用户名：<s:property value="#request.userName" /><br />
密 码：<s:property value="#request.password" /><br />
</body>
</html>
完成以上所有的步骤后，把项目发布到服务器，用浏览器访问md5Demo.jsp ，输入用户名、密码后，提交，你会看到密码加密后的数据
提交前（密码输入的是：123456789）
提交后
即把123456789通过md5算法加了密后，就变成了25f9e794323b453885f5181f1b624d0b
说明：
本实例只展示了CryptoJS v3.1.2实现md5数据加密的简单用法。在实际项目中，例如，在用户注册的时候，在密码输入框 用上以上的md5算法，给密码
加密，通过表单提交给后台，后台处理后，就把表单的内容存入到数据库（密码是表单里的属性，加了密的密码也存进数据库）。 用户注册了之后，在登录的时
候，用户输入密码，这时候，只需要给用户输入的该密码也用上以上加密算法，然后再用表单提交给后台，后台就拿着表单中已经加了密的用户输入的密码，跟数
据库中已经加了密的密码匹配验证就行了。 而不是把数据库里的密码先解密，然后再用用户提交的没有加密的密码跟它匹配。 因为md5算法是不可逆的，所以解
密后的数据可能不是原来的数据，而是别的数据，而某一数据通过md5算法加密后的密文是唯一的。所以采有以上方法才是适合的做法。
时间： 2024-10-13 08:42:45