Laravel 实战开发知乎:使用 Select2 优化话题选择

Laravel 实战开发知乎:使用 Select2 优化话题选择 QQ群:595928952 上一节 下一节

Laravel Vuejs 实战:开发知乎 >> Laravel 实战开发知乎:使用 Select2 优化话题选择 视频发布于 2016-12-21

在用户发起问题的时候,选择相关的话题其实是一个很重要的用户体验,这节视频通过引入 select2 来实现 Ajax 查询话题,并允许用户自定义话题来提高用户体验。
chenxin

为什么我直接引用select的css和js的cdn连接,居然不起作用,只有按照你的方法去用gulp才管用,

JellyBool

这个基本上顺序的问题吧,或者说 cdn 还没加载到

John Howard

select2单选怎么使?

zyzplzyz

群主,请问是怎么请到没有在topic表中的内容的,就像你的topic表中没有路由,但是你还是在store方法中取到了路由这个值,我却怎么都取不到,

JellyBool

应该是你的 js 没配置对?

zyzplzyz

OK了,谢谢群主

zyzplzyz

function formatTopicSelection(topic) {

           return topic.name || topic.text;
       }
zyzplzyz

<div class="form-group">

                            <select name="topics[]" class="js-example-placeholder-multiple js-data-example-ajax form-control" multiple="multiple">
                            </select>
                        </div>

这是我的HTML代码,

lg23

你这里如果没有从后台返回数据,前端用户输入的数据会生成话题吗?我这里从后台返回话题数据正常,但生成话题却不行?

hard88

站长,问一下,引入css和js后,那个npm是什么意思,win电脑怎么操作?谢谢

JellyBool

npm 是编译和合并 css js 吧,命令行操作。

hard88

我是本地引入的,分别拷贝下载下来的css文件夹和js文件夹里的js文件

JellyBool

你还是稍微了解一下 npm 的生态吧,跟 composer 有点像

hard88

嗯,在看node.js,npm的資料了,我的laragon环境本来有node.js,但提示npm不是内部命令,网上找都说官网安装程序自动配置环境变量,现在我不管环境里这个node,直接下一个再安装一遍?

hard88

还是用配置环境的方式把laragon的node配置好了。题外话站长什么时候可以把评论加一个功能,可以删除自己的留言,刚才那个问题想删了=。=

hard88

站长我想问一下,当我打开bootstrap后,里面出现问题,出现问题的是:
Vue.http.interceptors.push((request, next) => {

request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

next();

});
这个是什么原因?我打开了另外一个新的laravel5.3项目,也是同样的问题。
在npm install出现了
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

JellyBool

你出现的问题是?

hard88

1.项目中是boostrap.js文件出现红色波浪底线(错误?)只是打开了这个文件就这样,具体程序还不知道。
2.npm install。很多warn。用npm install -g npm更新了,一样不行

JellyBool

第一个问题是你的 PhpStorm 没设置 es6 语法支持吧,我记得好多视频我都说过这个问题。

warn 暂时没有什么事

hard88

额,好的,谢谢。那npm,我执行完npm install就好了,不去管wanrn?还有ERR呢?

比如:
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\laragon\\bin\\nodejs\\node.exe" "D:\\Program Files\\nodejs\\node_global\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! node v6.9.5
npm ERR! npm v4.2.0
npm ERR! code ENOGIT

JellyBool

就目前的信息来看,我看不出你的 error 是什么引起的

hard88

es6 语法支持就是settings中javascript的language verison选择为ECMAScript6?

需要我贴出执行npm install后所有的信息么?

JellyBool

es6 的设置就是应该这样的。

npm install 的信息,我觉得你还是 Google 更靠谱。因为我的 windows 经验几乎没有。。。。

hard88

我好像知道了,没有配置git的环境变量..我再去试试,如果有新的问题,再来请教你,谢谢

hard88

Vue.http.interceptors.push((request, next) => {

request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

next();

});

