上一篇博客我们已经把jboss整合进开发工具eclipse里,并建立好了开发项目Person。今天我们就要开始项目的开发了。
今天主要讲用extjs4制作登入界面.
首先我们要把extjs的包导入到项目WenContent下
导入之前先设置项目
右键项目点击Properties
取消第一和第四个钩,不然检查验证extjs4的js文件会很久且会卡
导入后目录结构:(要用到的图片我也导入了在images里面)
打开已经建好index.html,修改为(代码有注释)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户登入</title>
<!-- 导入extjs核心库 -->
<script type="text/javascript" src="Ext4.2/bootstrap.js"></script>
<script type="text/javascript" src="./Ext4.2/locale/ext-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="Ext4.2/resources/css/ext-all-neptune.css" />
<!-- extjs页面编写 -->
<script type="text/javascript" src="login.js"></script>
<style>
#login_form{
/*利用绝对定位实现*/
position: absolute;
width:450px;
height:300px;
/*使div左上的点居中*/
left:50%;
top:50%;
/*使盒子往左上分别移动宽高的一半,实现居中*/
margin-left:-225px;
margin-top:-150px;
background: #000000;
}
</style>
</head>
<body style="background: #0079d2;margin: 0;padding: 0;">
<div id="login_form">
</div>
</body>
</html>
接下来就是用extjs编写登入窗口了,在WebContent下建立login.js文件
login.js文件代码:
Ext.onReady(function() {
//使用表单提示
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
//创建表单
var formPanel =Ext.create('Ext.form.Panel', {
bodyStyle:"background-image:url('images/body.png')",
renderTo: 'login_form',//根据id渲染到html页面
title: '用户登入',
width: 450,
height: 300,
bodyPadding: '40 0 0 0',//form内容的padding值
buttonAlign: "center",//按钮居中
frame: true,
//文字靠右,文字宽度为50,缩小账号与输入框的距离
fieldDefaults: {
labelAlign: 'left',
labelWidth: 50
},
items:[{
xtype:'textfield',
fieldLabel:'账 号',// 为空格
name:'username',//表单提交参数
//居中
style:" margin:0 auto",
width:250,
height:25,
emptyText: '请输入账号',
allowBlank:false,
blankText:'账号不能为空!',
minLength:2,
minLengthText:'账号的长度为大于1',
maxLength:20,
maxLengthText:'账号的长度为小于20'
},{
xtype:'textfield',
inputType:"password",
fieldLabel:"密 码",
//居中
style: {
margin:'0 auto',
marginTop: '25px'
},
width:250,
height:25,
emptyText: '请输入密码',
name:'password',
allowBlank:false,
blankText:'密码不能为空!',
minLength:2,
minLengthText:'密码的长度为大于1'
}
],
buttons:[{
text:"登入",
type:"submit",
handler:login//处理函数
},{
text:"重置",
handler:function(){
//重置表单
formPanel.form.reset();
}
}]
});
function login()
{
//用户登入方法
Ext.MessageBox.alert("系统提示","登入成功");
}
});
运行结果:
对extjs代码作些说明:
1.Ext.onReady();
onReady正是用来注册在Ext框架及页面的html代码加载完后,所要执行的函数。
2.信息提示
Ext.QuickTips.init();//初始化提示信息,没有他提示出不来
Ext.form.Field.prototype.msgTarget = 'side';msgTarget 有效值包括:
qtip:显示一个浮动的提示消息
title:显示一个浏览器浮动提示消息
under:在字段下面显示一个提示消息,使用under时要注意表单的高度
side:在字段右边显示一个提示消息,使用side是要注意表单的宽度
none:不显示提示消息
效果:
仔细一看,这个登入框的登入和重置字体太小导致模糊,我们来更改一下他们样式,用火狐查看他们的css
如图:
接下来我们在index.html里面重写这个样式:
在<style>标签里加上
.x-btn-default-small .x-btn-inner{font-size: 13px}
把字体大小12px改成13px
最后结果:
这时我们的登入界面就做好了显示出来了。
下一篇博客就开始实现用户登入,完成前后台数据交互。
相关推荐
答:方法1:先打开论坛首页,用户管理员前台帐号进入前台(默认前后台帐号均为:adminadmin888)-----进入前台后,返回首页,在顶部导航栏------------点“管理”进入后台登入页面---输入后台管理员帐号-------进入...
还比如通过设置过滤器可以让通过正确网址而没有登入的用户自动跳转到首页或者登入页面。 整个系统采用Oracle数据库+Spring框架+Hibernate持久层框架+Struts2框架+JQuery前台框架等流行的技术。
总的:用户登入后,在主页面的时间处每个模块统一要显示:姓名:×××,班级:××× (如果是学生处或者管理员则只显示姓名) 一、学生信息界面 “查找”按钮只有班主任可用,对班委和普通学生来说,此按钮灰色。 ...
4.重复1--2,之后再点击添加,添加一个新的链接规则,VPI填:“0”,VCI填:“35”其他的都不要去动! 5.填好VPI,VCI后,再点下一步,选择“PPP over Ethernet (PPPoE)”,在“Port binding ”里面吧所有的勾都打上...
API开放接口 √ 开放接口供所需人员使用 物流跟踪接口 √ 支持快递100/快递鸟物流数据接口 第三方登入 √ 支持QQ/微信/新浪第三方接口登入 ERP对接 √ 支持其它ERP平台接口对接(需额外付费) 极验验证 √ 支持...
总的:用户登入后,在主页面的时间处每个模块统一要显示:姓名:×××,班级:××× (如果是学生处或者管理员则只显示姓名) 一、学生信息界面 “查找”按钮只有班主任可用,对班委和普通学生来说,此按钮灰色...
总的:用户登入后,在主页面的时间处每个模块统一要显示:姓名:×××,班级:××× (如果是学生处或者管理员则只显示姓名) 一、学生信息界面 “查找”按钮只有班主任可用,对班委和普通学生来说,此按钮灰色。...
2、管理员:人员管理 签到设定 部门设定 请假数据管理、自定义流程 系统设置 系统日志 在线更新 公告管理 各种用户行为记录导出 数据库管理 【给DIY用户】 根目录下文件为所有的程序文件,文件头部版权部分...
(2)性能:在不同操作系统上均能无差错实现在不同类型的用户登入相应界面后能不出差错、方便地进行预期操作。 (3)安全与保密要求:用户都必须通过注册、登录才能进入系统,并且用户的权限也需要根据用户的类型...
(2)性能:在不同操作系统上均能无差错实现在不同类型的用户登入相应界面后能不出差错、方便地进行预期操作。 2、(3)安全与保密要求:用户都必须通过身份验证才能进入系统,并且用户的权限也需要根据用户的类型...
4. 管理权限分配灵活严谨,可以设置操作人员不同级别的操作权限,避免越权操作,数据相互保密 5. 账号不限,可以任意添加、修改、删除用户帐号 6. 使用期限不限,一次购买,终身使用 7. 安装简单,使用简捷方便,...
Google使用该应用程序演示了开发人员如何使用GCP产品来现代化企业应用程序,这些产品包括: , , , , 和 。 该应用程序可在任何Kubernetes群集上运行。 如果您使用的是此应用程序,请★为存储库加注星标,以...
(2)性能:在不同操作系统上均能无差错实现在不同类型的会员登入相应界面后能不出差错、方便地进行预期操作。 (3)安全与保密要求:会员都必须通过身份验证才能进入系统,并且会员的权限也需要根据会员的类型进行...
本系统是强大构建系统,可建立多个系统同在一个管理器里,然后直接分配权限给人员,人员可以单点登入多个系统完成自己的作业,超方便实用。案例介绍:曾经用来开发过企业官网,B2C电子商城,企业OA管理、CRM客户关系...
(2)性能:在不同操作系统上均能无差错实现在不同类型的学生登入相应界面后能不出差错、方便地进行预期操作。 (3)安全与保密要求:学生都必须通过身份验证才能进入系统,并且学生的权限也需要根据学生的类型进行...
Google使用此应用程序来演示开发人员如何使用GCP产品来现代化企业应用程序,这些产品包括: , , , , 和 。该应用程序可在任何Kubernetes群集上运行。 如果您使用的是此应用程序,请★为存储库加注星标,以显示...
使用Astra(由DataStax提供的基于云的Cassandra-as-a-Service平台),我们将为每个想要尝试学习新数据库的开发人员介绍第一步: CRUD操作。目录 1.安装数据库要开始使用永久免费,零安装的Cassandra数据库,请单击...
基于JavaEE小区物业管理系统,项目采用MVC模式结合SSM框架进行实现,前端页面使用Bootstrap进行实现。 功能 用户端 (1)业主信息查询 (2)房产信息查询 (3)公告查询管理 (4)收费管理 (5)报修管理 (6)修改用户密码 ...
wondrousWebWorks()是我作为全栈开发人员的投资组合,包括有关我的一些信息,我的技能,经验,联系方式,博客和项目信息。 它还包括一个管理页面,站点所有者可以在其中管理站点并执行CRUD(创建,读取,更新和...
本系统是强大构建系统,可建立多个系统同在一个管理器里,然后直接分配权限给人员,人员可以单点登入多个系统完成自己的作业,超方便实用。案例介绍:曾经用来开发过企业官网,B2C电子商城,企业OA管理、CRM客户关系...