開発のsummarize（A）

フロントエンドの概要

フレームワークの使用：

Gentelella
ブートストラップ
ブートストラップ・テーブル
ZTree

ブートストラップ：

3つのファイルが導入されなければなりません。

jquery.js
bootstrap.js
bootstrap.css

Gentelella：

Gentelellaブートストラップ管理インターフェイスは、自由に利用できるテンプレートです。このテンプレートを使用すると、ダッシュボードの管理インターフェイスのテンプレートや背景を作成するためのブートストラップ3のデフォルトのスタイルだけでなく、jQueryのプラグインとの強力なツールセットを使用しています。

使用します。

以下のように、いくつかの基本的なJSとCSSファイルを導入する必要があります。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- Meta, title, CSS, favicons, etc. -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>系统需求分析</title>
        <link rel="icon" href="images/favicon.ico" type="image/ico" />
        <!-- Bootstrap -->
        <link href="gentelella/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
        <!-- 字体图标 -->
        <link href="gentelella/font-awesome/css/font-awesome.css" rel="stylesheet">
        <!-- 进度条 -->
        <link href="gentelella/nprogress/nprogress.css" rel="stylesheet" />
        <!-- 组件美化 -->
        <link href="gentelella/iCheck/skins/flat/flat.css" rel="stylesheet" />
        <!-- 主题 -->
        <link href="gentelella/build/css/custom.css" rel="stylesheet" />    
    </head>
    <body class="nav-md">
        <!-- Jquery 必须放在首位 -->
        <script src="gentelella/jquery/dist/jquery.js"></script>
        <!-- Bootstrap -->
        <script src="gentelella/bootstrap/dist/js/bootstrap.min.js"></script>
        <!-- 使用Glyphicons需引入此js -->
        <script src="gentelella/bootstrap/dist/js/bootstrap.bundle.js"></script>
        <!-- 点击插件 -->
        <script src="gentelella/fastclick/lib/fastclick.js"></script>
        <!-- 进度条 -->
        <script src="gentelella/nprogress/nprogress.js"></script>
        <!-- 日期库 -->
        <script src="gentelella/DateJS/build/date.js"></script>
        <!-- 主题 -->
        <script src="gentelella/build/js/custom.js"></script>
        <!-- 美化 -->
        <script src="gentelella/iCheck/icheck.js"></script>
    </body>
</html>

ブートストラップ・テーブル

導入する必要上のブートストラップのjqueryの導入に基づいて：

ブートストラップtable.js
ブートストラップtable.css

ページに参加するすべての必要性を第一に<table id="table"></table>

いくつかの他の構成は、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 += '<button type="button" class="btn btn-info btn-sm" id="info_btn" onclick="viewSystem(\'' + id + '\')" data-toggle="modal" data-target="#viewModal" title="详情"><span class="glyphicon glyphicon-eye-open"></span></button> &nbsp;';
                detail += '<button type="button" class="btn btn-warning btn-sm" id="edit_btn" onclick="beforeUpdate(\'' + id + '\')" data-toggle="modal" data-target="#updateModal" title="修改"><span class="glyphicon glyphicon-edit"></span></button>';
                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

3を使用する際に必要な書類を導入する必要があります。

jqueryの
jquery.ztree.core.js
zTreeStyle.css

HTML：

<div class="zTreeDemoBackground left">
    <ul id="systemTree" class="ztree"></ul>
</div>

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"); /*强行异步加载父节点的子节点*/
    }
});

背景概要

命名規則
ノート仕様
非空の判決
戻り値CRUD

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

背景データベース操作、共通マッパーMyBatisの使用、カスタムXMLを拡張し、（SpringBoot統合tk.mybatis）を積分問題が発生します。彼らはバージョンが一致していないので、その後、私は、発見しました。

<dependency>
    <groupId>tk.mybatis</groupId>
    <artifactId>mapper</artifactId>
    <version>4.1.5</version>
</dependency>
<dependency>
    <groupId>tk.mybatis</groupId>
    <artifactId>mapper-spring-boot-starter</artifactId>
</dependency>

実際には、不適切な使用により、または限り、慎重な読み取り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");/*刷新选择节点的父节点*/
        }
    }
}