为dojo普及做贡献-B--增加服务器交互_dojo.config.debugatallcosts-CSDN博客

本文链接：https://blog.csdn.net/flash8627/article/details/5303447

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,'',NULL,NULL,2010),(2,'景点大全',NULL,'',1,NULL,2010),(3,'热门活动','','',1,NULL,20100107),(4,'驴客集','AAA','',1,NULL,2010),(5,'旅游政务资讯',NULL,'',8,NULL,2010),(6,'武汉赛车协会',NULL,'',8,NULL,2010),(7,'大武汉城市圈',NULL,'',8,NULL,2010),(8,'特色专栏',NULL,'',1,NULL,2010),(9,'旅游常识','','',1,NULL,20100107),(10,'各地指南','','',1,NULL,20100107),(11,'旅行社','','',1,NULL,20100107),(12,'旅游线路','','',1,NULL,20100107),(13,'活动分类','classifyDefault.action','',3,NULL,20100107),(14,'活动管理','activityDefault.action','',3,NULL,20100107),(15,'旅游线路分类','classifyDefault.action','',12,NULL,20100107),(16,'旅游线路管理','activityDefault.action','',12,NULL,20100107),(17,'吃喝玩乐','','',1,NULL,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, 0, 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,isDebug: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, title : newName, url : "", description : "", parentId : lastBoxSelected.id }, pInfo), "title", 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, "title", newName); } // 提交到服务器 dojo.xhrPost( { url : "editTree.action", content : { id : lastBoxSelected.id, title : newName, description : lastBoxSelected.description, url : lastBoxSelected.url, operation : "update" }, timeout : 1000, 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 }, timeout : 1000, load : function() { console.debug("all boxes saved"); }, error : function() { alert('Uh oh. The boxes weren/'t saved.'); } }); } // alert(dojo.version);

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