[SSH_easyUI]细节1：首页布局、登录注册
2015-05-11 23:11
330 查看
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- MVP登录注册+流式布局+搜索商品切换
- hadoop中SSH登录的细节讲解
- SSH登录，注册完整版2(写不下，后面分3，4,......)
- 项目3-商城-1-注册登录首页
- SSH系列：（19）系统首页、子系统首页、登录页、项目主页
- SSH登录，注册完整版2(写不下，后面分3，4,......)
- 登录注册布局和工具
- 登录注册到数据展示到购物车布局
- ssh -v root@xxxxx 显示登录的细节
- andriod———1.实现原生登录注册。 2.首页完成商品列表展示点击相对应的商品ID进入商品详情 3.商品详情页面展示数据，点击加入购物车进入购物车页面 4.购物车页面完成购物车编辑，删除，功能
- SSH登录，注册完整版3(写不下，后面分4，5,......)
- 121 项目 009 笔记向 easyui-study 后台首页布局
- [置顶] Win10下用IDEA搭建Struts2+Spring4+Hibernate5（SSH）框架，实现用户登录注册
- SSH登录，注册完整版4(写不下，后面分5，6,......)
- 【Struts2+Hibernate3+Spring3】利用SSH整合，完成打印用户表，用户登录、注册、修改密码系统
- 交互设计：注册和登录细节中的细节分析
- 交互设计：注册和登录细节中的细节分析
- SSH登录，注册完整版5
- 前网易PM总监：移动APP登录、注册、新手引导、布局的设计经验
- 设为首页收藏本站 切换到宽版 Android开发论坛 - 安卓开发论坛 - Android开发 - 安卓论坛 用户名 自动登录 找回密码 密码 注册 人人连接登陆 用新浪微博连接