django使用vue-resource插件完成列表页与详情页，实现异步刷新功能

目录

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

2.有关列表页的视图文件内容在此不做相似说明，直接附上代码

3.详情页的views.py

4.urls.py  路由文件

5.列表页  student_v2.html

6.详情页 studentDetail.html

7.效果

8.整个过程的分析

---

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

vue数据模型定义：js

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

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

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

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

<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

第二种

可以打开以下网址：

https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js

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

把该文件放在static/js下

在详情页 stuDetail.html写入：

<script src="{% static 'js/vue-resource.min.js' %}"></script>

2.有关列表页的视图文件内容在此不做相似说明，直接附上代码

views.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 &l