开发总结（一）

开发总结（一）

前端总结

使用的框架：

• Gentelella
• Bootstrap
• Bootstrap-Table
• ZTree

Bootstrap:

​ 必须引入的三个文件：

• jquery.js
• bootstrap.js
• bootstrap.css

Gentelella:

​ Gentelella 是一个可免费使用的 Bootstrap 管理界面模版。这个模版使用默认的 Bootstrap 3 的样式，还有一系列功能强大的 jQuery 插件和工具，用来帮助你创建管理界面模版或者后台的 Dashboard。

使用：

需要引入一些基本的JS与CSS文件，如下：

Bootstrap-Table

在引入jquery与bootstrap的基础上，还需引入：

• bootstrap-table.js
• bootstrap-table.css

首先需要在页面中加入

其他一些配置皆在js中进行设置

$('#table').bootstrapTable({
    // 表格的样式，框线、隔行换色、大小等
    classes: 'table table-bordered table-striped table-hover table-sm',
    //表格的列
    columns: [{
        checkbox: true,// 复选框
	        align: 'center',
	        width: 30
        }, {
            field: 'systemId',//列字段，此值要与后台传入的对象字段一致才能匹配
            width: 100,
            align: 'center',
            title: '编号',
            align: 'center',
            visible: false	// 是否可见
        }, {
            field: 'systemName',
            width: 100,
            title: '系统名称',
            align: 'center',
            sortable: true	//开启排序
        }, {
            field: 'identity',
            width: 100,
            title: '系统标识',
            align: 'center',
            sortable: true
        }, {
            field: 'slug',
            width: 80,
            title: '缩略名',
            align: 'center',
            sortable: true
        }, {
            field: 'remark',
            width: 100,
            title: '备注',
            align: 'center',
            sortable: true
        }, {
            title: '操作',
            align: 'center',
            width: 80,
            formatter: function (value, row, index) { //通过此方法，自定义此列的内容
                var id = row.systemId;
                var detail = "";
                detail += '  ';
                detail += '';
                return detail;
            }
        }
    ],
    cache: true,   /*表缓存*/
    sortable: true,
    sortName: "SYSTEM_NAME",
    sortOrder: "asc",
    clickToSelect: false,
    sidePagination: "server",
    uniqueId: "systemId",
    height: 602,
    /*可以让用户通过拖动调整各个列的列宽，需要其他组件的支持*/
    resizable: false,
    /*是否显示搜索框*/
    search: false,
    /*是否显示刷新按钮*/
    showButtonIconsa: true,
    showRefresh: false,
    /*是否显示视图切换按钮*/
    showToggle: false,
    /*是否显示“显示列控制”按钮，可以调整显示哪些，而不显示哪些*/
    showColumns: false,
    /*设置为true时表格样式为table-striped的样子*/
    striped: true,
    /*如果设置为true，那么表格在多页且有checkbox之类的东西在时，翻页后仍然记住之前选中项*/
    maintainSelected: false,
    /*是否分页*/
    pagination: true,
    paginationLoop: false,
    /*当前页*/
    pageNumber: 1,
    /*每页显示条数*/
    pageSize: 10,
    /*可调整的行数*/
    pageList: [10, 20, 50, 100],
    queryParams: function getParams(params) {
        return {
            page: this.pageNumber,
            rows: params.limit,
            sort: this.sortOrder,
            sidx: this.sortName
        };
    }
});

/*刷新列表*/
function refreshSystemTable(){
    /*获取选中的节点id*/
    var nodes = treeObj.getSelectedNodes();
    let id = nodes[0].id;
    let flag = nodes[0].flag;
    if ("PRJ" === flag) {
        id = null;
    }
    $("#tables").bootstrapTable('refreshOptions', {
        url: 'sysreqanalysis/system/listSystems',
        queryParams : function getParams(params) {
            params.parentId = id;
            params.page = this.pageNumber;
            params.rows = this.pageSize;
            params.sort = this.sortOrder;
            params.sidx = this.sortName;
            return params;
        }
    });
}

ZTree

使用时需要引入三个必要文件：

• jquery
• jquery.ztree.core.js
• zTreeStyle.css

html:

js:

/*zTree树的URL地址*/
var urlZtree = "/sysreqanalysis/system/getZtreeNodeData";
/*获取异步加载URL*/
function getAsyncUrl(treeId, treeNode) {
    return urlZtree;
}
/*zTree配置*/
var setting = {
    check: {
        enable: false
    },
    view: {
    	addDiyDom: addDiyDom,
        dblClickExpand: true,  /*双击节点时，是否自动展开父节点的标识*/
        showLine: true,    /*设置 zTree 是否显示节点之间的连线*/
        nameIsHTML: true,  /*设置 name 属性是否支持 HTML 脚本*/
        selectedMulti: false    /*设置是否允许同时选中多个节点*/
    },
    async: {
        enable: true,   /*开启异步加载模式*/
        contentType: "application/x-www-form-urlencoded",   /*提交参数的数据类型*/
        url: getAsyncUrl,    /*Ajax 获取数据的 URL 地址*/
        autoParam: ["id","pId","name","flag"],  /*异步加载时需要自动提交当前节点属性的参数*/
        dataType: "text",   /*Ajax 获取的数据类型*/
        type: "get",    /*Ajax 的 http 请求模式*/
        dataFilter: null    /*用于对 Ajax 返回数据进行预处理的函数*/
    },
    callback: {
        onClick: zTreeOnClick,      /*用于捕获节点被点击的事件回调函数*/
        onAsyncSuccess: zTreeOnAsyncSuccess     /*用于捕获异步加载正常结束的事件回调函数*/
    },
    data: {
        simpleData: {
            enable: true,   /*是否采用简单数据模式*/
            idKey: "id",    /*节点数据中保存唯一标识的属性名称*/
            pIdKey: "pId"  /*节点数据中保存其父节点唯一标识的属性名称*/
            /*rootPId: null   用于修正根节点父节点数据，即 pIdKey 指定的属性值*/
        }
    }
};

