Django-梦猪自助多功能平台-购物车显示篇(二)/js控制动态显示商品分类及排序,注册实时验证(主JS代码)
一、新建market相关的路由,带参数时用括号括起参数(?P<typrid>\d+)
url(r'^market/', views.market, name='market'), url(r'^marketwithparams/(?P<typeid>\d+)/(?P<childcid>\d+)/(?P<order_rule>\d+)/', views.market_with_params, name='market_with_params'),
二、处理views函数,访问market的时候自动建立data数据,带上typeid,childid,order_rule三个参数重定向
def market(request): return redirect(reverse('mz:market_with_params', kwargs={ 'typeid': 104749, 'childcid': 0, 'order_rule': 0, }))
为了增加函数可读性, 在处理marketwithparams页面的时候需要判断一些逻辑, 这些逻辑我们编辑成views_conf文件进行存储,方便后续维护
ALL_TYPE = "0" # ORDER_RULE ORDER_TOTAL = "0" ORDER_PRICE_UP = "1" ORDER_PRICE_DOWN = "2" ORDER_SALE_UP = "3" ORDER_SALE_DOWN = "4"
也就是对typeid 和order_rule传进来的时候进行判断
def market_with_params(request, typeid, childcid, order_rule): foodtypes = FoodType.objects.all() goods_list = Goods.objects.filter(categoryid=typeid) if childcid == ALL_TYPE: # 是0就显示全部,不进步一筛选 pass else: # 不是0的话再继续查询childcid符合的商品 goods_list = goods_list.filter(childcid=childcid) if order_rule == ORDER_TOTAL: pass elif order_rule == ORDER_PRICE_UP: goods_list = goods_list.order_by("price") elif order_rule == ORDER_PRICE_DOWN: goods_list = goods_list.order_by("-price") elif order_rule == ORDER_SALE_UP: goods_list = goods_list.order_by("productnum") elif order_rule == ORDER_SALE_DOWN: goods_list = goods_list.order_by("-productnum") print(typeid) foodtypes_childtypes = foodtypes.get(typeid=typeid).childtypenames.split('#') print(foodtypes_childtypes) for each_index, each_types in enumerate(foodtypes_childtypes): foodtypes_childtypes[each_index] = each_types.split(':') print(foodtypes_childtypes) order_rule_list = [ ['综合排序', ORDER_TOTAL], ['价格升序', ORDER_PRICE_UP], ['价格降序', ORDER_PRICE_DOWN], ['销量升序', ORDER_SALE_UP], ['销量降序', ORDER_SALE_DOWN], ] data = { 'title': '闪购', 'foodtypes': foodtypes, 'goods_list': goods_list, 'typeid': int(typeid), 'foodtypes_childtypes': foodtypes_childtypes, 'childcid': childcid, 'order_rule_list': order_rule_list, 'order_rule_params': order_rule, } return render(request, 'main/market.html', context=data)
以上, 根据访问页面时get过来的参数,生成data数据返回给模板页面. 在模板页面进行渲染
例如:
{# 左边的大类型导航 #}
<aside>
<ul>
{% for foodtype in foodtypes %}
<li>
<a href="{% url 'mz:market_with_params' typeid=foodtype.typeid childcid=0 order_rule=0 %}">{{ foodtype.typename }}</a>
{% ifequal foodtype.typeid typeid %}
<span class="yellowSlide"></span>
{% endifequal %}
</li>
{% endfor %}
</ul>
</aside>
上面使用了:{% url 'app:url_name' 参数1=param1 参数2=param2 %}的方式进行传参
{% ifequal x y %}
{% endifequal %}
进比较x,y的值, 这个比较要求数据类型和值都相等, 所以后端传过来的时候要做下类型转换. 前端传过去的参数都是str类型的.
三、JS动态部分
js在这里主要控制了点击排列部分的时候, 动态加载下拉菜单 供用户选择类别或者排序规则.
$(function () { $("#all_types").click(function () { console.log("我被点击了"); var $all_types_container = $("#all_types_container"); $all_types_container.show(); var $all_type = $(this); var $span = $all_type.find("span").find("span"); $span.removeClass("glyphicon glyphicon-chevron-down").addClass("glyphicon glyphicon-chevron-up"); var $all_sort_container = $("#all_sort_container"); $all_sort_container.hide(); var $all_sort = $("#all_sort"); var $span_sort = $all_sort.find("span").find("span"); $span_sort.removeClass("glyphicon glyphicon-chevron-up").addClass("glyphicon glyphicon-chevron-down"); }); $("#all_types_container").click(function () { var $all_type_container = $(this); $all_type_container.hide(); var $all_type = $("#all_types"); var $span = $all_type.find("span").find("span"); $span.removeClass("glyphicon glyphicon-chevron-up").addClass("glyphicon glyphicon-chevron-down") }); // 这里定义点击排序的动作，首次点击展开 $("#all_sort").click(function () { console.log("排序也被点击了"); var $all_sort_container = $("#all_sort_container"); $all_sort_container.show(); // 点击后下箭头变成上箭头 var $all_sort = $(this); var $span = $all_sort.find("span").find("span"); $span.removeClass("glyphicon glyphicon-chevron-down").addClass("glyphicon glyphicon-chevron-up"); var $all_type_container = $("#all_types_container"); $all_type_container.hide(); var $all_type = $("#all_types"); var $span_type = $all_type.find("span").find("span"); $span_type.removeClass("glyphicon glyphicon-chevron-up").addClass("glyphicon glyphicon-chevron-down"); }); // 点击模块隐藏 $("#all_sort_container").click(function () { var $all_sort_container = $(this); $all_sort_container.hide(); var $all_sort = $("#all_sort"); var $span = $all_sort.find("span").find("span"); $span.removeClass("glyphicon glyphicon-chevron-up").addClass("glyphicon glyphicon-chevron-down") }); });
里面涉及到的js知识点:
载入网页即加载的函数块:
$(function(){
代码内容
})
-点击id选择器的点击事件:
-$("#id选择器名").click(function(){
// 点击触发的内容,例如本项目中是做了div模块展示
var $all_types_container = $("#all_types_container");
$all_types_container.show();
// 查找某个id元素下面的标签并且改变这个标签的class属性
var $all_type = $(this);
var $span = $all_type.find("span").find("span");
$span.removeClass("glyphicon glyphicon-chevron-down").addClass("glyphicon glyphicon-chevron-up");
})
后端向前端传数据的时候传列表形式的数据, [[type1,1], [type2, 2]] 然后由{% for item in list %}循环取出里面的[type1,1] & [type2, 2] 然后渲染到模板的时候用.方法: 比如 item.0 就是type1, item.1就是1
bootstrap的按钮:class="btn btn-default" 是白色, btn-success是绿色 btn-block是长条按钮
四、本次注册的时候我们使用了form表单,关于form表单需注意:
form表单里面的元素:
-section="{% url 'app:url' %}" 填写提交的地址
-methon='post' 填写提交的方式
- onsubmit="return check()" 设置提交的动作, 可以在js中设置check函数, 函数返回ture的时候才能提交, 判断不成立返回false的时候不能提交
- enctype="multipart/form-data" 提交文件的时候要写这一行, 打成块进行提交 同时在views模块中 要用request.FILES.get() 进行获取
在<form>标签下满第一个就要写上 {% csrf_token %} 避免出现跨域提交失败
注册的JS代码部分
$(function () { console.log("我加载出来了,因为我是页面加载第一个执行的函数") var $username = $("#username_input"); // 对username_input标签进行声明, 用于下面的改变检测,一旦发现变化,就执行判断函数 $username.change(function () { var username = $username.val().trim(); if (username.length) { // 如果长度大于0 将用户名发送给服务器预校验,下面是ajax,传接口地址,传过去的参数, function执行拿回来的data数据 $.getJSON('/mz/checkuser/', {"username": username}, function (data) { console.log(data);
//这里username_info是给了一个span标签,如果===200 那么就给这个标签填充html内容,并且设置css样式. var $username_info = $("#username_info") if (data['status']===200){ $username_info.html("用户名可用").css("color",'green') }else if (data['status']===901){ $username_info.html("用户已存在").css('color','red') } }); } }); }) function check() { var $username = $("#username_input"); var username = $username.val().trim(); if (!username){ return false } // 这里注意,上面通过css设置的color='red'等在判断时并不能直接用, 因为传到前端打印的是rgb格式的. 这一段也可以写成: return info_color != 'rgb(255,0,0)' var info_color = $("#username_info").css("color"); console.log(info_color); if (info_color === 'rgb(255, 0, 0)'){ return false } return true }
