前后端数据一致性的问题

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：节点的&nbsp;id，它对于加载远程数据很重要。 text：要显示的节点文本。 state：节点状态，'open'&nbsp;或&nbsp;'closed'，默认是&nbsp;'open'。当设置为&nbsp;'closed'&nbsp;时，该节点有子节点，并且将从远程站点加载它们。 checked：指示节点是否被选中。 attributes：给一个节点添加的自定义属性。 children：定义了一些子节点的节点数组。所以你说的定义变量state还是status,只有你后台调用接口返回了easyui tree需要的json串即可

Answer 2

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

Answer 3

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

Answer 4

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