Struts(六)

JSON(JavaScript Object Notation)
    1.一种轻量级的数据交换格式
    2.通常用于在客户端和服务器之间传递数据
    3.jQuery的所有参数都是以JSON格式出现
    4.在Struts 2中通过插件的方式实现

优势（较XML）：
    1.轻量级交换语言
    2.结构简单
    3.易于解析
    
JSON对象：
    语法：
        var JSON对象 = {key:value,key:value,……};
    范例：{"id":4,"name":"梅西","pwd":"6666"}
【注意：其中的key值必须是字符串】
    
JSON数组：
    语法：
        var JSON数组 = [value,value,……];
    范例：
        var countryArray = ["中国","美国","俄罗斯"];
        var personArray = [
                            {"name":"张三","age":30},
                            {"name":"李四","age":40}
                          ];
                          
步骤：
    1.导入struts2-json-plugin-xxx.jar
    2.在struts.xml中定义package并继承json-default
    3.指定<result>的type属性指定为"json"

================================Result===============================    
一、JSON类型的Result：
    1.参数说明：
        参数                    作用                               　　　　　　　　　　默认值                                   适用场景
        root　　　指定要序列化的根对象              当前Actin中所有有返回值的getter方法的值    用于指定不需要序列化key值的数据
        includeProperties　　指定根对象中要序列化的属性            当前根对象中的所有属性      用于需要序列化的属性较少的情况
        excludeProperties       　指定根对象中要排除的属性            　　null               用于需要排除序列化的属性较少的情况
        excludeNullProperties    指定根对象中是否序列化值为空的属性    false              用于需要过滤空值的情况

    2.步骤：
        a.添加第三方插件：struts2-json-plugin-xxx.jar
        b.在struts.xml中指定package继承json-default
        c.指定<result>的type属性为“json”
        d.根据业务需求合理指定param参数
    
    3.作用：
        a.返回JSON格式数据，配合jQuery实现Ajax
        b.param参数
        c.root、 includeProperties、 excludeProperties、 excludeNullProperties

范例：登录表单
1.User实体类

package com.Elastic.StrutsDemo6.ivy.entity;
spublic class User {
    private String loginName;
    private String loginPass;
    
    public String getLoginName() {
        return loginName;
    }
    public void setLoginName(String loginName) {
        this.loginName = loginName;
    }
    public String getLoginPass() {
        return loginPass;
    }
    public void setLoginPass(String loginPass) {
        this.loginPass = loginPass;
    }
    
}

2.UserAction类

package com.Elastic.StrutsDemo6.ivy.action;

import java.util.Date;
import java.util.HashMap;
import java.util.Map;

import com.Elastic.StrutsDemo6.ivy.entity.User;
import com.opensymphony.xwork2.ActionSupport;

public class UserAction extends ActionSupport {
    private User user;

    public User getUser() {
        return user;
    }

    public void setUser(User user) {
        this.user = user;
    }

    private Map<String, Object> jsonResult = new HashMap<String, Object>();

    public Map<String, Object> getJsonResult() {
        return jsonResult;
    }

    public void setJsonResult(Map<String, Object> jsonResult) {
        this.jsonResult = jsonResult;
    }

    public String login() {
        
        //登陆成功以后，额外添加的信息
        /*jsonResult.put("success", true);
        jsonResult.put("data", user);
        jsonResult.put("msg", "登陆成功");
        jsonResult.put("loginTime", new Date());*/

        if ("admin".equals(user.getLoginName().trim()) && "123456".equals(user.getLoginPass().trim())) {
            jsonResult.put("success", true);
            jsonResult.put("data", user);
            jsonResult.put("msg", "登陆成功");
            jsonResult.put("loginTime", new Date());
        } else {
            jsonResult.put("success", false);
            jsonResult.put("msg", "登陆失败");
            jsonResult.put("loginTime", new Date());
        }
        return SUCCESS;
    }
}

3.struts.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd" >
<struts>
    <!-- 使用JSON配置 -->
    <package name="jsonDefault" namespace="/" extends="json-default">
        <action name="login" class="com.Elastic.StrutsDemo6.ivy.action.UserAction" method="login">
        
            <!-- 配置JSON类型的result -->
            <!--type属性指定为"json""，将返回序列化的JSON格式数据-->
            <result type="json">
                <!-- <param name="root">user</param> -->
                <param name="root">jsonResult</param>
            </result>
        </action>
        
    </package>
</struts>

4.web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>StrutsDemo6_ivy</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
 
  <filter>
      <filter-name>Struts2</filter-name>
      <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
  </filter>
  <filter-mapping>
      <filter-name>Struts2</filter-name>
      <url-pattern>/*</url-pattern>
  </filter-mapping>
 
</web-app>

5.valid.js

/**
 * rules: 对象
 */

