使用SSH和Ext来展示数据库数据(sshextjs展示数据库)

在当今这个数字化的时代，大量的数据产生于各种各样的系统之中。如何更好地将这些数据利用起来变得至关重要。传统的数据库系统，以其高效、稳定的数据存储和访问方式成为了数据处理的重要途径。而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配置文件，添加以下内容：

“`

“-//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了，怎么让为零的小数也显示出来

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展示数据库的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。

香港云服务器机房,创新互联（www.cdcxhl.com）专业云服务器厂商,回大陆优化带宽,安全/稳定/低延迟.创新互联助力企业出海业务,提供一站式解决方案。香港服务器-免备案低延迟-双向CN2+BGP极速互访！

网站栏目：使用SSH和Ext来展示数据库数据(sshextjs展示数据库)
分享地址：http://www.csdahua.cn/qtweb/news33/458133.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网