本节涉及：

1.Q搜索在前后端的设计

2.Django中Queryset对象的序列化（由后端扔给前端的数据必然会经过序列化）

3.前端动态地构造表格以便显示（动态创建DOM对象）

思路：

用户通过前端查询数据库内容时，可添加多个搜索框，一个搜索框内可以输入多个条件。同一搜索框内的条件是或OR关系，不同搜索框间是与AND关系。如搜索图书，每条图书信息包括名称、页数、印刷日期、类型，在一个搜索框内可选择搜索书名，以中文逗号分隔即可以书名同时搜索多本图书，同一搜索框内就是OR关系。又可以再添加输入框，这时就可以再添加类型、价格等信息，缩小搜索范围，这些搜索框之间就是AND关系。条件传递给后端后，后端拿到结果，处理后再抛给前端，由前端在页面展示。

代码

数据库信息

class BookType(models.Model):

    caption = models.CharField(max_length=32)

class Book(models.Model):

    name = models.CharField(max_length=32)

    pages = models.IntegerField()

    price = models.DecimalField(max_digits=10, decimal_places=2)

    pubdate = models.DateField()

    # 外键

    book_type = models.ForeignKey(BookType, on_delete=models.CASCADE)

    def __str__(self):

        return "Book Object: %s %sp %s元" % (self.name, self.pages, self.price)

数据库信息

HTML代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="/static/js/jquery-2.1.4.min.js"></script>

    <title>Index页面</title>

</head>

<body>

    <!--搜索框-->

    <div class="condition">

        <div class="item ">

            <!--点击后会添加一个搜索框-->

            <div class='icon' onclick="AddCondition(this);">+</div>

            <div>

                <!--选择不同的搜索条件时，会触发方法-->

                <select onchange="ChangeName(this);">

                    <option value="name">书名</option>

                    <option value="book_type__caption">类型</option>

                    <option value="price">价格</option>

                </select>

            </div>

            <div class="left"><input type="text" name="name"/></div>

        </div>

    </div>

    <div>

        <!--点击触发搜索，向后端传递-->

        <input type="button" onclick="Search();" value="搜索">

    </div>

    <!--展示区-->

    <div class="container">

    </div>

</body>

index.html

JS代码

<script>

    function AddCondition(ths){

        // dom对象转换为jquery对象

        var new_tag = $(ths).parent().clone();

        // 新添加的搜索框的按钮改为减号，定义删除方法

        new_tag.find('.icon').text('-');

        new_tag.find('.icon').attr('onclick','RemoveCondition(this);');

        $(ths).parent().append(new_tag);

    }

    // 新添加的搜索框还可删除

    function RemoveCondition(ths){

        $(ths).parent().remove();

    }

    //

    function ChangeName(tag){

        // 获取搜索条件value属性的值

        var v = $(tag).val();

        // 定义input的name属性

        // 这里主要是为了随着用户选择不同的搜索条件

        // 也向后端传递不同的搜索条件，Q搜索中会用到

        $(tag).parent().next().find('input').attr('name', v);

    }

    function Search(){

        // 获取所有用户输入的内容并提交

        // 将要给后端传递的字典

        var post_data_dict = {};

        // 循环所有的input

        $('.condition input').each(

            function(){

               // 操作jquery对象

               // 获得搜索条件

               var attr_name = $(this).attr('name');

               // 获取用户输入

               var value_list = $(this).val().split('，');

               post_data_dict[attr_name] = value_list;

            }

        );

        // 将要传递的字典序列化

        var post_data_str = JSON.stringify(post_data_dict);

        $.ajax({

            url: '/index/',

            type: 'POST',

            data: {'post_data': post_data_str},

            // 此参数使得后端传来的json会被解析为js对象

            dataType: "json",

            success: function(ret){

                if(ret.status){

                    // 清空展示柜，避免重复显示

                    $('.container').empty();

                    // {'status':true, 'content': [{},{}]}

                    $.each(ret.content, function(useless_key, value_dict){

                        // 有多少条数据就有多少个表

                        // 形式为一表一行n列

                        var table = document.createElement('table');

                        // 每个表有一行数据

                        var tr = document.createElement('tr');

                        // {'name':'xx', 'pages':540}

                        $.each(value_dict, function(key, val){

                            // 书籍信息的每一项内容对应一列 td

                            var td = document.createElement('td');

                            // 为td标签加上class属性，值为其键

                            td.setAttribute('class', key);

                            // 为td标签加上文本， 即其值

                            td.innerText = val;

                            td.setAttribute('width', 100);

                            // 每次创建一个td标签都添加到tr上

                            tr.appendChild(td);

                        });

                        // 将tr标签加入table中

                        table.appendChild(tr);

                        table.setAttribute('border', 1);

                        // 将table加入展示柜中

                        $('.container').append(table);

                    });

                }else{

                    alert(ret.message);

                }

            }

        })

    }