var rules = {
    loginName : {
        rule : {
            required : true,
            length : [6,12]
        },
        msg : {
            required : '用户名不能为空',
            length : '用户名的长度必须在6-12位之间'
        }
    },
    
    loginPass : {
        rule : {
            length : [6,12]
        },
        msg : {
            length : '密码的长度必须在6-12位之间'
        }
    }
};

function validForm(form,rules) {
    for ( var p in rules) {
        form.find('#' + p).on('valid',rules[p],function(event){
            //使用event.data, msg内容才会不同！！！
            var inputRules = event.data.rule;
            
            for ( var r in inputRules) {
                var value = $(this).val();
                if (r === 'required' && inputRules[r] === true) {
                    if (value === '') {
                        $(this).data('success',false);
                        
                        $(this).closest('div').next().html(event.data.msg[r]);
                        
                    } else {
                        $(this).data('success',true);
                        $(this).closest('div').next().html('');
                    }
                }
                
                //验证先后顺序
                /*if ($(this).data('success') === false) {
                    return;
                }*/
                
                if (r === 'length' && inputRules[r]) {
                    if (value.length > inputRules[r][1] || value.length < inputRules[r][0]) {
                        $(this).data('success',false);
                        
                        $(this).closest('div').next().html(event.data.msg[r]);
                        
                    } else {
                        $(this).data('success',true);
                        $(this).closest('div').next().html('');
                    }
                }
            }
        });
    }
    
    //事件绑定一次
    function valid() {
        //trigger：触发valid事件
        form.find(':input').trigger('valid');
        var success = true;

        form.find(':input').each(function() {
            if ($(this).data('success') === false) {
                success = false;
                return;
            }
        });
        return success;
    }
    
    return valid;
}

6.login.jsp

<%--引入JSP页面PAGE指令 --%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- 引入JSTL标签指令 --%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html language="zh-CN">
<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">
<title>网页标题</title>
<!-- 引入bootstrap的样式 -->
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/bootstrap.min.css">
</head>
<body>
    <div class="container">

        <div class="panel panel-primary">
            <div class="panel-heading">登陆</div>
            <div class="panel-body">
                <form class="form-horizontal" action="login" method="post" data-role="login">
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="loginName">用户名：</label>
                        <div class="col-md-6">
                            <input class="form-control" id="loginName" name="user.loginName" type="text" autocomplete="off" />
                        </div>
                        <div class="col-md-3">
                        
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="loginPass">密码：</label>
                        <div class="col-md-6">
                            <input class="form-control" id="loginPass" name="user.loginPass" type="password" />
                        </div>
                        <div class="col-md-3">
                        
                        </div>
                    </div>
                    <div class="form-group">
                        <input class="btn btn-primary btn-block" data-role="login" type="button" value="登陆" />
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 引入JS的样式  -->
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-2.2.4.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
    
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/valid.js"></script>
    
    <script type="text/javascript">
        //JSON对象
        //测试
        /* var person = {
                "name":"李四",
                "age":20
            };
        
        alert(person.age); */

        $(function() {
            //方法二
            //给表单元素绑定一个自定义的验证事件
            /* $('#loginName').on('valid', function() {
                var name = $(this).val();
                if ('' == name) {
                    $(this).closest('div').next().html('用户名不能为空！');
                    $(this).data('success', false);
                } else {
                    $(this).closest('div').next().html('');
                    $(this).data('success', true);
                }

            });
            $('#loginPass').on('valid', function() {
                var name = $(this).val();
                if ('' == name) {
                    $(this).closest('div').next().html('密码不能为空！');
                    $(this).data('success', false);
                } else {
                    $(this).closest('div').next().html('');
                    $(this).data('success', true);
                }

            }); */
            
            var valid = validForm($('form'), rules);
            
            $('[data-role="login"]').click(function() {
                //获取表单
                var $form = $(this).closest('form');

                $.ajax({
                    url : "login",
                    type : "post",
                    data : $form.serialize(),
                    //data : $(this).closest('form').serialize(),
                    beforeSend : function() {
                        /* var success = true;

                        //trigger：触发valid事件
                        $form.find(':input').trigger('valid');
                        $form.find(':input').each(function() {
                            if ($(this).data('success') === false) {
                                success = false;
                                return;
                            }
                        });
                        return success;*/
                        
                        //方法三
                        //返回方法
                        return valid();
                        
                        //方法一：
                        /* var name = $('#loginName').val();
                        if ('' == name) {
                            $('#loginName').closest('div').next().html('用户名不能为空！');
                            return false;
                        } else {
                            $('#loginName').closest('div').next().html('');
                        }

                        var pass = $('#loginPass').val();
                        if ('' == pass) {
                            $('#loginPass').closest('div').next().html('密码不能为空！');
                            return false;
                        } else {
                            $('#loginPass').closest('div').next().html('');
                        } */
                    },
                    success : function(result) {
                        //返回result（对象）
                        //alert(result);
                        alert(result.msg);
                        if (result.success) {
                            //window.location = 'index.jsp';
                        }
                    }

                });
            });
        });
    </script>
