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

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

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 <script>, as they will not be parsed
这里说有副作用的标签,可是代码我反复检查也没有发现有错误的标签

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

好的,学习了

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 的位置放的位置不一样没什么区别把?

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

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

JellyBool 微信公众号

不定期送书,送键盘,送订阅优惠