ホームページ > バックエンド開発 > Python チュートリアル > Python 開発 [Django]: 結合検索、JSONP、XSS フィルタリング

Python 開発 [Django]: 結合検索、JSONP、XSS フィルタリング

高洛峰
リリース: 2017-02-22 10:37:52
オリジナル
2015 人が閲覧しました

1. 簡単な実装

関連ファイル:

from django.conf.urls import url
from . import views

urlpatterns = [
    url(r'^index.html/$',views.index),
    url(r'^article/(?P<article_type>\d+)-(?P<category>\d+).html/$',views.article)
]

url.py
ログイン後にコピー
rreee

データベース構造:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .condition a{
            display:inline-block;
            padding: 3px 5px;
            border: 1px solid black;
        }
        .condition a.active{
            background-color: brown;
        }
    </style>
</head>
<body>
    <h2>过滤条件</h2>


    <div>
        {% if kwargs.article_type == 0 %}
            <a href="/article/0-{{ kwargs.category }}.html">全部</a>
        {% else %}
            <a href="/article/0-{{ kwargs.category }}.html">全部</a>
        {% endif %}

        {% for row in article_type %}
            {% if row.id == kwargs.article_type %}
                <a href="/article/{{ row.id }}-{{ kwargs.category }}.html">{{ row.caption }}</a>
            {% else %}
                <a  href="/article/{{ row.id }}-{{ kwargs.category }}.html">{{ row.caption }}</a>
            {% endif %}
        {% endfor %}
    </div>

    <div>
        {% if kwargs.category == 0 %}
            <a href="/article/{{ kwargs.article_type }}-0.html">全部</a>
        {% else %}
            <a href="/article/{{ kwargs.article_type }}-0.html">全部</a>
        {% endif %}

        {% for row in category %}
            {% if row.id == kwargs.category %}
                <a href="/article/{{ kwargs.article_type }}-{{ row.id }}.html">{{ row.caption }}</a>
            {% else %}
                <a href="/article/{{ kwargs.article_type }}-{{ row.id }}.html">{{ row.caption }}</a>
            {% endif %}
        {% endfor %}
    </div>

    <h2>查询结果</h2>
    <ul>
    {% for row in articles %}
        <li>{{ row.id }}-{{ row.title }}------[{{ row.article_type.caption }}]-[{{ row.category.caption }}]</li>
    {% endfor %}
    </ul>
</body>
</html>

article.html
ログイン後にコピー

処理ファイル:

from django.db import models
 
# Create your models here.
 
class Categoery(models.Model):
    caption = models.CharField(max_length=16)
 
class ArticleType(models.Model):
    caption = models.CharField(max_length=16)
 
class Article(models.Model):
 
    title = models.CharField(max_length=32)
    content = models.CharField(max_length=255)
 
    category = models.ForeignKey(Categoery)
    article_type = models.ForeignKey(ArticleType)
ログイン後にコピー

注: この関数を実装するのに最も重要なことは、最初に内部のアイデアを明確にすることです。 URL アクセス パスの形式は http://127.0.0.1:8000/article/0-0.html です。最初の 0 は、article_type フィールドを表し、2 番目の 0 は、0 の場合、検索を意味します。このフィールドのすべての情報を確認します。これが成功への最初のステップであり、検索処理でファイルを処理します。2 番目のキー ポイントは、関連する検索用の辞書 search_dict を生成することです。これが 0 の場合は、3 番目のキーをすべて検索することを意味します。ポイントも非常に賢い方法で、パラメーター kwargs をフロントエンドに再度渡します。なんと天才的なことでしょう。

2. 別の試み (メモリチューニングのロード)

ArticleType タイプはブログの固定データなので、後で変更されないように、クエリを高速化するためにデータをメモリにロードできます

