为dojo普及做贡献-B--增加服务器交互

发布时间：2020-12-16 21:50:03 所属栏目：百科来源：网络整理

导读：dojo和java服务器交互,注意，不管跟哪种语言接上去，都不重要，重要的是 dojo要什么样的数据服务器要什么样的数据他们怎么沟通经常有人问什么extjs和ssh实例什么的，所以才被上这个重要的提示，如果你是跟servlet交互，个人觉得更容易，out.print把数据

dojo和java服务器交互,注意，不管跟哪种语言接上去，都不重要，

重要的是

dojo要什么样的数据
服务器要什么样的数据
他们怎么沟通

经常有人问什么extjs和ssh实例什么的，所以才被上这个重要的提示，如果你是跟servlet交互，个人觉得更容易，out.print把数据输出就可以，更简单

首先就是一个model和数据库

Category.java（）

/** * @author 分类、模块 * @hibernate.class table="category" */ public class Category { /** * @hibernate.id generator-class="native" */ private int id; /** * @hibernate.property */ private String title; /** * 描述 * * @hibernate.property type="java.lang.String" length="1526" */ private String description; /** * @hibernate.property */ private String url; /** * @hibernate.property */ private String viewUrl; /** * 排序码 * * @hibernate.property */ private int sortingCode; /** * not-found="ignore" 忽略异常 property-ref="depCode" * * @hibernate.many-to-one column="pid" lazy="false" not-found="ignore" */ private Category parent; /** * @hibernate.set inverse="true" lazy="false" order-by="sortingCode" * @hibernate.key column="pid" * @hibernate.one-to-many class="com.flexoa.model.Category" */ private Set<Category> children; public Category() { super(); } public Category(int id,String title,String url,String viewUrl,int sortingCode,Category parent,Set<Category> children) { super(); this.id = id; this.title = title; this.url = url; this.viewUrl = viewUrl; this.sortingCode = sortingCode; this.parent = parent; this.children = children; } public int getSortingCode() { return sortingCode; } public void setSortingCode(int sortingCode) { this.sortingCode = sortingCode; } public String getViewUrl() { return viewUrl; } public void setViewUrl(String viewUrl) { this.viewUrl = viewUrl; } public Category getParent() { return parent; } public void setParent(Category parent) { this.parent = parent; } public Set<Category> getChildren() { return children; } public void setChildren(Set<Category> children) { this.children = children; } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getUrl() { return url; } public void setUrl(String url) { this.url = url; } public String getDescription() { return description; } public void setDescription(String description) { this.description = description; } }

Category.hbm.xml

<hibernate-mapping> <class table="category" name="com.flexoa.model.Category"> <id name="id"> <generator class="native"/> </id> <property name="title"/> <property name="description" length="1526" type="java.lang.String"/> <property name="url"/> <property name="viewUrl"/> <property name="sortingCode"/> <many-to-one column="pid" not-found="ignore" lazy="false" name="parent"/> <set inverse="true" order-by="sortingCode" lazy="false" name="children"> <key column="pid"/> <one-to-many class="com.flexoa.model.Category"/> </set> </class> </hibernate-mapping>

数据库脚本：

