Extjs登录（用到DB）

最新推荐文章于 2021-03-20 08:30:49 发布

iteye_3606

最新推荐文章于 2021-03-20 08:30:49 发布

阅读量199

点赞数

文章标签： javascript java ViewUI

本文介绍使用Extjs 3.3.0版本构建登录系统的全过程，包括数据库表设计、登录界面实现、实体类定义、DAO层操作、Service层业务逻辑处理及Web层控制器交互等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是第一次用Extjs ，肯定很多漏洞，写给自己的，万一忘记了。。演示-------------如下：

[plain] view plain copy print ?

Extjs版本：3.3.0
1建表
useBarcode
/*(此表為了測試自己添加)
EL_User:表名
Id自動增長類型的主鍵
UserName用戶名
Password密碼
NickName昵稱
Level級別（普通用戶或管理員）
*/
droptableEL_User
createtableEL_User(
Idintidentity(1,1)primarykey,
UserNamenvarchar(30),
Passwordnvarchar(20),
NickNamenvarchar(30),
Levelint
)
insertintoEL_Uservalues('舒婷','123456','微笑釋懷',1)--level級別0代表普通用戶，1
代表高級用戶
insertintoEL_Uservalues('Tom','123123','BigMan',0)
insertintoEL_Uservalues('dog','111111','玫瑰男人',0)
2登录界面login.jsp
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"+request.getServerName
()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<basehref="<%=basePath%>">
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="thisismypage">
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<linkrel="stylesheet"type="text/css"href="Extjs/3.3.0/resources/css/ext-
all.css"/>
<scripttype="text/javascript"src="Extjs/3.3.0/adapter/ext/ext-base.js"></script>
<scripttype="text/javascript"src="Extjs/3.3.0/ext-all.js"></script>
<scripttype="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget="qtip";
varloginform=newExt.form.FormPanel({
renderTo:'container',
title:'用戶登陆',
labelSeparator:":",
collapsible:true,
width:300,
height:150,
id:'login',
labelWidth:80,
bodyStyle:'padding:5px5px00',
border:false,
name:'login',
frame:true,
defaults:{width:178,xtype:'textfield'},
items:[
newExt.form.TextField({
frame:true,
fieldLabel:"用户名",
name:'userName',
allowBlank:false,
blankText:'用户名不能为空'
}),{
fieldLabel:"密码",
name:'password',
allowBlank:false,
inputType:'password',
blankText:'密码不能为空'
}],
keys:{
key:13,
fn:login
},
buttons:[{
text:'提交',
handler:login
},{
text:'重置',
handler:functionreset(){
loginform.form.reset();
}
}]
});
functionlogin(){
varform=Ext.getCmp("login").getForm();
form.submit({
//clientValidation:true,
url:"/Env_1/BarCode/selectUser.action",
params:{
},
success:function(form,action){
Ext.Msg.alert('Success',"恭喜，登陆成功！");
location.href='index.jsp';
},
failure:function(form,action){
switch(action.failureType){
caseExt.form.Action.CLIENT_INVALID:
Ext.Msg.alert('Failure','Formfieldsmaynotbesubmittedwith
invalidvalues');
break;
caseExt.form.Action.CONNECT_FAILURE:
Ext.Msg.alert('Failure','Ajaxcommunicationfailed');
break;
caseExt.form.Action.SERVER_INVALID:
Ext.Msg.alert('Failure',"您的输入有误，请核实后重新输入");
loginform.form.reset();
}
}
});
}
})
</script>
</head>
<body>
<divid="outer"align="center">
<br><br><br><br><br><br><br><br>
<divid="container"></div>
</div>
</body>
</html>
3Model下的EL_User.java（实体类）
packagecom.barcode.Model;
importjavax.persistence.Column;
importjavax.persistence.Entity;
importjavax.persistence.Id;
importjavax.persistence.Table;
@Entity
@Table(name="EL_User")
publicclassEL_User{
privateintId;
privateStringUserName;
privateStringPassword;
privateStringNickName;
privateintlevel;
@Id
@Column(name="Id")
publicintgetId(){
returnId;
}
publicvoidsetId(intid){
Id=id;
}
@Column(name="UserName")
publicStringgetUserName(){
returnUserName;
}
publicvoidsetUserName(StringuserName){
UserName=userName;
}
@Column(name="Password")
publicStringgetPassword(){
returnPassword;
}
publicvoidsetPassword(Stringpassword){
Password=password;
}
@Column(name="NickName")
publicStringgetNickName(){
returnNickName;
}
publicvoidsetNickName(StringnickName){
NickName=nickName;
}
@Column(name="Level")
publicintgetLevel(){
returnlevel;
}
publicvoidsetLevel(intlevel){
this.level=level;
}
}
dao层
@Repository
publicclassELLoginDao{
privateHibernateTemplatehibernateTemplate;
@SuppressWarnings("unused")
@Autowired
privatevoidsetHibernateTemplate(SessionFactorysessionFactory){
this.hibernateTemplate=newHibernateTemplate(sessionFactory);
}
@SuppressWarnings("unchecked")
publicListisHaveUser(Stringusername,Stringpassword){
Stringhql="fromELUseruwhereu.userName='"+username+"'and
u.password='"+password+"'";
System.out.println("hql"+hql);
returnthis.hibernateTemplate.find(hql);
}
}
4service层
packagecom.barcode.Service;
importjava.util.Iterator;
importjava.util.List;
importorg.springframework.beans.factory.annotation.Autowired;
importorg.springframework.stereotype.Service;
importorg.springframework.transaction.annotation.Transactional;
importcom.barcode.DAO.EL_UserDAO;
importcom.barcode.Model.EL_User;
@Service
publicclassEL_UserService{
@SuppressWarnings("unused")
privateEL_UserDAOel_UserDAO;
@Autowired
publicvoidsetEl_UserDAO(EL_UserDAOel_UserDAO){
this.el_UserDAO=el_UserDAO;
}
@Transactional("barcode")
publicbooleanselectUser(Stringusername,Stringpassword){
List<EL_User>list=this.el_UserDAO.selectUser(username,password);
if(list.size()==0){
returnfalse;
}else{
returntrue;
}
}
}
5web层
packagecom.barcode.Web;
importjava.util.Enumeration;
importjava.util.HashMap;
importjava.util.Map;
importjavax.servlet.http.HttpServletRequest;
importorg.springframework.beans.factory.annotation.Autowired;
importorg.springframework.stereotype.Controller;
importorg.springframework.web.bind.annotation.ModelAttribute;
importorg.springframework.web.bind.annotation.RequestMapping;
importorg.springframework.web.bind.annotation.ResponseBody;
importcom.barcode.Model.EL_User;
importcom.barcode.Service.EL_UserService;
@Controller
publicclassEL_UserController{
privateEL_UserServiceel_UserService;
@Autowired
publicvoidsetEl_UserService(EL_UserServiceel_UserService){
this.el_UserService=el_UserService;
}
@ModelAttribute("user")
publicEL_UserformbackObject(Integerid,HttpServletRequestrequest)throws
Exception{
//獲得更改的各項屬性
Enumerationenumeration=request.getParameterNames();
System.out.println(enumeration.hasMoreElements());
while(enumeration.hasMoreElements()){
StringparamName=(String)enumeration.nextElement();
System.out.println("requestparameter["+paramName+"]="+
request.getParameter(paramName));
}
EL_Useruser=null;
if(id!=null&&id!=0){
//ug=us.getUsefulGroup(id);
}else{
user=newEL_User();
}
returnuser;
}
@SuppressWarnings("unchecked")
@RequestMapping(value="BarCode/selectUser.action")
public@ResponseBodyMap<String,?extendsObject>selectUser(@ModelAttribute
("user")EL_Useruser,HttpServletRequestrequest){
System.out.println(user.getUserName());
System.out.println(user.getPassword());
Stringusername=user.getUserName();
Stringpassword=user.getPassword();
booleanboo=this.el_UserService.selectUser(username,password);
Mapmap=newHashMap<String,Object>();
if(boo){
map.put("data",user);
map.put("success",true);
map.put("message","Youaresuccessful!!");
}else{
map.put("failure",false);
map.put("message","usernameorpasswordiserror!");
}
returnmap;
}
}

 
Extjs版本：3.3.0
 
