lg23

668 经验值

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

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

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

(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";

群主,Transformer 这个方法非常好用,但我遇到一个问题
dingo api 下面有两个方法:
$this->response->item 将一个项目绑定到transformer并启动响应
$this->response->collection 将集合绑定到transformer并启动响应

从数据库从取出数据直接返回,通过以上两个方法均正常,但是,如果从数据库取出数据经过处理的,例如:

    // 从购物车中取出数据
    $cartItems = self::$cartStore->apiGetCartAll($where);
    // 购物车数据中添加相应商品信息
    foreach ($cartItems as $cart_item) 
        {
            $cart_item->goods = self::$goodsStore
                                    ->apiGetGoods($cart_item->guid);
            array_push($cartItems_arr, $cart_item);
        }
    return $cartitems_arr

这里返回的数据是经过处理的,然后用以上方法均有报错
Symfony\Component\Debug\Exception\FatalThrowableError: Type error: Argument 1 passed to Dingo\Api\Http\Response\Factory::collection() must be an instance of Illuminate\Support\Collection, array given, called in /vagrant/tb100/admin/app/Api/Controllers/v1/CartController.php on line 41 in /vagrant/tb100/admin/vendor/dingo/api/src/Http/Response/Factory.php:96

ErrorException: get_class() expects parameter 1 to be object, array given in /vagrant/tb100/admin/vendor/dingo/api/src/Http/Response/Factory.php:126

搞定了,我的写法是这样的

config.headers.Authorization = `Bearer ${store.state.login.token}`;

群主!
这里的 Beaer 是不是 Bearer
另外 上面的 is 是什么意思?
Beaer 和 Bearer 我都试过,还是报一样的错误

config.headers.Bearer = `Bearer ${store.state.login.token}`;

报错如下:
GET http://www.tb.com/api/order/0 400 (Bad Request)
Uncaught (in promise) Object {error: "token_invalid"}

我修改了添加token 的方法

if (store.state.login.token) {// 判断是否存在token,如果存在,则每个http header都加上 token
            
            reqHeaders.append('Authorization','Bearer '+store.state.login.token);
        }

目前没有报上面的错误了,但是返回数据时报错,提示
TypeError: Cannot read property 'data' of undefined

mounted() {// 生命周期钩子
        this.axios.get('http://www.tb.com/api/order/type=0')
        .then((response) => {
            console.log(JSON.parse(response.data))
            //console.log(JSON.parse(response.data.resultData));
            //this.lists = JSON.parse(response.data.resultData);
        })
    },

我后台返回的代码如下:
orderController.php
return $this->response->item($order, new OrderTransformer());

OrderTransformer.php
public function transform(Order $order)
    {
        // 调用 model 里的方法 将属性转换为数组
        return $order->attributesToArray();
    }

群主: axios拦截器有讲没?
我想实现以下功能
统一处理所有http请求和响应
配置 http response inteceptor,当后端接口返回401 Unauthorzed(未授权),让用户重新登录

问题是我现在手工在浏览器中添加:
http://www.tb.com/api/order/type=0?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjUsImlzcyI6Imh0dHA6XC9cL3d3dy50Yi5jb21cL2FwaVwvbG9naW4iLCJpYXQiOjE0ODkyOTI4MDksImV4cCI6MTQ4OTI5NjQwOSwibmJmIjoxNDg5MjkyODA5LCJqdGkiOiI2OTNjYTY1MWU3MzVlZTQ4ODIxNWU2MzFkYzFjNTRjMSJ9.SV6yEcHkkALu07rSFdQx4ODm8zFrkNV7apxLYQg1MJc
请求返回结果是正常的。
但是我通过拦截器统一处理时,却总是提示:

GET http://www.tb.com/api/order/type=0 400 (Bad Request)
error : "token_invalid"

这里我估计是 token 没有添加上,但具体应该如何添加呢?

/**
 * 拦截器
 * 统一处理所有http请求和响应
 * 配置 http response inteceptor,当后端接口返回401 Unauthorzed(未授权),让用户重新登录
 */
import axios from 'axios'    // ajax 插件
import VueAxios from 'vue-axios' // vue请求ajax插件
import store from './vuex/store.js'//状态管理
import { USER_SIGNIN,USER_SIGNOUT,USER_REGISTER } from './vuex/types'// 引入状态定义 并解构
import router from './route-config.js'// 引入路由配置文件

// 全局 axios 默认值
// axios.defaults.baseURL = 'http://www.tb.com';

// 请求 拦截器
axios.interceptors.request.use(
    config => {
        console.log(Boolean(store.state.login.token))
        // 在请求之前做某事发送
        if (store.state.login.token) {// 判断是否存在token,如果存在,则每个http header都加上 token
            console.log(998112233)
                // config.headers.Authorization = `token ${store.state.login.token}`;
            config.headers.Bearer = `token ${store.state.login.token}`;
        
        }
        console.log(config)
        return config;
    }, err => {// 发生错误
        return promise.reject(err);
    });

// 响应 拦截器
axios.interceptors.response.use(
    response => { // 对响应数据做某事
        console.log(123)
        return response;
    }, error => {
        if (error.response) {// 对响应错误做出反应
                    console.log(789)
            switch (error.response.status) {
                case 401:
                    // 401 清除token信息  并跳转到login
                    store.commit(USER_SIGNOUT);
                    router.replace({
                        name: 'login',
                        query: {redirect: router.currentRoute.fullPath}
                    })
            }

            // 返回接口返回的错误信息
            return Promise.reject(error.response.data);
        }
            
    });

export default axios;

拦截器代码如上,还请指点!