Django 基于vue和ajax的分页

绝地灬酷狼 2022-02-22 05:18 233阅读 0赞

# 1、基本工作原理： #

前后端分离。

查询数据 --> render 传递数据到前端，前后端绑定在了一起。

后端只负责返回数据

前端只负责数据的展示

前端渲染不再使用django的模板系统，而是使用vue框架。

设计模式：组建项目和代码结构的思路。

MVC

M models

V views

C control

![6785][]

MTV

M models

T templates

V views

![6786][]

MVVM

M models

V views

M models

数据双向绑定

将数据（M）通过后端试图（V）传递到前端是试图模型(VM),然后进行数据绑定，当数据发送修 改，自动传递到试图当中

![6787][]

# 1.编写返回数据的函数，以json的格式进行数据返回 #

视图文件  urls.py

def list_student(request):
        if request.method=='GET':
            page=request.GET.get("page")
            page_size=request.GET.get("page_size")
            once_page=5
            if not page:
                page=1
            if not page_size:
                page_size=once_page
            page=int(page)
            page_size=int(page_size)
            s_n = page / once_page
            if page % once_page == 0:
                s_n = int(page / once_page)
                r_n = once_page
            else:
                s_n = int(page / once_page) + 1
                r_n = page % once_page
            total=Student.objects.all()#查询所有的数据
            select_start = (s_n - 1) * once_page*page_size
            select_end = s_n * once_page*page_size
            select_range = total[select_start:select_end]
            return_start = (r_n - 1) * page_size
            return_end = r_n * page_size
            return_range = select_range[return_start:return_end]
            if page <= 3:
                page_range = [1, 2, 3, 4, 5]
            else:
                page_range = range(page - 2, page + 3)
            return_list=[]
            for data in return_range:
                if data.picture:
                    pic=data.picture.url
                else:
                    pic="None"
                return_list.append({
                    "name":data.name,
                    "gender":data.gender,
                    "age":data.age,
                    "classes":data.classes,
                    "grade":data.grade,
                    "picture":pic,
                })
        result={"data":return_list,"page_range":','.join([str(i) for i in page_range])}
        return JsonResponse(result)

# 2.编写返回页面的函数，将文章的列表页进行返回 #

def studentList(request):
        return render(request,'student_v1.html',locals())

# 3.使用ajax动态请求返回数据的函数的路由，获取数据 #

# 4.将数据使用vue进行绑定 #

# 5.进行数据渲染 #

{% verbatim myblock %}
                  <div id="bindData">
                      <table class="table table-bordered">
                          <thead>
                          <tr>
                              <th>姓名</th>
                              <th>性别</th>
                              <th>年龄</th>
                              <th>班级</th>
                              <th>专业</th>
                          </tr>
                          </thead>
                          <tbody>
                          <tr v-for="s in page_data">
                              <td>{
       { s.name }}</td>
                              <td>{
       { s.gender }}</td>
                              <td>{
       { s.age }}</td>
                              <td>{
       { s.classes }}</td>
                              <td>{
       { s.grade }}</td>
     
                          </tr>
                          </tbody>
                      </table>
                      <ul class="pagination" style="float:right;">
                          <li v-for="p in page_range" class="paginate_button page-item active">
                              <a v-on:click="reload" class="page-link">{
       { p }}</a>
                          </li>
                      </ul>
                  </div>
              {% endverbatim myblock %}

# 6.启动服务器 #

输入 [http://127.0.0.1:8000/studentList/][http_127.0.0.1_8000_studentList]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70][]

[6785]: /images/20220222/c3f721a6b0264a3a87024ac5e8c5b883.png
[6786]: /images/20220222/da4a8912746945eab4c7742ea974b516.png
[6787]: /images/20220222/c516b07f6dc84fdba7559d951293a195.png
[http_127.0.0.1_8000_studentList]: http://127.0.0.1:8000/studentList/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70]: /images/20220222/1bf07ce92134455a84abe058648315f8.png