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

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

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

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

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

JellyBool 回复 chenxin

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

John Howard

select2单选怎么使?

zyzplzyz

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

JellyBool 回复 zyzplzyz

应该是你的 js 没配置对?

zyzplzyz 回复 JellyBool

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 回复 zyzplzyz

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

hard88

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

JellyBool 回复 hard88

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

hard88

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

JellyBool 回复 hard88

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

hard88 回复 JellyBool

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

hard88 回复 JellyBool

还是用配置环境的方式把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

你出现的问题是?

hard88 回复 JellyBool

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

JellyBool 回复 hard88

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

warn 暂时没有什么事

hard88 回复 JellyBool

额,好的,谢谢。那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 回复 hard88

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

hard88 回复 JellyBool

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

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

JellyBool 回复 hard88

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

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

hard88 回复 JellyBool

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

hard88 回复 JellyBool

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 回复 lg23

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

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

lg23 回复 JellyBool

好的,我再看看

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

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

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


JellyBool 回复 lg23

什么错?gulp 的报错?

lg23 回复 JellyBool

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

JellyBool 回复 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
lg23 回复 JellyBool

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

lg23 回复 JellyBool

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as

JellyBool 回复 lg23

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

<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 回复 JellyBool

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

JellyBool 回复 lg23

那是 gulp 的报错么?

lg23 回复 JellyBool

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

JellyBool 回复 lg23

额。。。那我就不知道了

JellyBool 回复 lg23

你用的 5.4 的 laravel ?

lg23 回复 JellyBool

我不知道这里为什么会有关于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 回复 JellyBool
<script>
        window.Laravel = <?php echo json_encode([
            'csrfToken' => csrf_token(),
        ]); ?>
    </script>

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

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

用 markdown 排版一下

lg23 回复 JellyBool
|--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 回复 lg23

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

lg23 回复 JellyBool

我用的是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 回复 lg23

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

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

lg23 回复 JellyBool

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

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

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

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

lg23 回复 JellyBool

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

JellyBool 回复 lg23

恩,阔以的。

lg23 回复 JellyBool

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

JellyBool 回复 lg23

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

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

lg23 回复 JellyBool

问题解决

LiJian44789178 回复 lg23

我遇见和你一样的问题

LiJian44789178 回复 lg23

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

maokeyang 回复 LiJian44789178

并没什么效果啊

maokeyang 回复 lg23

怎么解决的?仁兄

WannaProGrammer 回复 maokeyang

老哥 我和你一样 你解决没

xiaofengzhi 回复 JellyBool

能不能说一下gulp命令还没有,怎么配置gulp环境?

myxxqy 回复 lg23
Vue.component('example', require('./components/Example.vue'));

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

我是把app.js 这里面关于vue相关的代码注释掉就解决了 和你同样的问题,不过我是laravel5.4的版本。

ciotas

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

JellyBool 回复 ciotas

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

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

JellyBool 回复 ciotas

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

或者你也可以看这个

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

ciotas 回复 JellyBool

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

JellyBool 回复 ciotas

你的是 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 回复 Psychic_role

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

Psychic_role 回复 JellyBool

5.3也不是LTS版本啊

JellyBool 回复 Psychic_role

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

Psychic_role 回复 JellyBool

是这么个道理,谢谢

mafeifan 回复 Psychic_role

直接用yarn可能就没这个错误了

Yanniyiyi 回复 Psychic_role

升级一下node

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;
                }
            });
Yanniyiyi

factory(App\Topic::class,11)->make(); 如果这段代码没有在数据库中生成数据,请尝试factory(App\Topic::class,11)->create();

asion

npm instal 报这样的错

npm WARN prefer global node-gyp@3.6.1 should be installed with -g

> node-sass@3.13.1 install E:\xampp\htdocs\zhihu-app\node_modules\node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v3.13.1/win32-x64-48_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v3.13.1/win32-x64-48_binding.node":

connect ETIMEDOUT 52.216.1.8:443

Timed out whilst downloading the prebuilt binary

Hint: If github.com is not accessible in your location
      try setting a proxy via HTTP_PROXY, e.g.

      export HTTP_PROXY=http://example.com:1234

