村里的河水原本可以直接饮用的!而今用来洗衣服都嫌脏。恨死村里的豆腐店...
最近发表的话题
最近发表的评论
  • Laravel 成功整合 cube-ui 组件(3 楼附 jsConf.push 错误解决方法) at 1个月前

    总结一下 laravel 环境整合 cube-ui 组件的完整过程
    首先确保 npm run watch-poll 这条命令可以正常执行,之后再进行如下操作:
    1、执行命令【npm i -S cube-ui】安装 cube-ui;
    2、执行命令【npm i -D stylus stylus-loader】安装依赖包(装过的重装也无妨);
    3、执行命令【npm i -D webpack-transform-modules-plugin@0.4】安装插件;
    4、手动修改 package.json 文件,添加以下代码

        "transformModules": {
            "cube-ui": {
                "transform": "cube-ui/lib/${member}",
                "kebabCase": true,
                "style": {
                    "ignore": ["create-api", "better-scroll", "locale"]
                }
            }
        }

    5、修改webpack.mix.js这个配置文件,末尾添加如下代码

    let TransformModulesPlugin = require('webpack-transform-modules-plugin')
    mix.webpackConfig({
        resolve: {
            alias: {
                'cube-ui': 'cube-ui/lib'
            }
        },
        plugins: [
            new TransformModulesPlugin()
        ]
    })

    6、在resources/assets/js/app.js文件中使用cube

    import Cube from 'cube-ui'
    Vue.use(Cube)

    7、执行命令【npm run watch-poll】编译吧!

    测试环境如下:
    Win7 64位
    Laravel Framework 5.5.1
    Vue 2.1.10
    npm 6.4.1
    node v10.15.1

    文件 package.json 截图如下
    Laravel
    如果碰到错误 TypeError: jsConf.push is not a function
    这可能是因为安装插件的时候没有指定版本号,或者版本号不对。比如npm i -D webpack-transform-modules-plugin这条命令没有指定版本号,电脑有时竟会安装 0.3.5 的版本(并非最新版)。经测试发现:0.3.x系列的版本在win7里面会报错;0.2.1的版本及0.4.x系列的版本运行正常。所以在第3步安装插件的时候明确指定了0.4版的版本号 webpack-transform-modules-plugin@0.4

  • Laravel 成功整合 cube-ui 组件(3 楼附 jsConf.push 错误解决方法) at 1个月前

    ScrollNav滚动效果图出来了
    1、菜单左右两侧可以联动
    2、标题具有吸顶效果
    3、滚动到极限位置会有缓冲效果
    如果不用cube组件,自己写的话肯定要费不少工夫
    file

  • 发现 exports 和 module.exports 的关系,貌似找到暴露代码的新方法【再加一条】 at 1个月前

    我在18号的文章里记录了【挂载this对象对外暴露代码】的方法,但是在某些环境里此法失效了,原因是 this 对象为空。不仅 this 失效,就连 exports 和 module.exports 也一并失效!必须采用 export {} 之类的写法才能对外暴露代码。

    今天,我又发现了新的、可谓怪异的对外暴露代码的写法!此法可以突破封锁,已在 Vue 3.4.1 项目里面测试成功。

    //导出代码的正规写法
    module.exports.a = [1,2,3];                 // module.exports 指向不变
    exports.a = 200;                            // exports 指向不变,覆盖了同名属性!
    
    //挂载 this 导出代码的写法如下
    this.arr=[2019, 3, 24]                      // Export Array OK
    this.obj={email: 'zhaiduting@163.com'}      // Export Object OK
    this.f=function(f){return f}                // Export Function OK
    this.af=(a, f)=>a+f                         // Export Arrow Function OK
    
    //另类怪异的导出写法【还可以跟 export {} 混用】
    Object.assign(arguments[0].exports, {
        foo: 'foo',                             // Export String OK
        bar:(msg)=>msg,                         // Export Arrow Function OK
    })

    项目的下载链接依然是 https://gitee.com/zhaiduting/webpk.git 为什么要用这种怪异的写法?这个链接里写了说明 https://learnku.com/articles/26035

    file

  • 分享一下禁用 ESLint 的简便方法,顺便唠叨一下代码规范的现状与将来 at 2个月前

    所以需要更加智能的 IDE 去规范代码……再难看的代码都会以最优雅的形式自动展开的智能水平

  • axios.get (url).wait (loadingGif, functionOk, functionErr) at 2个月前

    仔细一想,忽然又觉得此法不算笨,其中 wait() 函数写得比较到位。尤其最后的 return this 返回的比较巧妙,有了这个 this 才能保证后续的链式调用得以继续下去。

    Promise.prototype.wait=function(){
        // 这里处理gif动画的展示效果
        return this;
    }
  • axios.get (url).wait (loadingGif, functionOk, functionErr) at 2个月前

    了解Promise之后这才找到了一个比较笨拙的解决方法,代码如下

    let p=Promise.resolve('此处模拟 axios.get 请求成功的情况')
    
    Promise.prototype.wait=function(){
        console.log('此时显示无限旋转的gif动画') ;
        return this;
    }
    
    p.wait().then(msg=>
        {
            console.log('服务器响应成功,此时干点正经事')
            console.log('获取axios返回的消息:'+msg)
        }
    ).catch(()=>
        console.log('服务器报错,干点不想干的吧')
    ).finally(()=>
        setTimeout(()=>
            console.log('服务器响应已收到,可以隐藏gif动画了'), 200
        )
    )

    上面这段代码的执行结果如下(某些浏览器不支持 finally(f),可改用 then(f, f) 兼容)

    > "此时显示无限旋转的gif动画"
    > "服务器响应成功,此时干点正经事"
    > "获取axios返回的消息:此处模拟一个 axios.get 请求"
    > "服务器响应已收到,可以隐藏gif动画了"

    以上代码给then()传递一个成功状态的回调函数,用来处理正式的业务逻辑。
    后跟catch()专门处理失败的回调。
    无论响应成功与否,都应在响应收到后及时关闭gif动画。这正是finally()所做的事。

    把第一行代码改成如下形式
    let p=Promise.reject('此处模拟 axios.get 请求失败的情况')
    其他代码不变,运行结果如下

    > "此时显示无限旋转的gif动画"
    > "服务器报错,干点不想干的吧"
    > "服务器响应已收到,可以隐藏gif动画了"

    以上采用 Promise.resolve 模拟 axios 请求的,推测实际应用中也应该行得通。

  • 关于支付宝服务器向网站服务器发起支付回调的思考? at 4个月前

    后端需要通过 'TRADE_SUCCESS', 'TRADE_FINISHED' 这两状态判断交易支付成功,按理说前端也需要做个类似的判断。可是教程里面的前端代码仅仅通过 app('alipay')->verify() 没有抛出异常就判断支付成功了?为什么前端不需要 TRADE_SUCCESS 这样的判断呢?

    会不会是因为:支付宝执行前端回调的时候,支付状态必定是成功的?对于交易关闭或者失败的情况,支付宝仅仅执行后端回调,而不会执行前端回调?

  • 【豌豆苗炒鸡蛋】的做法 at 4个月前

    @alanliao 嘻嘻哈哈,是的

  • 授权策略的异常捕获不了 at 4个月前

    我用两个账号测试过了,下面的写法没问题
    public function show(Order $order){
    try{
    $this->authorize('own', $order);
    }catch (AuthorizationException $e){
    throw new InvalidRequestException('权限不够');
    }
    return view('orders.show', ['order'=>$order->load('items.product', 'items.productSku')]);
    }
    可惜要嵌套一个 try...catch... 不知道更简单的写法该怎么写?

  • $order->items ()->make ([...]) 的疑问 at 4个月前

    @leo OK了!
    protected $fillable=[
    'amount', 'price', 'rating', 'review', 'review_at', 'product_id', 'product_sku_id'
    ];
    果然,加上之后顺利解决……原来这么简单!我还浪费了好几天去钻牛角尖了(百度了好几篇Laravel源码的文章),看得云里雾里的。

  • $order->items ()->make ([...]) 的疑问 at 4个月前

    @leo 一句惊醒梦中人,谢谢老师!我马上把这两个外键添加到 fillable 里面去!

  • Laravel5.5 升级到 5.7 问题及解决方法 at 4个月前

    @sethhu 第二张截图是PhpStorm哦

  • Laravel5.5 升级到 5.7 问题及解决方法 at 4个月前

    @sphard 谢谢分享!周末我研究一下……如果真能用上谷歌搜索,那太好了!

  • Linux 笔记分享一:Linux 简介 at 4个月前

    ubuntu貌似也有服务器专用版的,我第一次错装了服务器版的,根本不知道咋整。于是删除后又重新安装了图形界面版的。

  • Laravel5.5 升级到 5.7 问题及解决方法 at 4个月前

    以前很喜欢用谷歌的,后来用不了,于是百度翻墙上谷歌的方法,然后找到了VPN,甚至还买了付费的VPN。再到后来VPN也没的用了,于是只能用百度。好在百度也好用,于是懒得探索新的翻墙方法了。

  • 【豌豆苗炒鸡蛋】的做法 at 4个月前

    哈哈,快乐有时来得很简单!买汤达人免费送了一个大花碗,后来我干脆就用这玩意吃饭了。

  • 【豌豆苗炒鸡蛋】的做法 at 4个月前

    @aen233 哈哈哈,本来是瞎弄的,可结果的确很好吃

  • 【豌豆苗炒鸡蛋】的做法 at 4个月前

    豌豆苗一定要嫩才好吃!盐要适量。
    后来豌豆苗没了,我就用大白菜替代,结果发现味道差远了,【大白菜炒鸡蛋】远远不及【豌豆苗炒鸡蛋】……如果改用【韭黄炒鸡蛋】的话可能会比大白菜好一点

  • 【豌豆苗炒鸡蛋】的做法 at 4个月前

    @Wi1dcard 哈哈哈

  • 【豌豆苗炒鸡蛋】的做法 at 4个月前

    不算是教程,节前放松,乐趣分享哈……