/*Table structure for table `category` */ DROP TABLE IF EXISTS `category`; CREATE TABLE `category` ( `id` int(11) NOT NULL AUTO_INCREMENT,`title` varchar(255) DEFAULT NULL,`url` varchar(255) DEFAULT NULL,`isFolder` bit(1) DEFAULT NULL,`pid` int(11) DEFAULT NULL,`viewUrl` varchar(255) DEFAULT NULL,`sortingCode` int(11) DEFAULT NULL,PRIMARY KEY (`id`),KEY `FK302BCFED3B107E4` (`pid`),CONSTRAINT `FK302BCFED3B107E4` FOREIGN KEY (`pid`) REFERENCES `category` (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=20 DEFAULT CHARSET=utf8; /*Data for the table `category` */ insert into `category`(id,title,url,isFolder,pid,viewUrl,sortingCode) values (1,'管理菜单',NULL,'',2010),(2,'景点大全',1,(3,'热门活动','',20100107),(4,'驴客集','AAA',(5,'旅游政务资讯',8,(6,'武汉赛车协会',(7,'大武汉城市圈',(8,'特色专栏',(9,'旅游常识',(10,'各地指南',(11,'旅行社',(12,'旅游线路',(13,'活动分类','classifyDefault.action',3,(14,'活动管理','activityDefault.action',(15,'旅游线路分类',12,(16,'旅游线路管理',(17,'吃喝玩乐',20100107);

其次就是action和struts.xml配置

CategoryAction.java

public class CategoryTreeAction extends ActionSupport { private static final long serialVersionUID = 5043018289424981347L; private Integer parentId; private Integer id; private final String label = "title"; private final String identifier = "id"; private String description; private String title; private String url; private String operation; @SuppressWarnings("unchecked") private List items; private CategoryManager categoryManager; @Override public String execute() throws Exception { items = categoryManager.findCategorys(parentId,Integer.MAX_VALUE) .getList(); return SUCCESS; } public String addTreeNode() throws Exception { StringBuffer sb = new StringBuffer(); sb.append("/n/n------:"+operation); sb.append("/nparentId:" + parentId); sb.append("/nid:" + id); sb.append("/ntitle:" + title); System.out.println(sb.toString()); return SUCCESS; } public String editTreeNode() throws Exception { System.out.println(buildOut()); return SUCCESS; } public String removeTreeNode() throws Exception { StringBuffer sb = new StringBuffer(); sb.append("/n/n------:"+operation); sb.append("/nid:" + id); sb.append("/ntitle:" + title); System.out.println(sb.toString()); return SUCCESS; } /** * 构建输出,只是监视提交的操作 * * @return */ public String buildOut() { StringBuffer sb = new StringBuffer(); sb.append("/n/n------:"+operation); sb.append("/nid:" + id); sb.append("/ntitle:" + title); if ("".equals(description)) sb.append("/ndescription" + description); if (url.equals("")) sb.append("/nurl" + url); return sb.toString(); } /***** ################ *****/ @JSON(serialize = false) public Integer getParentId() { return parentId; } @JSON(serialize = false) public String getUrl() { return url; } public void setUrl(String url) { this.url = url; } @JSON(serialize = false) public String getDescription() { return description; } public void setDescription(String description) { this.description = description; } @JSON(serialize = false) public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } @JSON(serialize = false) public String getOperation() { return operation; } public void setOperation(String operation) { this.operation = operation; } public void setCategoryManager(CategoryManager categoryManager) { this.categoryManager = categoryManager; } public void setParentId(Integer parentId) { this.parentId = parentId; } @JSON(serialize = false) public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } @SuppressWarnings("unchecked") public List getItems() { return items; } @SuppressWarnings("unchecked") public void setItems(List items) { this.items = items; } public String getLabel() { return label; } public String getIdentifier() { return identifier; } }

struts.xml

category-struts.xml

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts> <package name="categoryTreeGroup" extends="json-default" namespace="/management"> <action name="categoryTree" class="categoryTreeBean"> <result type="json"></result> </action>  <action name="editTree" class="categoryTreeBean" method="editTreeNode"> <result type="json"></result> </action>  <action name="addTreeNode" class="categoryTreeBean" method="addTreeNode"> <result type="json"></result> </action>  <action name="removeTreeNode" class="categoryTreeBean" method="removeTreeNode"> <result type="json"></result> </action> </package> </struts>

再就是html页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>把对保存到服务器---完成-读取、修改、删除跟服务器交互|</title> <link> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">@import "../libs/dojo1.4.x/dojo/resources/dojo.css"; @import "../libs/dojo1.4.x/dijit/themes/tundra/tundra.css";</style> <mce:script type="text/javascript" src="../libs/dojo1.4.x/dojo/dojo.js" mce_src="libs/dojo1.4.x/dojo/dojo.js" djConfig="parSEOnLoad: true,isDebug:true,debugAtAllCosts:true"></mce:script> <mce:script type="text/javascript"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body { width: 100%; height: 100%; padding: 0px; margin: 0px; } .dijitTreeLabel { cursor: pointer; }</style> </head> <body class="tundra"> <div dojoType="dijit.layout.BorderContainer" style="width: 700px; height: 400px; margin: 0px auto;" design="headline" liveSizing="true"> <div dojoType="dijit.layout.ContentPane" region="leading" splitter="true" style="width: 300px">    <div dojoType="dojo.data.ItemFileWriteStore" url="categoryTree.action?parentId=0" jsId="boxJson"> <mce:script type="dojo/connect" event="onNew" args="newItem"></mce:script> </div> <div dojoType="dijit.tree.TreeStoreModel" store="boxJson" jsId="boxModel"></div> <div dojoType="dijit.Tree" id="boxes" model="boxModel" query="{parent:null}" style="height: 90%; overflow: auto;"> <mce:script type="dojo/method" event="onClick" args="item"></mce:script> </div> <div> <div dojoType="dijit.form.Button"> 添加 <mce:script type="dojo/method" event="onClick" args="evt"></mce:script> </div> <div dojoType="dijit.form.Button"> 删除 <mce:script type="dojo/method" event="onClick" args="evt"></mce:script> </div> <div dojoType="dijit.form.Button"> 修改 <mce:script type="dojo/method" event="onClick" args="evt"></mce:script> </div> <div dojoType="dijit.form.Button"> 全部保存 <mce:script type="dojo/method" event="onClick" args="evt"></mce:script> </div> </div> </div> <div dojoType="dijit.layout.ContentPane" region="center"> <h2> 实现RUD功能 </h2> <p> 动态载入数据库数据,马上加上写JSON功能,实现删除和修改 </p> </div> </div> <div dojoType="dijit.Dialog" id="optionsDialog" title="添加"> <table> <tr> <td style="text-align: right;" mce_style="text-align: right;"> <label for="option2"> Name: </label> </td> <td> <input id="option1" dojoType="dijit.form.TextBox" type="text"> </td> </tr> <tr> <td style="text-align: right;" mce_style="text-align: right;"> <label for="option2"> URL: </label> </td> <td> <input id="option2" dojoType="dijit.form.TextBox" type="text"> </td> </tr> <tr> <td colspan="2" style="text-align: center;" mce_style="text-align: center;"> <button dojoType="dijit.form.Button" type="submit" iconClass="mailIconOk"> OK </button> <button dojoType="dijit.form.Button" type="submit" iconClass="mailIconCancel"> Abort </button> </td> </tr> </table> </div> </body> </html>

至此dojo树的读取服务器数据、修改并提交到服务器、删除树、添加并提交到服务器成功完成,

这里要注意

添加的时候 id值如果不对就会失败,随便插入一个id就可以解决，我用的id : lastBoxSelected.id+highestBoxId+0,

这种可以解决添加时候的问题，但带来了修改时候的问题：

修改的时候自己指定的id和服务器（存储到数据库）的id不一样,造成了按ID就无法修改的问题，因为ID是错误的，

再来个笨的办法，就是按标题名称修改,

或都在插入的时候把ID返回，重新插入到store里面

呵呵。完全解决-

最后修改了一下JS：

最终HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>dojo树到服务器交互---全部完成</title> <link rel="stylesheet" href="css/Tree_Notification_API.css" mce_href="css/Tree_Notification_API.css" type="text/css"></link> <mce:script type="text/javascript" src="../libs/dojo1.4.x/dojo/dojo.js" mce_src="libs/dojo1.4.x/dojo/dojo.js" djConfig="parSEOnLoad: true,debugAtAllCosts:true"></mce:script> <mce:script type="text/javascript"></mce:script> <mce:script type="text/javascript" src="js/Tree_noti_API_input.js" mce_src="js/Tree_noti_API_input.js"></mce:script> </head> <body class="tundra"> <div dojoType="dijit.layout.BorderContainer" style="width: 700px; height: 400px; margin: 0px auto;" design="headline" liveSizing="true"> <div dojoType="dijit.layout.ContentPane" region="leading" splitter="true" style="width: 300px">   <div dojoType="dojo.data.ItemFileWriteStore" url="categoryTree.action?parentId=0" jsId="boxJson"> <mce:script type="dojo/connect" event="onNew" args="newItem"></mce:script> </div> <div dojoType="dijit.tree.TreeStoreModel" store="boxJson" jsId="boxModel"></div> <div dojoType="dijit.Tree" id="boxes" model="boxModel" query="{parent:null}" style="height: 90%; overflow: auto;"> <mce:script type="dojo/method" event="onClick" args="item"></mce:script> </div> <div id="result"> </div> <div> <div dojoType="dijit.form.Button"> 添加 <mce:script type="dojo/method" event="onClick" args="evt"></mce:script> </div> <div dojoType="dijit.form.Button"> 删除 <mce:script type="dojo/method" event="onClick" args="evt"></mce:script> </div> <div dojoType="dijit.form.Button"> 修改 <mce:script type="dojo/method" event="onClick" args="evt"></mce:script> </div> <div dojoType="dijit.form.Button"> 全部保存 <mce:script type="dojo/method" event="onClick" args="evt"></mce:script> </div> </div> </div> <div dojoType="dijit.layout.ContentPane" region="center"> <h2> 实现CUD功能 </h2> </div> </div> <div dojoType="dijit.Dialog" id="cDialog" title="添加"> <table> <tr> <td style="text-align: right;" mce_style="text-align: right;"> <label for="cTitle"> Name: </label> </td> <td> <input id="cTitle" dojoType="dijit.form.TextBox" type="text"> </td> </tr> <tr> <td style="text-align: right;" mce_style="text-align: right;"> <label for="cUrl"> URL: </label> </td> <td> <input id="cUrl" dojoType="dijit.form.TextBox" type="text"> </td> </tr> <tr> <td style="text-align: right;" mce_style="text-align: right;"> <label for="cDescription"> Description: </label> </td> <td> <div id="cDescription" dojoType="dijit.Editor" style="height:6em;width:100%;"></div> </td> </tr> <tr> <td colspan="2" style="text-align: center;" mce_style="text-align: center;"> <input id="cId" type="text"> <input id="pId" type="text"> <button dojoType="dijit.form.Button" type="submit" iconClass="mailIconOk"> 保存 </button> <button dojoType="dijit.form.Button" type="submit" iconClass="mailIconCancel"> 放弃 </button> </td> </tr> </table> </div> </body> </html>

最终JS

/** * 这里继续继续重构,修改prompt为Dialog表单 */ // 假的计算器，等待替换 var highestBoxId = 1; // For use in Delete and Rename var lastBoxSelected = null; /* dijit.byId('cDialog').show(); */ function newItem() { } /** * 清除表单为空 */ function clearItemInput() { dijit.byId("cTitle").setValue(""); dijit.byId("cId").setValue(""); dijit.byId("pId").setValue(""); dijit.byId("cUrl").setValue(""); dijit.byId("cDescription").setValue(""); } /* 取表单值-到修改,这里已经点击了树，所以当前lastBoxSelected为需要修改的当前节点 */ function doUpdate() { dijit.byId("cTitle").setValue(lastBoxSelected.title); dijit.byId("cId").setValue(lastBoxSelected.id); dijit.byId("cUrl").setValue(lastBoxSelected.url); dijit.byId("cDescription").setValue(lastBoxSelected.description); } function addCategory() { highestBoxId++; // 去掉pInfo就只能插入一级 if (!lastBoxSelected || !boxJson.isItem(lastBoxSelected)) { // alert('添加节点!'+!lastBoxSelected || !boxJson.isItem(lastBoxSelected)); alert('请选择节点!'); return; } // 使用dijit对话框,先取值，插入数据库然后更新ID,也算是完美解决,睡觉,; if (newName = prompt("请输入节点名称")) { var pInfo = lastBoxSelected ? { parent : lastBoxSelected,attribute : "children" } : null; var parentId = lastBoxSelected.id; var url = dijit.byId("cUrl").getValue(); var description = dijit.byId("cDescription").getValue(); dojo.xhrGet( { url : "editTree.action?id=0&parentId=" + parentId + "&description=" + description + "&url=" + url + "&title=" + newName,handleAs : "json",handle : function(response) { //只有成功后才插入tree node boxJson.setValue(boxJson.newItem( { id : response.id,url : "",description : "",parentId : lastBoxSelected.id },newName); console.debug(" RESPONSE：" + response.id + " --new Name " + newName); } }); console.debug(" 添加插入到：" + lastBoxSelected.title + " ID:" + lastBoxSelected.id); } } function removeCategory() { if (!lastBoxSelected || !boxJson.isItem(lastBoxSelected)) { alert('请选择节点!'); return; } boxJson.deleteItem(lastBoxSelected); // 提交到服务器 dojo.xhrPost( { url : "removeTreeNode.action",// boxes参数名是随意起的 content : { title : lastBoxSelected.title,id : lastBoxSelected.id,description : lastBoxSelected.description,url : lastBoxSelected.url,operation : "delete" },timeout : 1000,load : function() { console.debug("删除成功!"); },error : function() { alert('Uh oh. 删除失败.'); } }); } function updateCategory() { if (!lastBoxSelected || !boxJson.isItem(lastBoxSelected)) { alert('请选择节点!'); return; } // 技术含量不高的解决方法，如果使用dijit对话框地更好 if (newName = prompt("请输入节点名称:")) { boxJson.setValue(lastBoxSelected,newName); } // 提交到服务器 dojo.xhrPost( { url : "editTree.action",content : { id : lastBoxSelected.id,operation : "update" },load : function() { console.debug("修改成功!"); },error : function() { alert('Uh oh. 修改/'t 出错啦.'); } }); } saveAll = function() { // 把 JavaScript 转成 JSON. 类似 dojo.objectToJSON,但是考虑了dojo.data类型映射 var newFileContentString = boxJson._getNewFileContentString(); dojo.xhrPost( { url : "saveAll.action",// categorys参数名是随意起的,如果是struts2 可以做个list类型转换 content : { categorys : newFileContentString },load : function() { console.debug("all boxes saved"); },error : function() { alert('Uh oh. The boxes weren/'t saved.'); } }); } // alert(dojo.version);

下一步增加树(tree)拖放 操作，下下一步增加tree(树)右键菜单 功能

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!