/*节点被点击的事件回调函数*/
function zTreeOnClick(event, treeId, treeNode) {
	$('#systemlist').show();
	//treeObj.expandNode(treeNode, true, true, true);
    /*刷新系统列表 该方法在systemlist.js*/
    refreshSystemTable();
}

function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
}

/*控制节点名称过长*/
function addDiyDom(treeId, treeNode) {
    var spantxt=$("#" + treeNode.tId + "_span").html();
    if(spantxt.length>15){
        spantxt=spantxt.substring(0,15)+"...";
        $("#" + treeNode.tId + "_span").html(spantxt);
    }
}

var treeObj;

var zTreeNode = [
    {id:"pro1",name:"软件工程管理平台",flag:"PRJ",isParent:true}
];
/*在页面加载的时候初始化zTree树*/
$(document).ready(function() {
    /*初始化zTree树*/
    treeObj = $.fn.zTree.init($("#systemTree"), setting, zTreeNode);
    /**
     * getNodeByParam()
     * 根据节点数据的属性搜索，获取条件完全匹配的节点数据 JSON 对象
     * key: treeId 需要精确匹配的属性名称
     * value: pro1 需要精确匹配的属性值
     * return: null 返回值
     */
    let root = treeObj.getNodeByParam("id", "pro1", null);  /*获取根节点*/
    if (treeObj != null) {
        treeObj.expandAll(true);    /*展开/折叠全部节点*/
        treeObj.reAsyncChildNodes(root, "refresh"); /*强行异步加载父节点的子节点*/
    }
});

后台总结

• 命名规范
• 注释规范
• 非空判断
• 增删改方法的返回值

在后台的开发过程中遇到的问题不多，此前开发，知晓与前端对应的接口，明确返回值，现前端与后台需要自己接应，起初难以把控，其实这个问题并不难，重要的是，要清楚的想明白前端需要哪些数据，后台获取这些数据需要哪些参数。对于一些方法，使用统一的返回值，例如增删改的方法。无论结果如何，是需要给前端传递必要的信息过去，这样，当前端拿到数据，才能做出应对。

后台的数据库操作，使用了mybatis的通用Mapper，扩展自定义xml时，遇到了整合（SpringBoot整合tk.mybatis）的问题。后来发现，是因为版本的不匹配。

    tk.mybatis
    mapper
    4.1.5


    tk.mybatis
    mapper-spring-boot-starter

其实大多问题还是因为使用不当造成的，只要认真的阅读api，推敲原理，就会慢慢发现问题的根源，在开发的过程中比较急躁，总是想着要实现某某功能、样式，却忽略了去分析问题。

逻辑问题

添加与刷新树

上代码：

$.ajax({
    type: "POST",
    url: "/sysreqanalysis/system/addSystem",
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify(formObject),
    dataType: "json",
    success: function(data) {  /*成功*/
        if (data.result) {
            $('#addModal').modal('hide');
            $.alert(data.msg);
            /*刷新列表*/
            refreshSystemTable();
            /*刷新树*/
            var nodes = treeObj.getSelectedNodes();
            if (nodes.length>0) {
                if(!nodes[0].isParent) {/*判断选中节点是否为父节点，如果不是，则添加成功后必然其下有子节点，则将其isParent设置为true*/
                    nodes[0].isParent = true;
                }
                treeObj.reAsyncChildNodes(nodes[0], "refresh");
            }
        } else {/*失败*/
            $.alert(data.msg);
        }
    },
    error: function() {  /*异常*/
        $.alert('添加失败！');
    }
});

删除与刷新树

上代码：

/*删除*/
function deleteSystems(ids){
    /*删除所选系统ajax*/
    $.ajax({
        type: "post",
        url: "/sysreqanalysis/system/delete",
        data:[{name:'systemIds',value:ids}],
        success: function(serverAnswer){
        	if(serverAnswer.result) {
                $.alert(serverAnswer.msg);
                /*刷新列表*/
                refreshSystemTable();
                /*刷新树*/
                var nodes = treeObj.getSelectedNodes();/*获取选中的节点*/
                if (nodes.length>0) {
                	treeObj.reAsyncChildNodes(nodes[0], "refresh",false,refreshSuccess);/*刷新选中的节点，成功后执行refreshSuccess*/
                }
        	} else {
        		$.alert(serverAnswer.msg);
        	}
        },
        error:function(){
            $.alert("删除失败！");
        }
    });
}

function refreshSuccess() {
	var nodes = treeObj.getSelectedNodes();/*获取选中的节点*/
	if (nodes.length>0) {
    	if(nodes[0].children.length == 0) {/*判断该节点下是否还有子节点*/
    		nodes[0].isParent = false;/*没有子节点将isParent设置为false*/
    		/*此时节点的样式仍未改变，需要刷新才行。但刷新时因为isParent为false，不会刷新该节点自己*/
    		treeObj.reAsyncChildNodes(nodes[0].getParentNode(), "refresh");/*刷新选择节点的父节点*/
    	}
    }
}