TP5 + Vue.js 分页效果

在后端采用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(图片) 模型的。


<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>

效果如下:
这里写图片描述

你可能感兴趣的:(vue,js,PHP)