分页介绍与逻辑
由于当前开发的需求当中各种管理平台的增多,各种各样的列表需求逐渐增多,而往往数据量有很多,很难实现也没有必要将所有的数据都罗列到一个前端页面上,用户用不到,也很浪费资源。所以我们有了分页的需求,将数据分页显示。
现在有1000条文章的数据需要展示在我们的计算机上。
1. 可以将1000条分为每10条一页,这样就形成了分页。我们来看一下分页的逻辑:
页码 | 数据 |
1 | 0 - 9 |
2 | 10 - 19 |
3 | 20 - 29 |
...... | ...... |
n | (n-1)*10 - n*10-1 |
那么这种分页,需要我们定义当前页码还有单页数据长度。
2. 这样的分页,每次请求,都需要对1000条数据进行遍历,也许浏览者只需要第20条数据,所以,我们是不是可以在上面的基础上,对使用者进行”欺诈”呢?
分页码 | 页码 | 数据 |
0 - 29 | 1 | 0 - 9 |
2 | 10 - 19 | |
3 | 20 - 29 | |
30 - 59 | 4 | 30 - 39 |
5 | 40 - 49 | |
6 | 50 - 59 |
这种逻辑,当用户请求数据,先不去查询所有数据,而是查询前30条数据,然后,对这30条数据进行分页,如果有人查询到第4页,我们就接着加载。
到这里,分页的逻辑并没有结束,还需要想明白前端除了分页的数据,还需要什么:
- 分页的数据
- 当前的页面 用来搭建上一页和下一页
- 页码的序列
Vue介绍
上面我们了解了基本的分页,我们今天主要用ajax+vue实现分页的动态加载。当然在这里先需要给大家介绍一下我们的vue.js, 是一套构建用户界面的渐进式框架。只关注视图层的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
MVC (Model – View - Control)模式
MTV (Model – Template - Views)模式
Vue.js采用的是MVVM(ModelView-viewModel)
强调前端的双向绑定逻辑
通俗的讲,vue.js可以将我们从后端传递过来的json数据传递到HTML当中,进行动态的更新。
首先可以从vue的官网(https://vuejs.org/)上下载vue的脚本,在这里,我们使用已经下载好的文件,将他们放入static下面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejsExample</title>
<script src = "/static/js/jquery.js"></script>
<script src = "/static/js/vue.min.js"></script>
</head>
<body>
<h1>
这个是我们vuejs的测试页面
</h1>
<!--vue 绑定和Django的jinja2模板系统使用的标签是一样的,为了区分我们需要用verbatim将vue的标签包围起来-->
{% verbatim myblock %}
<div id = "vueExample">
<p> 基本的文本绑定 </p>
<p> hello world I am {
{ name }}</p>
</div>
{% endverbatim myblock %}
<script>
new Vue( //实例化vue对象
{
el: "#vueExample", //绑定的元素是一个id为vueExample的div
data:{
name: "while, I am so cool"
} //可供绑定的数据设置
}
)
</script>
</body>
</html>
效果如下:
这个是vue最基础的例子,在这里我们要注意一下几个点:
{% verbatim myblock %}
<div id = "vueExample">
<p> 基本的文本绑定:</p>
<p> hello world I am {
{ name }}</p>
</div>
{% endverbatim myblock %}
vue对象在HTML当中调用,在js当中进行数据的声明,其中有一些固定的点和结构需要记忆。首先需要声明vue对象,指定绑定的HTML标签,选择器是jq选择器,这里用#veuExample来绑定。具体的数据都放在一个data的地方
{% verbatim myblock %}
<div id = "vueExample">
<p> 基本的文本绑定:</p>
<p> hello world I am {
{ name }}</p>
</div>
{% endverbatim myblock %}
<script>
new Vue(
{
el: "#vueExample", //绑定的对象
data: { //绑定的具体数据
name : "while"
}
}
)
</script>
上面是一个最简单的文本绑定的例子,我们接下来再看几种绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejsExample</title>
<script src = "/static/js/jquery.js"></script>
<script src = "/static/js/vue.min.js"></script>
</head>
<body>
<h1>
这个是我们vuejs的测试页面
</h1>
<!--vue 绑定和Django的jinja2模板系统使用的标签是一样的,为了区分我们需要用verbatim将vue的标签包围起来-->
{% verbatim myblock %}
<div id = "vueExample">
<p> 基本的循环绑定 </p>
<p v-for = "p in project"> hello world I like {
{ p }}</p> <!--关注循环体-->
</div>
{% endverbatim myblock %}
<script>
new Vue( //实例化vue对象
{
el: "#vueE