</body>
</html>

二、Stream类型的Result    
    1.步骤：
        a.定义一个InputStream类型的成员变量
        b.给该变量添加getter和setter方法
        c.将要发送到客户端的数据赋值给该变量
        d.根据业务需求合理指定param参数
        
    2.作用：
        a.返回二进制数据,配合jQuery实现Ajax,或者实现验证码
    
    3.param参数
        a.contentType、inputStream

范例：验证码--在上一个范例的基础上修改
1.CodeAction类

package com.Elastic.StrutsDemo6.ivy.action;

import java.awt.Color;
import java.awt.Font;
import java.awt.FontMetrics;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.Date;

import javax.imageio.ImageIO;

import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

public class CodeAction extends ActionSupport {
    private InputStream inputStream;

    public InputStream getInputStream() throws IOException {
        //1.随机生成4位的验证码
        String[] strs = { "a", "b", "c", "d", "e", "f", "g", "h", "i", "j",
                "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v",
                "w", "x", "y", "z", "0", "1", "2", "3", "4", "5", "6", "7",
                "8", "9" };
        String code = "";
        for (int i = 0; i < 4; i++) {
            String temp = strs[(int)(Math.random() * strs.length)];
            
            //随机生成大写字母
            temp = (int)(Math.random() * 2) == 0 ? temp : temp.toUpperCase();
            code += temp;
        }
        
        //2.生成验证码图片
        BufferedImage codeImg = new BufferedImage(100, 25, BufferedImage.TYPE_INT_RGB);
        //得到图片的绘制对象
        Graphics2D g2d = codeImg.createGraphics();
        //设置填充颜色并填充
        g2d.setColor(new Color(240, 240, 240));
        g2d.fillRect(0, 0, codeImg.getWidth(), codeImg.getHeight());
        //绘制验证码到图片上
        Font font = new Font("微软雅黑", Font.PLAIN, 20);
        g2d.setFont(font);
        //获取字体宽度
        FontMetrics fm = g2d.getFontMetrics();
        //设置左右空白和字体间隔
        float start = 15;
        float space = (float)(codeImg.getWidth() - 2 * start - fm.getStringBounds(code, g2d).getWidth()) / (code.length() - 1);
        //随机生成每个字符的样式
        for (int i = 0; i < code.length(); i++) {
            g2d.setColor(getRandomColor());
            String temp = code.charAt(i) + "";
            g2d.drawString(temp, start, font.getSize());
            start += fm.getStringBounds(temp, g2d).getWidth() + space;
        }
        
        //绘制干扰项
        //随机生成点
        for (int i = 0; i < 100; i++) {
            g2d.setColor(getRandomColor());
            int x = (int)(Math.random() * codeImg.getWidth());
            int y = (int)(Math.random() * codeImg.getHeight());
            g2d.drawLine(x, y, x, y);
        }
        //随机生成线
        for (int i = 0; i < 10; i++) {
            g2d.setColor(getRandomColor());
            int x = (int)(Math.random() * codeImg.getWidth());
            int y = (int)(Math.random() * codeImg.getHeight());
            int x1 = (int)(Math.random() * codeImg.getWidth());
            int y1 = (int)(Math.random() * codeImg.getHeight());
            g2d.drawLine(x, y, x1, y1);
        }
        
        ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
        ImageIO.write(codeImg, "png", byteArrayOutputStream);
        ByteArrayInputStream byteArrayInputStream = new ByteArrayInputStream(byteArrayOutputStream.toByteArray());
        
        //把验证码保存到session中
        ActionContext.getContext().getSession().put("code", code);
        //设置验证码有效时间
        ActionContext.getContext().getSession().put("codeMaxTime", new Date().getTime() + 10 * 1000);
        
        return byteArrayInputStream;
    }

    public Color getRandomColor() {
        int r = (int)(Math.random() * 256);
        int g = (int)(Math.random() * 256);
        int b = (int)(Math.random() * 256);
        return new Color(r, g, b);
    }
    
}