from . import  models
def article(request,*args,**kwargs):
 
    search_dict = {}
    for key,value in kwargs.items():
        kwargs[key] = int(value)        # 把字符类型转化为int类型 方便前端做if a == b  这样的比较
        if value !='0':
            search_dict[key] = value
    articles = models.Article.objects.filter(**search_dict) # 字典为空时表示搜索所有
 
    article_type = models.ArticleType.objects.all()
    category = models.Categoery.objects.all()
 
    return render(request,'article.html',{'articles':articles,
                                          'article_type':article_type,
                                         'category':category ,
                                          'kwargs':kwargs})
ログイン後にコピー
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .condition a{
            display:inline-block;
            padding: 3px 5px;
            border: 1px solid black;
        }
        .condition a.active{
            background-color: brown;
        }
    </style>
</head>
<body>
    <h2>过滤条件</h2>

    <div>
        {% if kwargs.article_type_id == 0 %}
            <a href="/article/0-{{ kwargs.category_id }}.html">全部</a>
        {% else %}
            <a href="/article/0-{{ kwargs.category_id }}.html">全部</a>
        {% endif %}

        {% for row in article_type%}
            {% if row.0 == kwargs.article_type_id %}
                <a href="/article/{{ row.0 }}-{{ kwargs.category_id }}.html">{{ row.1 }}</a>
            {% else %}
                <a  href="/article/{{ row.0 }}-{{ kwargs.category_id }}.html">{{ row.1 }}</a>
            {% endif %}
        {% endfor %}
    </div>

    <div>
        {% if kwargs.category_id == 0 %}
            <a href="/article/{{ kwargs.article_type_id }}-0.html">全部</a>
        {% else %}
            <a href="/article/{{ kwargs.article_type_id }}-0.html">全部</a>
        {% endif %}

        {% for row in category %}
            {% if row.id == kwargs.category_id %}
                <a href="/article/{{ kwargs.article_type_id }}-{{ row.id }}.html">{{ row.caption }}</a>
            {% else %}
                <a href="/article/{{ kwargs.article_type_id }}-{{ row.id }}.html">{{ row.caption }}</a>
            {% endif %}
        {% endfor %}
    </div>

    <h2>查询结果</h2>
    <ul>
    {% for row in articles %}
        <li>{{ row.id }}-{{ row.title }}------[{{ row.article_type }}]-[{{ row.category.caption }}]</li>
    {% endfor %}
    </ul>
</body>
</html>

article.html
ログイン後にコピー

データベース。ファイル:

from django.shortcuts import render
from django.shortcuts import HttpResponse

# Create your views here.

def index(request):


    return HttpResponse('Ok')


from . import  models
def article(request,*args,**kwargs):

    search_dict = {}
    for key,value in kwargs.items():
        kwargs[key] = int(value)        # 把字符类型转化为int类型 方便前端做if a == b  这样的比较
        if value !='0':
            search_dict[key] = value
    print(kwargs)
    articles = models.Article.objects.filter(**search_dict) # 字典为空时表示搜索所有

    article_type = models.Article.type_choice

    print(article_type)
    category = models.Categoery.objects.all()

    return render(request,'article.html',{'articles':articles,
                                          'article_type':article_type,
                                         'category':category ,
                                          'kwargs':kwargs})

处理文件.py
ログイン後にコピー

3. simple_tag を使用してコードを最適化します

関連ファイル:

from django.db import models
# Create your models here.
class Categoery(models.Model):
    caption = models.CharField(max_length=16)
 
# class ArticleType(models.Model):
#     caption = models.CharField(max_length=16)
 
class Article(models.Model):
    title = models.CharField(max_length=32)
    content = models.CharField(max_length=255)
 
    category = models.ForeignKey(Categoery)
    # article_type = models.ForeignKey(ArticleType)
    type_choice  = [
        (1,'Python'),
        (2,'Linux'),
        (3,'大数据'),
        (4,'架构'),
    ]
    article_type_id = models.IntegerField(choices=type_choice)
ログイン後にコピー
from django.db import models
# Create your models here.
class Categoery(models.Model):
    caption = models.CharField(max_length=16)

