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

记录一次自己被自己坑的过程

众所周知,现在的PHP开发基本上都是前后台+服务器通吃,虽然都是各种三脚猫,但毕竟也算是大半个全栈。

开发网页的时候,最烦的事情就是页面上改个文字,都得cmd+r(F5)刷新一下网页看看效果。前端这两年在这个上面改进了很多。比如npm run watch,其实就是监控文件改动。自动刷新一下页面。别看这个功能不复杂,但其实会浪费很多时间。比如双屏电脑的时候,听起来很方便,一个屏幕写代码,一个屏幕看效果,但你其实试一下就会感觉到累了:代码写好,鼠标移到另一个屏幕,点击一下浏览器,按一下F5,看一下效果。如果不对,回来再试。。。
 
以前都忍了忍,但如果改动多了,其实真不能忍。于是找了browser-sync这个软件,他可以代理你本地的网页,设定好监控的文件,改动后,他就会主动刷新页面(看了一下,就是在页面里嵌入了socket.io组件,一旦有更新,软件主动往ws里发通知,让他执行location.reload 之类的)
 
正常使用的时候都没问题,也自我感觉良好,直到有一天,我POST数据的时候发现了一个奇怪的事情。POST一个JSON数据,一个使用Quill生成的HTML,被我用JSON包了起来的数据。看了一下SQL的LOG,全部提交了两遍。更关键的是,第二次提交的时候。JSON结构还在。但HTML全部没了。。。。这个就太妖异了。
 
一开始我一直以为是自己哪里程序写的有问题,触发了两次或者触发了XSS的保护,但仔细找了一下,也没有发现自己有使用中间件。
 
最后排查browser-sync,因为他是代理访问。类似browser-sync --proxy,那就想了,是不是第一次我提交后,他提交了。然后又提交了一次?毕竟是第三方软件,我也没有深究的想法,直接关闭browser-sync的进程,再测试。果然,一次过。也没有提交两次。。。
 
为了这玩意,我被折腾了2小时。所幸这个小问题影响不大(正常如果只是看页面,几乎完全无影响,后续,我还是准备将页面做成象nova那样。估计会好很多)
 
--EOF--
都说要知其然并知其所以然,但也没有那么多时间来查看,所以就先这样,也许等有时间的时候好好的探究一下,为什么啥都不变,就将我的HTML那一小段给删除了。。

Tags: browser-sync

音标字体(Kingsoft Phonetic )下载

 最近在帮娃打印学校的作业,涉及到了英语作业中的音标。由于老师采用了音标字体,我们无法打印也无法识别,找了一下,原来采用的是:kingsoft phonetic plain这个字体。

据说只要下载了金山词霸 就可以,但不太可能为了这个字体而去单独下载这个软件。最后找到了这个:https://en-yinbiao.xiao84.com/2014/5210.html,上面有PC版的安装方法:金山软件出的一款音标字体,Kingsoft Phonetic (TrueType)字体,将本文件下载、解压后,复制到下列文件夹下:C:\WINDOWS\Fonts一般即可正常使用。如果不可以,重启电脑,或安装一遍字体:打开资源管理器,依次点击:文件-安装字体-定位到字体所在文件夹,确定。

我这里也做了一个备份:http://static.cache.js.cn/fonts/kingsoft%20phonetic.ttf,可以直接点击下载

MAC下面安装就比较方便,双击字体,打开后有个预览,右下角有一个:install font。安装完即可。

重启WPS或者Word(或Pages),均可以识别该字体。

——EOF

后记:Pages认不出音标。即使识别出了字体,所幸我有WPS和Word。。。

不是特别推荐WPS,主要是全家筒放在一起比较恶心,而且。。。。。一些常见的模板都要收费了(比如早期windows上的稿纸模板,现在也变成收费的了)。如果实在没有或者不愿意购买word,那就只能忍忍了。毕竟常见功能还是免费的。

jq的简单用法

jq是linux命令行下读取和解析JSON的好工具。只是好象不能jq xxx.json这样的用法,但没事,可以通过管道符,cat xxx.json|jq 就OK了

在这里:https://www.tuicool.com/articles/vieMN3Q有详细的教程,写的非常完整,但如果简单的使用,并不需要完整的看完,只要记得几个用法就行

来个简单的数据:{"code":1,"msg":"ok","data":{"fields":["a","b","c"],"items":[{1,2,3},{11,22,33}],"other":[{"x":1,"y":1},{"x":2,"y":2}]}}