2.struts.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd" >
<struts>
    
    <!-- 使用JSON配置 -->
    <package name="jsonDefault" namespace="/" extends="json-default">
        <action name="login" class="com.Elastic.StrutsDemo6.ivy.action.UserAction" method="login">
            <!-- 配置JSON类型的result -->
            <!--type属性指定为"json""，将返回序列化的JSON格式数据-->
            <result type="json">
                <!-- <param name="root">user</param> -->
                <param name="root">jsonResult</param>
                
                <!-- ？？？ -->
                <param name="excludeProperties">data.loginPass</param>
                <param name="excludeNullProperties">true</param>
            </result>
        
        </action>
    </package>
    
    <package name="default" namespace="/" extends="struts-default">
        <action name="code" class="com.Elastic.StrutsDemo6.ivy.action.CodeAction">
            <result type="stream">
                <param name="ContentType">image/jpeg</param>
                <param name="inputStream"></param>
            </result>
        
        </action>
    
    </package>
</struts>

3.UserAction类

package com.Elastic.StrutsDemo6.ivy.action;

import java.util.Date;
import java.util.HashMap;
import java.util.Map;

import com.Elastic.StrutsDemo6.ivy.entity.User;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

public class UserAction extends ActionSupport {
    private User user;
    
    private String code;

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public User getUser() {
        return user;
    }

    public void setUser(User user) {
        this.user = user;
    }

    private Map<String, Object> jsonResult = new HashMap<String, Object>();

    public Map<String, Object> getJsonResult() {
        return jsonResult;
    }

    public void setJsonResult(Map<String, Object> jsonResult) {
        this.jsonResult = jsonResult;
    }

    public String login() {
        
        long time = (long) ActionContext.getContext().getSession().get("codeMaxTime");
        if (time < new Date().getTime()) {
            jsonResult.put("msg", "验证码过期");
            jsonResult.put("success", false);
            return SUCCESS;
        }
        
        String sessionCode = ActionContext.getContext().getSession().get("code").toString();
        if (sessionCode.equalsIgnoreCase(code)) {
            jsonResult.put("msg", "验证码错误");
            jsonResult.put("success", false);
            return SUCCESS;
        }
        
        //登陆成功以后，额外添加的信息
        /*jsonResult.put("success", true);
        jsonResult.put("data", user);
        jsonResult.put("msg", "登陆成功");
        jsonResult.put("loginTime", new Date());*/

        if ("admin".equals(user.getLoginName().trim()) && "123456".equals(user.getLoginPass().trim())) {
            jsonResult.put("success", true);
            jsonResult.put("data", user);
            jsonResult.put("msg", "登陆成功");
            jsonResult.put("loginTime", new Date());
        } else {
            jsonResult.put("success", false);
            jsonResult.put("msg", "登陆失败");
            jsonResult.put("loginTime", new Date());
        }
        return SUCCESS;
    }

}

4.login.jsp

<%--引入JSP页面PAGE指令 --%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- 引入JSTL标签指令 --%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html language="zh-CN">
<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">
<title>网页标题</title>
<!-- 引入bootstrap的样式 -->
<link rel="stylesheet" type="text/css"
    href="<%=request.getContextPath()%>/css/bootstrap.min.css">
</head>
<body>
    <div class="container">

        <div class="panel panel-primary">
            <div class="panel-heading">登陆</div>
            <div class="panel-body">
                <form class="form-horizontal" action="login" method="post" data-role="login">
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="loginName">用户名：</label>
                        <div class="col-md-6">
                            <input class="form-control" id="loginName" name="user.loginName" type="text" autocomplete="off" />
                        </div>
                        <div class="col-md-3">
                        
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="loginPass">密码：</label>
                        <div class="col-md-6">
                            <input class="form-control" id="loginPass" name="user.loginPass" type="password" />
                        </div>
                        <div class="col-md-3">
                        
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="code">验证码：</label>
                        <div class="col-md-6">
                            <input class="form-control" id="code" name="code" type="password" />
                            <img id="codeImg" alt="" src="code" onclick="getCode()"><a href="javascript:getCode();">看不清楚，换一张？</a>
                        </div>
                        <div class="col-md-3">
                        
                        </div>
                    </div>
                    <div class="form-group">
                        <input class="btn btn-primary btn-block" data-role="login" type="button" value="登陆" />
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 引入JS的样式  -->
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-2.2.4.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
    
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/valid.js"></script>
    
    <script type="text/javascript">
        function getCode() {
            document.getElementById('codeImg').src='code?_dc='+new Data();
        }
    </script>
    
    <script type="text/javascript">
        $(function() {
            var valid = validForm($('form'), rules);
            
            $('[data-role="login"]').click(function() {
                //获取表单
                var $form = $(this).closest('form');
                $.ajax({
                    url : "login",
                    type : "post",
                    data : $form.serialize(),
                    beforeSend : function() {
                        //返回方法
                        return valid();
                    },
                    success : function(result) {
                        alert(result.msg);
                        if (result.success) {
                            //window.location = 'index.jsp';
                        }
                    }

                });
            });
        });
    </script>
</body>
</html>