class ArticleType(models.Model):
    caption = models.CharField(max_length=16)

class Article(models.Model):
    title = models.CharField(max_length=32)
    content = models.CharField(max_length=255)

    category = models.ForeignKey(Categoery)
    article_type = models.ForeignKey(ArticleType)
    # type_choice  = [
    #     (1,'Python'),
    #     (2,'Linux'),
    #     (3,'大数据'),
    #     (4,'架构'),
    # ]
    # article_type_id = models.IntegerField(choices=type_choice)

数据库文件.py
ログイン後にコピー
from django.shortcuts import render
from django.shortcuts import HttpResponse

# Create your views here.

def index(request):


    return HttpResponse('Ok')


from . import models
def article(request, *args, **kwargs):
    search_dict = {}
    for key, value in kwargs.items():
        kwargs[key] = int(value)  # 把字符类型转化为int类型 方便前端做if a == b  这样的比较
        if value != '0':
            search_dict[key] = value
    articles = models.Article.objects.filter(**search_dict)  # 字典为空时表示搜索所有

    article_type = models.ArticleType.objects.all()

    print(article_type)
    category = models.Categoery.objects.all()


    return render(request, 'article.html', {'articles': articles,
                                            'article_type': article_type,
                                            'category': category,
                                            'kwargs': kwargs})

处理文件.py
ログイン後にコピー

templatetags ディレクトリを作成し、そのディレクトリに filter.py ファイルを作成します:

