建站
咨詢
售后
建站咨詢
新聞中心
在當(dāng)今這個(gè)數(shù)字化的時(shí)代，大量的數(shù)據(jù)產(chǎn)生于各種各樣的系統(tǒng)之中。如何更好地將這些數(shù)據(jù)利用起來變得至關(guān)重要。傳統(tǒng)的數(shù)據(jù)庫系統(tǒng)，以其高效、穩(wěn)定的數(shù)據(jù)存儲和訪問方式成為了數(shù)據(jù)處理的重要途徑。而SSH和Ext作為常用的開發(fā)工具，更是在將數(shù)據(jù)庫數(shù)據(jù)展現(xiàn)給用戶方面發(fā)揮了重要作用。
SSH（Spring、Struts、Hibernate）是一種基于JavaEE的開源框架，可用于開發(fā)Web應(yīng)用程序。SSH的主要特點(diǎn)是讓開發(fā)人員專注于業(yè)務(wù)邏輯而不是框架配置，減少了開發(fā)難度，并能快速開發(fā)相對復(fù)雜的Web應(yīng)用程序。同樣，SSH還提供了對數(shù)據(jù)庫的操作功能，方便數(shù)據(jù)存儲和管理。
而Ext作為一款基于JavaScript的前端框架，它提供了豐富的UI控件和交互功能，使數(shù)據(jù)的可視化展示變得更加簡便。在這里，我們將通過構(gòu)建一個(gè)簡單的Web應(yīng)用程序來展示如何。
開發(fā)環(huán)境
在開始構(gòu)建我們的應(yīng)用程序之前，我們需要做好以下工作：
1. 安裝Java JDK，并設(shè)置JAVA_HOME環(huán)境變量。
2. 安裝Eclipse IDE，它提供了豐富的Java開發(fā)工具和插件。同時(shí)，我們也需要安裝Maven插件，它可用于構(gòu)建和管理我們的項(xiàng)目。
3. 安裝Tomcat服務(wù)器，作為我們的應(yīng)用程序的容器。
4. 準(zhǔn)備好MySQL數(shù)據(jù)庫，并創(chuàng)建幾個(gè)表和數(shù)據(jù)，以便我們展示數(shù)據(jù)。在這里，我們可以使用名為“extjs_ssh”的數(shù)據(jù)庫和“user”和“role”兩個(gè)表。
搭建SSH環(huán)境
現(xiàn)在，我們來搭建SSH環(huán)境，以便訪問數(shù)據(jù)庫。我們將使用Hibernate來處理數(shù)據(jù)庫的訪問。
1. 在Eclipse中創(chuàng)建一個(gè)新的Maven項(xiàng)目，并添加如下依賴：
“`
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下創(chuàng)建hibernate.cfg.xml配置文件，添加以下內(nèi)容：
“`
“-//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
“`
這里我們根據(jù)自己的實(shí)際情況修改數(shù)據(jù)庫連接的信息。
3. 創(chuàng)建實(shí)體類，如下：
“`
@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兩個(gè)實(shí)體類，并使用Hibernate的注解來設(shè)置數(shù)據(jù)庫表的映射關(guān)系。
使用Ext展示數(shù)據(jù)
下面，我們將通過Ext來展示數(shù)據(jù)庫數(shù)據(jù)，這里我們使用Ext 6版本來完成。
1. 創(chuàng)建空的Web項(xiàng)目，并將下載的Ext文件放入webapp下的extjs文件夾中。
2. 在頁面中引入所需的和CSS文件，如下：
“`
“`
這里我們引入了Ext的CSS和文件以及自己編寫的用戶管理腳本user.js。
3. 在頁面中添加展示數(shù)據(jù)的容器，如下：
“`
“`
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’}
]
});
}
});
“`
這里我們定義了一個(gè)User實(shí)體類、一個(gè)UserStore數(shù)據(jù)源以及一個(gè)UserGrid表格。
User實(shí)體類定義了我們要展示的數(shù)據(jù)的字段，通過convert屬性將roles屬性轉(zhuǎn)換為字符串形式。
UserStore數(shù)據(jù)源定義了數(shù)據(jù)的處理方式，通過ajax方式從服務(wù)端獲取數(shù)據(jù)，并處理綁定到表格的數(shù)據(jù)和分頁信息。
UserGrid表格是數(shù)據(jù)的展示界面，定義了表格的顯示字段和分頁等屬性。同時(shí)，還添加了一個(gè)搜索欄，用于指定搜索用戶名，并在雙擊一條數(shù)據(jù)時(shí)彈出一個(gè)編輯窗口。
成都網(wǎng)站建設(shè)公司-創(chuàng)新互聯(lián)為您提供網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù)！
extjs 小數(shù)為零顯示 我數(shù)據(jù)庫里為100.00 可是extjs顯示出來就為100了，怎么讓為零的小數(shù)也顯示出來
Ext不會(huì)自動(dòng)幫巧派薯你轉(zhuǎn)羨褲的孝者,你用 Ext.util.Format.number(value, ‘0.00’); 此工具類來手動(dòng)轉(zhuǎn)化吧.
顯示控件設(shè)為Ext.form.NumberField,用這個(gè)decimalPrecision屬族昌性控制,默認(rèn)兆巧扒就是顯示寬咐2位小數(shù)的
/畝遲/前臺
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(‘提示’迅卜李,’數(shù)據(jù)庫連接錯(cuò)誤！’);
}
});
win.show();
});
//后臺
if (cmd == “getvalue”)
{
res = “{value:’100.00′}”;
Response.Write(res);
Response.End();
}
后臺把數(shù)據(jù)弊游都轉(zhuǎn)成字符串就OK了。個(gè)人理解。
值.toFixed(2) 就可以顯示2位小數(shù)點(diǎn)了
用extjs4做tree，結(jié)合struts,spring 查詢數(shù)據(jù)庫后返回json數(shù)據(jù),并顯示數(shù)據(jù)樹，應(yīng)該怎么做？
希望能給一個(gè)完整的ext代碼，重點(diǎn)是我怎么把獲取的json拿出來顯示，比如在}); }); Ext的ApiDoc做得非常好, 對學(xué)習(xí)有很大的幫助. 千萬不要看一些
很簡單···你struts2是哪個(gè)版本的，高于2.16的，有一個(gè)struts2-json-plugin-2.1.8.jar的插件包，放入lib后；你要做現(xiàn)實(shí)菜單就必須在后臺創(chuàng)建一個(gè)tree的class，內(nèi)容是這樣的
/**樹節(jié)點(diǎn)ID*/
private String id;
/**樹節(jié)點(diǎn)名稱*/
private String text;
/**圖標(biāo)*/
private String cls;
/**是否葉子*/
private boolean leaf;
/**鏈接*/
private String href;
/**鏈接指向*/
private String hrefTarget;
/**是否展開*/
private boolean expandable;
/**描述信息*/
private String description;
然后將數(shù)據(jù)中的數(shù)據(jù)存入這個(gè)類的對象，再把得到的對象加入到一個(gè)java.util.List treeList中，然后在action里面將treeList轉(zhuǎn)換成json，方法是這樣的
ONArray jsonArray = ONArray.fromObject(treeList);
getResponse().setCharacterEncoding(“utf-8”);
getResponse().getWriter().println(jsonArray.toString());
，可能說的有點(diǎn)馬虎，有不理解的可以再追問。
struts不需要配置，只要框架里加上json的jar包。返回json數(shù)據(jù)在action中，把json數(shù)據(jù)寫入response
代碼：
String json=”….”;
response.getWriter().write(json);
頁面就可以得到值了。頁面EXT讀取數(shù)據(jù)用
Ext.data.JsonReader(…)
關(guān)于ssh extjs展示數(shù)據(jù)庫的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。
香港云服務(wù)器機(jī)房,創(chuàng)新互聯(lián)（www.cdcxhl.com）專業(yè)云服務(wù)器廠商,回大陸優(yōu)化帶寬,安全/穩(wěn)定/低延遲.創(chuàng)新互聯(lián)助力企業(yè)出海業(yè)務(wù),提供一站式解決方案。香港服務(wù)器-免備案低延遲-雙向CN2+BGP極速互訪！
本文名稱：使用SSH和Ext來展示數(shù)據(jù)庫數(shù)據(jù)(sshextjs展示數(shù)據(jù)庫)
標(biāo)題來源：http://www.5511xx.com/article/cojhiee.html
