django使用vue-resource插件完成列表页与详情页

深藏阁楼爱情的钟 2022-02-22 19:08 338阅读 0赞

vue想要实现异步加载（局部刷新，不会刷新整个界面），需要使用到vue-resource库

vue数据模型定义：js

vue本身不可以和ajax结合使用，vue不可以重复绑定

vue推出了vue-resource来和ajax联合

# 1.vue-resource有两种导入方式 #

第一种是直接在详情页stuDetail.html文件中导入script标签

第二种

可以打开以下网址：

[https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js][https_cdn.staticfile.org_vue-resource_1.5.1_vue-resource.min.js]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dfb3B0aW1pc3RpYw_size_16_color_FFFFFF_t_70][]

复制整段文字，把它保存下来，名字为：vue-resource.min.js

把该文件放在static/js下

![20190409115527776.png][]

在详情页 stuDetail.html写入：

# 2、视图文件 #

两个函数分别是：

控制数据库向前端页面输入内容及页码，也就是控制展示前端分页页面

指向前端要展示的列表页

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({
                    "id":data.id,
                    "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)
     
    def studentList2(request):
        return render(request,''studentList.html',locals())

注意：与之前不同的是，这次一定要记得导入id,因为详情页要通过列表页面中的数据id去跳转

# 3.详情页的views.py #

def studentDetail(request,id):
        """
        学员详情页
        
        """
        id=int(id)
        stu=Student.objects.get(id=id)
        pic=stu.picture.url.replace("media/","")
        return render(request,'studentDetail.html',locals())

# 4.urls.py  路由文件 #

from Student.views import list_student,studentList,studentList2,studentDetail
    urlpatterns=[
        path('list_student/',list_student),
        path('studentLiist/',studentList),
        re_path(r'stuDetail/(?P<id>\d+)/',studentDetail),
    ]

写好了后端界面，现在开始写前端界面

# 5.列表页  student\_v2.html #

使用vue-resurce插件，实现局部刷新功能

绑定数据

数据渲染

{%  verbatim myblock %} 
     
                  <div id="bindData">
                      <table class="table table-bordered" style="text-align: center;">
                        <thead>
                            <tr>
                               <th>姓名</th>
                               <th>性别</th>
                               <th>年龄</th>
                               <th>班级</th>
                               <th>专业</th>
                               <th>管理</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="s in page_data">
                                <td v-on:click="getDetail(s.id)">{
       { s.name }}</td>
                                <td>{
       { s.gender }}</td>
                                <td>{
       { s.age }}</td>
                                <td>
                                    <input type="text" v-bind:value="s.classes">
                                </td>
                                <td>{
       { s.grade }}</td>
                                <td>
                                    <button class="btn btn-primary">修改</button>
                                    <button class="btn btn-warning">详情</button>
                                    <button class="btn btn-danger">删除</button>
     
                                </td>
                            </tr>
                        </tbody>
                      </table>
                      <ul class="pagination" style="float: right;">
                          <li class="paginate_button page-item active" v-for="p in page_range">
                              <a class="page-link" v-on:click="getPage(p)">{
       { p }}</a>
                          </li>
                      </ul>
                  </div>
              {% endverbatim myblock %}

# 6.详情页 studentDetail.html #

<div id="bindData">
                      <table class="table table-bordered">
     
                              <tr>
                                  <td rowspan="3">
                                      {% if stu.picture.url %}
                                      <img style="width: 200px;height: 300px;" src="{% static pic %}">
                                      {% else %}
                                          <img style="width: 200px;height: 300px;" src="{% static 'img/03.jpg' %}">
                                      {% endif %}
                                  </td>
     
                                  <th>姓名：</th>
                                  <td>{
       { stu.name }}</td>
                                  <th>性别：</th>
                                  <td>{
       { stu.gender }}</td>
     
                              </tr>
                              <tr>
                                  <th>年龄：</th>
                                  <td>{
       { stu.age }}</td>
                                  <th>班级：</th>
                                  <td>{
       { stu.classes }}</td>
     
                              </tr>
                              <tr>
                                  <th>专业：</th>
                                  <td>{
       { stu.grade }}</td>
                                  <th>电话：</th>
                                  <td>1234567890</td>
                              </tr>
                      </table>
     
     
     
                  </div>

# 7、对应的student\_list.html前端分页文件中的渲染部分 #

<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                      <thead>
                        <tr>
                          <th>id</th>
                          <th>姓名</th>
                          <th>年龄</th>
                          <th>性别</th>
                          <th>专业</th>
                          <th>班级</th>
                          <th>管理</th>
                        </tr>
                      </thead>
                      <tbody>
                      {% for i in data %}
                        <tr>
                          <td>{
       { i.id }}</td>
                          <td>{
       { i.name }}</td>
                          <td>{
       { i.age }}</td>
                          <td>{
       { i.gender }}</td>
                          <td>{
       { i.grade }}</td>
                          <td>{
       { i.classes }}</td>
                          <td>
                        <button class="button-warning">提交</button>
                        <button class="button-primary">查看</button>
                        <button class="button-success">删除</button>
                          </td>
                        </tr>
                      {% endfor %}
    
                      </tbody>
                    </table>
                  <ul class="pagination">
                      {% for page in page_range %}
                          <li class="paginate_button page-item active">
                          {% ifequal page data.num %}
                              <a href="/Student/list_studenteds/?page={
       { page }}"class="page-link" disabled> {
       { page }}</a>
                              {% else %}
                               <a href="/Student/list_studenteds/?page={
       { page }}"class="page-link" > {
       { page }}</a>
                          {% endifequal %}
                          </li>
                      {% endfor %}
                  </ul>

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70][]

点击姓名跳转到详情页：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70 1][]

点击页码第五页展示相关数据：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70 2][]

# 8、整个过程的分析 #

（1）首先我们在浏览器输入[http://127.0.0.1:8000/Student/studentList/][http_127.0.0.1_8000_Student_studentList]

（2）服务器接收到请求，在urls中要调用视图文件 urls.py 中的 studentList函数

（3）studentList函数把请求响应到studentList.html，这个界面从数据库中提取出数据，并且调用写好的分页策略，将内容展示在该界面上

（4）点击列表页中table中学员的名字，会通过学员的id去匹配路由，跳转到/stuDetail/id号

（5）服务器接收到此路由，urls.py中调用studentDetail函数

（6）studentDetail函数，获取到学员id以及学员的信息，将请求响应给studentDetail.html页面

（7）点击页码展示对应页码内容时，会通过页码绑定的点击事件，通过路由调用list\_student函数，实现分页展示。

[https_cdn.staticfile.org_vue-resource_1.5.1_vue-resource.min.js]: https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dfb3B0aW1pc3RpYw_size_16_color_FFFFFF_t_70]: /images/20220222/1bc46eb9b7984bf99aa5d1bafe2fd2af.png
[20190409115527776.png]: /images/20220222/179c60ed9fb148e0bef93bb9c37e718d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70]: /images/20220222/85f87841a36f469e99799e10c0f07f64.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70 1]: /images/20220222/1ef03fdf2f2a4c199ced871f94513678.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70 2]: /images/20220222/e898ee3577e64d6d8448954cf46029eb.png
[http_127.0.0.1_8000_Student_studentList]: http://127.0.0.1:8000/Student/studentList/