后端语言是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 %}
使用教程
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);