</script>

</html>

JS代码

后端代码（views.py)

from django.shortcuts import render

from django.shortcuts import HttpResponse

from app01 import models

# Create your views here.

# 业务处理逻辑

import json

from decimal import Decimal

from datetime import date

class DecimalDatetimeEncoder(json.JSONEncoder):

    def default(self, o):

        if isinstance(o, Decimal):

            return str(o)

        elif isinstance(o, date):

            return o.strftime('%Y-%m-%d')

        return json.JSONEncoder.default(self, o)

def index(request):

    # 定义要给前端传递的字典

    post_ret_dict = {'status': True, 'content': None}

    if request.method == 'POST':

        try:

            # 获取前端抛来的字符串

            post_data_str = request.POST.get('post_data', None)

            # 反序列化

            post_data_dict = json.loads(post_data_str)

            # post_data_dict: {'name': ['nameA', 'nameB'],'price':[20,30,40] }

            from django.db.models import Q

            # 构造Q搜索

            condition = Q()

            for k, v in post_data_dict.items():

                # 同一搜索框内（同一条件）的输入是OR关系（主关系）

                q = Q()

                q.connector = 'OR'

                for item in v:

                    # 这里的k就是前端传来的name属性的值，也就是搜索条件（子关系）

                    q.children.append((k, item))

                condition.add(q, 'AND')

            # 将Q搜索直接作为filter的条件传入，并再用values方法取到想要的值

            # 这里用book_type__caption双下划线的形式找到外键表的caption域的值

            # 返回值仍是Queryset对象，可通过list转换为列表

            list_ret = list(models.Book.objects.filter(condition).values('name', 'pages', 'price', 'pubdate', 'book_type__caption'))  # QuerySet

            post_ret_dict['content'] = list_ret

        except Exception as e:

            post_ret_dict['status'] = False

        # 最后再序列化要给前端的内容

        # 注意价格是Decimal类型，印刷日期是Datetime类型，这两类都不是python内置类型，无法直接用json.dumps方法序列化

        # 这里可以借助第二个参数，构造一个自定义的解析类，自行处理

        post_ret_str = json.dumps(post_ret_dict, cls=DecimalDatetimeEncoder)

        return HttpResponse(post_ret_str)

        # django提供的序列化方法，但是无法获得外键表的对应值，不能在使用values方法后序列化

        # from django.core.serializers import serialize

        # ret = models.Book.objects.filter(condition)  # QuerySet

        # str_ret = serialize('json', ret)

        # print(str_ret)

        # return HttpResponse(str_ret)

    return render(request, "index.html")

views.py

