使用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表格是数据的展示界面，定义了表格的显示字段和分页等属性。同时，还添加了一个搜索栏，用于指定搜索用户名，并在双击一条数据时弹出一个编辑窗口。
相关问题拓展阅读：
- extjs 小数为零显示 我数据库里为100.00 可是extjs显示出来就为100了，怎么让为零的小数也显示出来
- 用extjs4做tree，结合struts,spring 查询数据库后返回json数据,并显示数据树，应该怎么做？
extjs 小数为零显示 我数据库里为100.00 可是extjs显示出来就为100了，怎么让为零的小数也显示出来
Ext不会自动帮巧派薯你转羡裤的孝者,你用 Ext.util.Format.number(value, ‘0.00’); 此工具类来手动转化吧.
显示控件设为Ext.form.NumberField,用这个decimalPrecision属族昌性控制,默认兆巧扒就是显示宽咐2位小数的
/亩迟/前台
Ext.onReady(function() {
var text = new Ext.form.TextField({
id:’text’,
fieldLabel:’text’,
anchor:’65%’
})
var form = new Ext.form.FormPanel({
border:false,
frame:false,
autoScroll:true,
items:
})
var win = new Ext.Window({
title : ‘win’,
width : 300,
height : 300,
resizable : false,
modal : true,
items:
});
Ext.Ajax.request({
url:’test.aspx?cmd=getvalue’,
success:function(response,result){
var data = Ext.decode(response.responseText);
Ext.getCmp(‘text’).setValue(data.value);
},
failure:function(){
Ext.Msg.alert(‘提示’迅卜李,’数据库连接错误！’);
}
});
win.show();
});
//后台
if (cmd == “getvalue”)
{
res = “{value:’100.00′}”;
Response.Write(res);
Response.End();
}
后台把数据弊游都转成字符串就OK了。个人理解。
值.toFixed(2) 就可以显示2位小数点了
用extjs4做tree，结合struts,spring 查询数据库后返回json数据,并显示数据树，应该怎么做？
希望能给一个完整的ext代码，重点是我怎么把获取的json拿出来显示，比如在}); }); Ext的ApiDoc做得非常好, 对学习有很大的帮助. 千万不要看一些
很简单···你struts2是哪个版本的，高于2.16的，有一个struts2-json-plugin-2.1.8.jar的插件包，放入lib后；你要做现实菜单就必须在后台创建一个tree的class，内容是这样的
/**树节点ID*/
private String id;
/**树节点名称*/
private String text;
/**图标*/
private String cls;
/**是否叶子*/
private boolean leaf;
/**链接*/
private String href;
/**链接指向*/
private String hrefTarget;
/**是否展开*/
private boolean expandable;
/**描述信息*/
private String description;
然后将数据中的数据存入这个类的对象，再把得到的对象加入到一个java.util.List treeList中，然后在action里面将treeList转换成json，方法是这样的
ONArray jsonArray = ONArray.fromObject(treeList);
getResponse().setCharacterEncoding(“utf-8”);
getResponse().getWriter().println(jsonArray.toString());
，可能说的有点马虎，有不理解的可以再追问。
struts不需要配置，只要框架里加上json的jar包。返回json数据在action中，把json数据写入response
代码：
String json=”….”;
response.getWriter().write(json);
页面就可以得到值了。页面EXT读取数据用
Ext.data.JsonReader(…)
关于ssh extjs展示数据库的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
