前段时间为甲方做了个在线预约的网页,功能很简单,就两三个页面以及表单提交。

环境是:Windows 服务器、Tomcat7、Java、JSP

上线后,一切都挺正常,直到有一天,实施给我发消息说部分手机访问页面异常,我简单了解了一下,发现页面的 CSS 样式和图片并没有正常加载,但是并不知道原因。

由于自己手机一直是正常的,所以拿几个同事的手机试了一下,奇葩的事情出来了,大部分同事的手机访问都是正常的,但有两个同事,手机型号一样,配置一样,甚至是同一天抢购的小米手机,一个能正常访问,一个不能...

多试了几次发现,这种现象只发生在微信的内置浏览器访问,而且用 ip 加端口的方式访问页面正常,用域名访问就会出现异常...

我不知道微信内置浏览器怎么调试查看报错,于是上 V2EX 发了个帖子吐槽了这个现象。很多大佬都发表了看法,其中 @faqqcn 和 @dntilee 两位大佬教了我一种能够在PC 上调试微信网页的方法(只能安卓设备):

微信内打开 http://debugx5.qq.com/ ,然后打开 「打开 TBS 内核 inspector 」
手机连接电脑并打开开发者选项和 USB 调试,打开电脑 Chrome,输"chrome://inspect/#devices",下面会有你的设备和网页

试了试,果然能够在 Chrome 浏览器里实时看到微信网页的信息了,Console 栏里可以看到不能正常访问的原因是因为 CSS 和图片的请求全都失败了,报错信息如下:

QQ截图20210630093548.png

我不知道这个意味着甚么,网上搜了很久也没有解决,对于微信的这种迷惑行为已经绝望了

虽然到现在这个问题也没有解决,但还是学会了一个新的技巧,最后,我想在这里对微信送上我真诚的祝福:NM$L

这两天与第三方接口调试的时候,接口方提供的 API 返回了一个非标准的 JSON 字符串,整个字符串里没有一个双引号,导致不能直接使用 Java 的 JSON.parseObject() 来将字符串直接转换为对象。

字符串如下:

{itemName:血型,itemCode:651,itemSex:9},{itemName:白带常规,itemCode:679,itemSex:2},{itemName:肝功,itemCode:692,itemSex:9},{itemName:身高体重,itemCode:873,itemSex:9},{itemName:妇科检查,itemCode:1059,itemSex:2},{itemName:CRP+血细胞计数五分+异常红细胞形态,itemCode:1119,itemSex:9},{itemName:血常规五分类CRP,itemCode:1121,itemSex:9}

然后接口方这样给我说的:
微信图片编辑_20210422102422.jpg

到这里我就不指望接口方修改返回格式了,而他说的用逗号分隔,想想就知道多复杂,在网上搜了半天,最后找到一个正则的方案,网上给出的正则规则是这样的:

pattern.replaceAll("(\\{|,)([^:]+)", "$1\"$2\"").replaceAll("([^:,\\}]+)(\\}|,)", "\"$1\"$2")

但这个正则有问题,替换完是这样的:

{"itemName":"血型","itemCode":"651","itemSex":"9"},"{itemName":"白带常规","itemCode":"679","itemSex":"2"},"{itemName":"肝功","itemCode":"692","itemSex":"9"},"{itemName":"身高体重","itemCode":"873","itemSex":"9"},"{itemName":"妇科检查","itemCode":"1059","itemSex":"2"},"{itemName":"CRP+血细胞计数五分+异常红细胞形态","itemCode":"1119","itemSex":"9"},"{itemName":"血常规五分类CRP","itemCode":"1121","itemSex":"9"}

替换完的字符串,从第二个开始," 跑到 { 外面来了,于是跟小伙伴交流,小伙伴最后帮我修改了一个正则:

pattern.replaceAll("{(\w+):(.+?),", "{\"$1\":\"$2\",").replaceAll("(\w+):(\d+)", "\"$1\":\"$2\"");

因为Java字符串的 \w 和 \d 需要转义,所以必须这样写:

pattern.replaceAll("{(\\w+):(.+?),", "{\"$1\":\"$2\",").replaceAll("(\\w+):(\\d+)", "\"$1\":\"$2\"");

搞定后,开始测试结果报错:
微信图片_20210422103100.png

小伙伴吐槽辣鸡 Java,没办法,继续网上搜,结果在一篇帖子里的评论里,看到有人说 Java 的字符串里 { 也需要转义,转义后一测试,果然是这样,所以最后的正则变成了这样:

pattern.replaceAll("\\{(\\w+):(.+?),", "{\"$1\":\"$2\",").replaceAll("(\\w+):(\\d+)", "\"$1\":\"$2\"");

替换后字符串变成了正常 JSON 字符串,在群里跟朋友分享了这件事,朋友表示正则很牛逼。

本以为这件事就过去了,第二天看群消息,群里另一个小伙伴分享了一个新的正则:

pattern.replaceAll("(\\w+):(.*?)([,|}])","\"$1\":\"$2\"$3");

测试时正常的,于是好奇正则的工作原理,开始学习正则的使用,翻看了正则的规则 (菜鸟教程 - 正则) 后,大概懂了这个正则工作原理:

三个括号分成了三组,分别匹配 List 里面的每个节点
\w 表示匹配字母、数字、下划线。等价于 [A-Za-z0-9_]
+ 表示匹配前面的子表达式一次或多次。(要匹配 + 字符,使用 \+)
. 表示匹配除换行符 \n 之外的任何单字符。(要匹配 . ,使用 \.)
* 表示匹配前面的子表达式零次或多次。(要匹配 * 字符,使用 \*)。
? 表示匹配前面的子表达式零次或一次,或指明一个非贪婪限定符。(要匹配 ? 字符,使用 \?)
| 表示两项之间的一个选择。(要匹配 |,使用 \|)

正则学会了真的很强大,但这里只了解了一点皮毛,后面还要继续学习。

前面提到了摸了一把 element-plus 重构舔狗的艺术,并准备全部使用 vue3 的新特性 composition api
因为 element-plus 的官方文档为了兼容老版的 elementUI,还是全部用 options api 写的示例
这就导致了很多地方实际使用方式和 composition api 并不一样,比如 $message 的调用方式, watch 的使用方式,废除了两个vue2 的生命周期钩子后,一些属性变化的监控等等

为了解决一些问题,搜索引擎已经翻烂了,新建了 N 个新项目尝试各种调试,最后翻到了 element-plus 的官方QQ群,解决了一些问题

QQ截图20210127111050.png

因为写这个文章跟我摸鱼重构已经过去有一段时间了,只能记录一些印象较深的问题,后面复盘。

[scode type="blue"]axios 的挂载和使用[/scode]

补充中...

[scode type="blue"]$message 的全局使用[/scode]

补充中...

[scode type="blue"]表单重置的方式[/scode]

补充中...

因为没有系统性的学习过前端知识,对于前端就只知道html、css、js,前端框架也就只会用jQuery,什么 webpack、node.js、vue、react 等都是一窍不通,后来开始摸索 vue,接触到了 elementUI,也解了一下 webpack 和 node,边学边撸了个舔狗的艺术项目(https://dogart.me),没有系统性的教学,所以很多东西都是自己踩坑摸索。

之前就看到尤大放出 vue3 Bate 版的消息,就像看一看,但是英文文档让我打了退堂鼓,这两天网上摸鱼摸到了 vue3 的官方中文文档(https://v3.cn.vuejs.org),而且 elementUI 也推出了基于 Vue3 的新版本 element-plus,于是结合网上的资料又开始折腾 Vue3,这里记录一下学习资料。

[scode type="blue"]安装 Vue3[/scode]

# 最新稳定版
$ npm install vue@next

[scode type="blue"]安装 Vue-router 4.x[/scode]
文档(英文):https://next.router.vuejs.org/

npm install vue-router@4

[scode type="blue"]Vue3 的新特性Composition Api 和 Vue2 OPtions Api 区别[/scode]
视频讲解:https://zhuanlan.zhihu.com/p/158609971
文字资料:https://cloud.tencent.com/developer/article/1529333

当然,vue3 也是向下兼容 Vue2 的Options Api 写法的

[scode type="blue"]ref 和 reactive 数据封装[/scode]
文字资料:https://cloud.tencent.com/developer/article/1529334
文字资料:https://baijiahao.baidu.com/s?id=1681607468071125946

[scode type="blue"]一些别人的学习记录[/scode]
Vue3 新特性学习:https://www.yvonnecheung.cn/views/note/2020/vue3.html

后面准备用 element-plus 把舔狗的艺术重撸一遍,但我看到 element-plus 的官方文档很多地方还是用的 Options Api 写法,我猜大概是为了让老版本兼容吧。

vue3 重撸 舔狗艺术 的开源地址放在 https://github.com/Dieinwarm/dogartvue 的 next 分支下

早上闹钟响,还早可以赖会儿床在起,然后拿起手机刷了下朋友圈,看到有人发了万青新专辑的新专辑链接,突然记起今天是万青新专辑《冀西南林路行》的开售日。

于是打开网易云,点击购买,发现iphone购买专辑需要先充值,然而最低充值额度为25元,万青新专辑只要22元,我又是黑胶年会,相当于要多充值3元放在网易云当传家宝,不能惯着网易云或者ios(不知道谁的锅),然后拿起当闹钟的退休坚果pro购买了专辑。

出门后戴上耳机,准备边骑车边听一听,万青十年时间准备了什么惊喜在里面。

结果从家楼下到公司的十五分钟内,我脑海里除了“雷“字没有听清其他任何一句话,我还在群里给小伙伴吐槽了一下。

在公司搬(mo)砖(yu)的时候,我觉得是早上路上骑车太吵所以没听清,于是坐下来再听一遍。

专辑一共8首歌,其中3首纯音,5首有词,安静听了两遍,印象最深的是《采石》最后不知是雷声还是爆破的噪音

整首专辑听下来,旋律还是很好听,总归还是有点平淡,当然,也有可能是上班时间,没有时间去仔细体会歌词。

我并不是万青的十年老粉,而是在16年的某个短暂的工作中认识一位女同事,结交中发现我们都喜欢逼哥,然后她又给我推荐了草东、万青和懂你意思,都是我喜欢的类型,初次听万青,《秦皇岛》就给我留下了深深的印象,然后歌词“孤独的海怪”当作网名至今。


人间明暗 人间明暗
人间明暗 人间明暗

新语言 旧语言
该怎样回答 不眠的时间

星河下 电子荒原
亿万场冷暖 亿万泥污人

———— 万能青年旅店《郊眠寺》


截至这边文章写完,这张新专辑已售卖240829张,不管是为新歌买单,还是为情怀买单,还是祝愿万青新专继续大卖~

因为之前的服务器快还有2天到期,所以在UCloud注册新用户买了3年的 1G1H2M 小鸡(没错,新注册账号就是新用户,不管实名是不是同一个人),这里赞一下UCloud的服务,客服在微信一对一服务,哪怕我是个小的不能再小的客户,沟通效率比工单高多了。

因为这个鸡确实太小了,就像省点内存,于是想放弃宝塔,开始折腾一下LNMP(https://lnmp.org)

安装lnmp

第一步就卡住了,安装一直报连接不上下载服务器
QQ截图20201210133247.png

于是网上搜解决办法,发现把下载链接里的 http 换成 https 就行了.....
还有一个坑,就是官网这句安装命令在Mobaxterm里不能正确执行,会报错:
bash: ./install.sh lnmp: No such file or directory
这里网上搜不到解决办法,自己琢磨出来了解决办法,那就是切换到 lnmp1.7 目录后,在把最后的 ./install.sh lnmp 单独执行

接下来就是一系列的选择MySQL版本、php版本等选择,然后就是漫长的等待,这个过程真的漫长,我甚至在官网看到了这么一句话:
[scode type="yellow"]安装时间可能会几十分钟到几个小时不等,主要是机器的配置网速等原因会造成影响。[/scode]

靓仔无语.....

终于,在经历接近两个小时后,终于看到了这个画面:
3333333333.png

然后我们访问探针:
QQ截图20201210150448.png

安装部分结束,接下来就看看教程看看怎么折腾网站,后面持续更新。

后续

试了全套命令,还是比较有逼格,但是为了后续的方便,还是换回了可视化面板宝塔,宝塔用编译安装lnmp内存占用还是比较低,但这次折腾还是学到了很多东西,目前把几个网站都搬到了新的服务器,折腾完工。

最近几天开始下班回家倒头就睡,沙发上,床上,能躺着就能马上睡着,然后半夜醒来开始精神。

慢慢开始对任何东西都提不起兴趣,游戏,美剧,都没有任何欲望去打开它们,甚至喂猫都是每天机械似的铲屎喂粮,我都不知道自己算不算一个好主人,但时常还能感受到它的温柔,这大概也是我在生活中能感受到为数不多的温柔了。

朋友总对我说你不能每天都这么丧啊,你要开心起来,你找个女朋友就会好一些。
也许单身这几年我学会的事情就是如何愉快的与自我相处,以至于开始觉得我从独处得到的快乐远远大于从别人身上获取到的,如果我自己在丧一点的心境下能让我过的舒适,我也没必要去可以活的让别人看起来我很开心。

以前觉得我可以遇到一个真诚理智的人,不仅仅是性与冲动,更多的是理解和包容,在遇到之前,我可以选择甚至享受一些孤独,但我意识到,可能我遇不到这么一个人,因为没有人会在意。没有让人甘于平庸的爱情可以拯救我,但保持对爱的期待或与可以。

某一个瞬间有过一些感觉对了的时间,但也许一开始就是个理解错误的信号,而自己又是个感观敏感的人,这样漫长的时间下来多多少少想法会有点奇奇怪怪,有时候产生一些不切实际的臆想可能也在所难免,甚至有一点病态,所以良好的自我认知是把我拉扯回现实的救命稻草。

我在学着克制,我在努力保持正常,我不奢望自己在未来有什么积极的变化,但我知道我需要随着生活学会舍弃一些东西,才能不断的往前往前再往前。

最近在电商福利摸鱼社区 GeekHub 接触到了很多柠檬🍋关键词

于是想着注册一个柠檬相关的域名,想都不用想,com 域名肯定是没有什么好米等着我了,于是直接考虑非主流域名

在趣域网搜索 lemon 关键词,发现 .gs 还没注册,lemon.gs 就强行解释为:柠檬公司 吧,打算注册时发现趣域网 .gs 要 148 元一年,于是去哪煮米(nazhumi.com)对比了一下价格,发现西部数码最便宜,只要58首年。

想了想58玩一年也不亏,就加入购物车结算,默认勾选 3 年,价格是 154 元,说明续费也是 58 元,一直玩也是玩的起的,但是觉得可能玩不了这么久,还是改成了一年,用 58 元注册了 lemon.gs

接下来奇葩的事情就来了,我在域名管理里点击续费确认续费价格,结果发现续费竟然只要 28 元

QQ截图20200925164728.png

然后为了确认续费价格没有包含任何优惠,我去查了西部数码的域名价格表,结果 .gs 价格如下:

QQ截图20200925164906.png

这就说明西部数码的 .gs 域名续费价格本来就是 28 元,那如果我一开始注册时就按照他默认的选择用 154 元注册了 3 年,那我就相当于亏了 60 元,属实是坑老实人了

为了确保我记忆没出错,我又去搜了一个 .gs 域名,加入购物车结算,果然,还是默认选择 3 年,价格 154元。

QQ截图20200925165434.png

总结

这件事大概是告诉我们了一个道理:学费还是得一年一年的交

前段时间舔狗日记很火,就想着弄一个舔狗日记的网站,顺便学学VUE,一直说学,一直拖着
还没动手写代码,就注册了几个域名 dogart.cn / tiangou.men / dogart.me
非主流域名.me后缀还是我最喜欢的,最后还是保留了dogart.me

最近工作很闲,就开始摸索着开始写代码
还挺喜欢vue的第三方组件库elementui,于是开始看element的文档

第一次踩坑

由于不会npm,也没用过其他方式创建项目,所以我用了cdn引入的方式开始写,element的组件使用也挺简单,文档也写的很详细,一开始很快上手。
但是,当我想做单应用网页的时候,问题就出现了,vue-router在cnd引入的方式下,使用方式和文档中还有网上搜到的资料完全不一样,甚至晚上一度折腾到两三点还是不行。
第二天跟之前加的一位朋友聊到这件事,他向我推荐了vue的脚手架工具vue-cli,这下想偷懒都不行了,该学的还是要学。

npm踩坑

使用vue-cli,首先要安装npm,由于之前完全没接触过nodejs,所以就跟着网上教程一步一步走
npm安装教程:https://www.runoob.com/nodejs/nodejs-install-setup.html
安装完npm后,切换npm的缓存和下载地址,我自己不喜欢东西放在C盘

npm config set cache "D:\npm\npm-cache"
npm config set prefix "D:\npm\npm_global"

一切顺利,开始安装vue-cli,这里又出现了一个问题,vue-cli安装几次失败,搜了一下,切换成阿里的npm镜像:

npm config set registry http://registry.npm.taobao.org/

这下安装成功了,然后cmd启动vue-cli的图形化介面,cmd输入:vue ui
提示vue不是系统指令....群里问了下,又去搜了下,发现修改缓存和下载地址后,要手动把新的下载地址放在系统变量里面去..
把"D:\npm\npm_global"添加好系统变量后,cmd 输入 vue ui ,终于启动成功

使用vue加element创建项目

由于想少走点弯路,于是在B站上看了使用vue-cli创建项目的教程,这个教程真的通俗易懂,感兴趣又想学vue的朋友可以去看看
教程地址:https://www.bilibili.com/video/BV1CJ411j7CC?p=3
后面就跟着这个教程实践了一下,然后自己重开项目搞了个 舔狗的艺术 网站
本来打算自己用tp6.0写后台的,但自己这效率....最后还是先用了网上的api
网址:https://dogart.me
前端开源:https://github.com/Dieinwarm/dogartvue

记得以前读书的时候,跟风写过一段时间得 lofter
那时候 lofter 还只是一个小清新得博客网站,现在好像已经转型成同文根据地了,那时候我在上面也基本上写一些生活流水账,后来觉得还是没有微博方便就放弃了

很长一段时间我都好奇为什么有人能坚持写博客
之前有想过建一个博客,但实在不知道写些什么,因为我的日常记录基本都在微博等主流社交平台,我甚至觉得博客是一个比较“复古”的东西

现在网上冲浪经常看到一些大佬的博客,记录了很多非常厉害的技术、踩坑记录,还是非常羡慕,甚至一度怀疑自己写不了博客的原因是因为技术确实太菜

技术菜是事实也是借口,还是有很多人写博客是为了记录生活,微博、朋友圈等熟人太多,一些想法和感悟没有地方记录,博客就是一个好地方。上次逛V2,看到一个大佬的博客在保持日更,记录了很多读书笔记,不仅保持阅读而且保持写作,而自己基本就是沉迷游戏

建立这个博客的原因主要还是因为注册了这个域名,一开始想做个个人主页,后来想想自己这么菜,弄个主页也没什么写挺丢人的,干脆搭了个博客

回到主题,为什么无法坚持写博客
三分钟热度是我的坏毛病,写作、剪辑、学习新技术,都被我一次次的捡起来又丢下

一直在关注 十年之约 项目,即使我没博客的时候,搭起博客差点兴致冲冲的去申请了,冷静了一下,还是等自己更到十篇博文以上再说吧,如果能坚持下来的话

这个域名我应该会一直续费下去,跟 wenyi.me 一样,希望从博客开始改变自己三分钟热度的坏习惯吧