这是boostrap.js文件中具体出现红色波浪线的地方

lg23
(unknown) [Vue warn]: Error compiling template:

<div id="app">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">

                    <!-- Collapsed Hamburger -->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <!-- Branding Image -->
                    <a class="navbar-brand" href="http://www.zt.com">
                        <!-- 这里的name 是config/app.php 里 -->
                        Laravel
                    </a>
                </div>

                <div class="collapse navbar-collapse" id="app-navbar-collapse">
                    <!-- Left Side Of Navbar -->
                    <ul class="nav navbar-nav">
                        &nbsp;
                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="nav navbar-nav navbar-right">
                        <!-- Authentication Links -->
                                                    <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                    lg23 <span class="caret"></span>
                                </a>

                                <ul class="dropdown-menu" role="menu">
                                    <li>
                                        <a href="http://www.zt.com/logout" onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                            退 出
                                        </a>

                                        <form id="logout-form" action="http://www.zt.com/logout" method="POST" style="display: none;">
                                            <input type="hidden" name="_token" value="BWqB9jQEMfrJVGH94RHGgLSMnQs5IxEs52ufVn0d">
                                        </form>
                                    </li>
                                </ul>
                            </li>
                                            </ul>
                </div>
            </div>
        </nav>
        
        <div class="container">
                    </div>

        <!-- 配置文件 -->
<script type="text/javascript" src="http://www.zt.com/vendor/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="http://www.zt.com/vendor/ueditor/ueditor.all.js"></script>
<script>
    window.UEDITOR_CONFIG.serverUrl = '/ueditor/server'
</script><div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">发布问题</div>
                <div class="panel-body">
                    <form action="/questions" method="post">
                        <input type="hidden" name="_token" value="BWqB9jQEMfrJVGH94RHGgLSMnQs5IxEs52ufVn0d">
                        <div class="form-group">
                            <label for="title">标 题</label>
                            <input type="text" value="" name="title" class="form-control" placeholder="标题" id="title">
                                                    </div>
                        <div class="form-group">
                            <select class="js-example-basic-multiple form-control" multiple="multiple">
                                <option value="AL">Alabama</option>
                                <option value="WY">Wyoming</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="body">描述</label>
                            <!-- 编辑器容器 -->
                            <!-- 非转义可能引起攻击,需要过滤 -->
                            <script id="container" name="body" type="text/plain" style="height:200px;">
                                
                            </script>
                                                    </div>
                        <button class="btn btn-success pull-right" type="submit">发布问题</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


    </div>

- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
 
(found in <Root>)warncompileToFunctionsVue$3.$mountVue._initVue$3(anonymous function)(anonymous function) @ app-c09a9f3d5d.js:151__webpack_require__ @ app-c09a9f3d5d.js:20(anonymous function) @ app-c09a9f3d5d.js:64(anonymous function) @ app-c09a9f3d5d.js:67
(unknown) Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools

出现上面的报错,不知道是什么原因引起的。另外在app.scss文件中添加

// Bootstrap
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";    这条在视频里看到是有报错提示,我这里也有,是不它引起的呢?

@import "./../css/select2.min";
JellyBool

第一个吃lwarning的人warning 是因为视图文件使用了 script 直接写代码吧…

第二个应该就是叫你去下 vue devtool

lg23

好的,我再看看

lg23
       在 resources/assets/js 目录下 bootstrap.js 文件中添加
        require('./select2.min');

        在 resources/assets/sass 目录下 app.scss 文件中添加
        @import "./../css/select2.min";

然后执行 gulp 才出现上面的报错,刚刚重试一遍,还是报上面的错误?求解

JellyBool

什么错?gulp 的报错?

lg23

vue.js?3de6:564[Vue warn]: Error compiling template:
全部的报错信息在提问的时候贴出来了

JellyBool

你是说这一堆都是错误:

(unknown) [Vue warn]: Error compiling template:

