在后端采用ThinkPHP5框架做数据查询。
protected $hidden = [
'img_id'
];
public function img(){
return $this->belongsTo('Image', 'img_id', 'id');
}
public static function getPage($page){
$result = self::with(['img'])->page($page, 2)->select();
return $result;
}
这里是设计了 性别，用户名，评价内容，评分，img_id 等6个字段。
img_id是关联 Image（图片） 模型的。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>分页</title>
<style>
li{
list-style: none;
float: left;
border: 1px solid #09c;
width: 80px;
height: 40px;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.item{
width: 40px;
}
.active{
color: red;
}
input{
width: 30px;
}
.last{
width: 120px;
}
button {
margin-left: 20px;
width: 50px;
height: 40px;
}
</style>
</head>
<body>
<div id="app">
<div class="content">
<div class='fen' v-for='item of pageContent'>
{{item.eval}}
</div>
</div>
<ul>
<li @click="home">首页</li>
<li @click="prev">上一页</li>
<li v-for="item of pages" class="item" :class="{active: current === item}" @click="active(item)">
{{item}}
</li>
<li @click="next">下一页</li>
<li @click="trailer">尾页</li>
<li>共 {{count}} 页</li>
<li class="last">跳转 <input type="text" v-model="much"> 页</li>
</ul>
<button @click="goPage">确定</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
count: 10,
current: 1,
much: '',
content: [],
pageContent: [],
flag: true
},
created () {
this._getData();
},
methods: {
active (item) {
this.current = item;
},
prev (){
this.current > 1 && this.current--
},
next () {
this.current < this.count && this.current++
},
home () {
this.current = 1
},
trailer () {
this.current = this.count
},
goPage () {
let num = parseInt(this.much);
if (num >= 1 && num <= this.count) {
this.current = num;
} else if (num > this.count) {
this.current = this.count;
} else {
this.current = 1;
}
},
_getData () {
// 这里其实用forEach来遍历并不是太好，后续我会再进行改进
this.content.forEach(item => {
if (item.key === this.current) {
this.flag = false;
}
})
if (!this.flag) {
this.flag = true;
return
}
this.$http.get(`http://z.cn/api/v1/page?page=${this.current}`).then(res => {
// 保存为 [{key:'',data:''} {key:'', data:''}] 的形式
this.content.push({
key: this.current,
data:res.data
});
})
}
},
computed: {
pages () {
let left = 1
let right = this.count
let arr = []
if (this.count >= 5) {
if (this.current > 3 && this.current <= this.count - 2){
left = this.current - 2
right = this.current + 2
} else {
if (this.current <= 3){
left = 1
right = 5
} else {
right = this.count
left = this.count - 4
}
}
}
while (left <= right) {
arr.push(left)
left++
}
return arr
},
},
watch: {
current () {
this._getData();
},
content () {
this.content.forEach(item => {
if (item.key === this.current) {
this.pageContent = item.data
}
})
}
}
})
</script>
</body>
</html>效果如下：