or configure npm proxy via

      npm config set proxy http://example.com:8080

> node-sass@3.13.1 postinstall E:\xampp\htdocs\zhihu-app\node_modules\node-sass
> node scripts/build.js

Building: E:\nodejs\node.exe E:\xampp\htdocs\zhihu-app\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [ 'E:\\nodejs\\node.exe',
gyp verb cli   'E:\\xampp\\htdocs\\zhihu-app\\node_modules\\node-gyp\\bin\\node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library=' ]
gyp info using node-gyp@3.6.1
gyp info using node@6.10.2 | win32 | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2
gyp verb `which` failed     at getNotFoundError (E:\xampp\htdocs\zhihu-app\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (E:\xampp\htdocs\zhihu-app\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (E:\xampp\htdocs\zhihu-app\node_modules\which\which.js:80:29)
gyp verb `which` failed     at E:\xampp\htdocs\zhihu-app\node_modules\which\which.js:89:16
gyp verb `which` failed     at E:\xampp\htdocs\zhihu-app\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at E:\xampp\htdocs\zhihu-app\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:123:15)
gyp verb `which` failed  python2 { Error: not found: python2
gyp verb `which` failed     at getNotFoundError (E:\xampp\htdocs\zhihu-app\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (E:\xampp\htdocs\zhihu-app\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (E:\xampp\htdocs\zhihu-app\node_modules\which\which.js:80:29)
gyp verb `which` failed     at E:\xampp\htdocs\zhihu-app\node_modules\which\which.js:89:16
gyp verb `which` failed     at E:\xampp\htdocs\zhihu-app\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at E:\xampp\htdocs\zhihu-app\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:123:15) code: 'ENOENT' }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb `which` failed Error: not found: python
gyp verb `which` failed     at getNotFoundError (E:\xampp\htdocs\zhihu-app\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (E:\xampp\htdocs\zhihu-app\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (E:\xampp\htdocs\zhihu-app\node_modules\which\which.js:80:29)
gyp verb `which` failed     at E:\xampp\htdocs\zhihu-app\node_modules\which\which.js:89:16
gyp verb `which` failed     at E:\xampp\htdocs\zhihu-app\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at E:\xampp\htdocs\zhihu-app\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:123:15)
gyp verb `which` failed  python { Error: not found: python
gyp verb `which` failed     at getNotFoundError (E:\xampp\htdocs\zhihu-app\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (E:\xampp\htdocs\zhihu-app\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (E:\xampp\htdocs\zhihu-app\node_modules\which\which.js:80:29)
gyp verb `which` failed     at E:\xampp\htdocs\zhihu-app\node_modules\which\which.js:89:16
gyp verb `which` failed     at E:\xampp\htdocs\zhihu-app\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at E:\xampp\htdocs\zhihu-app\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:123:15) code: 'ENOENT' }
gyp verb could not find "python". checking python launcher
gyp verb could not find "python". guessing location
gyp verb ensuring that file exists: C:\Python27\python.exe
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack     at Object.failNoPython (E:\xampp\htdocs\zhihu-app\node_modules\node-gyp\lib\configure.js:483:19)
gyp ERR! stack     at Object.<anonymous> (E:\xampp\htdocs\zhihu-app\node_modules\node-gyp\lib\configure.js:508:16)
gyp ERR! stack     at E:\xampp\htdocs\zhihu-app\node_modules\node-gyp\node_modules\graceful-fs\polyfills.js:284:29
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:123:15)
gyp ERR! System Windows_NT 6.1.7601
gyp ERR! command "E:\\nodejs\\node.exe" "E:\\xampp\\htdocs\\zhihu-app\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass
_library="
gyp ERR! cwd E:\xampp\htdocs\zhihu-app\node_modules\node-sass
gyp ERR! node -v v6.10.2
gyp ERR! node-gyp -v v3.6.1
gyp ERR! not ok
Build failed with error code: 1
E:\xampp\htdocs\zhihu-app
`-- (empty)

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "E:\\nodejs\\node.exe" "E:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! node v6.10.2
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE

npm ERR! node-sass@3.13.1 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@3.13.1 postinstall script 'node scripts/build.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the node-sass package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node scripts/build.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs node-sass
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls node-sass
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     E:\xampp\htdocs\zhihu-app\npm-debug.log
npm ERR! code 1
JellyBool 回复 asion

基本上就是网速的问题,墙的原因

asion 回复 JellyBool

恩,还有就是我使用green npm install 后执行gulp,系统提示不是内部或外部命令,
那npm install命令不是会安装gulp的吗?

JellyBool 回复 asion

你的 laravel 版本是多少?

你需要全局性安装 gulp:

npm install gulp-cli -g
asion 回复 JellyBool

laravel5.3,是的装了全局gulp可以了

asion 回复 JellyBool

好的,学习了

asion

@JellyBool

WannaProGrammer

这节莫名其妙的gulp挂了 yarn也有点小问题 折腾半天才发现 5.4.21版本的laravel自带的是webpack不是gulp

jayin

@JellyBool 命名空间use 写在类外面和类里面有什么区别

JellyBool 回复 jayin

类外面和类里面

这个是什么?有示例代码么?

jayin 回复 JellyBool
use Illuminate\Http\Request;

class LoginController extends Controller
{


    use AuthenticatesUsers;
}

use 的位置放的位置不一样没什么区别把?

Flourishing 回复 jayin

你的这个是trait的用法 不是命名空间的用法啊

jayin

我在homestead虚拟机里面npm install一值这样:

vagrant@homestead:~/Code/zhihu-app$ npm install
[      ............] \ fetchMetadata: sill mapToRegistry uri https://registry.np[      ............] | fetchMetadata: sill mapToRegistry uri https://registry.np[      ............] | fetchMetadata: sill mapToRegistry uri https://registry.np[      ............] / fetchMetadata: sill mapToRegistry uri https://registry.np[      ............] / fetchMetadata: sill mapToRegistry uri https://registry.np[      ............] / fetchMetadata: sill mapToRegistry uri https://registry.np
JellyBool 回复 jayin

就是网速吧。。。被墙

jayin

@JellyBool 我用npm install gulp -g 下载了gulp
运行gulp
结果

\zhihu-app>gulp
[13:52:50] No gulpfile found
jayin

@JellyBool
No gulpfile.js in Laravel 5.4
PUBLISHED 4 MONTHS AGO BY HUMZA95
Sorry for being stupid , but i started laravel few days ago and i was watching basic tutorial and i found out that there is no more gulpfile in project. So how do i compile the SASS stuff.
bobbybouwmann
bobbybouwmann
4 months ago
(857,395 XP)
Laravel is using Laravel Mix now! So basically you have a webpack file now. Take a look at the documentation and some videos:

Documentation: https://laravel.com/docs/5.4/mix
Video: https://laracasts.com/series/whats-new-in-laravel-5-4/episodes/3

jayin

5.4不支持这种编译了?

jayin 回复 JellyBool

播放出错了,不支持html5什么的

jayin 回复 JellyBool

我看了一下文档解决了,

JoouA 回复 jayin

我还是解决不了 咋解决的啊

JoouA 回复 jayin

再次看了一遍laravel5.4mix的用法,给解决了 睡觉睡觉

jayin

点击评论怎么评论了两条相同的了

jayin

@JellyBool 在webpack.mix.js里面怎么使用mix.version([‘app.js’, ‘app.css’]) ?

Alliswell_lc

windows环境下应该是 php artisan tinker 命令进入tinker

Stussy

直接前后端分离感觉是最好的 看上去也不乱

biggerdong

select2官网打不开,vpn也没用了?

JellyBool 回复 biggerdong

我这边没有什么问题

https://select2.github.io/

jayin

@JellyBool migrate 修改字段数据,里面的方法写错了,执行了php artisan migrate ,我把change写成了chanage()执行成功了,结果我想migrate:rollback回退不了了,报错chanage()不存在,这种怎么解决?我不能保证每次我的migrate文件都写对啊

JellyBool 回复 jayin

额。。你写对不就好了么,rollback 执行的是 down 方法吧

aaa83351229

我是直接CND引用的,现在有个问题就是,搜索是可以的但用户不能自己创建标签

aaa83351229

好吧我错了,要按个回车才行…

Young

老铁,为毛我的自定义输入 不像你的会出现带叉叉的样式。 对着撸了几次都是没有叉叉样式。。
找不到所以然然rãn。。。

JellyBool 回复 Young

有可能是 css 的样式问题,比如 icon 等。

以后问问题的时候,把相关代码贴出来吧,然后用 markdown 排版一下代码,不然我也猜不到是什么

Young 回复 JellyBool

shit fuuuck bitch ctm tmd wbd。。。。折腾了半天终于解决了。此刻的憋屈压抑心情完全释放出来,oh,fuuuuck 爽!接着干

UncleCaozy

我不用wget下载 我直接去网站整个zip包下载下来,拷贝出里面的js和css文件到项目中,然后npm install可以吗

JellyBool 回复 UncleCaozy

可以的啊,wget 就是下载文件的。你注意一下自己的路径就好了啊

UncleCaozy 回复 JellyBool

我全部引用到了之后 框也出来了 但是下面的option出不来

JellyBool 回复 UncleCaozy

你看 chrome 的 devtool 就好了

UncleCaozy 回复 JellyBool

没报错 显示文件也都引用到了。我的情况是:我把下载下来的select2的js和css文件放在了public目录下的css和js文件里了,然后再app.blade.php视图上引用了,然后没报错,但是只出来框,不出来option选项

JellyBool 回复 UncleCaozy

你有写这样的代码没?

$(".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;
                }
            });

以后问问题的时候贴上相关代码吧,不然我也要靠猜才知道你的问题所在,顺便把代码用 markdown 排版一下

UncleCaozy 回复 JellyBool

这是我的make.blade.php

UncleCaozy 回复 JellyBool
<!DOCTYPE html>
<html lang="{ app()->getLocale() }">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/js/jquery-3.2.1.min.js"></script>
    <link href="/css/select2.min.css" rel="stylesheet" />
    <script src="/js/select2.min.js"></script>
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{ csrf_token() }">

    <title>知乎</title>

    <!-- Styles -->
    <link href="{ asset('css/app.css') }" rel="stylesheet">
</head>
UncleCaozy 回复 JellyBool

这是在app.blade.php头部引用的下载下来的select2的css和js

UncleCaozy 回复 JellyBool

我去 好乱 第一次用markdown 不好意思

UncleCaozy 回复 JellyBool

会不会是编辑器ueditor的样式影响了select2的样式加载?

UncleCaozy
@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">
                                <select class="js-example-basic-multiple" multiple="multiple">
                                    <option value="AL">Alabama</option>
                                    <option value="WY">Wyoming</option>
                                </select>
                            </div>

                            <div class="form-group{ $errors->has('body') ? ' has-error' : '' }">
                                <label for="title">描述</label>
                                <script id="container" name="body" style="height:200px;" type="text/plain">
                                    {!! 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>

    <script type="text/javascript">
        $(".js-example-basic-multiple").select2();
        
    </script>
@endsection
JellyBool 回复 UncleCaozy

确定 chrome 的 console 没报错?

UncleCaozy 回复 JellyBool

确定,一点错误也没有 就是这样,出不来option,很烦恼。难道是样式加载顺序问题

JellyBool 回复 UncleCaozy

那你先调 css 样式试试呗,再:

<select class="js-example-basic-multiple form-control" multiple="multiple">
                                    <option value="AL">Alabama</option>
                                    <option value="WY">Wyoming</option>
                                </select>
UncleCaozy 回复 JellyBool

调过了 还没用 我把代码回退到了上节课,明天重新来一遍吧

UncleCaozy

确定,一点错误也没有 就是这样,出不来option,很烦恼。难道是样式加载顺序问题

bourne

Uncaught TypeError: $(…).select2 is not a function
at HTMLDocument. (create:171)
at c (app.js:29)
at l (app.js:29)
(anonymous) @ create:171
c @ app.js:29
l @ app.js:29
setTimeout (async)
yt.readyException @ app.js:29
(anonymous) @ app.js:29
c @ app.js:29
l @ app.js:29
setTimeout (async)
(anonymous) @ app.js:29
u @ app.js:29
fireWith @ app.js:29
fire @ app.js:29
u @ app.js:29
fireWith @ app.js:29
l @ app.js:29
setTimeout (async)
(anonymous) @ app.js:29
u @ app.js:29
fireWith @ app.js:29
fire @ app.js:29
u @ app.js:29
fireWith @ app.js:29
ready @ app.js:29
v @ app.js:19
上面的问题显示和大家的都不一样啊,我是直接用的CDN,@JellyBool知道是什么问题吗

JellyBool 回复 bourne

这个基本就是加载顺序的问题了

bourne 回复 JellyBool

加载顺序我都试了好多种了,感觉现在路径都乱套了,在app.blade.php里面有下面这一行

把他删掉,退出登录的JS不加载,不把 他删掉,select2的JS不加载。根本不冲突的两样不知道为什么一直这样,算了,随缘吧,过两天冷静下来再看看,哈哈哈

李大饼儿同学 回复 bourne

请问你这个问题解决了么

liujun

select 和 pluck有什么区别?

JellyBool 回复 liujun

select 是选择要查询的字段,pluck 的话,会有 key value 这样的形式?

liujun

求救,网上找了很久找不到答案@JellyBool
1,$request->get()和 request->input()有什么区别? 2,在store方法里,存入数据库的时候,可以这样写:User::create(['name'=>request->name]),这里的request直接对应input表单里面name为name的值,这里没有用$request的get或input方法,是不是一种简写?

JellyBool 回复 liujun

是的,其实背后的源码都是一样的。是一种简写

skygogo

大神,我的select2样式出不来,都是按照视频来的,出现这个错误( app.js:3 Uncaught TypeError: $(…).select2 is not a function
at HTMLDocument. (create:126) )

JellyBool 回复 skygogo

这个应该是 jquery 和 select2 的加载顺序问题吧

skygogo 回复 JellyBool

我用npm的方式解决了,主要是js和css没有加载出来,谢谢大神

夏末_sunshine丶

大神 为什么我的topic.text没有值,在后台传输过来的数据没有的时候,没有办法和你视频中说的使用输入的值,什么情况啊。。我代码对照了好多遍,没有发现错误、、

JellyBool 回复 夏末_sunshine丶

大神 为什么我的topic.text没有值

你的后端返回正确的格式了么?

夏末_sunshine丶 回复 JellyBool

返回了 这是我打印的结果 Array(3)0: {id: “p”, text: “p”}1: {id: 1, name: “php”}2: {id: 10, name: “phpstorm”}length: 3__proto__: Array(0)

JellyBool 回复 夏末_sunshine丶

{id: “p”, text: “p”} 这个是什么?

夏末_sunshine丶 回复 JellyBool

应该是我在输入框输入的值,如果我输入的值数据库里没有 那么返回的这个数组就为空了

JellyBool 回复 夏末_sunshine丶

如果我输入的值数据库里没有 那么返回的这个数组就为空了

这个感觉逻辑上很正确呢

夏末_sunshine丶 回复 JellyBool

但是就是获取不到text值,很奇怪 。。 不过现在还好 换了一种写法 也能实现同样的效果 —_—!

carsonlius

教主 请教个问题

搜索请求的触发使用的是minimumInputLength:2, 这个长度计算的是英文,如果输入的中文 极大的几率在还没有输完 
      一个字符的时候 已经触发了请求 最后搜索框得到类似于这样·wu'qwu'qi武器·
       这个应该怎么避免呢?

教主 评论加上markdown预览功能吧

JellyBool 回复 carsonlius

那这样的话,你为了体验,可以 setTimeOut,再触发时间。

评论的预览是点击一个按钮之后预览么?

carsonlius 回复 JellyBool

可以的,不过希望是实时(左边是markdown,右边是渲染后的文本)

Flourishing

弄不好gulp 或者 npm install 或者 mix的同学 建议直接在app.blade.php文件头部引入以下文件 前提是 你讲select2的css还有js文件放入到了 public目录中 效果完全OK的

<link rel="stylesheet" href="/css/select2.min.css">
<script src="/js/select2.min.js"></script>
qsnbd 回复 Flourishing

谢谢大佬!按照您说的一下子成功了!!!