<div id="app">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">

                    <!-- Collapsed Hamburger -->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <!-- Branding Image -->
                    <a class="navbar-brand" href="http://www.zt.com">
                        <!-- 这里的name 是config/app.php 里 -->
                        Laravel
                    </a>
                </div>

                <div class="collapse navbar-collapse" id="app-navbar-collapse">
                    <!-- Left Side Of Navbar -->
                    <ul class="nav navbar-nav">
                        &nbsp;
                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="nav navbar-nav navbar-right">
                        <!-- Authentication Links -->
                                                    <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                    lg23 <span class="caret"></span>
                                </a>

                                <ul class="dropdown-menu" role="menu">
                                    <li>
                                        <a href="http://www.zt.com/logout" onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                            退 出
                                        </a>

                                        <form id="logout-form" action="http://www.zt.com/logout" method="POST" style="display: none;">
                                            <input type="hidden" name="_token" value="BWqB9jQEMfrJVGH94RHGgLSMnQs5IxEs52ufVn0d">
                                        </form>
                                    </li>
                                </ul>
                            </li>
                                            </ul>
                </div>
            </div>
        </nav>
        
        <div class="container">
                    </div>

        <!-- 配置文件 -->
<script type="text/javascript" src="http://www.zt.com/vendor/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="http://www.zt.com/vendor/ueditor/ueditor.all.js"></script>
<script>
    window.UEDITOR_CONFIG.serverUrl = '/ueditor/server'
</script><div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">发布问题</div>
                <div class="panel-body">
                    <form action="/questions" method="post">
                        <input type="hidden" name="_token" value="BWqB9jQEMfrJVGH94RHGgLSMnQs5IxEs52ufVn0d">
                        <div class="form-group">
                            <label for="title">标 题</label>
                            <input type="text" value="" name="title" class="form-control" placeholder="标题" id="title">
                                                    </div>
                        <div class="form-group">
                            <select class="js-example-basic-multiple form-control" multiple="multiple">
                                <option value="AL">Alabama</option>
                                <option value="WY">Wyoming</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="body">描述</label>
                            <!-- 编辑器容器 -->
                            <!-- 非转义可能引起攻击,需要过滤 -->
                            <script id="container" name="body" type="text/plain" style="height:200px;">
                                
                            </script>
                                                    </div>
                        <button class="btn btn-success pull-right" type="submit">发布问题</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


    </div>

- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
 
(found in <Root>)warncompileToFunctionsVue$3.$mountVue._initVue$3(anonymous function)(anonymous function) @ app-c09a9f3d5d.js:151__webpack_require__ @ app-c09a9f3d5d.js:20(anonymous function) @ app-c09a9f3d5d.js:64(anonymous function) @ app-c09a9f3d5d.js:67
(unknown) Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
lg23

在我的控制台里以红色字体显示出来的。具体这里我看不太明白引起的原因。

lg23

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed
这里说有副作用的标签,可是代码我反复检查也没有发现有错误的标签

JellyBool

额。。。你确定你是照着视频来的?

<div id="app">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">

                    <!-- Collapsed Hamburger -->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <!-- Branding Image -->
                    <a class="navbar-brand" href="http://www.zt.com">
                        <!-- 这里的name 是config/app.php 里 -->
                        Laravel
                    </a>
                </div>

                <div class="collapse navbar-collapse" id="app-navbar-collapse">
                    <!-- Left Side Of Navbar -->
                    <ul class="nav navbar-nav">
                        &nbsp;
                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="nav navbar-nav navbar-right">
                        <!-- Authentication Links -->
                                                    <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                    lg23 <span class="caret"></span>
                                </a>

                                <ul class="dropdown-menu" role="menu">
                                    <li>
                                        <a href="http://www.zt.com/logout" onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                            退 出
                                        </a>

                                        <form id="logout-form" action="http://www.zt.com/logout" method="POST" style="display: none;">
                                            <input type="hidden" name="_token" value="BWqB9jQEMfrJVGH94RHGgLSMnQs5IxEs52ufVn0d">
                                        </form>
                                    </li>
                                </ul>
                            </li>
                                            </ul>
                </div>
            </div>
        </nav>
        
        <div class="container">
                    </div>

        <!-- 配置文件 -->
