[SSH_easyUI]细节1：首页布局、登录注册

最新推荐文章于 2020-06-20 17:40:10 发布

hyc_2013

最新推荐文章于 2020-06-20 17:40:10 发布

阅读量3.6k

点赞数 3

分类专栏： JavaScript ligerUI/easyUI Java基础文章标签： layout easyui 登录注册

本文链接：https://blog.csdn.net/heweirun_2014/article/details/45652043

版权

Java基础同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

ligerUI/easyUI

6 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

1. 首页布局

用EasyUI中已经定义好的layout元素来完成首页布局

在中添加相应的div即可

<body class="easyui-layout">
    <!-- center必须有，否则会出错，同时应该制定各个div的高度或宽度 -->
    <div data-options="region:'north'" style="height:60px;"></div>
    <div data-options="region:'south'" style="height:20px;"></div>
    <div data-options="region:'west',title:'west'" style="width:200px;"></div>
    <div data-options="region:'east',title:'east'" style="width:200px;"></div>
    <div data-options="region:'center',title:'center'"></div>
</body>

另外有种需求：去掉west和east的自动[折叠/伸展]按钮，但保持title
解决方法：去掉：title:’west’，然后在该div中添加自定义内容
代码如下

<div data-options="region:'west'" style="width:200px;">
    <div class="easyui-panel" data-options="title:'my title',border:false"></div>
</div>

属性说明
split=true：区域宽度可以自由拉伸
border：区域边框
fit:true：split=true引发的问题，title不会自动计算宽和高

2.登录注册

2.1 相关代码

UserAction.java

@ParentPackage("basePackage") 
@Namespace("/") 
@Action(value="userAction") 
public class UserAction {
    private static final Logger logger = Logger.getLogger(UserAction.class);
    private UserService userService;
    public UserService getUserService() {
        return userService;
    }
    @Autowired //表示自动注入
    public void setUserService(UserService userService) {
        this.userService = userService;
    }
    public void test(){
        logger.info("进入Action_test");
        userService.test();
    }
    public void addUser(){
        Tuser t = new Tuser();
        t.setUserCreatedatetime(new Date());
        t.setUserId(UUID.randomUUID().toString());
        t.setUserPname("xxx");
        t.setUserPwd("1111222");
    }
    public void reg(){
        //获取页面参数的第一种方式：servlet底层方法，struts中不推荐这样做
        String name = ServletActionContext.getRequest().getParameter("name");
        String pwd = ServletActionContext.getRequest().getParameter("pwd");
        //String json= "";//第一种方式
        //使用fastjson后的第二种方式，不用自己拼接字符串
        Map<String,Object> m = new HashMap<String,Object>();
        try {
            userService.add(name,pwd);
            m.put("success", true);
            m.put("msg", "注册成功");
            //json = "{\"success\":true,\"msg\":\"注册成功\"}";
        } catch (Exception e) {
            e.printStackTrace();
            m.put("success",false);
            m.put("msg", "注册失败");
            //json = "{\"success\":true,\"msg\":\"注册失败\"}";
        }
        //将json输出到前台
        try {
            //★★整体项目中一般会将下面这两句内容放到拦截器中
            //★用Ajax形式向后台提交数据时，最好指定数据类型和编码方式，否则前台页面可能不认识ajax方式接受到的数据
            ServletActionContext.getResponse().setCharacterEncoding("utf-8");
            ServletActionContext.getResponse().getWriter().write(JSON.toJSONString(m));
            //ServletActionContext.getResponse().getWriter().write(json);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>首页</title>
<script type="text/javascript" src="jslib/jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jslib/jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jslib/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入样式文件 -->
<link rel="stylesheet" href="jslib/jquery-easyui-1.3.1/themes/default/easyui.css" type="text/css"></link>
<!-- 引入相关的icon文件 -->
<link rel="stylesheet" href="jslib/jquery-easyui-1.3.1/themes/icon.css" type="text/css"></link>
<!-- 自己的js文件：一定要放在easyUI之后 -->
<script type="text/javascript" src="jslib/hwUtils.js"></script>
<script type="text/javascript">
    $(function() {

    });
    function regUser() {
        //$('#index_regForm').submit();
        //★★页面加载完后初始化form
        $('#index_regForm').form('submit', { //初始化表单和提交表单放在一起
            url : '${pageContext.request.contextPath}/userAction!reg.action', //如果不定义url,表单会提交到当前页面
            success : function(data) {//检查通过后后台向前台返回的字符串  
                //console.info(data);
                //var obj=eval("("+data+")");//eval()方法，将返回的不是标准json形式数据变成json对象形式【不推荐】
                //不推荐的原因：在easyUI中所有的组件利用的json都是标准的json，如果不用标准json，你认为是对的，但是在前台出不来
                var obj=jQuery.parseJSON(data);
                //console.info(obj);
                if(obj.success){
                    $('#index_regDialog').dialog('close');
                }
                $.message.show({//★★弹出提示框，显示注册成功
                    title:'提示',
                    msg:obj.msg,
                });
            }
        });
    }
    /**用Ajax方式向后台提交数据**/
</script>
</head>

<body class="easyui-layout">
    <!-- center必须有，否则会出错，同时应该制定各个div的高度或宽度 -->
    <div data-options="region:'north'" style="height:60px;"></div>
    <div data-options="region:'south'" style="height:20px;"></div>
    <div data-options="region:'west',split:true" style="width:200px;">
        <div class="easyui-panel" data-options="title:'my title',border:false,fit:true"></div>
    </div>
    <div data-options="region:'east',title:'east'" style="width:200px;"></div>
    <div data-options="region:'center',title:'center'"></div>

    <div id="index_logDialog" class="easyui-dialog" data-options="title:'登录',modal:true,closable:false,buttons:[{
            text:'注册',
            iconCls:'icon-edit',
            handler:function(){
            $('#index_regForm').form('load',{name:'',pwd:'',repPwd:''});//作用：在第二次注册的时候信息框中的内容清空
                $('#index_regDialog').dialog('open');
            }
        },{
            text:'登录',
            iconCls:'icon-help',
            handler:function(){alert('help')}
        }]">
        <table>
            <tr>
                <th>登录名</th>
                <td><input />
                </td>
            </tr>
            <tr>
                <th>密码</th>
                <td><input />
                </td>
            </tr>

