61.用户名自动补齐（二）

TDD 构建 Laravel 论坛笔记 /

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

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

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

本节说明

对应视频教程第 61 小节：Instant Username Autocompletion: Part 2

本节内容

本节我们来应用上一节提到的 At.js。首先我们进行安装：

$ npm install at.js --save

At.js 的说明文档中提到：

At.js now depends on Caret.js.

所以我们还需要安装 Caret.js：

$ npm install jquery.caret --save

注：如果 npm 安装失败，尝试使用以下命令进行安装：
sudo yarn add at.js --no-bin-links
sudo yarn add jquery.caret --no-bin-links

本节我们需要新建一个新的控制器，用来返回被 @ 时搜索的用户名的集合。首先我们新建路由：
forum\routes\web.php

.
.
Route::delete('/profiles/{user}/notifications/{notification}','UserNotificationsController@destroy');

Route::get('api/users','Api\UsersController@index');

新建控制器：

$ php artisan make:controller Api/UsersController

修改文件内容如下：
forum\app\Http\Controllers\Api\UsersController.php

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use App\User;

class UsersController extends Controller
{
    public function index()
    {
        $search = request('name');

        return User::where('name','LIKE',"$search%")
            ->take(5)
            ->pluck('name');
    }
}

如果我们访问该路由：
file
现在该路由已经可以返回数据，我们在 NewReply.vue 组件中使用：

.
.
<script>
    import 'jquery.caret';
    import 'at.js';

    export default {
        data() {
            return {
                body:''
            };
        },

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

        mounted() {
          $('#body').atwho({
              at:"@",
              delay:750,
              callbacks: {
                  remoteFilter: function (query,callback) {
                      $.getJSON("/api/users",{name:query},function(usernames){
                            callback(usernames)
                          });
                  }
              }
          });
        },
        .
        .
</script>

在页面进行测试：
file
已经可以正常使用，只是我们还没有加载css文件，所以样式有点奇怪。我们可以利用@yield指令定义css和JavaScript区块，从而为不同的页面加载不同的 css 和 JavaScript 文件。如下：
forum\resources\views\layouts\app.blade.php

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    .
    .
    @yield('header')
</head>
<body>
    .
    .
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}"></script>

    @yield('scripts')

</body>
</html>

我们将 css 文件加载到我们的系统中。首先我们新建目录：

$ mkdir public/css/vendor

接着我们拷贝 css 文件：

$ cp node_modules/at.js/dist/css/jquery.atwho.css ./public/css/vendor/

然后我们加载到页面：
forum\resources\views\threads\show.blade.php

@extends('layouts.app')

@section('header')
    <link rel="stylesheet" href="/css/vendor/jquery.atwho.css">
@endsection

@section('content')
    .
    .
@endsection

再次尝试：
file
最后我们来为新建的控制器方法补上测试：
forum\tests\Feature\MentionUsersTest.php

    .
    .
    /** @test */
    public function it_can_fetch_all_users_starting_with_the_given_characters()
    {
        create('App\User',['name' => 'johndoe']);
        create('App\User',['name' => 'johndoe2']);
        create('App\User',['name' => 'janedoe']);

        $results = $this->json('GET','/api/users',['name' => 'john']);

        $this->assertCount(2,$results->json());
    }
}

运行该测试：
file
运行全部测试：
file