<script type="text/javascript" src="http://www.zt.com/vendor/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="http://www.zt.com/vendor/ueditor/ueditor.all.js"></script>
<script>
    window.UEDITOR_CONFIG.serverUrl = '/ueditor/server'
</script><div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">发布问题</div>
                <div class="panel-body">
                    <form action="/questions" method="post">
                        <input type="hidden" name="_token" value="BWqB9jQEMfrJVGH94RHGgLSMnQs5IxEs52ufVn0d">
                        <div class="form-group">
                            <label for="title">标 题</label>
                            <input type="text" value="" name="title" class="form-control" placeholder="标题" id="title">
                                                    </div>
                        <div class="form-group">
                            <select class="js-example-basic-multiple form-control" multiple="multiple">
                                <option value="AL">Alabama</option>
                                <option value="WY">Wyoming</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="body">描述</label>
                            <!-- 编辑器容器 -->
                            <!-- 非转义可能引起攻击,需要过滤 -->
                            <script id="container" name="body" type="text/plain" style="height:200px;">
                                
                            </script>
                                                    </div>
                        <button class="btn btn-success pull-right" type="submit">发布问题</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


    </div>

上面这一堆是你的哪个 .vue 文件么

lg23

我的确照视频来的,上面的代码应该是layouts目录下app.blade.php和questions目录下make.blade.php文件里的内容,两者有继承关系,所以

JellyBool

那是 gulp 的报错么?

lg23

这里我也比较混乱,在执行gulp之前都是正常的,laravel都刚下载的,直接跟视频走。

JellyBool

额。。。那我就不知道了

JellyBool

你用的 5.4 的 laravel ?

lg23

我不知道这里为什么会有关于vue的报错,我自己没有在这里添加关于vue的代码。
我是按以下步骤操作,但执行到 gulp 时,控制台就开始报错,我是每操作一步,刷新一次浏览器看结果,因这个位置我反复操作二遍了。

// 添加 select2 到本地实现话题标签
    * 首先下载select2 相关样式文件
        // 1、进入到相应的文件夹目录下
        cd resources/assets
        // 2、查看目录情况
        ls
        // 3、如果没有css文件夹,新建一个
        mkdir css
        // 4、进入到 css 文件夹下
        cd css
        // 5、添加 css 样式下载路径并下载
        wget https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css
        // 6、进入 js 文件夹 添加 js 样式下载路径并下载
        wget https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js
        // 7、安装完成后 执行命令安装相应的包
        npm install
        // 8、配置select2样式文件
        在 resources/assets/js 目录下 bootstrap.js 文件中添加
        window.$ = window.jQuery = require('jquery');
        require('bootstrap-sass');
        require('./select2.min');

        在 resources/assets/sass 目录下 app.scss 文件中添加
        @import "./../css/select2.min";

        // 执行 gulp
lg23
<script>
        window.Laravel = <?php echo json_encode([
            'csrfToken' => csrf_token(),
        ]); ?>
    </script>

phpStrom 里提示这段有问题,这里我没动过,不知道具体您的代码这里是否有调整?
JellyBool

贴一下你的 assets 目录结构,以及下面的 app.scss 和 js/app.js bootstrap.js 以及 gulpfile.js 以及 app.balde.php 和 questions/make.blade.php

用 markdown 排版一下

lg23
|--assets
|      |--css
|      |     |--select2.min.css
|      |--js
|      |     |--components
|      |     |     |--Example.vue
|      |     |--app.js
|      |     |--bootstrap.js
|      |     |--select2.min.js
|      |--sass
|      |     |--app.scss
|      |     |--
gulpfile.js 文件
const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for your application as well as publishing vendor resources.
 |
 */

