前后端数据一致性的问题

Question

前端页面有easyui-tree，后端返回List< EasyUITreeNode>当后端EasyUITreeNode节点中，属性定义为public String state的时候，前端可以正常展开树。当public String status的时候，前端不能展开树。但是因为后端是自己敲的，前端是拷贝的，以为命名变量只要自己知道意义就好，不知道原来还有这个注意点。那么问题来了。怎样从前端页面分析出后端的变量到底应该叫什么呢？？以下是前端代码<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <div>      <ul id="contentCategory" class="easyui-tree">  </ul> </div> <div id="contentCategoryMenu" class="easyui-menu" style="width:120px;" data-options="onClick:menuHandler">     <div data-options="iconCls:'icon-add',name:'add'">添加</div>     <div data-options="iconCls:'icon-remove',name:'rename'">重命名</div>     <div class="menu-sep"></div>     <div data-options="iconCls:'icon-remove',name:'delete'">删除</div> </div> <script type="text/javascript"> //文档加载后处理以下的逻辑 $(function(){     //在#contentCategory 所在的标签中创建一颗树     $("#contentCategory").tree({         url : '/content/category/list',         animate: true,         method : "GET",         //右击鼠标触发         onContextMenu: function(e,node){             //关闭原来的鼠标的默认事件             e.preventDefault();             //选中 右击鼠标的节点             $(this).tree('select',node.target);             //展示菜单栏             $('#contentCategoryMenu').menu('show',{                 left: e.pageX,//在鼠标的位置显示                 top: e.pageY//在鼠标的位置显示             });         },

Answer 1

这个并不是说拷贝别人的前端，而后端自己写的问题，如果用到的是easyui tree,则需要根据easyui tree的api属性来决定的，这个树的展现都逃不了官方easyui tree的属性。

id：节点的 id，它对于加载远程数据很重要。
text：要显示的节点文本。
state：节点状态，'open' 或 'closed'，默认是 'open'。当设置为 'closed' 时，该节点有子节点，并且将从远程站点加载它们。
checked：指示节点是否被选中。
attributes：给一个节点添加的自定义属性。
children：定义了一些子节点的节点数组。

所以你说的定义变量state还是status,只有你后台调用接口返回了easyui tree需要的json串即可

Answer 2

当初学习easyui的时候我也碰到跟你一样的问题，后来我去easyui的官方文档上找到了答案，像你说的字段定义，在文档上都有清晰的介绍，可以举一反三。

Answer 3

这不是分析的问题，前后一致性应该由后端保证，state和status当然不能随意变了。后端式服务提供者，改属性名一定要通知前端的

Answer 4

这个还是要分情况吧，一般需求讨论好了以后最先完成的是前端，然后根据前端需求再去写后台，一般也是前台接口决定后台数据格式输出