$Preface
第一次尝试在Django框架下做tools development,源于一次机缘巧合的intern。
对于intern,我想以后一定会发一篇博文,好好讲讲这个故事。
没有这次intern的经历,可能对于这样的一个优秀的web framework还仅仅是处于有所耳闻的阶段。
回想刚刚接触编程,还是在大学一年级入学前的那个暑假。
买了一本《21天学通C++》,于是开始闷头苦干。刚开始的时候,都不知道用什么编译器,满心欢喜安装了VS之后,发现不会新建工程,这个问题直到大二那时学C++伊始都没有解决,真是人生一大败笔。遂放弃VS,上网好不容易找到了一个十分奇怪的编译器,有点像Python IDE的感觉。
大学一年级第一学期学了python,自认为学得好不错,至少能写点简单的程序了。
大学二年级第二学期电类工程导论C课上,重新捡起python,迷迷糊糊地用了web.py,只是照着模板死板的该代码,都不知道原理。实现了一个searching engine。
大学三年级第一学期和其他两个小伙伴准备为交大吃吃写点什么。当初已经决定用Django+nodejs,不过借我们服务器的老大不允许,结果只好作罢,老老实实写PHP,不过第一次体验MVC的开发过程,学习了CodeIgniter框架。
故事说到这里终于讲到重点了。千里寻他千百度,{"那人": "Django"}却在灯火灯火阑珊处。
想想过去的一周,debug的时间都比coding的时间要多的多。
归结到底,还是对于Django开发和Jquery使用的不了解。
犯错并不可怕,而怕的是一错再错。犯过的错误记录下来,不犯第二次,也算是一种进步。
这也是我想写这篇文的一个原因。
{Problems set}
好了,说正题。一周的开发过程中,主要遇到了2个问题。
Html/JavaScript前台调用Django后台变量
JavaScript代码执行的顺序
Ajax使用规范
Sols & Feelings
Django给我非常好的印象在于有Block这样一个东西,算是一个特点吧。与includes操作不同,block操作恰好是其逆操作。这给整个开发过程带来了极大的便利,不仅结构清晰而且大大减少了代码冗余。
前台可以通过调用views.py中的function返回得到{{ VARIABLES }},这是前后台数据交互的一种手段。稍不注意,就悲剧了,直接上代码。
# WRONG CODE
<script>
$(document).ready(function(){
if (!$("input[name='alert_switch']").prop("checked")) {
$("#message").html("<font color=red><h3>You have not enabled Alert yet.</h3></font>");
$("input[name='alert_switch']").prop("checked", "false");
$("input[name='trigger_times']").prop("disabled", true);
$("input[name='alert_interval']").prop("disabled", true);
$("#alert_settings").hide();
}
else {
$("#message").html("<font color=green><h3>You have enabled Alert.</h3></font>");
$("input[name='trigger_times']").val({{ trigger_times }});
$("input[name='alert_interval']").val({{ alert_interval }}/60.0);
$("#trigger_times_menu li a").click(function(){
trigger_times = $(this).text();
$("input[name='trigger_times']").val(trigger_times);
});
$("#alert_interval_menu li a").click(function(){
alert_interval = $(this).text();
$("input[name='alert_interval']").val(alert_interval);
});
}
});
</script>
起初,不理解javascript的执行机制,以为js是按照逻辑,顺序执行的。出现了not checked的情况下,进入了else语句,显示{{ trigger_times }}和{{ alert_interval }}不存在,连undefined都不是。原来{{ VARIABLES }}在加载HTML的同时,就已经语义化了,而报错不是因为进入了else语句,是因为js编译错误。
解决方法很简单,加上'',即可。
$("input[name='trigger_times']").val('{{ trigger_times }}');
$("input[name='alert_interval']").val('{{ alert_interval }}'/60.0);
上面出现的问题,debug了很久,也没想通问题在哪儿,主要原因就是对于js代码的执行顺序不清楚。
看了别人的blog,才有多了解。用几句话,概括一下。
代码段之间是独立的,全局变量可以共享。
编译只负责提取声明的变量和函数,不负责初始化工作。
详细的教程和demo可以看这里,这篇博客讲的非常的清楚。
使用Ajax无非是为了减轻server的压力,减少页面loading的等待。
结果裸写了一个Ajax,return 200,竟然还毫无作用,success function屁都没执行。
#WRONG CODE
<script>
$(document).ready(function(){
$("#alert_settings").click(function(){
$.ajax({
type: "get",
url: "{% url "alert_settings" %}",
data: "trigger_times="+$("input[name='trigger_times']").val()+"&alert_interval="+$("input[name='alert_interval']").val(),
success: function(ret){
$("input[name='trigger_times']").val(ret.trigger_times);
$("input[name='alert_interval']").val(ret.alert_interval);
}
});
return false;
});
});
</script>
仔细一想,$.ajax与$.get和$.post不同在于它支持error信息的返回。于是加上了error function,TMD,return 200,竟然真的进入error了,当时就吓傻了。
Google一发,和我一样无知的少年果然一大把,是dataType的问题,于是重写,并加入error function方便debug。
<script>
$(document).ready(function(){
$("#alert_settings").click(function(){
$.ajax({
type: "get",
url: "{% url "alert_settings" %}",
data: {"trigger_times": $("input[name='trigger_times']").val(),
"alert_interval": $("input[name='alert_interval']").val()},
dataType: 'text json',
success: function(ret){
$("input[name='trigger_times']").val(ret.trigger_times);
$("input[name='alert_interval']").val(ret.alert_interval);
},
error: function(ret){
alert("error");
}
});
return false;
});
});
</script>