日志：菜鸟开发心得（ 滑块数据更新回滚、模块的显示与隐藏 ）

        准备大学毕业了，现在在一所公司实习，一开始公司会让新手看开发文档，理解需求和业务功能，以及开发的框架等等。等了好久，终于给我分配了一个小任务，需要对某个模块添加显示与隐藏功能，然后在这个模块中添加滑块功能，要求从数据库中取数据，如果修改则改变数据库中对应的字段值。

一开始看要求的时候，觉得这正是太简单了，但是一上手项目，发现这个项目真的是太大太复杂了。我用了半天的时间才将项目一层一层的打包建立起来，主要还是因为这种大型项目的开发经验真的是太少了，突然觉得自己之前写的项目都是依葫芦画瓢的小儿科。项目跑起来之后，我并没有急着去做什么，而是熟悉一下我需要修改的是哪个页面，他们之间的参数调用是怎么走的，这样下来一天就过去了，总体来说还是自己的开发经验太少。

第二天我开始动手写了，又突然发现我不能使用平时自己写的思维来写，要跟着项目的思路走……磨磨蹭蹭的好不容易添加了滑块功能，没错，我出错了，检查了好几次需要添加的代码什么的都加上什么去了，他就是不显示出来，后面浪费我大半天时间我才发现原来是调用的模块单词写错了，我晕~ 

html:
<div id="slider1" value="20">

<script language="javascript">
	layui.use('slider', function(){
		var slider = layui.slider; //获取滑块模块
			slider.render({			//滑块渲染
				elem: '#slider1'  //绑定元素
				,max:40
				,min:0
				,value:$('#slider1').attr("value")          //应取到数据库的值，然后再添加回调函数
				,input:true
			});
	});
</script>

滑块出来了，现在只要把显示隐藏的功能做出来就好了一大半了。看起来很简单，只要调用.hide()和.show()，然后使用标志参数限制就可以了，当实现的时候又发现这样太复杂了。后面发现他点击的是一个CheckBox，点一下添加checked属性值，点一下又没有了，所以只要判断这个checked真假，然后对应的添加.hide()和.show()就可以了。

html:
<div class="col-lg-4" style="text-align:right;">
    <input type="checkbox" title="启用" id="ask" name="ask" lay-filter="ask" <#if book?? && book.ask == true>checked="checked"</#if>>
</div>

<div class="box-item" id="enable_ask" style="<#if book?? && book.ask == false>display:none;</#if>">

<script language="javascript">
	layui.use('form', function(){
		var form = layui.form;
        form.on("checkbox(ask)" , function(data){
			if(data.elem.checked == true){
				$('#enable_ask').show();		
			}else{
				$('#enable_ask').hide();
			}
		});
});
</script>

最后是从数据库中取值出来赋给相应的滑块字段，然后修改之后再对数据库中对应的字段值修改。一开始是想要使用的$.get()，但是后面发现要传送的参数值真的是太复杂了，需要的是对象或者是上一个页面的参数等等……后面我就想能不能像以前一样通过改变某个字段在前端的value值，然后通过form表单的提交过去给后台就好了，这样我们只要修改一两个特定的字段值，不需要在一个刚接手的项目中找出对应的“形参”。但是使用过Layui滑块的同志们都知道，这个滑块标签使用input是不能实现效果的，想要使用input传值，但是又不能出现，所以就想到了隐藏input……

html:
<div id="slider1" value="<#if book??><#if (book.ask??) && (book.ask?trim?length > 0)>${book.ask}<#else>${0}</#if></#if>">
<input id="get_slider1" name="ask" value="<#if book??><#if (book.ask??) && (book.ask?trim?length > 0)>${book.ask}<#else>${0}</#if></#if>" hidden>

<script language="javascript">
	layui.use('slider', function(){
		var slider = layui.slider; //获取滑块模块
			slider.render({			//滑块渲染
				elem: '#slider1'  //绑定元素
				,max:40
				,min:0
				,value:$('#slider1').attr("value")          //应取到数据库的值，然后再添加回调函数
				,input:true
                ,change: function(data){
					$('#get_slider1').val(parseInt(data));
			});
	});
</script>

这个方法还是我同学兼同事告诉我的，别说，这个障眼法真是太好用了，不过不要忘记给input的value一个初始化参数（数据库中的值），否则会出现400错误。出现这个错误的时候我以为是URL不对，看了好久没发现是什么，后面又以为是变量的类型不对，后面排查了好久才发现原来是我没有对input值赋初始值，这样的话没有修改的字段传过去的就是一个空的值，而不是他原来的值，一些方法等会对空变量进行限制，所以会在IDEA控制台没有错误，服务器出现400状态码。

罗里吧嗦说了好多，主要还是自己的开发经验太少，像这种大型的需要一层层打包的更是少之又少，一些很简单很基础的东西学了又忘了，所以说还是要多练手才行。希望以后我也会是元老级的秃头人物……秃头就算了，什么总就好。