手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表2024年09月的文章

用ziggy来管理前端代码中的路由。

突然间不知道这个算是该放在哪个分类了,毕竟ziggy在github上的项目,也是src为PHP,dist是JS

ziggy是一个优秀的、配合laravel使用的、适合用于SAP项目的一个前端组件。对于laravel来说,他只是主要实现了一个@route的方法,放在blade模板里就行了。至于是全放还是部分放,那就看你怎么配置的了:https://github.com/tighten/ziggy#filtering-routes,比如debug相关的就应该去掉。如果前后端项目有分离,那更应该用@route(['group'])的方式来处理。
 
对于前端来说,那就更方便了,他提供了一个route的方法,可以直接用laravel路由的名字。比如route('home.index'),会生成相应的路由。如果你要用在axios或者其他里面,你得  使用url()方法,比如route('home.index').url()生成一个字符串。
 
ziggy的用法有很多,即使你不使用blade模板,官方也都提供了适用的方法,说多了也没啥用,看这里就行了:https://github.com/tighten/ziggy#filtering-routes
 
常用方法:
route('home.index') => 对应 Route::get()->name('home.index')
route('home.index',[1,2]) =>对应 Route::get('/aaa/{a}/bbb/{b}')->name('home.index') ,允许传入数据当成 参数传递
route('home.index' , {a:1,b:2}) ,同样对应上面的路由,也就是说他第二个参数除了可以传入数组外,也可以传入对象
如果你有用laravel 的route.binding功能,他生成链接的时候,会根据你在Model里的getRouteKey来输出URL,参考:https://github.com/tighten/ziggy#route-model-binding
 
更多的还是看官方吧。。。。
 

查看PHP-fpm僵尸进程并干掉它

 几个常用命令

1、pstree -ap|grep php ,这是以树型进行展示 ,如果有括号,基本上就是僵尸
2、ps -A -o stat,ppid,pid,cmd | grep -e '^[zZ]' ,如果有,那就是僵尸。毕竟都Z了
 
有兴趣的在遇到僵尸后可以strace -p跟进一下,没兴趣就直接:kill -HUP id 或者 kill -9 id了
 
当然,最好还是strace一下,这样方便排查问题,而不至于后面会频繁出现。遇到问题不要急着重启nginx和php-fpm,排查一下,不然下次可能还会出现
 
其他方法
1、ps -aux|grep -v "grep\|nginx\|php-fpm" | grep php

Tags: strace, pstree

ElementUI form服务端验证

看到标题的时候,估计会很惊讶,服务端验证那不是很方便么,自定义一个rules,杀杀水就达到目标了。

事实上,我是在做一件偷懒的事情,毕竟大家都知道表单验证很多时候为了方便和节约性能,都是客户端先检验,然后再服务端检验,这样用户体验也好,但是在后台的时候,如果你要写两遍,那花的精力就大了。特别是elementUI的rules,还得写自定义的validateFunc,于是我就想着前端不校验,后端校验,然后把error回显到指定的元素上。
 
比如如果只是弹个窗,提个示,那谁都可以实现了,但如果你不能为指定元素做错误提示,那么在表单过多的情况下,用户也会很苦恼。如果表单有几十个,怎么破?
 
翻了一下elementui的form和form-item的源码,发现可以额外传递error进去。用来提示该元素出错了。error是一个string,组件中会watch,然后给validateStatus赋值error,给validateMessage赋值error对应的string。
 
于是,在submit的时候,发现有error时,可以直接this.errors = res.data.error;这时候相应的元素就会飘红。除了没有focus到第一个标红的元素上,其他一切OK
 
---
如果用的是step 表单,那要注意,如果要去不同的step,需要先设置step ,然后 在 this.$nextTick()中进行赋值。否则,页面出来了。变量会提前赋值,渲染出来的表单元素无法将error赋值进去。被这个折腾了一晚上。
 
---
用这个的好处是,只有提示,不会象他原来的rules会阻止下一步的进行。现在就感觉轻松多了。
本来是准备切到andtv的,结果 发现elementUI的2.15,把andtv中的几个额外的组件也加全了。比如description-item和 骨架屏。。确实666
 
----
再忍忍,现在还得用VUE2.。。。
 

Avoid mutating a prop directly since the value will be overwritten whenever the parent

 InertiaJS和VueNestable共用时,遇到的Avoid mutating a prop directly since the value will be overwritten whenever the parent.

因为在使用InertiaJS时,所有的变量都是通过props传递进去的。比如分类的数据。这时候用vue-nestable,就会出现上面的错误:[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: xxxx

因为xxxx变量是props传过来的。因此不能在子组件再通过组件来修改xxxx变量。要偷懒直接在data变量中定义一个中间变量,这时候就方便了。

data(){
    return {
        yyyy: this.xxxx
    }
}

然后vue-nestable的v-model可以直接用this.yyyy,报错信息解除。

-----

这个问题主要是出在inertiaJS上。毕竟其他完整的页面demo,变量都是当前页直接给出来的,所以就不会出错了,但遇到问题还是要看本质,才知道怎么改

Failed to decode downloaded font:

 用webpack打包的时候,页面的图标出不来了,比如:elementUI和fontawesome的图标,在console里出现:Failed to decode downloaded font:<URL>,网上查了大约有两种说法

1、springboot,需要在POM文件里加入对woff/eot等的文件的处理,然而我不是spring项目,所以就明显有问题

2、可能是打包的时候图标文件有问题,因为用webpack,可能就打的不是完整包(极有可能),所以用正常的覆盖一下。

我用方法2解决了。如果你遇到类似的问题,可以尝试一下。