建站
咨詢
售后
建站咨詢
新聞中心
在當今這個數字化的時代，大量的數據產生于各種各樣的系統之中。如何更好地將這些數據利用起來變得至關重要。傳統的數據庫系統，以其高效、穩(wěn)定的數據存儲和訪問方式成為了數據處理的重要途徑。而SSH和Ext作為常用的開發(fā)工具，更是在將數據庫數據展現給用戶方面發(fā)揮了重要作用。
SSH（Spring、Struts、Hibernate）是一種基于JavaEE的開源框架，可用于開發(fā)Web應用程序。SSH的主要特點是讓開發(fā)人員專注于業(yè)務邏輯而不是框架配置，減少了開發(fā)難度，并能快速開發(fā)相對復雜的Web應用程序。同樣，SSH還提供了對數據庫的操作功能，方便數據存儲和管理。
而Ext作為一款基于JavaScript的前端框架，它提供了豐富的UI控件和交互功能，使數據的可視化展示變得更加簡便。在這里，我們將通過構建一個簡單的Web應用程序來展示如何。
開發(fā)環(huán)境
在開始構建我們的應用程序之前，我們需要做好以下工作：
1. 安裝Java JDK，并設置JAVA_HOME環(huán)境變量。
2. 安裝Eclipse IDE，它提供了豐富的Java開發(fā)工具和插件。同時，我們也需要安裝Maven插件，它可用于構建和管理我們的項目。
3. 安裝Tomcat服務器，作為我們的應用程序的容器。
4. 準備好MySQL數據庫，并創(chuàng)建幾個表和數據，以便我們展示數據。在這里，我們可以使用名為“extjs_ssh”的數據庫和“user”和“role”兩個表。
搭建SSH環(huán)境
現在，我們來搭建SSH環(huán)境，以便訪問數據庫。我們將使用Hibernate來處理數據庫的訪問。
1. 在Eclipse中創(chuàng)建一個新的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下創(chuàng)建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. 創(chuàng)建實體類，如下：
“`
@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. 創(chuàng)建空的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表格是數據的展示界面，定義了表格的顯示字段和分頁等屬性。同時，還添加了一個搜索欄，用于指定搜索用戶名，并在雙擊一條數據時彈出一個編輯窗口。
成都網站建設公司-創(chuàng)新互聯為您提供網站建設、網站制作、網頁設計及定制高端網站建設服務！
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后；你要做現實菜單就必須在后臺創(chuàng)建一個tree的class，內容是這樣的
/**樹節(jié)點ID*/
private String id;
/**樹節(jié)點名稱*/
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展示數據庫的介紹到此就結束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關注本站。
香港云服務器機房,創(chuàng)新互聯（www.cdcxhl.com）專業(yè)云服務器廠商,回大陸優(yōu)化帶寬,安全/穩(wěn)定/低延遲.創(chuàng)新互聯助力企業(yè)出海業(yè)務,提供一站式解決方案。香港服務器-免備案低延遲-雙向CN2+BGP極速互訪！
本文標題：使用SSH和Ext來展示數據庫數據(sshextjs展示數據庫)
本文網址：http://fisionsoft.com.cn/article/cojhiee.html
