Django MVC concept with MTV Ajax, paging achieve

 MVC concept with MTV

 

 

    MTV and the MVC (understanding)
        MTV model (Django):
            M: model layer (the models.py)
            T: Templates
            V: View layer views
        the MVC model:
            M: model layer (the models.py)
            V: view layer (the views.py)
            C: controller (controller) urls.py
        nature: django of MTV is MVC

 

Ajax

 

 

 Browser to view the method of sending data format Front:

   Browser Right-examination, natwork find the content type field that displays the encoded format of the data is submitted;

 

 The rear end to the front end transmission request by:

  1 browser window to manually enter the URL get request

  href attribute get 2 a request tag

  3 form Form get / post request (get request default)

  4 ajax get / post request

 

 Transmitting the encoded data to the front end to the rear end of the format:

    1 urlencoded  

      A data format: name = iason & password = 666

      Back-end data acquisition: request.POST

      ps: diango urlencoded coded data analyzer will automatically placed in the POST.

    A second formdat

      Encoding format file transfer sheet form

      Back-end data acquisition file formats: request.FILES

      Back-end data acquisition ordinary key-value pairs: request.POST

    3 application

      ajax json format data transmission

      Note: Coding and data formats to be consistent

 

 Ajax

 

 

    Features: asynchronous submit, do not wait to submit data back to return the results to continue to do other things; partial refresh, unlike the form submission form, or button to submit the entire page refresh, ajax is only a partial refresh.

  The basic syntax:

    The front syntax:

$ ( '# D1') the Click (. function () { 
                    $ .ajax ({ 
                        // address submitted 
                        URL: '/ index /' ,
                         // SUBMITTED 
                        type: 'POST' ,
                         // data submitted 
                        data: { 'name': 'Jason', 'password': '123' },
                         // callback 
                        Success: function (Data) {   // Data is submitted asynchronously received results returned 
                            Alert (Data) 
                        } 
})

    Backend syntax:

  

 

  ajax json data transmission

    1 ajax data transmission in the body in the background.

    2 ajax json data transmission, you need to tell the background data transmission is json; contentTyle: 'application / json'

    3 the front end of the data to be serialized into json format: json.stringfly ()

    Background deserialize 4 json ajax obtain data transmission.

front end

<button id="b1"></button>
<script>
    $('#b1').click(function () {
        $.ajax({
            url:"",
            type:'post',
            data:JSON.stringify({'name':'李志','age':18}),
            contentType:'application/json',
            success: function (data) {
                alert(data)
            }
        })
    })
</script>

 

Backstage

def test(request):
    if request.method=='POST':
        data=request.body
        import json
        res=json.loads(data.decode('utf-8'))
        print(res)
        return HttpResponse('传输成功')
    return render(request, 'test.html', locals())

 

 

  ajax file transfer

    The front syntax:

 

    Backend syntax:

 

form ajax form with similarities and differences
            1.form form does not support asynchronous submit partial refresh
            2.form form json format does not support the transmission of data
            3.form form with ajax default encoding format for transmitting data is urlencoded

 

批量插入数据

 

 

    l=[]
    for i in range(10000):
        l.append(models.Book2(name='第%s本书'% i))
    models.Book2.objects.bulk_create(l)

 

 

分页

class Pagination(object):
    def __init__(self, current_page, all_count, per_page_num=2, pager_count=11):
        """
        封装分页相关数据
        :param current_page: 当前页
        :param all_count:    数据库中的数据总条数
        :param per_page_num: 每页显示的数据条数
        :param pager_count:  最多显示的页码个数

        用法:
        queryset = model.objects.all()
        page_obj = Pagination(current_page,all_count)
        page_data = queryset[page_obj.start:page_obj.end]
        获取数据用page_data而不再使用原始的queryset
        获取前端分页样式用page_obj.page_html
        """
        try:
            current_page = int(current_page)
        except Exception as e:
            current_page = 1

        if current_page < 1:
            current_page = 1

        self.current_page = current_page

        self.all_count = all_count
        self.per_page_num = per_page_num

        # 总页码
        all_pager, tmp = divmod(all_count, per_page_num)
        if tmp:
            all_pager += 1
        self.all_pager = all_pager

        self.pager_count = pager_count
        self.pager_count_half = int((pager_count - 1) / 2)

    @property
    def start(self):
        return (self.current_page - 1) * self.per_page_num

    @property
    def end(self):
        return self.current_page * self.per_page_num

    def page_html(self):
        # 如果总页码 < 11个:
        if self.all_pager <= self.pager_count:
            pager_start = 1
            pager_end = self.all_pager + 1
        # 总页码  > 11
        else:
            # 当前页如果<=页面上最多显示11/2个页码
            if self.current_page <= self.pager_count_half:
                pager_start = 1
                pager_end = self.pager_count + 1

            # 当前页大于5
            else:
                # 页码翻到最后
                if (self.current_page + self.pager_count_half) > self.all_pager:
                    pager_end = self.all_pager + 1
                    pager_start = self.all_pager - self.pager_count + 1
                else:
                    pager_start = self.current_page - self.pager_count_half
                    pager_end = self.current_page + self.pager_count_half + 1

        page_html_list = []
        # 添加前面的nav和ul标签
        page_html_list.append('''
                    <nav aria-label='Page navigation>'
                    <ul class='pagination'>
                ''')
        first_page = '<li><a href="?page=%s">首页</a></li>' % (1)
        page_html_list.append(first_page)

        if self.current_page <= 1:
            prev_page = '<li class="disabled"><a href="#">上一页</a></li>'
        else:
            prev_page = '<li><a href="?page=%s">上一页</a></li>' % (self.current_page - 1,)

        page_html_list.append(prev_page)

        for i in range(pager_start, pager_end):
            if i == self.current_page:
                temp = '<li class="active"><a href="?page=%s">%s</a></li>' % (i, i,)
            else:
                temp = '<li><a href="?page=%s">%s</a></li>' % (i, i,)
            page_html_list.append(temp)

        if self.current_page >= self.all_pager:
            next_page = '<li class="disabled"><a href="#">下一页</a></li>'
        else:
            next_page = '<li><a href="?page=%s">下一页</a></li>' % (self.current_page + 1,)
        page_html_list.append(next_page)

        last_page = '<li><a href="?page=%s">尾页</a></li>' % (self.all_pager,)
        page_html_list.append(last_page)
        # 尾部添加标签
        page_html_list.append('''
                                           </nav>
                                           </ul>
                                       ''')
        return ''.join(page_html_list)
View Code

 

前端

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <table class="table table-hover table-bordered table-striped">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>name</th>
                    </tr>
                </thead>
                <tbody>
                    {% for book in page_queryset %} (*********)
                    <tr>
                        <td>{{ book.pk }}</td>
                        <td>{{ book.name }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {{ page_obj.page_html|safe }}  (*************)
        </div>
    </div>
</div>
</body>
</html>

 

后台

def booklist(request):
    book_list = models.Book2.objects.all()
    all_count = book_list.count()
    current_page = request.GET.get('page',1)
    page_obj = my_page.Pagination(current_page=current_page,all_count=all_count)
    page_queryset = book_list[page_obj.start:page_obj.end]
    return render(request,'booklist.html',locals())

 

Guess you like

Origin www.cnblogs.com/guanchao/p/11025773.html