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

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解决了。如果你遇到类似的问题,可以尝试一下。

咦,被white-space: nowrap;小坑了一把

 小程序文本限制行数其实是比较简单的,只要指定最大高度,然后overflow隐藏一下,但由于我之前为了去空格,加了个white-space:nowwrap,导致换行一直失败,也就是说怎么着都在一行里面,去掉就好了

小程序文字限定行数换行就这几行:

CSS代码
  1. .break{  
  2.     overflowhidden;  
  3.     word-break: break-all;  
  4.     text-overflow: ellipsis; //...显示  
  5.     display: -webkit-box;  //盒型
  6.     -webkit-box-orient: vertical;  
  7.     -webkit-line-clamp: 2;  //2行,这个最好配合一下元素的max-height和font-size,多试两下就OK了。
  8. }  

轻松搞定。

参考:

1、https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space,white-space CSS 属性是用来设置如何处理元素中的 空白 

 

 

webpack和laravel-mix的一点笔记

用了laravel之后,做网页好象不用laravel-mix总感觉缺了点什么,毕竟他能够帮你压缩JS和chunk文件。在以前,那得是用第三方库的,比如yahoo的工具等。这当然是后续的事情,但在开发的时候,常规做一个页面,刷新一下,其实也还是挺痛苦的。

直到后来,有了browsersync,嗯,这个插件laravel-mix内置了。如果要用,还是要npm install 一下的。browsersync唯一的问题,就是全量刷新。这个会有点痛苦而且明显页面会刷新一下。

再后来,看到了,还有laravel-mix用的webpack,其实还自带了一个hmr,嗯,看package.json的时候应该有注意到,有一个参数叫hot,运行的命令是mix watch --hot,平时的watch没有--hot参数。于是就想着利用它来折腾一下。

先说一下共同点和不同点

共同点:

1、都需要在页面里引入一个JS文件,不同的是browsersync引用的是自己的client.js,而webpack引用的还是app.js,只是另一个端口的罢了。

2、都是开启了一个新的程序,都利用了websocket,bs默认是3000,还有看UI结构的3001端口,而webpack默认开的是8080(8080,这个默认端口,哼哼,太容易被占用了。。。。。要注意一下)

3、BS和webpack都可以通过webpack.mix.js来修改端口和配置参数,hmr的话,要考虑跨域,bS则不需要,BS通过配置还可以将UI关闭,{ui:false},这样就不会默认开3001端口了,省点资源

不同点

1、browser-sync要npm install安装,webpack是内置的

2、bs默认是更改后直接refresh,而Webpack是看起来的局部刷新。如果是主项目,input框中的内容都不会消失。这个在测试的时候其实也挺重要(如果是子项目,则还是会消失,但页面并没有刷新)

3、命令:bs用yarn watch 就行了,webpack的要用yarn hot (基于laravel-mix的情况下)

----

其实可能还有更多的异同点,但目前对我来说可见的、一下子想起来的其实就这些(后续想到再补上)。

Spring项目如何设置session的过期时间

接手一个Spring项目,因为默认的session只有1天时间(已知是项目中的现状),再加上项目里的session是利用redis来管理的,实在是spring不熟,于是就google,大部分都是说,设置:server.session.timeout就行了。

然而并没有效果,继续翻google和stackoverflow,有人说你得看文档啊。,从springboot2.0开始,就是server.servlet.session.timeout了。于是继续 改。仍然不起作用,

这时候有一个评论数并不高的回复说,其实只要改@EnableRedisHttpSession(maxInactiveIntervalInSeconds = 60),如果有设置这个值,只要修改maxInactiveIntervalInSeconds就行了。

于是将值改为 86400*10,问题解决。

参考:

1、https://stackoverflow.com/questions/32501541/what-is-the-default-session-timeout-and-how-to-configure-it-when-using-the-sprin