使用SSH和Ext来展示数据库数据 (ssh extjs展示数据库)
在当今这个数字化的时代，大量的数据产生于各种各样的系统之中。如何更好地将这些数据利用起来变得至关重要。传统的数据库系统，以其高效、稳定的数据存储和访问方式成为了数据处理的重要途径。而SSH和Ext作为常用的开发工具，更是在将数据库数据展现给用户方面发挥了重要作用。
SSH（Spring、Struts、Hibernate）是一种基于JavaEE的开源框架，可用于开发Web应用程序。SSH的主要特点是让开发人员专注于业务逻辑而不是框架配置，减少了开发难度，并能快速开发相对复杂的Web应用程序。同样，SSH还提供了对数据库的操作功能，方便数据存储和管理。
而Ext作为一款基于JavaScript的前端框架，它提供了丰富的UI控件和交互功能，使数据的可视化展示变得更加简便。在这里，我们将通过构建一个简单的Web应用程序来展示如何。
开发环境
在开始构建我们的应用程序之前，我们需要做好以下工作：
1. 安装Java JDK，并设置JAVA_HOME环境变量。
2. 安装Eclipse IDE，它提供了丰富的Java开发工具和插件。同时，我们也需要安装Maven插件，它可用于构建和管理我们的项目。
3. 安装Tomcat服务器，作为我们的应用程序的容器。
4. 准备好MySQL数据库，并创建几个表和数据，以便我们展示数据。在这里，我们可以使用名为“extjs_ssh”的数据库和“user”和“role”两个表。
搭建SSH环境
现在，我们来搭建SSH环境，以便访问数据库。我们将使用Hibernate来处理数据库的访问。
1. 在Eclipse中创建一个新的Maven项目，并添加如下依赖：
“`
org.hibernate
hibernate-core
5.4.19.Final
org.hibernate
hibernate-entitymanager
5.4.19.Final
mysql
mysql-connector-java
8.0.22
“`
2. 在src/mn/resources下创建hibernate.cfg.xml配置文件，添加以下内容：
“`
<!DOCTYPE hibernate-configuration PUBLIC
“-//Hibernate/Hibernate Configuration DTD 3.0//EN”
“http://www.hibernate.org/dtd/hibernate-configuration-3.0.dtd”>
org.hibernate.dialect.MySQL5Dialect
com.mysql.cj.jdbc.Driver
jdbc:mysql://localhost:3306/extjs_ssh?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shangh
root
123456
“`
这里我们根据自己的实际情况修改数据库连接的信息。
3. 创建实体类，如下：
“`
@Entity
@Table(name = “user”)
public class User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer id;
private String name;
private String password;
@ManyToMany(cascade = CascadeType.ALL)
@JoinTable(name = “user_role”, joinColumns = @JoinColumn(name = “user_id”,referencedColumnName = “id”),inverseJoinColumns = @JoinColumn(name = “role_id”,referencedColumnName = “id”))
private Set roles;
//省略getter和setter方法
}
“`
“`
@Entity
@Table(name = “role”)
public class Role {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer id;
private String name;
private String desc;
//省略getter和setter方法
}
“`
这里我们定义了User和Role两个实体类，并使用Hibernate的注解来设置数据库表的映射关系。
使用Ext展示数据
下面，我们将通过Ext来展示数据库数据，这里我们使用Ext 6版本来完成。
1. 创建空的Web项目，并将下载的Ext文件放入webapp下的extjs文件夹中。
2. 在页面中引入所需的和CSS文件，如下：
“`
“`
这里我们引入了Ext的CSS和文件以及自己编写的用户管理脚本user.js。
3. 在页面中添加展示数据的容器，如下：
“`
“`
4. 在user.js中添加如下脚本：
“`
Ext.define(‘User’,{
extend:’Ext.data.Model’,
fields:[
{name:’id’,type:’int’,sortable:true},
{name:’name’,type:’string’,sortable:true},
{name:’password’,type:’string’,sortable:true},
{name:’roles’,type:’string’,sortable:false,convert:function(value,record){
var names = [];
if(value !=null){
Ext.each(value,function(item){
names.push(item.name);
});
}
return names.join(“,”);
}
}
]
});
Ext.define(‘User.store.UserStore’,{
extend:’Ext.data.Store’,
model:’User’,
pageSize:20,
proxy:{
type:’ajax’,
url:’User/list’,
reader:{
type:’json’,
root:’list’,
totalProperty:’totalCount’
}
},
autoLoad:true,
listeners:{
beforeload:function(store,operation,options){
var name = Ext.getCmp(‘search-name’).getValue();
store.getProxy().extraParams = {‘name’:name};
}
}
});
Ext.define(‘User.view.UserGrid’,{
extend:’Ext.grid.Panel’,
alias:’widget.usergrid’,
border:false,
layout:’fit’,
store:’User.store.UserStore’,
columns:[
{header:’编号’, dataIndex:’id’, width:60},
{header:’用户名’,dataIndex:’name’,width:160},
{header:’密码’,dataIndex:’password’,width:160},
{header:’角色’,dataIndex:’roles’,width:360}
],
tbar:[
{xtype:’textfield’,id:’search-name’,emptyText:’请输入用户名’},
{xtype:’button’,text:’搜索’,handler:function(){
Ext.getCmp(‘user-grid’).getStore().load({params:{start:0,limit:20}});
}}
],
bbar:{
xtype:’pagingtoolbar’,
store:’User.store.UserStore’,
displayInfo:true
},
listeners:{
itemdblclick:function(grid,record){
Ext.create(‘User.view.UserEditWindow’,{
title:’修改用户信息’
}).down(‘form’).loadRecord(record);
}
}
});
Ext.define(‘User.view.UserEditWindow’,{
extend:’Ext.window.Window’,
alias:’widget.usereditwindow’,
title:’添加用户信息’,
width:360,
height:240,
modal:true,
layout:’fit’,
items:{
xtype:’form’,
bodyPadding:5,
defaults:{
anchor:’100%’,
labelWidth:60
},
items:[
{xtype:’textfield’,name:’id’,fieldLabel:’编号’,readOnly:true},
{xtype:’textfield’,name:’name’,fieldLabel:’用户名’,allowBlank:false},
{xtype:’textfield’,name:’password’,fieldLabel:’密码’,allowBlank:false}
]
},
buttons:[
{text:’保存’,handler:function(){
var form = this.up(‘window’).down(‘form’);
var record = form.getRecord();
var values = form.getValues();
if(record){
record.set(values);
}else{
Ext.create(‘User.store.UserStore’).add(values);
}
this.up(‘window’).close();
}},
{text:’取消’,handler:function(){
this.up(‘window’).close();
}}
]
});
Ext.application({
name:’User’,
launch:function(){
Ext.create(‘Ext.contner.Viewport’,{
layout:’fit’,
items:[
{xtype:’usergrid’}
]
});
}
});
“`
这里我们定义了一个User实体类、一个UserStore数据源以及一个UserGrid表格。
User实体类定义了我们要展示的数据的字段，通过convert属性将roles属性转换为字符串形式。
UserStore数据源定义了数据的处理方式，通过ajax方式从服务端获取数据，并处理绑定到表格的数据和分页信息。
UserGrid表格是数据的展示界面，定义了表格的显示字段和分页等属性。同时，还添加了一个搜索栏，用于指定搜索用户名，并在双击一条数据时弹出一个编辑窗口。
