开发总结（一）
开发总结（一）
前端总结
使用的框架：
- Gentelella
- Bootstrap
- Bootstrap-Table
- ZTree
Bootstrap:
必须引入的三个文件：
- jquery.js
- bootstrap.js
- bootstrap.css
Gentelella:
Gentelella 是一个可免费使用的 Bootstrap 管理界面模版。这个模版使用默认的 Bootstrap 3 的样式，还有一系列功能强大的 jQuery 插件和工具，用来帮助你创建管理界面模版或者后台的 Dashboard。
使用：
需要引入一些基本的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>
Bootstrap-Table
在引入jquery与bootstrap的基础上，还需引入：
- bootstrap-table.js
- bootstrap-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> ';
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
使用时需要引入三个必要文件：
- 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"); /*强行异步加载父节点的子节点*/
}
});
后台总结
- 命名规范
- 注释规范
- 非空判断
- 增删改方法的返回值
在后台的开发过程中遇到的问题不多，此前开发，知晓与前端对应的接口，明确返回值，现前端与后台需要自己接应，起初难以把控，其实这个问题并不难，重要的是，要清楚的想明白前端需要哪些数据，后台获取这些数据需要哪些参数。对于一些方法，使用统一的返回值，例如增删改的方法。无论结果如何，是需要给前端传递必要的信息过去，这样，当前端拿到数据，才能做出应对。
后台的数据库操作，使用了mybatis的通用Mapper，扩展自定义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");/*刷新选择节点的父节点*/
}
}
}