elixir((mix) => {
    mix.sass('app.scss')
       .webpack('app.js');
});

app.blade.php 文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Styles -->
    <link href="/css/app.css" rel="stylesheet">

    <!-- Scripts -->
    <script>
        window.Laravel = <?php echo json_encode([
            'csrfToken' => csrf_token(),
        ]); ?>
    </script>
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">

                    <!-- Collapsed Hamburger -->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <!-- Branding Image -->
                    <a class="navbar-brand" href="{{ url('/') }}">
                        {{ config('app.name', 'Laravel') }}
                    </a>
                </div>

                <div class="collapse navbar-collapse" id="app-navbar-collapse">
                    <!-- Left Side Of Navbar -->
                    <ul class="nav navbar-nav">
                        &nbsp;
                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="nav navbar-nav navbar-right">
                        <!-- Authentication Links -->
                        @if (Auth::guest())
                            <li><a href="{{ url('/login') }}">Login</a></li>
                            <li><a href="{{ url('/register') }}">Register</a></li>
                        @else
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                    {{ Auth::user()->name }} <span class="caret"></span>
                                </a>

                                <ul class="dropdown-menu" role="menu">
                                    <li>
                                        <a href="{{ url('/logout') }}"
                                            onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                            Logout
                                        </a>

                                        <form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
                                            {{ csrf_field() }}
                                        </form>
                                    </li>
                                </ul>
                            </li>
                        @endif
                    </ul>
                </div>
            </div>
        </nav>

        @yield('content')
    </div>

    <!-- Scripts -->
    <script src="/js/app.js"></script>
</body>
</html>


questions/make,blade.php 文件

@extends('layouts.app')

@section('content')
@include('vendor.ueditor.assets')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">发布问题</div>
                <div class="panel-body">
                    <form action="/questions" method="post">
                        {!! csrf_field() !!}
                        <div class="form-group{{ $errors->has('title') ? 'has-error' : '' }}">
                            <label for="title">标 题</label>
                            <input type="text" value="{{ old('title') }}" name="title" class="form-control" placeholder="标题" id="title">
                            @if ($errors->has('title'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('title') }}</strong>
                                </span>
                            @endif
                        </div>

                        <div class="form-group{{ $errors->has('body') ? 'has-error' : '' }}">
                            <label for="body">描述</label>
                            <!-- 编辑器容器 -->
                            <!-- 非转义可能引起攻击,需要过滤 -->
                            <script id="container" name="body" type="text/plain" style="height:200px;">
                                {!! old('body') !!}
                            </script>
                            @if ($errors->has('body'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('body') }}</strong>
                                </span>
                            @endif
                        </div>
                        <button class="btn btn-success pull-right" type="submit">发布问题</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 实例化编辑器 -->
<script type="text/javascript">
    var ue = UE.getEditor('container', {
        toolbars: [
                ['bold', 'italic', 'underline', 'strikethrough', 'blockquote', 'insertunorderedlist', 'insertorderedlist', 'justifyleft','justifycenter', 'justifyright',  'link', 'insertimage', 'fullscreen']
            ],
        elementPathEnabled: false,
        enableContextMenu: false,
        autoClearEmptyNode:true,
        wordCount:false,
        imagePopup:false,
        autotypeset:{ indent: true,imageBlockLine: 'center' }
    });
    ue.ready(function() {
        ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); // 设置 CSRF token.
    });

</script>

@endsection
JellyBool

js/app.js bootstrap.js 这两个看一下?你的 laravel 是什么版本的

lg23

我用的是laravel 5.3

js/app.js 文件

require('./bootstrap');

Vue.component('example', require('./components/Example.vue'));

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

js/bootstrap.js 文件


window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
require('./select2.min');

/**
 * Vue is a modern JavaScript library for building interactive web interfaces
 * using reactive data binding and reusable components. Vue's API is clean
 * and simple, leaving you to focus on building your next great project.
 */

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



Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

    next();
});



