stark組件之顯示頁面搭建（四）

頁面搭建包括第一如何獲取前端傳過來的數據，第二如何在前端渲染出對應標籤。

1、後臺獲取數據並進行處理

在路由系統中，每個路由都對應着一個處理函數，以下所示：

  def wrapper(self, func):  # 將視圖函數加上裝飾器，這樣能夠在處理視圖以前以後均可以加上必定的功能
        @functools.wraps(func)  # 保留原函數的信息
        def inner(request, *args, **kwargs):
            self.request = request  # 將request傳給當前對象，在處理視圖函數以前
            BaseRequestForm(request)
            BaseRequestModelForm(request)
            return func(request, *args, **kwargs)

        return inner

    def get_urls(self):
        urlpatterns = [
            re_path('list/$', self.wrapper(self.changelist_view), name=self.get_list_url_name ),
            re_path('add/$', self.wrapper(self.add_view), name=self.get_add_url_name),
            re_path('(?P<pk>\d+)/change/$', self.wrapper(self.change_view), name=self.get_edit_url_name),
            re_path('(?P<pk>\d+)/del/$', self.wrapper(self.del_view), name=self.get_del_url_name),

        ]
        extra_urls = self.extra_urls()

其中changelist_view()就是處理顯示數據的函數，能夠看到被裝飾器包裹，其主要目的是爲了在執行函數前，加入一些邏輯，列如將request賦值給stark_class，以及賦值給modelform和form，這在以後也是頗有用處的。

在列表頁要顯示的功能目前有搜索，過濾，批量操做，分頁等功能

    order_by = ['-id']
    list_display = []  # 頁面須要展現的字段
    model_form_class = None
    action_list = []
    search_list = []
    list_filter = []
    list_editable= []
    filter_horizontal=[]
    has_add_btn=True

在這裏須要構建一個分過頁的queryset返回給前端進行渲染，在返回的queryset中是已經將search_list，list_filter，order_by過濾後的數據。

search_list條件的構建

...    
search_list=[]

def get_search_list(self):

        return self.search_list

    
  #######處理搜索功能############
def get_search_condition(self):
        search_list = self.get_search_list()
        q = self.request.GET.get('q', '') #前端name爲q
        con = Q()
        con.connector = 'OR'
        for field in search_list:
            con.children.append(('%s__contains' % field, q))
        return search_list, con, q
...

list_filter條件構建

...    
    list_filter = []

    def get_list_filter(self):

        return self.list_filter

    def get_list_filter_condition(self):
        comb_condition = {}
        for option in self.get_list_filter():
            filter_list = self.request.GET.getlist(option.field)
            if filter_list:
                comb_condition["%s__in" % option.field] = filter_list
            """
            {
            title:['a','b'],
            }
            """
        return comb_condition

...

在這裏循環的是option對象，而不是像list_search同樣循環取出字段名，由於，若是單純的在list_filter中放入字段名，那麼向choice字段這樣的數據取出來的就不是須要的數據，就如同下面這樣的。

爲了解決choice顯示的問題，因此不能單純的添加字段，因此能夠加入一些其它參數來解決，在這裏能夠添加對象，將數據封存到對象中，固然字典也是能夠的。

    list_filter = [
        Option('name',),
        Option('status',text_func=lambda x:x[1],is_choice=True)
    ]

class Option(object):
    """
    將傳入的值進行封裝，也就是如今list_filter列表中不是一個個字段而是一個個option對象
    """

    def __init__(self, field, condition=None, is_choice=False, text_func=None, value_func=None, is_multi=False):
        self.field = field  # 傳遞的字段
        if not condition:
            condition = {}
        self.condition = condition  # 傳遞的顯示過濾條件
        self.is_choice = is_choice
        self.text_func = text_func  # 中文
        self.value_func = value_func
        self.is_multi = is_multi  # 是否支持多選搜索

這樣在後臺就能夠獲取到過濾條件的值comb_condition。

order_by條件的構建

    def get_order_by(self):

        return self.order_by

這樣返回給前端的queryse基本就構建完畢了

 queryset = origin_queryset.filter(con).filter(**self.get_list_filter_condition()).order_by(
            *self.get_order_by()).distinct()[page.start:page.end]  # distinct是爲了防止多對多字段中,is_multi=True出項重複數據

其中origin_queryset是預留的鉤子函數，能夠重寫這個方法進行進一步的篩選。

...

    
######獲取queryset對象，根據需求從新此方法進行篩選
    def get_queryset(self,request,*args,**kwargs):
        return self.model_class.objects

    origin_queryset=self.get_queryset(request,*args,**kwargs)

...

2、前端過濾功能url構建

上述過程主要是處理前端傳過來的數據，可是這些傳遞過來的url都是怎麼構建的呢？尤爲是過濾功能，並且搜索過濾等功能都須要在原先url的基礎上進行進一步的篩選，其本質就是url參數的變化，在這裏首先介紹一個知識點就是django的QueryDict的應用。請求中知道request.GET以及request.POST獲得的數據都是QueryDict類型，在urllib中字典形式能夠轉化爲GET形式參數，django中也是可行的。

from urllib.parse import urlencode

url_dict={'name':'fg','age':34}

print(urlencode(url_dict))  #age=34&name=fg

經過一次GET請求，傳入a=1&b=2參數

def query_dict(request):
    query_dict=request.GET
    print(query_dict)#<QueryDict: {'a': ['1'], 'b': ['2']}>
    query_dict.copy()
    query_dict._mutable = True
    query_dict['name']='fg'
    print(query_dict)#<QueryDict: {'a': ['1'], 'name': ['fg'], 'b': ['2']}>
    print(query_dict.urlencode())#a=1&b=2&name=fg
    return HttpResponse('...')

