61.用户名自动补齐(二)

未匹配的标注

本节说明

  • 对应视频教程第 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指令定义cssJavaScript区块,从而为不同的页面加载不同的 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

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 0
发起讨论 只看当前版本


暂无话题~