实现关键词高亮:在HTML字符串中匹配“跨标签关键词”
很久之前(好像刚好是一年前)写过一个Vue组件,可以匹配文本内容中的关键字然后高亮,类似浏览器搜索结果。实现原理是,将文本字符串中的关键字搜索出来,然后使用特殊的标签(本文示例使用font标签)包裹关键词替换匹配内容,最后得到一个HTML字符串,渲染该字符串并在font标签上使用CSS样式即可实现高亮的效果。 当时的实现过于简单,没有支持接收HTML字符串作为内容进行关键词匹配。这两天一时兴起又思考了一下这个问题,发现并不是那么麻烦,就写了几行代码解决了一下。
修改mysql数据库字符集:从utf8转为utf8mb4
个人网站使用Mysql数据库,当前字符集是utf8,不支持存储emoji表情,因为utf8最多支持存储3字节的字符,存个字母、普通的汉字都是没问题的,但是存emoji表情字符需要占用4个字节。mysql扩展了一个新的字符集utf8mb4来解决这个问题,utf8mb4是utf8的超集,最长可以用4个字节来存储一个字符,当然也可以存emoji表情,以及一些不常用的汉字等。
前端资源备忘
一些常用工具、资源的备忘录,用到的时候总是要百度或者翻半天,所以就统一收集在这里吧,持续补充。
ElementUI表格el-table表头固定自适应高度解决方案
el-table的height属性可以方便地实现表格固定,但是这个值该设置为多少以适配屏幕大小呢?设置过小,则可能出现可视区域内有空白位置,但是表格内却出现滚动条;设置过大,则在一些小屏幕设备上浏览时,页面本身和表格内部都可能会出现滚动条。两种情况体验都是极差的,为了解决这个问题,我们需要动态地计算页面空白区域的高度,然后设置到height属性,即根据页面大小,动态计算height属性。
axios请求失败自动重发
在做Vue、React项目的时候常会用axios请求库来与后端进行数据交互。我们通常采用一个用户凭证token来验证用户身份,服务器根据token进行判断当前用户是否有权限调用接口。经常遇到的一个问题是,调用接口时token可能已经过期,此时调用接口会失败,需要重新登录后再调用接口。通常我们可能处理为,用户走完登录流程后再重新手动触发一次请求。这样的实现本身没什么问题,但是给用户的操作体验上有被中断的感觉,本文尝试解决了一下这个问题。
JS双等号比较符作用细节
都知道JS里”==“和”===“的区别,在于非同类型变量的比较中,”===“会直接返回false,而”==“则会先将两个比较值先转换为同一类型,再进行比较。然而,这里”先转换为同一类型“是什么样的规则呢?
为什么不推荐用for...in遍历数组
两年前写的一个文章目录生成插件vue-outline,一直用着没出啥问题(本站的文章目录也是用该插件生成的)。但是最近一个网友在使用的时候却出现了异常报错,异常代码使用了一个for...in遍历数组导致出现了预料之外的情况。
svg实现环形进度条
环形进度条虽然很常用,但基本都是直接用各种组件库来搞,所以在此之前也没有自己真正实现过。偶然思考了以下这个问题,直接用CSS的话,好像还不太好实现,所以看了下svg实现的方案,也趁机熟悉一下svg——svg实现环形进度环出乎意料的简单。
编程探究喝酒时猜扑克牌游戏的胜率
小伙伴们喝酒时通常会玩一些小游戏,根据游戏胜负来决定谁被罚酒,猜扑克是其中一种常见的游戏。游戏规则如下: 游戏一般2人参与,游戏道具为一副扑克牌,任意一张扑克牌代表一个点数,A、2~10、J、Q、K分别代表1~13点(通常还会加入大小王,这里简单起见先不考虑)。 甲从一副扑克牌中任意抽出一张,自己查看后请乙猜测牌中数字。通常乙有3次机会,每次猜测后,若猜中甲抽出的牌,则乙胜利,游戏结束;否则甲根据情况告知乙的猜测偏大或者偏小,直到3次机会全部用完乙都没有猜中,则甲胜。 一直困惑我比较久的问题是第一次先猜哪个数字胜利的概率比较大,从喝酒的经验看,这个数并不一定是正中间的点数7。最近看到猜数字的编程题时突然想到这个小游戏,所以决定编程探究一下。