        </table>
    </div>
    <div id="index_regDialog" class="easyui-dialog" style="width:250px;" data-options="title:'注册',closed:true,modal:true,closable:false,buttons:[{
            text:'注册',
            iconCls:'icon-edit',
            handler:function(){ //这里是普通的form表单提交，但是写法是ajax的那种写法
                regUser();
            }
        }]">
        <form id="index_regForm" method="post">
            <table>
                <tr>
                    <th>用户名</th>
                    <td><input name="name" class="easyui-validatebox" data-options="required:true,missingMessage:'请输入用户名'" />
                    </td>
                </tr>
                <tr>
                    <th>密码</th>
                    <td><input name="pwd" class="easyui-validatebox" type="password" data-options="required:true,missingMessage:'请输入密码'" />
                    </td>
                </tr>
                <tr>
                    <th>重复密码</th>
                    <td><input name="rePwd" class="easyui-validatebox" type="password" data-options="required:true,missingMessage:'请输入确认密码',validType:'eqPwd[\'#index_regForm input[name=pwd]\']'" />
                    </td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>

hwUtils.js:这是自己对easyUI的校验方法进行扩展的js代码，将其单独放在一个文件中，然后在index.jsp中引入。并且一定要注意该js文件一定要放在easyUI核心js包之后

/**
 * 扩展validatebox，添加验证两次密码功能
 */
$.extend($.fn.validatebox.defaults.rules,{
    eqPwd:{
        validator:function(value,param){
            return value==$(param[0]).val();
        },
        message:"两次密码不一致！"
    }
});

扩展
上面的index.jsp是通过表单的形式向后台提交数据，下面给出第二种方式：通过ajax方式向后台提交数据

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

    });
    function regUser() {
        $.ajax({
            url : '${pageContext.request.contextPath}/userAction!reg.action',
            data : /*{
                        ///第一种形式：不是很好，因为如果页面上有100项数据项，则这里要写100项。
                        name : $('#index_regForm input[name=name]').val(),
                        pwd:$('#index_regForm input[name=pwd]').val()

                    },*/
                    //serialize()：可以将表格序列化成字符串
                    $("#index_regForm").serialize(),
            dataType : 'json',//★告诉前台，后台返回的数据是json
            success : function(obj, textStatus, jqXHR) {
                if (obj.success) {
                    $('#index_regDialog').dialog('close');
                }
                $.messager.show({//★★弹出提示框，显示注册成功
                    title : '提示',
                    msg : obj.msg,
                });
            }
        });
    }