經過這種方式不只能夠構建url而且能夠保留原先的搜索條件

這裏主要說一下list_filter在頁面上url的構建，首先將過濾 的數據從數據庫中取出來，用於做爲過濾條件。

    def list_filter_rows(self):
        #####################組合搜索 能夠經過yield返回一個個的RowQueryset對象#############
        list_filter = self.stark_class.get_list_filter()  # 獲取對象列表['Option()','Option()']
        for option in list_filter:
            _field_obj = self.stark_class.model_class._meta.get_field(option.field)  # 取到每個字段對象
            row_queryset = option.get_queryset(_field_obj, self.stark_class.model_class,
                                               self.stark_class)  # 取到數據庫中對應的一行數據
            yield row_queryset

循環list_filter獲得每個option對象，而且調用option類中get_queryset()方法，注意返回的是每個字段對象對應的一行數據。

    def get_queryset(self, _field_obj, model_class, view_class):

        if isinstance(_field_obj, ForeignKey) or isinstance(_field_obj,ManyToManyField):  # 若是對應字段對象是Foreignkey類型，就取出另外一張表中的數據
            # row_queryset=_field_obj.remote_field.model.objects.filter(**self.condition) #rel若是不行就是用remote_field
            row_queryset = RowQueryset(_field_obj.remote_field.model.objects.filter(**self.condition), self, view_class)  # 傳入self是由於須要用到option中的一些參數text_func
        else:
            if self.is_choice:
                # row_queryset=_field_obj.choices
                row_queryset = RowQueryset(_field_obj.choices, self, view_class)
            else:
                # row_queryset=model_class.objects.filter(**self.condition)
                row_queryset = RowQueryset(model_class.objects.filter(**self.condition), self, view_class)
        return row_queryset

在這裏對每個字段對象進行判斷，ForeignKey、ManyToMany，choice仍是普通的字段。而且將每個字段對象的處理交給RowQueryset類進行處理。這裏知道RoWQueryset類中接收的要不就是queryset的集合要不就是choice的元組對象，其次是option對象以及stark_class.。

class RowQueryset(object):

    def __init__(self, row_queryset, option, view_class):
        """

        :param row_queryset: 封裝的row_queryset的數據
        :param option: 每個option對象
        """
        self.row_queryset = row_queryset
        self.option = option
        self.view_class = view_class  # 這是changeView類，裏面封裝了請求的request對象

    def __iter__(self):  # 爲了循環這個對象，實現iter方法，iter返回的是什麼，頁面顯示的就是什麼

        yield """<div class="whole">"""
        ##################生成所有選項的url############
        total_query_dict = self.view_class.request.GET.copy()  # 深拷貝一份
        total_query_dict._mutable = True
        origin_url_list = self.view_class.request.GET.getlist(self.option.field)  # 獲取全部GET的搜索參數[],['2'],['3']
        if origin_url_list:  # 請求中有值，就將本身字段去掉
            total_query_dict.pop(self.option.field)
            yield """<a href="?%s">所有</a>""" % total_query_dict.urlencode()
        else:
            yield """<a class="active" href="?%s">所有</a>""" % total_query_dict.urlencode()
        yield """</div>"""
        yield """<div class="others">"""

        for obj in self.row_queryset:  # 循環獲得的要不就是queryset中的對象，要不就是元組對象
            query_dict = self.view_class.request.GET.copy()  # 深拷貝一份
            query_dict._mutable = True  # 修改參數
            if not self.option.is_multi:  # 支持單選
                query_dict[self.option.field] = self.option.get_value(obj)  # 獲取數據庫中對應的值
                val = self.option.get_value(obj)  # 從數據庫中取出值與以前請求做比較，看是否加入選中的樣式
                if str(val) in origin_url_list:
                    query_dict.pop(self.option.field)  # 點擊第二次後會移除自身
                    yield '<a class="active" href="?%s">%s</a>' % (
                    query_dict.urlencode(), self.option.get_text(obj))  # 引入text_func是爲了解決choice,元組的問題
                else:
                    yield '<a href="?%s">%s</a>' % (
                    query_dict.urlencode(), self.option.get_text(obj))  # 引入text_func是爲了解決choice,元組的問題
            else:
                multi_value_list = self.view_class.request.GET.getlist(self.option.field)  # 獲取請求的全部搜索參數
                val = self.option.get_value(obj)
                if str(val) in origin_url_list:
                    multi_value_list.remove(str(val))  # 若是請求中已經存在就將其移除
                    query_dict.setlist(self.option.field, multi_value_list)  # 將已經變化的參數從新設置到querydict中
                    yield '<a class="active" href="?%s">%s</a>' % (
                    query_dict.urlencode(), self.option.get_text(obj))  # 引入text_func是爲了解決choice,元組的問題

                else:
                    multi_value_list.append(val)
                    query_dict.setlist(self.option.field, multi_value_list)
                    yield '<a href="?%s">%s</a>' % (
                    query_dict.urlencode(), self.option.get_text(obj))  # 引入text_func是爲了解決choice,元組的問題
        yield """</div>"""

 在前端頁面上只須要循環這個對象就執行內部的__iter__()方法，拿到其執行的結果，從上面的代碼能夠看出來，基本就是從請求中取出參數值與數據庫中取出的值作比較，若是存在就讓前端的顯示加上active選中的樣式，而且將querydict賦值，在這裏支持單選和多選的多選的道理與單選相似，只不過設置querydict的值略有不一樣而已。

        {% for row in cl.list_filter_rows %}<!--前端渲染list_filter-->
            <div class="row">
                {% for obj in row %}
                    {{ obj|safe }}
                    {% endfor %}
            </div>
        {% endfor %}