基于vue和ajax的分页
前后端分离。
查询数据 --> render 传递数据到前端，前后端绑定在了一起。
后端只负责返回数据
前端只负责数据的展示
前端渲染不再使用django的模板系统，而是使用vue框架。
设计模式：组建项目和代码结构的思路。
MVC
M models
V views
C control
MTV
M models
T templates
V views
MVVM
M models
V views
V views
M models
数据双向绑定
将数据（M）通过后端试图（V）传递到前端是试图模型(VM),然后进行数据绑定，当数据发送修 改，自动传递到试图当中
Vue 使用步骤
1、确定绑定数据的范围
2、定义数据
3、调用定义好的数据
常见的vue绑定调用的方法
{% verbatim myblock %} <!--声明使用自定义的变量规则-->
<div id = "bindData">
<p>++++++++++++++++++常规的内容数据绑定+++++++++++++++++++</p>
{{ message }}
<p>++++++++++++++++++常规的属性数据绑定+++++++++++++++++++</p>
<a v-bind:href="cr">{{ message }}</a>
<p>++++++++++++++++++常规的属性数据判断+++++++++++++++++++</p>
<a v-if="see">{{ message }}</a>
<a v-if="seed">{{ message }}</a>
<p>++++++++++++++++++常规的属性数据循环+++++++++++++++++++</p>
<ul>
<li v-for="p in project">{{ p }}</li>
</ul>
<p>++++++++++++++++++常规的属性数据方法+++++++++++++++++++</p>
<a v-on:click="say_hello">{{ message }}</a>
</div>
{% endverbatim myblock %}
Vue数据模型的定义
var app = new Vue({
el:"#bindData",
data: {
message: 'hello world',
cr: 'red',
see: true,
seed: false,
project: ["python","php","linux","java","c"],
},
methods:{
say_hello: function () {
alert("hello world")
}
}
})1、编写返回数据的函数，以json格式进行数据返回
def list_students(request):
if request.method == "GET":
page = request.GET.get("page")
page_size = request.GET.get("page_size")
onece_page = 5
if not page:
page = 1
if not page_size:
page_size = 5
page = int(page)
page_size =int(page_size)
if page % onece_page == 0:
s_n = int(page / onece_page)
r_n = onece_page
else:
s_n = int(page / onece_page) + 1
r_n = page % onece_page
total = Student.objects.all() # 查询所有的数据
select_start = (s_n - 1) * onece_page*page_size
select_end = s_n * onece_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 = range(1, 6)
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,"students_v1.html",locals())3、使用ajax动态请求返回数据的函数的路由，获取数据
$.ajax(
{
url: "/list_students/",
type: "get",
data: "",
success: function (data) {
p_range = data["page_range"].split(",");
var vue = new Vue({
el: "#bindData",
data:{
page_data: data["data"],
page_range: p_range,
},
methods:{
reload:function (page) {
alert(page)
}
}
})
},
error: function (error) {
console.log(error)
}
}
)4、将数据使用vue进行绑定
$.ajax(
{
url: "/list_students/",
type: "get",
data: "",
success: function (data) {
p_range = data["page_range"].split(",");
var vue = new Vue({
el: "#bindData",
data:{
page_data: data["data"],
page_range: p_range,
},
methods:{
reload:function (page) {
alert(page)
}
}
})
},
error: function (error) {
console.log(error)
}
}
)5、进行数据渲染
{% 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>
</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 class="paginate_button page-item active" v-for="p in page_range">
<a class="page-link" v-on:click="reload">{{ p }}</a>
</li>
</ul>
</div>
{% endverbatim myblock %}效果如下
Vue 本身不可以和ajax结合使用，vue不可以重复绑定。
Vue推出了vue-resource来和ajax联合使用。
https://www.bootcdn.cn/vue-resource/
Vue.use(VueResource);
var vue = new Vue({
el: "#bindData",
data: {
page_data: [],
page_range: [],
},
created: function () {
var url = "/list_students/";
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_students/?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)
}
)
}
}
});