</script>

重点说明：但是用ajax的方式传数据就有一个隐患，因为用这种方式传输的数据就没有走验证的方法。必须单独将验证的步奏提取出来。修改代码如下：

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

    });
    function regUser() {
        if($('#index_regForm').form('validate')){//★★这里是改进的代码：将校验步骤提取出来
            $.ajax({
                url : '${pageContext.request.contextPath}/userAction!reg.action',
                //serialize()：可以将表格序列化成字符串
                data : $("#index_regForm").serialize(),


                dataType : 'json',//★告诉前台，后台返回的数据是json
                success : function(obj, textStatus, jqXHR) {
                    if (obj.success) {
                        $('#index_regDialog').dialog('close');
                    }
                    $.messager.show({//★★弹出提示框，显示注册成功
                        title : '提示',
                        msg : obj.msg,
                    });
                }
            });
        }else{
            alert("校验失败");
        }
    }
</script>

2.2 代码说明

下面补充说明的相关属性都可以在EasyUI-帮助文档中查询到

在<div id="index_logDialog"></div>中
class=”easyui-dialog”：指定某一种类型的div
modal:true：表模式化弹出窗口，即在弹出窗口出现后，不能操作网页其它内容。
closable:false：将弹出窗口的删除按钮隐藏，使得用户不能删除弹出窗口以操作网页其他内容
buttons:[{},{}]：弹出窗口上的按钮初始化
data-options=”title:’登录’：弹出窗口标题初始化
$(‘#index_regDialog’).dialog(‘open’);：找到#index_regDialog内容，并显示出来
在<div id="index_regDialog"></div>中
closed=”true”：说明dialog在页面打开的时候是隐藏的
style=”width:250px;”：设置dialog的初始化宽度
其它
load()：清空、把信息加载到form表单中进行初始化的功能
注意div命名规则：
- id命名规则：目录名页面名元素意义名

2.3 按下Enter键执行提交表单的功能

重点应该注意在submit之前已经对相关的表单初始化（这里是是否给定表单以action的方法）

<script type="text/javascript">
    $(function() {//★增加回车提交功能
        //★★因为下面的"user_reg_regForm"没有action，则提交时默认刷新首页
        //所以提交表单之前必须将表单初始化，将普通表单变成easyui的表单，否则提交不了数据
        $('#user_reg_regForm').form({ 
            url : '${pageContext.request.contextPath}/userAction!reg.action',
            success : function(data) {
                var obj = jQuery.parseJSON(data);
                if (obj.success) {
                    $('#user_reg_regDialog').dialog('close');
                }
                $.messager.show({
                    title : '提示',
                    msg : obj.msg
                });
            }
        });

        $('#user_reg_regForm input').bind('keyup', function(event) {
            if (event.keyCode == '13') {
                $('#user_reg_regForm').submit();//这里才提交表单
            }
        });
    });
</script>
<!-- 以下这种方式（不在<javascript>中初始化数据）是easyUI1.3后的语法 -->
<div id="user_reg_regDialog" class="easyui-dialog" style="width:250px;" data-options="title:'注册',closed:true,modal:true,closable:false,buttons:[{
            text:'注册',
            iconCls:'icon-edit',
            handler:function(){ 
                $('#user_reg_regForm').submit();
            }
        }]">
    <form id="user_reg_regForm" method="post">
        <table>
            <tr>
                <th>用户名</th>
                <td><input name="name" class="easyui-validatebox" data-options="required:true,missingMessage:'请输入用户名'"/>
                </td>
            </tr>
            <tr>
                <th>密码</th>
                <td><input name="pwd" class="easyui-validatebox" type="password" data-options="required:true,missingMessage:'请输入密码'" />
                </td>
            </tr>
            <tr>
                <th>重复密码</th>
                <td><input name="rePwd" class="easyui-validatebox" type="password" data-options="required:true,missingMessage:'请输入确认密码',validType:'eqPwd[\'#user_reg_regForm input[name=pwd]\']'" />
                </td>
            </tr>
        </table>
    </form>
</div>