上一篇博客我们已经把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
最后结果:
这时我们的登入界面就做好了显示出来了。
下一篇博客就开始实现用户登入,完成前后台数据交互。
相关推荐
2. **JSP动作指令(Action Directives)**:如`<jsp:include>`,`<jsp:forward>`等,用来处理用户提交的请求,并将页面导向不同的逻辑路径。 3. **JSP脚本元素**:包括脚本let、声明、表达式和脚本片段,用于在...
为了确保用户数据的安全以及提供一个良好的用户体验环境,开发人员常常需要实现一系列的安全措施。其中,“用户登录过滤相关页面,过滤URL越权访问”是一个常见的需求。本文将详细介绍如何使用Java EE中的过滤器...
2. CSS文件(如style.css):定义登录页面的样式和布局。 3. JavaScript文件(如script.js):实现Ajax登录功能,包括事件监听、数据封装、异步请求发送、接收并处理服务器响应等。 4. 可能还有Java文件(如...
###### 2.2.1 登入须知 - 在首次登录前,请确保企业的管理员已经添加了员工通讯录信息。 - 如果员工尚未加入企业,需要联系管理员创建企业账户及相应的通讯录。 ###### 2.2.2 登录方式 - **账号密码登录**:使用...
开发人员或设计师可以通过下载提供的压缩包,将这些文件集成到自己的网站项目中,然后通过调整JavaScript配置和CSS样式来定制登录界面的外观和行为,以满足特定的设计需求和品牌风格。这不仅可以提升网站的整体视觉...
7. **响应式设计**:考虑到不同设备的使用场景,开发人员可能还需要使用响应式设计,使登录注册页面在手机、平板电脑和桌面电脑上都能正常显示和操作。 8. **错误处理与日志记录**:为了调试和优化,需要有良好的...
答:方法1:先打开论坛首页,用户管理员前台帐号进入前台(默认前后台帐号均为:adminadmin888)-----进入前台后,返回首页,在顶部导航栏------------点“管理”进入后台登入页面---输入后台管理员帐号-------进入...
基于 SSH 架构的班级人员信息展示系统主要功能是先登入一个用户登录系统,登录成功进入到班级信息展示页面,里面有每个人的信息,点击照片或者学号跳入到另外一个界面显示学生的个人详细信息,如果登录不成功,则两...
总的:用户登入后,在主页面的时间处每个模块统一要显示:姓名:×××,班级:××× (如果是学生处或者管理员则只显示姓名) 一、学生信息界面 “查找”按钮只有班主任可用,对班委和普通学生来说,此按钮灰色。 ...
这个模板以其酷炫的视觉效果和简洁的设计吸引用户,为Web开发人员提供了一个快速构建基本用户认证界面的基础。尽管模板在注册表单验证方面可能较为简单,但这并不意味着其无法进行扩展和优化。以下将详细解析这个...
ASP(Active Server Pages)是微软的服务器端脚本环境,允许开发人员在Web服务器上创建动态网页。类似于JSP和PHP,ASP可以用来处理登录请求,验证用户凭据,并控制用户访问权限。ASP与.NET框架集成,可以利用其强大...
手册详细说明了登入地址和登入页面的界面元素,指导用户如何正确输入用户名和密码,以及如何处理常见的登入问题,如密码遗忘或账户锁定等。此外,可能还涵盖了安全认证机制,如两步验证或身份验证服务。 三、功能...
**CISCO 无线AP配置方法** 在无线网络环境中,Cisco无线接入点(Access Point, AP)扮演着至关重要的角色,它允许设备通过无线方式连接到网络...对于复杂的网络环境,建议参考Cisco官方文档或寻求专业技术人员的帮助。
5G CMP平台开通手册(电信受理人员使用)v1(1) 本资源摘要信息涵盖了5G CMP平台的开通手册,旨在指导电信受理人员快速掌握5G CMP平台的开通流程。手册分为两个部分,第一部分介绍了物联网CRM的开通流程,第二部分...
2. 医疗资源管理:涵盖医生、护士、设备等资源的调度与分配,优化医疗服务流程。 3. 诊疗管理:支持医生开处方、检查申请、检验报告管理,实现医疗过程的标准化和自动化。 4. 财务管理:提供收费、报销、结算等功能...
- **目标读者**:本书面向希望使用Umbraco构建网站的技术人员和非技术人员,无论是初次接触Umbraco还是已经有一定经验的用户都能从中受益。 #### 二、Umbraco基础知识 - **安装与配置**(第1章): - 安装Umbraco...
总的:用户登入后,在主页面的时间处每个模块统一要显示:姓名:×××,班级:××× (如果是学生处或者管理员则只显示姓名) 一、学生信息界面 “查找”按钮只有班主任可用,对班委和普通学生来说,此按钮灰色。...
综上所述,这个“美化的后台登录”可能涵盖了后台系统设计、界面美学、用户体验、前端开发、字符编码和安全性等多个IT领域的知识点,对于开发和设计人员来说,理解和掌握这些内容是至关重要的。
API开放接口 √ 开放接口供所需人员使用 物流跟踪接口 √ 支持快递100/快递鸟物流数据接口 第三方登入 √ 支持QQ/微信/新浪第三方接口登入 ERP对接 √ 支持其它ERP平台接口对接(需额外付费) 极验验证 √ 支持...