Django中Q搜索的简单应用的更多相关文章

  1. Django中Q查询及Q()对象

    问题 一般我们在Django程序中查询数据库操作都是在QuerySet里进行进行,例如下面代码: >>> q1 = Entry.objects.filter(headline__st ...

  2. Django中组合搜索功能

    需求分析 很多电商网站中有组合搜索的功能,所谓组合搜索就是网页中组合多个条件,对数据库中进行查询,并且将结果显示在页面中,看个例子吧: 注意红框中的标识,我们可以根据URL来做组合搜索. video- ...

  3. Asp.net 中高亮显示搜索关键字简单方法

    今天用到搜索时的高亮显示,百度了一下,如下面: 1.替换关键字,对字体变色.         public static string ReplaceRed(string strtitle, stri ...

  4. Django 中的缓存问题

    Django 中的缓存问题 简单介绍 ​ 在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑,最后生成用户看到的页面. ​ 当一个网站的用户访问量很大的 ...

  5. 【Django】Django中的模糊查询以及Q对象的简单使用

    Django中的模糊查询: 需要做一个查找的功能,所以需要使用到模糊查询. 使用方法是:字段名加上双下划线跟上contains或者icontains,icontains和contains表示是否区分大 ...

  6. Django中的F和Q函数

    内容简介: 介绍Django中的F和Q作用以及使用方法 一.F介绍 作用:操作数据表中的某列值,F()允许Django在未实际链接数据的情况下具有对数据库字段的值的引用,不用获取对象放在内存中再对字段 ...

  7. Django中的ORM相关操作：F查询，Q查询，事物，ORM执行原生SQL

    一    F查询与Q查询: 1 . F查询: 在上面所有的例子中,我们构造的过滤器都只是将字段值与某个常量做比较.如果我们要对两个字段的值做比较,那该怎么做呢? Django 提供 F() 来做这样的 ...

  8. Django中简单添加HTML、css、js等文件(非正规添加，适合小白)

    Django中简单添加HTML.css.js等文件 首先申明下自己的环境, python版本3.65(亲测3.7版本有毒,没解决掉!) Django版本1.11.15(版本比较成熟,也可以用最新的版本 ...

  9. django 中的聚合和分组 F查询 Q查询 事务cookies和sessions 066

    1 聚合和分组 聚合:对一些数据进行整理分析 进而得到结果(mysql中的聚合函数) 1aggregate(*args,**kwargs) : 通过对QuerySet进行计算 ,返回一个聚合值的字典. ...

随机推荐

  1. MapReduce-FileInputFormat

    在运行 MapReduce 程序时,输入的文件格式包括:基于行的日志文件.二进制格式文件.数据库表等.那么,针对不同的数据类型,MapReduce 是如何读取这些数据? FileInputFormat ...

  2. 类型和原生函数及类型转换（二：终结js类型判断）

    typeof instanceof isArray() Object.prototype.toString.call() DOM对象与DOM集合对象的类型判断 一.typeof typeof是一个一元 ...

  3. [Android] Android 实现类似 今日头条 视频播放列表

    演示实例如下: Talk is cheap. Show me the code 话不多说,代码在这里下载! https://github.com/wukong1688/Android_BaseVide ...

  4. ios打包 上架 了解

    苹果开发者中心  https://developer.apple.com/account 上架收费相关了解 https://www.jianshu.com/p/681f00a561ca ios打包 上 ...

  5. 「WC2018」通道

    没有代码能力... LOJ #2339 Luogu P4220 UOJ #347 题意 给定三棵树$ T1,T2,T3$,求一个点对$ (x,y)$使得$ T1.dist(x,y)+T2.dist(x ...

  6. Window10系统中MongoDB数据库导入数据文件

    首先进入C:\Program Files\MongoDB\Server\4.0\bin>  打开cmd 创建一个空的数据库集合  db.createCollection("myColl ...

  7. 斜率优化dp 的简单入门

    不想写什么详细的讲解了...而且也觉得自己很难写过某大佬(大米饼),于是建议把他的 blog 先看一遍,然后自己加了几道题目以及解析...顺便建议看看算法竞赛(蓝皮书)的 0x5A 斜率优化(P294 ...

  8. Linux下安装VMware Tools（使虚拟机支持文件拖拽）

    如图点击虚拟机找到安装VMware Tools选项,点击后会在虚拟机桌面显示一个光盘,双击进入如下页面: 选择压缩包将其复制放入Home中不带中文的文件夹: 打开终端,输入cd命令进入文件夹,将压缩包 ...

  9. Linux命令行下编辑常用的快捷键

    Linux命令行编辑快捷键: Ctrl+r 然后输入若干字符,开始向上搜索包含该字符的命令,继续按Ctrl+r,搜索上一条匹配的命令,按Ctrl+c或上下键退出. Ctrl+l 清屏 !num 执行命 ...

  10. 【原创】大数据基础之Spark（6）Spark Rdd Sort实现原理

    spark 2.1.1 spark中可以通过RDD.sortBy来对分布式数据进行排序,具体是如何实现的?来看代码: org.apache.spark.rdd.RDD /** * Return thi ...