// import Echo from "laravel-echo"

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: 'your-pusher-key'
// });
JellyBool

看不出什么错误了。。。。。确保拼写什么的都没错么?

截个 gulp 运行的命令行截图?

lg23

从代码拼写可能的错误来说,只有这里,phpStorm里有报错

<script>
        window.Laravel = <?php echo json_encode([
            'csrfToken' => csrf_token(),
        ]); ?>
</script>
JellyBool

这个应该没啥错,框架自带的代码基本不用怀疑拼写错误了。

主要看看是不是你哪里写错了。单词的拼写,符号的拼写等

lg23

群主,我下载 seletc2相关样式,然后在app.blade.php文件中直接引入。省掉 npm install 和 gulp 两步操作。目前程序运行的情况一切正常。

JellyBool

恩,阔以的。

lg23

我基础差,有很多不足,我目前想先按自己基础水平跟着实战项目走遍,然后记录下所有的问题,这样子我觉得学习会更直接全面些。很多时候都是盲目在学,也不了解实际运用。多有烦扰,请见谅!

JellyBool

个人觉得 我目前想先按自己基础水平跟着实战项目走遍 这样只会多走弯路而已。

我感觉我跟你说了不止五遍了吧。先跟路径来学习,急不来。

lg23

问题解决

LiJian44789178

我遇见和你一样的问题

LiJian44789178

我找到了 里面@include('vendor.ueditor.assets')有一个,把这个去掉,把源代码直接换进去就行

maokeyang

并没什么效果啊

maokeyang

怎么解决的?仁兄

ciotas

请问老师 视频为何没有讲到gulpfile.js的配置,里面的代码可以贴出来的吗?

JellyBool

gulpfile.js:

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for your application as well as publishing vendor resources.
 |
 */

elixir((mix) => {
    mix.sass('app.scss')
       .webpack('app.js');

    mix.version(['js/app.js','css/app.css'])
});

我记得一直都有讲的吧。

ciotas

请问老师是哪个视频集的,我想学习一下

JellyBool

这个配置就是这样的啊,一路都有讲到,你是跳着看视频?

或者你也可以看这个

https://www.laravist.com/series/laravel-and-front-end-series

ciotas

没有跳的,我注意到老师的第一个视频
laravel new zhihu-app
就有gulpfile.js,我用相同的指令却没有。我的laravel 版本是5.4.15,请问还需要什么配置吗?

JellyBool

你的是 5.4 版本了吧,laravel 5.4 使用新的前端工具 mix :

视频: https://www.laravist.com/series/new-feature-in-laravel-5-4/episodes/5

Psychic_role

陷入一个学习的误区,从学习新的架构变成大部分精力在解决新工具的部署
5.4版本的mix,npm install始终报错Failed at the node-sass@4.5.1 postinstall script 'node scripts/build.js'
无论是本地还是在官方的homestead环境里都执行不了.
解决各个新引入的工具在使用过程中遇到的问题贯穿了整个课程,代码却到现在还写不出想要的效果

JellyBool

所以你直接用 5.3 吧,这样最好

Psychic_role

5.3也不是LTS版本啊

JellyBool

5.4 也不是,但是 5.3 已经有足够的新特性了,并且跟视频是一致的,这样更能减少出错的概率

Psychic_role

是这么个道理,谢谢

curder

以下是视频相关的 select2 ajax 获取后台数据的 Js 代码:

$(".js-example-basic-multiple").select2({
                tags: true,
                placeholder: '选择相关话题',
                minimumInputLength: 2,
                ajax: {
                    url: '/api/topics',
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term
                        };
                    },
                    processResults: function (data, params) {
                        return {
                            results: data
                        };
                    },
                    cache: true
                },
                templateResult: formateTopic,
                templateSelection: formatTopicSelection,
                escapeMarkup: function (markup) {
                    return markup;
                }
            });