38.Vue 分页

• 本系列文章为laracasts.com 的系列视频教程——Let's Build A Forum with Laravel and TDD 的学习笔记。若喜欢该系列视频，可去该网站订阅后下载该系列视频， 支持正版 ；
• 视频源码地址：github.com/laracasts/Lets-Build-a-...；
• 本项目为一个 forum（论坛）项目，与本站的第二本实战教程 《Laravel 教程 - Web 开发实战进阶》 类似，可互相参照。

本节说明

• 对应视频教程第 38 小节：Laravel and Vue Pagination

本节内容

首先我们来看一个 Bug：

是的，我们未能在组件中删除选定的回复。修复的方法很简单，我们为每个回复绑定一个独特的id即可：
forum\resources\assets\js\components\Replies.vue

<template>
    <div>
        <div v-for="(reply ,index) in items" :key="reply.id">
            <reply :data="reply" @deleted="remove(index)"></reply>
        </div>

        <new-reply :endpoint="endpoint" @created="add"></new-reply>
    </div>
</template>
.
.

我们再来一次：

我们再来优化一下我们的日期显示。我们利用 Moment.js 插件来进行优化，首先进行安装：

$ npm install moment --save

接着我们在Reply.vue 组件中应用：

<template>
    .
    .
    <h5 class="flex">
        <a :href="'/profiles/'+data.owner.name"
            v-text="data.owner.name">
        </a> said <span v-text="ago"></span>
    </h5>
    .
    .
</template>
<script>
    import Favorite from './Favorite.vue';
    import moment from 'moment';
    .
    .
    computed: {
        ago() {
          return moment(this.data.created_at).fromNow() + '...';
        },
    .
    .
</script>

现在再来看一下页面效果：

好了，现在我们正式开始本节的内容：实现 Vue 分页功能。首先修改视图：
forum\resources\views\threads\show.blade.php

.
.
    <replies @added="repliesCount++" @removed="repliesCount--"></replies>
</div>
.
.

接着修改组件：
forum\resources\assets\js\components\Replies.vue

.
.
<script>
    import Reply from './Reply';
    import NewReply from './NewReply';

    export default {
        components: { Reply,NewReply },

        data() {
            return {
                items:[],
                endpoint: location.pathname+'/replies'
            }
        },

        created() {
          this.fetch();
        },

        methods: {
            fetch() {
              axios.get(this.url)
                  .then(this.refresh);
            },

            refresh(response) {
                // To Do
            },

            add(reply){
                this.items.push(reply);

                this.$emit('added');
            },

            remove(index) {
                this.items.splice(index,1);

                this.$emit('removed');

                flash('Reply has been deleted!');
            }
        }
    }
</script>

我们重新定义了视图和组件，目的是为了实现利用Ajax的方式给回复进行分页。我们在组件中发送了请求，但是我们现在还没有相应的路由。让我们来添加路由：
forum\routes\web.php

.
.
Route::get('threads/{channel}','ThreadsController@index');
Route::get('/threads/{channel}/{thread}/replies','RepliesController@index');
Route::post('/threads/{channel}/{thread}/replies','RepliesController@store');
.
.

我们利用了index()方法来获取当前页话题的数据，但是目前我们的方法还没有定义。在开始编写我们的功能代码之前，让我们按照开发模式，先建立测试：
forum\tests\Feature\ReadThreadsTest.php

    .
    .
    /** @test */
    public function a_user_can_request_all_replies_for_a_given_thread()
    {
        $thread = create('App\Thread');
        create('App\Reply',['thread_id' => $thread->id],2);

        $response = $this->getJson($thread->path() . '/replies')->json();

        dd($response);
    }
}

运行测试：

显示报错，原因是我们利用Auth中间件进行了权限控制：
forum\app\Http\Controllers\RepliesController.php

.
.
class RepliesController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth');
    }
    .
    .

我们的index()不要要登录就能访问，所以我们修改一下：

.
.
class RepliesController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth',['except' => 'index']);
    }
    .
    .

再次测试：

ok，接下来的工作：建立index()方法。
forum\app\Http\Controllers\RepliesController.php

.
.
class RepliesController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth',['except' => 'index']);
    }

    public function index($channelId,Thread $thread)
    {
        return $thread->replies()->paginate(1);
    }
    .
    .

再次运行测试：

既然已经可以看到返回的全部信息，那么我们就可以逐步完善测试：

    .
    .
    /** @test */
    public function a_user_can_request_all_replies_for_a_given_thread()
    {
        $thread = create('App\Thread');
        create('App\Reply',['thread_id' => $thread->id],2);

        $response = $this->getJson($thread->path() . '/replies')->json();

        $this->assertCount(1,$response['data']);
        $this->assertEquals(2,$response['total']);
    }
    .
    .

再次运行测试：

注：为了功能的推进，我们对index()方法只是暂时定义，后面还需要进行修改。

现在我们继续修改Replies.vue组件：
forum\resources\assets\js\components\Replies.vue

        .
        .
        methods: {
            fetch() {
              axios.get(this.url())
                  .then(this.refresh);
            },

            url() {
              return `${location.pathname}/replies`;
            },

            refresh(response) {
                console.log(response);
            },
            .
            .

我们先来看一下response的内容：

接着继续完善组件：
forum\resources\assets\js\components\Replies.vue

.
.
<script>
    import Reply from './Reply';
    import NewReply from './NewReply';

    export default {
        components: { Reply,NewReply },

        data() {
            return {
                dataSet:false,
                items:[],
                endpoint: location.pathname+'/replies'
            }
        },

        created() {
          this.fetch();
        },

        methods: {
            fetch() {
              axios.get(this.url())
                  .then(this.refresh);
            },

            url() {
              return `${location.pathname}/replies`;
            },

            refresh({data}) {
                this.dataSet = data;
                this.items = data.data;
            },
            .
            .
        }
    }
</script>

再次刷新页面：

现在我们已经可以看到回复区域，现在我们可以修改ThreadsController.php：
forum\app\Http\Controllers\ThreadsController.php

    .
    .
    public function show($channel,Thread $thread)
    {
        return view('threads.show',compact('thread'));
    }
    .
    .

按照正常逻辑，下一步我们应该加上分页链接。但是在此之前，我们先来做一些重构：我们将组件的add和remove方法抽取出去。类似于 Trait，我们将add和remove方法放在Collection.js文件中：
forum\resources\assets\js\mixins\Collection.js

export default {
    data() {
        return {
            items: []
        };
    },

    methods: {
        add(item){
            this.items.push(item);

            this.$emit('added');
        },

        remove(index) {
            this.items.splice(index,1);

            this.$emit('removed');

            flash('Reply has been deleted!');
        }
    }
}

然后我们在组件中引入：
forum\resources\assets\js\components\Replies.vue

<template>
    <div>
        <div v-for="(reply ,index) in items" :key="reply.id">
            <reply :data="reply" @deleted="remove(index)"></reply>
        </div>

        <new-reply :endpoint="endpoint" @created="add"></new-reply>
    </div>
</template>

<script>
    import Reply from './Reply';
    import NewReply from './NewReply';
    import collection from '../mixins/Collection';

    export default {
        components: { Reply,NewReply },

        mixins: [collection],

        data() {
            return {
                dataSet:false,
                endpoint: location.pathname+'/replies'
            }
        },

        created() {
          this.fetch();
        },

        methods: {
            fetch() {
              axios.get(this.url())
                  .then(this.refresh);
            },

            url() {
              return `${location.pathname}/replies`;
            },

            refresh({data}) {
                this.dataSet = data;
                this.items = data.data;
            }
        }
    }
</script>

我们来测试一下之前的功能：

让我们继续完成分页功能。我们把分页部分定义成一个可复用的组件，因为在话题显示页面我们也会用到这个组件：
forum\resources\assets\js\components\Paginator.vue

<template>
    <ul class="pagination" v-if="shouldPaginate">
        <li v-show="prevUrl">
            <a href="#" aria-label="Previous" rel="prev" @click.prevent="page--">
                <span aria-hidden="true">« Previous</span>
            </a>
        </li>

        <li v-show="nextUrl">
            <a href="#" aria-label="Next" rel="next" @click.prevent="page++">
                <span aria-hidden="true">Next »</span>
            </a>
        </li>
    </ul>
</template>

<script>
    export default {
        props: ['dataSet'],

        data() {
            return {
                page:1,
                prevUrl:'',
                nextUrl:''
            }
        },

        watch: {
          dataSet() {
              this.page = this.dataSet.current_page;
              this.prevUrl = this.dataSet.prev_page_url;
              this.nextUrl = this.dataSet.next_page_url;
          },

          page() {
              this.broadcast().updateUrl();
          }
        },

        computed: {
            shouldPaginate() {
                return !! this.prevUrl || !! this.nextUrl;
            }
        },

        methods: {
            broadcast() {
                return this.$emit('changed',this.page);
            },

            updateUrl() {
                history.pushState(null,null,'?page=' + this.page);
            }
        }
    }
</script>

在我们的组件中，当shouldPaginate为true时才会显示分页区域。我们给 Previous 按钮赋值为prevUrl，同时绑定了click事件，当该事件触发时，page变量的值减 1；给 Next 按钮赋值nextUrl，同时绑定了click事件，当该事件触发时，page变量的值加 1。

我们利用 侦听器（watch） 来监控dataSet属性，一旦属性值发生变化，我们会给page、prevUrl和nextUrl重新赋值，然后会触发page函数。在该函数中，我们依次执行broadcast和updateUrl：在broadcast中，我们绑定changed事件，以便让父组件监听到，然后进行翻页相关的动作；在updateUrl中，我们将page参数发送给父组件。

接着我们注册该组件：
forum\resources\assets\js\app.js

.
.
Vue.component('flash', require('./components/Flash.vue'));
Vue.component('paginator', require('./components/Paginator.vue'));

Vue.component('thread-view', require('./pages/Thread.vue'));
.
.

接下来我们需要修改父组件，即Replies.vue组件：
forum\resources\assets\js\components\Replies.vue

<template>
    <div>
        <div v-for="(reply ,index) in items" :key="reply.id">
            <reply :data="reply" @deleted="remove(index)"></reply>
        </div>

        <paginator :dataSet="dataSet" @changed="fetch"></paginator>

        <new-reply @created="add"></new-reply>
    </div>
</template>

<script>
    import Reply from './Reply';
    import NewReply from './NewReply';
    import collection from '../mixins/Collection';

    export default {
        components: { Reply,NewReply },

        mixins: [collection],

        data() {
            return { dataSet:false }
        },

        created() {
          this.fetch();
        },

        methods: {
            fetch(page) {
              axios.get(this.url(page)).then(this.refresh);
            },

            url(page) {
                if (! page) {
                    let query = location.search.match(/page=(\d+)/);

                    page = query ? query[1] : 1;
                }

                return `${location.pathname}/replies?page=${page}`;
            },

            refresh({data}) {
                this.dataSet = data;
                this.items = data.data;
            }
        }
    }
</script>

我们取消了为NewReply.vue绑定endpoint属性，所以我们要进行相应修改：
\resources\assets\js\components\NewReply.vue

.
.
<script>
    export default {
        data() {
            return {
                body:'',
            };
        },

        computed: {
            signIn() {
                return window.App.signIn;
            }
        },

        methods: {
            addReply() {
                axios.post(location.pathname + '/replies',{ body:this.body })
                    .then(({data}) => {
                        this.body = '';

                        flash('回复已提交!');

                        this.$emit('created',data);
                    });
            }
        }
    }
</script>

在Replies.vue组件中，我们为Paginator.vue组件绑定了dataSet属性，并且监听changed事件：

<paginator :dataSet="dataSet" @changed="fetch"></paginator>

一旦监听到changed事件，就会触发fetch方法。在fetch方法中，我们根据page参数来获取需要的内容并刷新回复区域。

注意：我们没有给fetch方法传入page参数，所以page会通过以下代码获取：

if (! page) {
let query = location.search.match(/page=(\d+)/);
page = query ? query[1] : 1;
}

而我们在Paginator.vue组件中的updateUrl方法已经更新了正确的page值，所以我们通过以上代码获取到的page值就是我们想要的值。所以url方法会返回正确的url。

目前我们的代码编写告一段落，接下来让我们测试一下成果：

分页功能已经实现，现在可以把回复数设置为 20：
forum\app\Http\Controllers\RepliesController.php

.
.
class RepliesController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth',['except' => 'index']);
    }

    public function index($channelId,Thread $thread)
    {
        return $thread->replies()->paginate(20);
    }
    .
    .

最后，运行一下全部测试：

可以看到我们有几个测试失败了，这是因为我们改变了获取回复的方式，我们将在以后的章节中进行修复。