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
}