已进行脱敏处理该文中不会涉及公司数据库表结构以及地址
目录
基于SSI项目（spring，strus，ibatis）总结文档以及编程规范
第一章：前端页面编程规范
1.1页面列表搜索框
1.2检验相关:
1.3多选框通过name与value进行选中
1.4 From表单以及请求类型相关:
1.5 Iframe以及父子页面相关:
1.6前端页面优化相关:
1.7 页面跳转相关:
1.8 页面布局
1.9 页面数据处理
1.10 Echars处理相关（详细参考https://echarts.apache.org/index.html）
1.11 树形列表以及树形数据相关（待完善）
第二章：后端代码编程规范
2.1 controller层编码规范
2.2 service层编码规范
2.3 dao层（持久化层）编码规范
2.4 后端代码断点调试
基于海南SSI项目（spring，strus，ibatis）总结文档以及编程规范
第一章：前端页面编程规范
1.1页面列表搜索框
1.1.1时间组件使用规范
进行选择时间限制当前日期以后的日期不可选并且也不可过老最低日期1949-01-01
，第一个时间选择框选过后，第二个时间选择框不可选第一个选择框选择时间之前的时间编程代码如下代码1.1.1和图1.1.1和完成图1.1.1
<@p.textarea name=“deptname” id=“deptname” cols=“50” rows=“3” readonly=“readonly”/>
代码1.1.2
1.2检验相关:
1.2.1.对日期输入框进行大小校验的js
//对日期的搜索条件进行校验
function checkForm(IsCheckDept)
{
IsCheckDept = true;
if(IsCheckDept)
{
var BEGINTIME=$("#BEGINTIME").attr("value");
var ENDTIME=$("#ENDTIME").attr("value");
if(BEGINTIME.length!=0&&ENDTIME.length!=0)
{
//比较时间大小
if(Date.parse(BEGINTIME.replace(/-/g, "/")) > Date.parse(ENDTIME.replace(/-/g, "/")))
{
alert("请输入合理的时间范围!");
$("#ENDTIME").focus();
return false;
}
}
return true;
}
return true;
}
1.2.2.对输入框进行非空校验属性
required=“true”
<@p.text colspan=“1” width=“50” label=“目录分类名称” name=“bean.SORTNAME” vld="{required:true}" required=“true” maxlength=“100”/><@p.tr/>
这个代表目录分类名称这个输入框宽50,label="目录分类名称"代表左边是目录分类名称:
required="true"对输入框进行非空校验,maxlength="100"最大输入长度为100
1.2.3列表中多选框多选校验
1.2.3.1多选以及校验
页面:
<#list datarolelist as col>
<td align="center">${col.rolename}</td>
<td align="center">${col.remark!('')}</td>
<td align="center"><#if col.type == '0'>管理员<#else>自定义</#if></td>
<td align="center"><#if col.reltype == 'XZQH'>行政区划<#else>部门</#if></td>
<td>
<input type="hidden" id="rolename${col.id}" value="${col.rolename!('')}"/>
<input type="hidden" id="remark${col.id}" value="${col.remark!('')}"/>
<input type="hidden" id="type${col.id}" value="${col.type!('')}"/>
</td>
Js
`
$(":checkbox[name=‘Ids’][checked]").each(function(i){
id = $(this).val();
// 取得选中的数据项相关信息
tr = $("#tr"+id);
rolename= $("#rolename" + id).val();
remark= $("#remark"+id).val();
type= $("#type"+id).val();
ids.push(id)
rolenames.push(rolename);
});
1.2.3.2页面输入框js校验
function validate(){
var xyztmc = $("#xyztmc").val();
var lxrdh = $("#lxrdh").val();
var lxryx = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲lxryx").val(); …/;
var regex_mail = /^\w+([.-]?\w+)@\w+([.-]?\w+)(.\w{2,3})+$/;
var xyxfmsnr = $("#xyxfmsnr").val();
if(’’ == $.trim(xyztmc)){
alert(“信用修复主体名称不能为空”);
return false;
}
if(’’ == $.trim(lxrdh)){
alert(“联系人电话不能为空”);
return false;
}else if(!regex_phone.test(lxrdh)){
alert(“联系人电话格式不正确”);
return false;
}
if(’’ != $.trim(lxryx)){
if(!regex_mail.test(lxryx)){
alert(“邮箱格式不正确”);
return false;
}
}
if($.trim(xyxfmsnr) == ‘’){
alert(“信用修复描述不能为空”);
demurralBody = new Array();
return false;
}else{
if(xyxfmsnr.length > 50){
alert(“输入信用修复描述不能超过50个字”);
demurralBody = new Array();
return false;
}
}
}
1.3多选框通过name与value进行选中
https://blog.csdn.net/chenchunlin526/article/details/77448168
https://zhidao.baidu.com/question/629186612617018084.html
1.4 From表单以及请求类型相关:
1.4.1 页面跳转属性
target=“bottomFrame” 代表运行的新界:比如在
<@p.form id=“submitForm” method=“GET” οnsubmit=“javascript:return checkForm(false)” labelWidth=“15” namespace="/admin/cen" action=“ClAct_list” theme=“simple”>
中添加了target=“bottomFrame” 属性则点击提交就会跳转新的界面
1.4.2 表格提交
<@p.form id=“submitForm” method=“GET” οnsubmit=“javascript:return checkForm(false)” labelWidth=“15” namespace="/admin/cen" action=“ClAct_list” theme=“simple”>
其中<@p.form指提交form标签所包含的表格,method="GET"表示get方法,οnsubmit="javascript:return checkForm(false)“表示提交之前要运行的checkForm方法返回值为true才可以提交,namespace=”/admin/cen"代表要发往的区域,action="ClAct_list"代表要发往的详细地址
1.4.3 发送请求
3.1<@p.submit value=“添加数据” οnclick=“this.form.action=‘ClAct_select.do’”/>
发请求到ClAct类的select这个方法中
3.2
if(confirm("您确认要修改数据？")){
var url=encodeURI("${base}/admin/cen/CatalogClassAct_select.do?SORTID="+SORTID+"&isadd = "+false+"&temptempdate="+Date()+"&menuid=${menuid?default('')}");
window.location.href=url;
}
这个是在js脚本中会出现弹窗的形式先提问您确认要修改数据？的悬浮窗,如果是发出请求 其中window.location.href=url;
代表带上初始地址发送的请求:比如别的请求是CatsAct_sect.do 而url地址要带上最初始的地址
1.4.4 Ajax请求
//删除或修改
function _operate(op, id) {
//从隐藏域中拿到userID
var userId =
(
"
i
n
p
u
t
:
h
i
d
d
e
n
[
n
a
m
e
=
′
u
s
e
r
I
d
′
]
"
)
.
v
a
l
(
)
;
v
a
r
t
u
r
l
=
"
("input:hidden[name='userId']").val(); var t_url = "
("input:hidden[name=′userId′]").val();varturl="{base}/admin/Role_getIDByn.do?id="+id;
var jsonflag="";
KaTeX parse error: Expected '}', got 'EOF' at end of input: …里的data是传往后台的参数,(’#Form1’).serialize()为直接提交指定from中所有值
dataType: "json",//请求参数的格式为json.另外还有text等
async: false,//这里默认为false，即异步请求，如果为true就是同步
success: function (jsonRoot) { //请求成功时的回调，这里的jsonRoot是后台返回到前台的值
if (jsonRoot == "false") {
///有帐户关联
jsonflag = "提示：已经有帐户和该角色关联！您确定执行操作吗？";
if (!confirm(jsonflag)) {
return;
}
var url = encodeURI("${base}/admin/" + op + ".do?id=" + id + "&isadd = " + false);
window.location.href = url;
}
if (jsonRoot == "true") {
///没有帐户关联
jsonflag = "您确定执行操作吗？";
if (!confirm(jsonflag)) {
return;
}
var url = encodeURI("${base}/admin/" + op + ".do?id=" + id + "&isadd = " + false);
window.location.href = url;
}
}
});
}
1.4.5 设置定时器
function init(){
setTimeOut(exptree(),1000);
}
页面刚运行时开始加载js中onload中init()方法在init方法中设置一个定时器1000毫秒后调用exptree方法只调用一次
也可以自身调用自身达到无限循环调用的效果代码如下
function init(){
setTimeOut(init(),1000);
}
1.4.6 值的获取与赋值
5.1针对标签id获取值
5.2针对标签id赋值
var fruits = ["Banana", "Orange", "Apple", "Mango"]; var x = fruits.keys();document.getElementById(“demo1”).innerHTML = x.next().value;
5.3赋值
单击按钮来显示时间为字符串。
var d = new Date();
var x = document.getElementById(“demo”);
x.innerHTML=d.toTimeString();
结果
1.4.7 重置
1.<@p.reset />
2.使用表单中的reset按钮
使用jquery的reset记住 要用document.getElementById(“myform”).reset(); 不要用$("#myform").reset();
- 还是用jq 就一个一个选中你要回复的表单内容，然后 $(‘选中的neirong’).val(‘要恢复的内容’);这个要麻烦些，但是胜在可自定义回复内容啊
1.4.8 通过条件进行让输入框不可填
$("#auditlevel").attr(“style”,“display:none”);
1.4.9 简单form传值
<@p.submit value="返回手动同步页面" οnclick="this.form.action='mltbAct_goHandUpdate.do';"/>1.4.10 复杂form传值(待完善)
/其中name="list[1].name"代表from提交后会封装进后台名为list的集合中的name参数中/
<input type="hidden" id = "synid" name ="xyxf.synid" value="${xyxf.synid!}"/> /*其中name="name ="xyxf.synid"代表from提交后会封装进xyxf的实体类的synid参数中"*/
<input type="hidden" id = "isadd" name ="isadd" value="false"/>
<@p.submit value="返回手动同步页面" onclick="this.form.action='mltbAct_goHandUpdate.do';"/>
1.5 Iframe以及父子页面相关:
1.5.1 iframe标签
点击按钮修改第一个 iframe 的 src 值 (索引为 0)。
点我
1.5.2 父子页面传值
最简单的方法，父页面写一个域，然后子页面把数据放到父页面的域里面
父页面、:
子页面方法：
window.opener.document.getElementById(“test”).value=“asd”;
整体的想法就是：（父页面）绑定一个事件，把this传给处理的函数，然后找到可以区分的信息内容，放到页面的一个特定的地方，（子页面）通过parent.找到相对应的内容，然后获取对应的内容即可
具体步骤实现：
父页面
我在需要点击的部分绑定了一个点击事件οnclick=“showIcon(this)”，然后一直索引索引，找到不同的地方var parentnode = node.parentNode.parentNode.parentNode; var index = parentnode.getAttribute(“data-index”);
然后获取自己想要的内容，但是子页面获取值只能通过HTML（我了解的），所以我就在HTML绑定了一个input框，不显示
，然后把对应的内容写到input框里面$("#getIndex").val(index);
子页面
通过parent.$("#getIndex").val();就可以获取父页面的内容。
1.5.3 获取iframe页面中指定的值
参考文章:https://www.jb51.net/article/46851.htm
IE方法：
document.frames[‘myFrame’].document.getElementById(‘test’).value;
火狐方法：
document.getElementById(‘myFrame’).contentWindow.document.getElementById(‘test’).value;
IE、火狐方法：
复制代码代码如下:
function getValue(){
var tmp = '';
if(document.frames){
tmp += 'ie哥说：';
tmp += document.frames['myFrame'].document.getElementById('test').value;
}else{
tmp = document.getElementById('myFrame').contentWindow.document.getElementById('test').value;
}
alert(tmp);
}
示例代码：
a.html页面中的代码
复制代码代码如下:
b.html页面中的代码
复制代码代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
我是 iframe内的页面
</title>
</head>
<body>
<input type='text' id="test" value='欢迎访问：justflyhigh.com'>
</body>
</html>
1.5.4 获取iframe页面中指定的值
1.6前端页面优化相关:
1.6.1 渲染优化（待补充）
Julp.js
1.7 页面跳转相关:
1.7.1 Window跳转
window.location.href = 要跳转的地址;
1.7.2 跳转传值
//查看日志详情
function goHandUpdate(op,synid,isadd) {
var url = encodeURI("${base}/admin/cen/" + op + “.do?synid=” + synid + “&isadd =” + isadd);
window.location.href = url;
}
1.7.3 js脚本返回到上一页
<@p.button value=“返回列表” οnclick=“javascript:history.go(-1);”/>
1.8 页面布局
1.8.1导航头布局
效果图
1.8.2模块化包含布局
效果图
1.9 页面数据处理
1.9.1获取单选框选中的值并进行处理
$(‘input:radio[name=“config.fileType”]:checked’).val()
1.9.2获取多选框选中的值并进行处理
$(":checkbox[name=‘columnIds’][checked]").each(function()
});
1.10 Echars处理相关（详细参考
https://echarts.apache.org/index.html）
什么是Echarts？
Echarts–商业级数据图表
商业级数据图表，它是一个纯JavaScript的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
Echarts支持的图表？
折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）
雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表
echarts和chart对比
echarts的优点：
1.国人开发，文档全，便于开发和阅读文档。
2.图表丰富，可以适用各种各样的功能。
echarts的缺点：
移动端使用略卡，毕竟是PC端的东西，移植到移动端肯定多多少少有些问题吧，或许跟自己水平也有一定的关系，哎怎么说呢。
echarts不失为一款比较适合我们这种码农使用的框架。
echarts就不贴代码了。毕竟文档很全。
chart.js优点：
1.轻量级，min版总大小50多k。
2.移动端使用比较流畅，毕竟小。
chart.js缺点：
1.功能欠缺比较多。
2.中文文档奇缺。
Echarts–必要文件导入
关键文件：
<script type="text/javascript" src="js/echarts.js"></script>
Echarts–图表示例
1 K线图
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '2013年上半年上证指数'
},
tooltip: {
trigger: 'axis',
formatter: function(params) {
var res = params[0].seriesName + ' ' + params[0].name;
res += '<br/> 开盘 : ' + params[0].value[0] + ' 最高 : ' + params[0].value[3];
res += '<br/> 收盘 : ' + params[0].value[1] + ' 最低 : ' + params[0].value[2];
return res;
}
},
legend: {
data: ['上证指数']
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataZoom: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
dataZoom: {
show: true,
realtime: true,
start: 50,
end: 100
},
xAxis: [{
type: 'category',
boundaryGap: true,
axisTick: {
onGap: false
},
splitLine: {
show: false
},
data: [
"2013/1/24", "2013/1/25", "2013/1/28", "2013/1/29", "2013/1/30",
"2013/1/31", "2013/2/1", "2013/2/4", "2013/2/5", "2013/2/6",
"2013/2/7", "2013/2/8", "2013/2/18", "2013/2/19", "2013/2/20",
"2013/2/21", "2013/2/22", "2013/2/25", "2013/2/26", "2013/2/27",
"2013/2/28", "2013/3/1", "2013/3/4", "2013/3/5", "2013/3/6",
"2013/3/7", "2013/3/8", "2013/3/11", "2013/3/12", "2013/3/13",
"2013/3/14", "2013/3/15", "2013/3/18", "2013/3/19", "2013/3/20",
"2013/3/21", "2013/3/22", "2013/3/25", "2013/3/26", "2013/3/27",
"2013/3/28", "2013/3/29", "2013/4/1", "2013/4/2", "2013/4/3",
"2013/4/8", "2013/4/9", "2013/4/10", "2013/4/11", "2013/4/12",
"2013/4/15", "2013/4/16", "2013/4/17", "2013/4/18", "2013/4/19",
"2013/4/22", "2013/4/23", "2013/4/24", "2013/4/25", "2013/4/26",
"2013/5/2", "2013/5/3", "2013/5/6", "2013/5/7", "2013/5/8",
"2013/5/9", "2013/5/10", "2013/5/13", "2013/5/14", "2013/5/15",
"2013/5/16", "2013/5/17", "2013/5/20", "2013/5/21", "2013/5/22",
"2013/5/23", "2013/5/24", "2013/5/27", "2013/5/28", "2013/5/29",
"2013/5/30", "2013/5/31", "2013/6/3", "2013/6/4", "2013/6/5",
"2013/6/6", "2013/6/7", "2013/6/13"
]
}],
yAxis: [{
type: 'value',
scale: true,
boundaryGap: [0.01, 0.01]
}],
series: [{
name: '上证指数',
type: 'k',
data: [ // 开盘，收盘，最低，最高
[2320.26, 2302.6, 2287.3, 2362.94],
[2300, 2291.3, 2288.26, 2308.38],
[2295.35, 2346.5, 2295.35, 2346.92],
[2347.22, 2358.98, 2337.35, 2363.8],
[2360.75, 2382.48, 2347.89, 2383.76],
[2383.43, 2385.42, 2371.23, 2391.82],
[2377.41, 2419.02, 2369.57, 2421.15],
[2425.92, 2428.15, 2417.58, 2440.38],
[2411, 2433.13, 2403.3, 2437.42],
[2432.68, 2434.48, 2427.7, 2441.73],
[2430.69, 2418.53, 2394.22, 2433.89],
[2416.62, 2432.4, 2414.4, 2443.03],
[2441.91, 2421.56, 2415.43, 2444.8],
[2420.26, 2382.91, 2373.53, 2427.07],
[2383.49, 2397.18, 2370.61, 2397.94],
[2378.82, 2325.95, 2309.17, 2378.82],
[2322.94, 2314.16, 2308.76, 2330.88],
[2320.62, 2325.82, 2315.01, 2338.78],
[2313.74, 2293.34, 2289.89, 2340.71],
[2297.77, 2313.22, 2292.03, 2324.63],
[2322.32, 2365.59, 2308.92, 2366.16],
[2364.54, 2359.51, 2330.86, 2369.65],
[2332.08, 2273.4, 2259.25, 2333.54],
[2274.81, 2326.31, 2270.1, 2328.14],
[2333.61, 2347.18, 2321.6, 2351.44],
[2340.44, 2324.29, 2304.27, 2352.02],
[2326.42, 2318.61, 2314.59, 2333.67],
[2314.68, 2310.59, 2296.58, 2320.96],
[2309.16, 2286.6, 2264.83, 2333.29],
[2282.17, 2263.97, 2253.25, 2286.33],
[2255.77, 2270.28, 2253.31, 2276.22],
[2269.31, 2278.4, 2250, 2312.08],
[2267.29, 2240.02, 2239.21, 2276.05],
[2244.26, 2257.43, 2232.02, 2261.31],
[2257.74, 2317.37, 2257.42, 2317.86],
[2318.21, 2324.24, 2311.6, 2330.81],
[2321.4, 2328.28, 2314.97, 2332],
[2334.74, 2326.72, 2319.91, 2344.89],
[2318.58, 2297.67, 2281.12, 2319.99],
[2299.38, 2301.26, 2289, 2323.48],
[2273.55, 2236.3, 2232.91, 2273.55],
[2238.49, 2236.62, 2228.81, 2246.87],
[2229.46, 2234.4, 2227.31, 2243.95],
[2234.9, 2227.74, 2220.44, 2253.42],
[2232.69, 2225.29, 2217.25, 2241.34],
[2196.24, 2211.59, 2180.67, 2212.59],
[2215.47, 2225.77, 2215.47, 2234.73],
[2224.93, 2226.13, 2212.56, 2233.04],
[2236.98, 2219.55, 2217.26, 2242.48],
[2218.09, 2206.78, 2204.44, 2226.26],
[2199.91, 2181.94, 2177.39, 2204.99],
[2169.63, 2194.85, 2165.78, 2196.43],
[2195.03, 2193.8, 2178.47, 2197.51],
[2181.82, 2197.6, 2175.44, 2206.03],
[2201.12, 2244.64, 2200.58, 2250.11],
[2236.4, 2242.17, 2232.26, 2245.12],
[2242.62, 2184.54, 2182.81, 2242.62],
[2187.35, 2218.32, 2184.11, 2226.12],
[2213.19, 2199.31, 2191.85, 2224.63],
[2203.89, 2177.91, 2173.86, 2210.58],
[2170.78, 2174.12, 2161.14, 2179.65],
[2179.05, 2205.5, 2179.05, 2222.81],
[2212.5, 2231.17, 2212.5, 2236.07],
[2227.86, 2235.57, 2219.44, 2240.26],
[2242.39, 2246.3, 2235.42, 2255.21],
[2246.96, 2232.97, 2221.38, 2247.86],
[2228.82, 2246.83, 2225.81, 2247.67],
[2247.68, 2241.92, 2231.36, 2250.85],
[2238.9, 2217.01, 2205.87, 2239.93],
[2217.09, 2224.8, 2213.58, 2225.19],
[2221.34, 2251.81, 2210.77, 2252.87],
[2249.81, 2282.87, 2248.41, 2288.09],
[2286.33, 2299.99, 2281.9, 2309.39],
[2297.11, 2305.11, 2290.12, 2305.3],
[2303.75, 2302.4, 2292.43, 2314.18],
[2293.81, 2275.67, 2274.1, 2304.95],
[2281.45, 2288.53, 2270.25, 2292.59],
[2286.66, 2293.08, 2283.94, 2301.7],
[2293.4, 2321.32, 2281.47, 2322.1],
[2323.54, 2324.02, 2321.17, 2334.33],
[2316.25, 2317.75, 2310.49, 2325.72],
[2320.74, 2300.59, 2299.37, 2325.53],
[2300.21, 2299.25, 2294.11, 2313.43],
[2297.1, 2272.42, 2264.76, 2297.1],
[2270.71, 2270.93, 2260.87, 2276.86],
[2264.43, 2242.11, 2240.07, 2266.69],
[2242.26, 2210.9, 2205.07, 2250.63],
[2190.1, 2148.35, 2126.22, 2190.1]
]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
2饼图
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '某站点用户访问来源', //主标题文本
subtext: '纯属虚构', //副标题文本
x: 'center' //标题水平安放位置
},
// calculable: true, //是否启用拖拽重计算特性，默认关闭
series: [{ //数据内容
name: '访问来源', //系列名称，如启用legend，该值将被legend.data索引相关
type: 'pie', //图表类型，必要参数！
radius: '55%', //半径
center: ['50%', '60%'], //圆心坐标
data: [{ //数据
value: 335,
name: '直接访问'
},
{
value: 310,
name: '邮件营销'
},
{
value: 234,
name: '联盟广告'
},
{
value: 135,
name: '视频广告'
},
{
value: 1548,
name: '搜索引擎'
}
]
}],
tooltip: { //提示框，鼠标悬浮交互时的信息提示
trigger: 'item', //触发类型，默认数据触发，可选值有item和axis
formatter: "{a} <br/>{b} : {c} ({d}%)", //鼠标指上时显示的数据 a（系列名称），b（类目值），c（数值）, d（占总体的百分比）
backgroundColor: 'rgba(0,0,0,0.7)' //提示背景颜色，默认为透明度为0.7的黑色
},
legend: { //图例，每个图表最多仅有一个图例。
orient: 'vertical', //布局方式，默认为水平布局，可选值有horizontal(竖直)和vertical(水平)
x: 'left', //图例水平安放位置，默认为全图居中。可选值有left、right、center
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
toolbox: { //工具箱，每个图表最多仅有一个工具箱。
show: true, //显示策略，可选为：true（显示） | false（隐藏）
feature: { //启用功能
// mark: { //辅助线标志
// show: true
// },
dataView: { //数据视图
show: true,
readOnly: false //readOnly 默认数据视图为只读，可指定readOnly为false打开编辑功能
},
restore: { //还原，复位原始图表 右上角有还原图标
show: true
},
saveAsImage: { //保存图片（IE8-不支持），默认保存类型为png，可以改为jpeg
show: true,
type:'jpeg',
title : '保存为图片'
}
}
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
3柱状图
（1） 准备一个DOM容器
<div style="border:2px solid #666;width:49%;height:450px;float:left" id="chartmain"></div>
（2）后台返回数据
（3）前台JavaScript代码
<script type="text/javascript">
window.onload = function (){
//财务看年度的合同金额echart数据源
$.ajax({
url:'',
type:'post',
datatype:'json',
success : function(data){
var partner = new Array();//公司名
for(var i=0;i<data.length;i++){
partner.push(data[i].partner);
}
var odata=[];
for(var i=0;i<data.length;i++){
var obj={};
obj.name=partner[i];
obj.type='bar';
obj.data=[data[i].qyearOne,data[i].qyearTwo,data[i].qyearThree,data[i].qyearFour,data[i].yearOne,data[i].yearTwo,data[i].yearThree,data[i].yearFour,data[i].hyearOne,data[i].hyearTwo,data[i].hyearThree,data[i].hyearFour];
obj.barWidth=30;//宽度
odata.push(obj);
}
option = {
tooltip : {
trigger: 'axis'
},
legend: {
data:partner
},
toolbox: {
show : true,
},
calculable : true,
xAxis : [{
type : 'category',
data :[qyear+'Q1',qyear+'Q2',qyear+'Q3',qyear+'Q4',year+'Q1',year+'Q2',year+'Q3',year+'Q4',hyear+'Q1',hyear+'Q2',hyear+'Q3',hyear+'Q4']
}],
yAxis : [{
type : 'value'
}],
series : odata //前台组装数据
};
//获取要赋值的DOM控件
var myChart = echarts.init(document.getElementById('chartmain'));
//赋值
myChart.setOption(option);
}
});
</script>
这样一个前后台交互的柱状图就ok了，效果图如下。
1.11 树形列表以及树形数据相关（待完善）
第二章：后端代码编程规范
2.1 controller层编码规范
2.1.1 新建信息类时要重新编译
xyxfZbLeftList = new ArrayList();
2.1.2 每个方法都要用try…catch…包住
try
{
}
catch (Exception e) {
this.addActionError(“出现错误，请联系管理人员！”);
e.printStackTrace();
return ERROR;
}
2.1.3 查询速度过慢的解决方案1 controller层优化（缓存添加）
//把查询数据较长的数据添加进缓存中
ServletActionContext.getServletContext().setAttribute(“1”,list);
//从缓存中获取数据
ServletActionContext.getServletContext().getAttribute(“1”);
//把查询数据较长的数据添加进缓存中1
this.setSessionAttr(“1”,list);
//从缓存中获取数据1
this.getSessionAttr(“1”);
//获取用户信息
User loinguserOld = (User)this.getSessionAttr("_les_user");
2.1.4 查询输入框传值进行查询的值的处理
其中包括不为空判断，防止sql注入处理，去空格.trim()处理。其中该例子中deptid 为前端页面搜索框传过来的值然后进行后端处理
if (!StringUtils.isEmpty(deptid)) {
deptid = StringUtils.FilterSpecialCharacter(deptid);
bean.put(“deptid”, deptid);
}
2.1.5 获取该用户的部门id
pid=Constants.SYSTEMPARAMS_DEFAULTSETUPDEPID;
2.2 service层编码规范
2.3 dao层（持久化层）编码规范
2.3.1 sql语句部分列处理
case…when…then的使用
select count(*) as counts ,
case sjly when ‘1’ then ‘工商登记企业’ when ‘2’ then ‘个体工商户’ end as sjlymc
from t_q where sjly not in (‘3’,‘4’)group by sjly order by sjly
2.3.2 sql语句性能优化
2.3.2.1删除或者修改多条数据的优化（此方法暂时只适用于ibatis）
若在别的代码层只用简单的for循环删除或者修改会进行多次提交，频繁打开和关闭库很浪费性能和时间用以下方式只提交一次可节省大量性能以及时间。
其中<![CDATA[]]> 包含的代码是为了避免特殊符号无法识别如：>,<,>=.<=等
Conjunction 代表每循环一次加一次设置的值，open代表运行之前加设置的值，close代表运行之后加设置的值
2.3.2 sql语句查询
2.3.2.1 查询是否某用户有某表
select count(*) count from dba_tables where owner = ‘CREDIT_DATA’ and table_name = #tablename#
select owner, table_name as tablename from all_tab_comments where owner = #owner# and table_name = #tablename#
2.3.2.2 查询某表是否有某列
select count(1) from all_tab_columns where owner= #owner# and table_name= #tablename# and column_name= #columnname#
2.3.2.3
2.3.3 sql语句创建
2.3.3.1 sql语句创建失败问题
达梦数据库数据导入orcle会有asorcle数据库无法识别所以需要去掉as（创建物化视图）
CREATE MATERIALIZED VIEW ADMIN.MV_MATERIALIZED_ZDRQL REFRESH FORCE ON DEMAND
WITH PRIMARY KEY DISABLE QUERY REWRITE AS
SELECT
t.zdrqlx,
t.XB ,
COUNT(*) AS rs
FROM
credit_grjbxx.t_g AS t
GROUP BY
t.zdrqlx,
t.XB
2.4 后端代码断点调试
若无法打断点重新刷新编译文件再试
136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
