此片文章的主要目的是讲解怎么样将数据库的查询操作的功能在自己的项目里面实现,
在实际开发中,开发人员一般是没有权限去生产环境上直接登陆数据库查询或者修改数据的,
该页面的目的是通过权限控制,给用户一个查询数据库功能的权限,不用在通过申请或者其他的方式来查看数据库中的数据,
页面效果如下:
主界面分两部分:顶部主要是输入要执行的sql的文本域,底部是展示查询结果,
本文以查询用户表为例:
查询效果展示如下:
现在来看看前台界面的实现代码:
Ext.onReady(function() {
var pathName = window.document.location.pathname;
var projectName = pathName
.substring(0, pathName.substr(1).indexOf('/') + 1);// 获取项目名
iHBody = document.body.clientHeight
|| document.documentElement.clientHeight;// 自适应高
iWBody = document.body.clientWidth || document.documentElement.clientWidth;// 自适应宽
var tbar = Ext.create('Ext.toolbar.Toolbar',{
height:35,
style : 'background: #ADD2ED;border-color:#126DAF',
items:[{
xtype:'label',
style:'color:white;font-size:900;',
text : '请输入要执行的sql语句',
},'->',{
text : '<span style="color:white;font-size:300">执行SQL</span>',
style : 'background: #368ECE;border-color:#126DAF',
icon : projectName + '/images/minico/save.png',
handler : function() {
//对文本域中输入的值做非空校验
var frm = selectDBPanel.getForm().findField("stringSql");
var stringSql = frm.getValue();
if (undefined == stringSql || null == stringSql || "" == stringSql){
Ext.Msg.alert('提示', '请输入要执行的sql语句');
return;
}
//提交到指定的url
Ext.Ajax.request({
url:projectName+"/bdAction/operateSql.do",
mehtod:'get',
params:{
stringSql:stringSql
},
success : function(response, options) {
if (null != response.responseText && "" != response.responseText) {
var json = JSON.parse(response.responseText);
//根据返回的json数据动态的组装表格
//fieldsNames:表头字段
//data:数据集
//total:总数
//columnModle:列
var store = new Ext.data.JsonStore({
id:"dySqlReslut",
fields : json.fieldsNames,
pageSize: 17,
data :json.data,
total:json.total
});
var cm = new Ext.grid.ColumnModel(json.columnModel);
var column = json.columnModle;
var pageBar = Ext.create('Ext.PagingToolbar', {
//store: store,
id:'pageToolbar',
displayInfo: true,
displayMsg: '当前显示第 {0} - {1} 条,总共 {2}条',
emptyMsg: "没有数据"
});
new Ext.create('Ext.grid.Panel',{
id:"configGrid",
border:true,
store:store,
columnLines: true,
renderTo: 'cengterSqlDiv',
height:iHBody,
width:2250,
//autoScroll:true,
columns: column,
cm:cm,
bbar:pageBar
});
Ext.getCmp("configGrid").reconfigure(store, column);
Ext.getCmp("pageToolbar").bind(store);
}else {
Ext.Msg.alert('提示', '原因如下:'+"暂无数据");
}
},
});
}
}]
});
//创建一个用来输入sql语句的文本域
var selectDBPanel = new Ext.FormPanel({
border : false,
id : "performSQlTable",
autoScroll:true,
columnLines: true,
renderTo:"topSqlDiv",
items : [{
xtype : 'textarea',
height : iHBody/2-200,
name : 'stringSql',
anchor : "100%",
}]
});
});
后端代码:
注意:后端框架因为使用的是mybites,这种orm框架(非orm)操作数据库的对象都主要依赖对象,(mybites可以不依赖,查询时将所有的结果集都封装到map中,达到不依赖javabean的目的),并且你在前台查询的数据库表名都不是定的,你要根据传人的sql语句来判断到底是查那个表,哪的写很多if或者其他的判断,假如我新增几个实体类和对应的数据库的,你又得修改这部分代码,所以选用mybites做操作数据库的工具,在这里我觉得不合理,因此本人弃用mybites,改用jdbc来操作,jdbc提供的 ResultSetMetaData 该类和他的实现类都可以帮助我达到我想要的效果,
实现如下:
//connection的获取在同一个类里,所以这里只传入sql语句,既前台输入的sql
public Map<String, Object> selectSql(String sql){
Connection conn = null;
ResultSet rs = null;
PreparedStatement stmt = null;
try {
conn = this.getConnection();
stmt = conn.prepareStatement(sql);
rs = stmt.executeQuery();
Map<String, Object> reslutList = this.getResultListALl(rs);
return reslutList;
} catch (Exception e) {
e.printStackTrace();
} finally{
this.closeConnect(conn, rs, stmt);
}
return null;
}
getResultListALl():方法的实现:
public Map<String, Object> getResultListALl(ResultSet rs) throws SQLException{
ResultSetMetaData md = rs.getMetaData();//得到结果集列的属性
int columns = md.getColumnCount();//得到记录有多少列
int i;
Map<String, Object> allDateMap = new HashMap<String, Object>();
List<Map<String, Object>> list = new ArrayList<Map<String, Object>>(); //数据的list
Set<Map<String, Object>> columlist = new HashSet<Map<String, Object>>(); //列的list
Set<String> filedList = new HashSet();//字段名的list
while(rs.next()){
Map<String, Object> map = new HashMap<String, Object>();
for(i = 0; i < columns; i++){
Map<String, Object> columMap = new HashMap<String, Object>();
map.put(md.getColumnName(i + 1), getValueByType(rs, md.getColumnType(i + 1), md.getColumnName(i + 1)));
filedList.add(md.getColumnName(i + 1));
columMap.put("text", md.getColumnName(i + 1));
columMap.put("dataIndex", md.getColumnName(i + 1));
columMap.put("width", "40");//这里暂时写死
columlist.add(columMap);
}
list.add(map);
}
allDateMap.put("data", list);
allDateMap.put("columnModle", columlist);
allDateMap.put("fieldsNames", filedList);
allDateMap.put("total", list.size());
return allDateMap;
}
最后返回的的这个map里面包括了所有的数据:该map在control层通过springmvc的 @ResponseBody注解,返回出json格式,在前台extjs去解析,
好了:到此就已经实现了想要的功能,可能还存在一些瑕疵,但我相信在今后的学习。成长中,慢慢会优化,
上一篇角色-菜单-用户权限的实现URL:https://blog.csdn.net/gbp_anl/article/details/80949406