1 建表
use  Barcode
/*        (此表為了測試自己添加)
          EL_User :表名
          Id 自動增長類型的主鍵
          UserName 用戶名
          Password 密碼
          NickName 昵稱
          Level 級別（普通用戶或管理員）
*/
drop table EL_User 
create table EL_User(
          Id int identity(1,1)primary key,
          UserName nvarchar(30),
          Password nvarchar(20),
          NickName nvarchar(30),
          Level int     
)
insert into EL_User values('舒婷','123456','微笑釋懷',1) --level級別 0代表普通用戶，1


代表高級用戶
insert into EL_User values('Tom','123123','BigMan',0)
insert into EL_User values('dog','111111','玫瑰男人',0)
2 登录界面 login.jsp


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName


()+":"+request.getServerPort()+path+"/";
%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
       <link rel="stylesheet" type="text/css" href="Extjs/3.3.0/resources/css/ext-


all.css"/>
    <script type="text/javascript" src="Extjs/3.3.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="Extjs/3.3.0/ext-all.js"></script>
    
<script type="text/javascript">
 Ext.onReady(function(){  
     Ext.QuickTips.init();  
     Ext.form.Field.prototype.msgTarget="qtip";  
     var loginform = new Ext.form.FormPanel({  
         renderTo:'container',  
         title:'用戶登陆',  
         labelSeparator:":",  
         collapsible :true,  
         width:300,  
         height:150,  
         id:'login',  
         labelWidth: 80,  
         bodyStyle: 'padding:5px 5px 0 0',  
         border: false,  
         name:'login',  
         frame:true,  
         defaults:{width:178,xtype:'textfield'},  
         items:[  
             new Ext.form.TextField({  
             frame:true,  
             fieldLabel:"用户名",  
             name:'userName',  
             allowBlank:false,  
             blankText:'用户名不能为空'  
         }),{  
             fieldLabel:"密码",  
             name:'password',  
             allowBlank:false,  
             inputType:'password',  
             blankText:'密码不能为空'  
         }], 
         keys:{  
             key: 13,  
             fn:login  
         },  
         buttons:[{  
             text:'提 交',  
             handler:login  
         },{  
            text:'重 置',
            handler:function reset(){  
               loginform.form.reset();  
            }  
         }]  
     });  
     function login(){
        var form=Ext.getCmp("login").getForm();
        form.submit({
          //clientValidation: true,
          url:"/Env_1/BarCode/selectUser.action",
          params:{
          
          },
          success: function(form, action) {
          Ext.Msg.alert('Success', "恭喜，登陆成功！");
              location.href = 'index.jsp';
          },
          failure: function(form, action) {
            switch (action.failureType) {
                case Ext.form.Action.CLIENT_INVALID:
                    Ext.Msg.alert('Failure', 'Form fields may not be submitted with 


invalid values');
                    break;
                case Ext.form.Action.CONNECT_FAILURE:
                    Ext.Msg.alert('Failure', 'Ajax communication failed');
                    break;
                case Ext.form.Action.SERVER_INVALID:
                   Ext.Msg.alert('Failure', "您的输入有误，请核实后重新输入");
                   loginform.form.reset();  
            }
          }
        });
     }         
 }) 
</script>
  </head>
<body>
  <div id="outer" align="center">
  <br><br><br><br><br><br><br><br> 
    <div id="container"></div>
  </div>
  </body>
</html>


3 Model下的EL_User.java（实体类）


package com.barcode.Model;
 
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.Table;
@Entity
@Table(name="EL_User")
public class EL_User {
    private int Id;
    private String UserName;
    private String Password;
    private String NickName;
    private int level;
    @Id
    @Column(name="Id")
    public int getId() {
        return Id;
    }
    public void setId(int id) {
        Id = id;
    }
    @Column(name="UserName")
    public String getUserName() {
        return UserName;
    }
    public void setUserName(String userName) {
        UserName = userName;
    }
    @Column(name="Password")
    public String getPassword() {
        return Password;
    }
    public void setPassword(String password) {
        Password = password;
    }
    @Column(name="NickName")
    public String getNickName() {
        return NickName;
    }
    public void setNickName(String nickName) {
        NickName = nickName;
    }
    @Column(name="Level")
    public int getLevel() {
        return level;
    }
    public void setLevel(int level) {
        this.level = level;
    }
}
dao层
@Repository
public class ELLoginDao {
 
 
          private HibernateTemplate hibernateTemplate;
          @SuppressWarnings("unused")
          @Autowired
          private void setHibernateTemplate (SessionFactory sessionFactory){
                    this.hibernateTemplate =new HibernateTemplate(sessionFactory);
          }
          
          @SuppressWarnings("unchecked")
          public List isHaveUser(String username,String password){
                    String hql = "from ELUser u where u.userName = '"+username+"' and 


u.password = '"+password+"'";
                    System.out.println("hql"+hql);
                     return this.hibernateTemplate.find(hql);
                    
           
                    
          }
}
 
4 service层
package com.barcode.Service;
 
import java.util.Iterator;
import java.util.List;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
 
import com.barcode.DAO.EL_UserDAO;
import com.barcode.Model.EL_User;
 
@Service
public class EL_UserService {
    @SuppressWarnings("unused")
    private EL_UserDAO el_UserDAO;
    @Autowired
    public void setEl_UserDAO(EL_UserDAO el_UserDAO) {
        this.el_UserDAO = el_UserDAO;
    }
    @Transactional("barcode")
    public boolean selectUser(String username,String password){
        List<EL_User>list= this.el_UserDAO.selectUser(username,password);
        if(list.size()==0){
            return false;
        }else{
            return true;
        }
    }
}


5 web层


package com.barcode.Web;
 
import java.util.Enumeration;
import java.util.HashMap;
import java.util.Map;
 
import javax.servlet.http.HttpServletRequest;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
 
import com.barcode.Model.EL_User;
import com.barcode.Service.EL_UserService;
 
@Controller
public class EL_UserController {
    
    private EL_UserService el_UserService;
    @Autowired
     public void setEl_UserService(EL_UserService el_UserService) {
        this.el_UserService = el_UserService;
    }
    @ModelAttribute("user")
    public EL_User formbackObject(Integer id, HttpServletRequest request) throws 


Exception{
        //獲得更改的各項屬性
        Enumeration enumeration = request.getParameterNames();
        System.out.println(enumeration.hasMoreElements());
        while (enumeration.hasMoreElements()) {
             String paramName = (String) enumeration.nextElement();
             System.out.println("request parameter [" + paramName + "]=" +
             request.getParameter(paramName));
        }
        EL_User user=null;
        if(id!=null&&id!=0){
            //ug = us.getUsefulGroup(id);
        }else{
            user = new EL_User();
        }
        return user;
    }
    
    @SuppressWarnings("unchecked")
    @RequestMapping(value="BarCode/selectUser.action")
    public @ResponseBody Map<String,? extends Object> selectUser(@ModelAttribute


("user") EL_User user,HttpServletRequest request){
        System.out.println(user.getUserName());
        System.out.println(user.getPassword());
        String username=user.getUserName();
        String password=user.getPassword();
        boolean boo=this.el_UserService.selectUser(username,password);
        Map map=new HashMap<String,Object>();
        if(boo){
        map.put("data",user);
        map.put("success",true);
        map.put("message","You are successful !!");
        }else{
            map.put("failure", false);
            map.put("message","username or password is error!");
        }
        return map;
    }
}