后端语言是python 。。。
django模板基础上
使用教程
1.为模板布局(base.html)
{% block banner %}
<hr/>
{% endblock %}
<div class="container">
{% block container %}
{% endblock %}
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
2.导入页面(例如:home.html)
{% extends "base.html" %}
写html
{% block container %}
{% endblock %}
写js
{% block js %}
{% endblock %}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
3.模板语句
1 - 相当于ng-if
{% ifequal item.maintain_type 'china' %}
版本1
{% endifequal %}
{% ifequal item.maintain_type 'china_045' %}
版本2
{% endifequal %}
2 - for循环
{% for group_member in item.maintain_group %}
{{group_member}}
{% endfor %}
3 - if语句
{% if item.remark %}
{{item.remark}}
{% endif %}
4 - 使用指令
{% verbatim %}
{% endverbatim %}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
4.往字符串中嵌入变量值
baseUrl = '{0}/beep/bugevents/{1}/statistic'.format(serverSite, product.product_id);
具体代码如下:
{% extends "base.html" %}
{% block title %}
{{ title|default:"绑定手机" }}
{% endblock %}
{% block container %}
<div class="container">
<div class="logoBlue">
<img src="../../static/img/common_icon.png">
<!-- <img src="../../static/img/icon.png"> -->
</div>
<div class="first-pay padding-inherit">
<ul class="padding-inherit">
<li>
<div class="boder-bottom">
<b>手机号码</b>
<input type="number" name="phone" value="">
</div>
</li>
<li>
<div>
<b>短信验证码</b>
<input type="number" name="code" value="">
<i class="font-22 line"><button id="send" class="font-color-blue">发送验证码</button></i>
</div>
</li>
</ul>
<!-- <p class="distance"><input class="select" name="select" type="checkbox" checked="cheked">我同意<a href="/pay_agreement">《水滴管家线上支付协议》</a></p> -->
<p class="distance"><input class="select" name="select" type="checkbox" checked="cheked">我同意<a href="/pay_agreement">《线上支付协议》</a></p>
</div>
<a id="weui_btn1" href="javascript:;" ><button id="weui_btn" class="weui_btn weui-col-100 bg-blue">立即绑定</button></a>
</div>
<div id="captchaMask">
<div id="verification">
<div class="captchheader">图文验证
<a id="closeBtn" class="iconfont"><img src="/static/img/icon_close.png"></a>
</div>
<div class="content clearFix">
<div class="inputting fl">
<input type="text" id="captchaInput" placeholder="请输入验证码">
</div>
<div class="img fr">
<img id='captchaImg' src="">
<a id="changeImg" href="javascript:;">看不清楚,换一张</a>
</div>
</div>
<div class="captchaBtn">
<a href="javascript:;">确定</a>
</div>
</div>
</div>
{% endblock %}
{% block javascript %}
<script>
(function() {
setSize();
window.onresize = setSize;
function setSize() {
var html = document.documentElement;
var htmlW = html.clientWidth;
html.style.fontSize = htmlW / 7.5 + "px";
}
})(); //
var message = {
"count": '', // 已发送次数
"captcha_img": "", // 验证码图片地址
"token": "" // 本次token
}
//关闭按钮x
$('#closeBtn').bind('click',function () {
$('#captchaMask').css('display','none')
});
$("#send").bind('click', sendCode);
function sendCode() {
var phone = $("input[name='phone']").val();
if (!(/^1[3,5,8,4,7]\d{9}$/).test(phone)) {
alert("手机号格式不正确");
return false;
}
$.ajax({
type: "GET",
url: "/api/v2/account/check_phone_code",
data: {
"phone": phone
},
success: function (res) {
message = res.data;
$('#captchaImg').attr('src', message.captcha_img);
$('#captchaInput').val('');
$('#captchaMask').css('display','block');
},
error: function (xhr) {
if (!xhr.status != 200) {
alert(xhr.responseJSON.msg);
}
}
})
}
//点击图片刷新
$("#changeImg").click(function(){
changeImg()
})
function changeImg() {
var phone = $("input[name='phone']").val();
var curDate = new Date();
curTime = curDate.getTime();
var img_url = '/api/v2/account/refresh_captcha?phone=' + phone + '&token=' + message.token + '&t='+ curTime;
$('#captchaImg').attr('src', img_url);
$('#captchaInput').val('');
}
var timeNum = 60;
$('.captchaBtn').bind('click',setmessage);
function setmessage() {
if ($("#captchaInput").val() == "" ) {
alert("验证码不能为空");
return false;
}
var phone = $("input[name='phone']").val();
$.ajax({
type: "GET",
url: "/api/v2/account/send_verify_code",
data: {
"phone": phone,
'token':message.token,
'count':message.count,
'captcha':$("#captchaInput").val()
},
success: function (res) {
$('#captchaMask').css('display','none');
$("#send").unbind("click");
timer();//点击确定后 开始倒计时
},
error: function (xhr) {
if (!xhr.status != 200) {
alert(xhr.responseJSON.msg);
}
}
})
}
//倒计时
function timer() {
if (t1) {
clearTimeout(t1)
}
if (timeNum == 1) {
timeNum = 60;
$("#send").text("重新发送");
$("#send").bind("click", sendCode);
return;
} else {
timeNum = timeNum - 1;
$("#send").text(timeNum + "s后重发");
}
var t1 = setTimeout(timer, 1000);
}
//绑定手机
$("#weui_btn").click(function () {
var phone = $("input[name='phone']").val();
var code = $("input[name='code']").val();
if (!(/^1[3,5,8,4,7]\d{9}$/).test(phone)) {
alert("手机号格式不正确");
return;
} else if (code == "") {
alert("验证码不能为空");
return;
}
var data = {
phone: phone,
check_code: code
}
$.showLoading();
$.ajax({
type: "POST",
url: "/bindphone/?current_token={{current_token}}",
data: data,
success: function (data) {
$.hideLoading();
window.location.href = "/user/?current_token={{current_token}}"
},
error: function (data) {
$.hideLoading();
if (data.status != 200) {
alert(data.responseJSON.error);
}
}
})
})
</script>
{% endblock %}