1、获取items节点: cat xxx.json|jq ".data.items"

2、获取items下第二条数据的第二个,即22.   cat xxx.json|jq ".data.items[1][1]"

3、获取other下的所有x节点: cat xxx.json|jq ".data.other[].x"

是不是很方便?如果要自定义格式输出,还可以这样

1、将所有x节点用{"items":[]}格式输出: cat xxx.json| jq "{items: [ .data.other[].x ]}" ,

如果要看更多的用法,还是上面的网址里更详细一点。我这只是简单的用一下。。或者说是临时在服务器上测试数据,让自己看起来会比较方便一点。还有一个原因是我在服务器上用这个的最大理由。有时候JSON拿到的时候中文都是转义过的。用jq,可以直接看中文。这点比较爽

browser-sync 省时的浏览器同步测试工具

 不知道将它算在哪个分类。但即实是js写的就扔在javascript下面了。。

不怎么为什么,我npm install -g browser-sync,就是没用。最后还是用yarn global add browser-sync,才让这个命令行成为全局的。
 
因为在用PHP开发,没有用纯vue,所以没法用webpack那类的玩意,就造成我写完页面,要刷新一下才OK。特别是两个屏幕。。好麻烦。鼠标移来移去,按再cmd+r。。。
虽然装了hammerspoon,弄了个插件可以让鼠标切换显示 在不同的显示器上,但还是麻烦。以前也用过browser-sync好象都失败了。
最近实在觉得烦,又操起来了。
试了一下。原来还是很简单的。
 browser-sync start --proxy "localhost.dev" --files "resources/views/*/*/*.php" --no-ui --no-open
因为我本地测试会使用域名。所以,需要指定proxy,启动后会打开3000端口,这样就可以通过localhost:3000进行访问了。
 
--files,是指监测resources下的文件。我开始用 *.php 失效。所幸我90%的情况下只要监测模板。所以目前看来还是够用了。
命令太长。可以放到Makefile里或者象我一样,扔在了fabric的文件中,运行一下:fab watch就OK了
 
-----
补充:附上两个网址:
1、官网:https://browsersync.io/
2、国内的文档:http://www.browsersync.cn/
 
再补充:因为在laravel里进行了分组,要检查一下PHP也reload。只能这样了。
1、laravel下的命令行:browser-sync start --proxy "localhost.dev" --files "resources/views/*/*/*.php,app/*/*.php,app/*/*/*.php,app/*/*/*/*.php,config/*.php,app/*/*/*/*/*.php" --no-open --no-ui
2、没有用browsersync的 --xip参数,因为他使用之后,域名就变成:http://127.0.0.1.xip.io,你要干脆就是这个域名也就算了,却偏偏还带了port,那就失去意义了。

vue + sortable js的一些简单操作

 用sortable处理排序,代码真的很少,不需要引用什么vue-sortable之类的。但会有个问题。。实际的DOM和Vnode可能会显示不一致。往往拖完了,序号变了,数据变了(可以通过console.log来查看),但就是DOM没变。

后来是搜索到这篇文章,写的比较详情:https://www.jianshu.com/p/d92b9efe3e6a,我就不多写了。我的几行代码类似如下:

JavaScript代码
  1. dragable() {  
  2.   let contentRow = document.querySelector('.content-row');//指定element,如果有ID最好,在这个下面的元素,最好都是统一类型的,如果当前元素是ul,那就是拖li  
  3.   Sortable.create(contentRow, {  
  4.     onEnd: ({newIndex, oldIndex}) => {  //监听拖动结束事件  
  5.       let newline = contentRow.children[newIndex],  
  6.         oldline = contentRow.children[oldIndex];  
  7.       // 先删除移动的节点 ,再插入移动的节点到原有节点,还原了移动的操作  
  8.       //这里是操作DOM  
  9.       contentRow.removeChild(newline);  
  10.       contentRow.insertBefore(newline, newIndex > oldIndex? oldline : oldline.nextSibling);  
  11.       //这里是操作数据  
  12.       let currRow = this.items.splice(oldIndex, 1)[0];  
  13.       this.items.splice(newIndex, 0, currRow);  
  14.   
  15.     }  
  16.   });  
  17. },  

这个方法是vue的methods中的。不复杂。看看就行。记录一下。原来我觉得很简单。这个方法的最后两行就行了。。。但就是DOM不变。参考了上面链接中的内容才加了那两行。

 

Records:288612345678910»