{% load filter %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .condition a{
            display:inline-block;
            padding: 3px 5px;
            border: 1px solid black;
        }
        .condition a.active{
            background-color: brown;
        }
    </style>
</head>
<body>
    <h2>过滤条件</h2>
    <div>
        {% filter_all  kwargs 'article_type'%}

        {% filter_single article_type kwargs 'article_type'%}
    </div>
    <div>
        {% filter_all  kwargs 'category'%}
        {% filter_single category kwargs 'category'%}
    </div>

    <h2>查询结果</h2>
    <ul>
    {% for row in articles %}
        <li>{{ row.id }}-{{ row.title }}------[{{ row.article_type.caption }}]-[{{ row.category.caption }}]</li>
    {% endfor %}
    </ul>
</body>
</html>

article.html
ログイン後にコピー

HTML ファイルのメインコンテンツ:

from django import template
from django.utils.safestring import mark_safe
register = template.Library()
 
@register.simple_tag
def filter_all(kwargs,type_str):
    print(type_str)
    if type_str == 'article_type':
        if kwargs['article_type'] == 0:
            tmp = '<a href = "/article/0-%s.html" class ="active" > 全部 </a>'%(kwargs['category'])
        else:
            tmp = '<a href = "/article/0-%s.html"> 全部 </a>'%(kwargs['category'])
 
    elif type_str == 'category':
        if kwargs['category'] == 0:
            tmp = '<a href = "/article/%s-0.html" class ="active" > 全部 </a>' % (kwargs['article_type'])
        else:
            tmp = '<a href = "/article/%s-0.html"> 全部 </a>' % (kwargs['article_type'])
 
    return mark_safe(tmp)
 
@register.simple_tag()
def filter_single(type_obj,kwargs,type_str):
 
    print(type_str)
    tmp = ''
    if type_str == 'article_type':
        for row in type_obj:
            if row.id == kwargs['article_type']:
                tag = '<a class="active" href="/article/%s-%s.html">%s</a>\n'%(row.id,kwargs['category'],row.caption)
            else:
                tag = '<a href="/article/%s-%s.html">%s</a>\n' % (row.id, kwargs['category'],row.caption)
            tmp +=tag
    elif type_str == 'category':
        for row in type_obj:
            if row.id == kwargs['category']:
                tag = '<a class="active" href="/article/%s-%s.html">%s</a>\n' % (kwargs['article_type'],row.id, row.caption)
            else:
                tag = '<a href="/article/%s-%s.html">%s</a>\n' % (kwargs['article_type'], row.id, row.caption)
            tmp += tag
 
    return mark_safe(tmp)
ログイン後にコピー

JSONP

JSONP (JSON with Padding) は、主流ブラウザによるクロスドメイン データ アクセスの問題を解決するために使用できる JSON の「使用パターン」です。同一オリジン ポリシーにより、一般に、server1.example.com にある Web ページは、HTML の <script> 要素を除き、server1.example.com 以外のサーバーと通信できません。 <script> 要素のこのオープン ポリシーを使用すると、Web ページは他のソースから動的に生成された JSON データを取得できます。この使用パターンは JSONP と呼ばれます。 JSONP でキャプチャされたデータは JSON ではなく、JSON パーサーで解析されるのではなく、JavaScript インタープリターで実行される任意の JavaScript です。 </script>

原則:

- スクリプトタグを作成します

- src = リモートアドレス

- 返されるデータは js 形式である必要があります

- GET リクエストのみを送信できます

1. 同一生成元ポリシーとは何ですか?

処理ファイル:

{% load filter %}
<body>
    <h2>过滤条件</h2>
    <div class="condition">
        {% filter_all  kwargs 'article_type'%}
 
        {% filter_single article_type kwargs 'article_type'%}
    </div>
    <div class="condition">
        {% filter_all  kwargs 'category'%}
        {% filter_single category kwargs 'category'%}
    </div>
 
    <h2>查询结果</h2>
    <ul>
    {% for row in articles %}
        <li>{{ row.id }}-{{ row.title }}------[{{ row.article_type.caption }}]-[{{ row.category.caption }}]</li>
    {% endfor %}
    </ul>
</body>
ログイン後にコピー

HTML ファイル:

import requests
def jsonp(request):
    # 获取url信息
    response = requests.get(&#39;http://weatherapi.market.xiaomi.com/wtr-v2/weather?cityId=101121301&#39;)
    response.encoding = &#39;utf-8&#39;     # 进行编码
 
    return render(request,&#39;jsonp.html&#39;,{&#39;result&#39;:response.text})  # response.text 请求内容
ログイン後にコピー

注: js をクリックして結果を直接取得すると、ブラウザは http://127.0.0.1:8000 から送信された情報のみを受け入れるため、次のエラー メッセージが表示されます。 、天気予報 Web サイトから送信された情報が直接ブロックされます。これを解決する方法はありますか。

<body>
    <h1>后台获取的结果</h1>
    {{ result }}
    <h1>js直接获取结果</h1>
    <input type="button" value="获取数据" onclick="getContent();" />
    <div id="container"></div>
    <script src="/static/jquery-1.8.2.js"></script>
    <script>
        function getContent() {
            var xhr = new XMLHttpRequest();         // 创建对象
            xhr.open(&#39;GET&#39;, &#39;http://weatherapi.market.xiaomi.com/wtr-v2/weather?cityId=101121301&#39;); // GET方式打开
            xhr.onreadystatechange = function () {  // 收到返回值时执行
                console.log(xhr.responseText);
            };
            xhr.send()  // 发送
        }
    </script>
</body>
ログイン後にコピー

2. scriptタグのsrc属性を上手に使おう

scriptタグは同一オリジンポリシーの影響を受けない

処理ファイル:

XMLHttpRequest cannot load http://weatherapi.market.xiaomi.com/wtr-v2/weather?cityId=101121301. No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource. Origin &#39;http://127.0.0.1:8000&#39; is therefore not allowed access.
ログイン後にコピー

HTMLファイル:

import requests
def jsonp(request):
    # 获取url信息
    response = requests.get(&#39;http://weatherapi.market.xiaomi.com/wtr-v2/weather?cityId=101121301&#39;)
    response.encoding = &#39;utf-8&#39;     # 进行编码
 
    return render(request,&#39;jsonp.html&#39;,{&#39;result&#39;:response.text})  # response.text 请求内容
 
def jsonp_api(request):
    return HttpResponse('alert(123)')
ログイン後にコピー

注意:便宜上js をリクエストするとき、リクエストはまだ現在のプログラム URL に対するものです。上記のコードを実行すると、魔法のような状況が発生し、スクリプトが情報を正常に取得したことを示す 123 の情報が表示されます

3. フロントエンドとバックエンドを少し変更して、使用法をより動的にします

処理ファイル:

<body>
    <h1>后台获取的结果</h1>
    {{ result }}
    <h1>js直接获取结果</h1>
    <input type="button" value="获取数据" onclick="getContent();" />
    <div id="container"></div>
    <script>
        function getContent() {
            var tag = document.createElement(&#39;script&#39;);
            tag.src = &#39;/jsonp_api.html&#39;;
            document.head.appendChild(tag);
         //   document.head.removeChild(tag);
        }
    </script>
</body>
ログイン後にコピー

HTML ファイル:

def jsonp(request):
 
    return render(request,&#39;jsonp.html&#39;)  # response.text 请求内容
 
def jsonp_api(request):
    func = request.GET.get(&#39;callback&#39;)  # 获取用户callback参数
    content = &#39;%s(10000)&#39;%func          # 执行func(10000)函数
 
    return HttpResponse(content)
ログイン後にコピー

注: js リクエストを送信するときは、コールバック パラメーターを取得し、それに対応するメソッドを定義します。バックグラウンドはこのメソッドにデータを渡して実行します。印刷やポップアップ ボックスの場合は、ユーザー自身のニーズに応じて、jsonp の実装プロセスが上記のコードの実装になります。 4. サンプルアプリケーション + ajax

処理ファイル:

<body>
    <h1>后台获取的结果</h1>
    {{ result }}
    <h1>js直接获取结果</h1>
    <input type="button" value="获取数据" onclick="getContent();" />
    <div id="container"></div>
    <script>
        function getContent() {
            var tag = document.createElement(&#39;script&#39;);
            tag.src = &#39;/jsonp_api.html?callback=list&#39;;  // 自定义callback参数,与后台达成默契
            document.head.appendChild(tag);
         //   document.head.removeChild(tag);
        }
        function list(arg){         // 自定义函数与callback=list相对应
               alert(arg);
            }
    </script>
</body>
ログイン後にコピー

HTML ファイル:

import requests
def jsonp(request):
    response = requests.get(&#39;http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403&#39;)
    response.encoding = &#39;utf-8&#39;  # 进行编码
 
    return render(request, &#39;jsonp.html&#39;, {&#39;result&#39;: response.text})  # response.text 请求内容
ログイン後にコピー
<body>
    <h1>后台获取的结果</h1>
    {{ result }}
    <h1>js直接获取结果</h1>
    <input type="button" value="获取数据" onclick="getContent();" />
    <div id="container"></div>
    <script src="/static/jquery-1.8.2.js"></script>
    <script>
        function getContent() {
            $.ajax({
                url: &#39;http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403&#39;,
                type: &#39;POST&#39;,
                dataType: &#39;jsonp&#39;,     // 即使写的type是POST也是按照GET请求发送
                jsonp: &#39;callback&#39;,
                jsonpCallback: &#39;list&#39;
            });
        }
 
        function list(arg){         // 自定义函数与callback=list相对应
            console.log(arg);
            var data = arg[&#39;data&#39;];
            for(k in data){
                var tr = document.createElement(&#39;td&#39;);
                var week = data[k][&#39;week&#39;];
                var list = data[k][&#39;list&#39;];
                tr.textContent =week
                document.body.appendChild(tr);
                console.log(week);
                for(i in list){
                    var name = list[i][&#39;name&#39;];
                    console.log(name)
        }}}
    </script>
</body>
ログイン後にコピー

注: 実装済み 処理はNo.3さんが書いたコードと全く同じです。スクリプトも作成して削除しています

詳細 Python 開発 [Django]: 結合検索、JSONP、XSS フィルタリング関連記事、PHP 中国語 Web サイトにご注意ください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート