29. Vue 消息提示

TDD 构建 Laravel 论坛笔记 /

本系列文章为laracasts.com 的系列视频教程——Let's Build A Forum with Laravel and TDD 的学习笔记。若喜欢该系列视频，可去该网站订阅后下载该系列视频， 支持正版 ；

视频源码地址：github.com/laracasts/Lets-Build-a-...；

本项目为一个 forum（论坛）项目，与本站的第二本实战教程《Laravel 教程 - Web 开发实战进阶》类似，可互相参照。

本节说明

对应视频第 29 小节：Flash Messaging With Vue

本节内容

在之前的章节我们已经完成了话题的创建、删除、回复的功能，但是在动作执行成功之后没有消息提示，这样对用户体验不好，本节我们将消息提示显示出来。

安装依赖

我所使用的电脑的操作系统为 Windows 10，采用本站推荐的开发环境部署方案，并且可以科学上网。

注：开发人员很有必要使用 Google，探索墙外自由广阔的世界

我们将使用 Yarn 来安装 npm 依赖。依次执行以下命令：

$  yarn config set registry http://registry.cnpmjs.org
$ yarn install --no-bin-links

接下来打开 pakage.json ，去掉四处 cross-env：

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  .
  .
}

接着运行以下命令即可：

$ npm run watch-poll

或者运行：

$ npm run dev

watch-poll 会在你的终端里持续运行，监控 resources 文件夹下的资源文件是否有发生改变。在watch-poll 命令运行的情况下，一旦资源文件发生变化，Webpack 会自动重新编译。

注意：在后面的课程中，我们需要保证 npm run watch-poll 一直处在执行状态中。

正常运行的界面应类似：
file

注：如果你学习过本站的进阶教程，并且也是 Windows 10 系统，那么你很有可能在安装依赖这一步遭遇过重重困难。不要害怕，因为遭遇的越多，知道的也会越多！相关讨论见问答：[已解决] 安装 Laravel-MIX 百般尝试依... 。

Vue 消息模板

Laravel 自带了一个 Vue 的example.vue文件，我们将其重命名为Flash.vue，并修改组件内容：
forum\resources\assets\js\components\Flash.vue

<template>
    <div class="alert alert-warning alert-flash" role="alert">
        <strong>Success!</strong>{{ body }}
    </div>
 </template>

<script>
    export default {
        props:['message'],
        data(){
            return {
                body : this.message
            }
        }
    };
</script>

<style>
    .alert-flash{
        position: fixed;
        right: 25px;
        bottom: 25px;
    }
</style>

注册组件：
forum\resources\assets\js\app.js


/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

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

const app = new Vue({
    el: '#app'
});

在应用程序中使用组件，你只需要简单的将其放到你的 HTML 模板之中：
forum\resources\views\layouts\app.blade.php

.
.
<div id="app">
    @include('layouts.nav')

    @yield('content')

    <flash message="Tempory message"></flash>
</div>
.
.

注：每次修改 Vue 组件后都应该运行 npm run dev 命令。或者，你可以使用 npm run watch 命令来监控并在每次文件被修改时自动重新编译组件

现在访问页面：
file

Vue 调试工具

vue-devtools 是一款基于 chrome 游览器的插件，用于调试 vue 应用，这可以极大地提高我们的调试效率。从 chrome 商店直接下载安装：
file
安装完成之后可以在调试模式下找到 Vue 调试工具：
file

完善组件

我们在完成动作后将消息存到Session中，然后在页面显示消息，并且在 3 秒消失。这是我们想要达到的效果。我们首先简单为组件加上show属性，再用 vue-devtools 进行调试：
forum\resources\assets\js\components\Flash.vue

<template>
    <div class="alert alert-success alert-flash" role="alert" v-show="show">
        <strong>Success!</strong>{{ body }}
    </div>
 </template>

<script>
    export default {
        props:['message'],
        data(){
            return {
                body : this.message,
                show:false
            }
        }
    };
</script>

<style>
    .alert-flash{
        position: fixed;
        right: 25px;
        bottom: 25px;
    }
</style>

我们设置了show属性为false，所以再次刷新页面，组件会处于不可见状态：
file
再打开 Chrome 浏览器开发者工具栏的 Vue 调试工具，点击Flash赋予变量：
file
再在控制台输入以下代码，设置组件可见：

$vm0.show=true

file
再次修改组件：
forum\resources\assets\js\components\Flash.vue

<template>
    <div class="alert alert-success alert-flash" role="alert" v-show="show">
        <strong>Success!</strong>{{ body }}
    </div>
 </template>

<script>
    export default {
        props:['message'],
        data(){
            return {
                body : this.message,
                show:false
            }
        },

        created(){
            if(this.message){
                this.body = this.message;
                this.show = true;

                setTimeout(() => {
                    this.show = false;
                },3000);
            }
        }
    };
</script>

<style>
    .alert-flash{
        position: fixed;
        right: 25px;
        bottom: 25px;
    }
</style>

刷新页面，会看到消息区域出现，并且在 3 s后消失。最终的版本如下：
forum\resources\assets\js\components\Flash.vue

<template>
    <div class="alert alert-success alert-flash" role="alert" v-show="show">
        <strong>Success!</strong>{{ body }}
    </div>
 </template>

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

        data(){
            return {
                body : '',
                show:false
            }
        },

        created(){
            if(this.message){
                this.flash(this.message);
            }

            window.events.$on('flash',message => this.flash(message));
        },

        methods:{
            flash(message){
                this.body = message;
                this.show = true;

                this.hide();
            },

            hide(){
                setTimeout( () => {
                   this.show = false;
                },3000);
            }
        }
    };
</script>

<style>
    .alert-flash{
        position: fixed;
        right: 25px;
        bottom: 25px;
    }
</style>

我们将显示和隐藏消息组件封装成flash和show方法，同时我们使用window.events.$on来监听页面发生的事件，以后如果需要其他动作的提示，只需要重写flash就可以再次调用show和hide方法，达到出现和消失消息组件的目的。我们传递属性到window.events：
forum\resources\assets\js\bootstrap.js

.
.
window.Vue = require('vue');

window.events = new Vue();

window.flash = function (message) {
    window.events.$emit('flash',message);
};

注意：默认情况下window.Vue = require('vue')这行代码会出现在 forum\resources\assets\js\app.js 文件require('./bootstrap')的下面一行。那样我们在加载Vue前就调用了Vue，会出现报错，所以我把它从app.js文件移到了这里。

接下来我们在创建话题跟回复后都在Session中存入提示消息：
forum\app\Http\Controllers\ThreadsController.php

.
.
public function store(Request $request)
{
    $this->validate($request,[
       'title' => 'required',
        'body' => 'required',
        'channel_id' => 'required|exists:channels,id'
    ]);

    $thread = Thread::create([
        'user_id' => auth()->id(),
        'channel_id' => request('channel_id'),
        'title' => request('title'),
        'body' => request('body'),
    ]);

    return redirect($thread->path())
        ->with('flash','Your thread has been published!');
}
.
.

forum\app\Http\Controllers\RepliesController.php

.
.
public function store($channelId,Thread $thread)
{
    $this->validate(request(),['body' => 'required']);

    $thread->addReply([
        'body' => request('body'),
        'user_id' => auth()->id(),
    ]);

    return back()->with('flash','Your reply has been left.');
}
.

在页面取出Session：
forum\resources\views\layouts\app.blade.php

.
.
<body>
    <div id="app">
        @include('layouts.nav')

        @yield('content')

        <flash message="{{ session('flash') }}"></flash>
    </div>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}"></script>
</body>
.

现在所有的工作都完成了，我们在应用中测试一下。首先创建话题：
file
接着创建回复：
file
我们也可以利用 Vue 调试工具进行调试：
file