版权声明：本文为博主原创文章，未经博主允许不得转载 https://blog.csdn.net/g_optimistic/article/details/89140927
目录
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 <= 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,'student_v2.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_stu/',list_student),
path('student_list/',studentList),
path('student_list2/',studentList2),
re_path(r'stuDetail/(?P<id>\d+)/',studentDetail),
] 写好了后端界面，现在开始写前端界面
5.列表页 student_v2.html
使用vue-resource插件，实现局部刷新功能
绑定数据
<script>
Vue.use(VueResource);
var vue = new Vue({
el: "#bindData",
data: {
page_data: [],
page_range: [],
},
created: function () {
var url = "/list_stu/";
this.$http.get(url).then(
function (data) {
this.page_data = data["data"]["data"];
this.page_range = data["data"]["page_range"].split(",");
},
function (error) {
console.log(error)
}
)//当前vue对象实例化之后发起get请求，当成功以后执行的函数
},
methods: {
getPage: function (page) {
var url = "/list_stu/?page="+page;
this.$http.get(url).then(
function (data) {
this.page_data = data["data"]["data"];
this.page_range = data["data"]["page_range"].split(",")
},
function (error) {
console.log(error)
}
)
},
getDetail: function (id) {
url = "/stuDetail/"+id+"/";
window.location = url
}
}
});
</script>数据渲染
{% 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.效果
访问列表页
跳转页面
访问详情页
8.整个过程的分析
（1）首先我们在浏览器输入ip:port/student_list2
（2）服务器接收到请求，在urls中要调用视图文件 urls.py 中的 studentList2函数
（3）studentList2函数把请求响应到student_v2.html，这个界面从数据库中提取出数据，并且调用写好的分页策略，将内容展示在该界面上
（4）点击列表页中table中学员的名字，会通过学员的id去匹配路由，跳转到/stuDetail/id号
（5）服务器接收到此路由，urls.py中调用studentDetail函数
（6）studentDetail函数，获取到学员id以及学员的信息，将请求响应给studentDetail.html页面