Menu Home

GeekWeibo升级到 Rails 6.1

时隔一年半,期待已久的Rails 6.1 终于发布了。趁着双休,给 GeekWeibo 从Rails6.0 升级到了6.1。 升级主要有三步。 一、升级Gemfile里面各个gem的版本 为了避免一些gem版本的不兼容,我先本地gem install rails把系统的rails版本升级到6.1。然后使用 rails new demo61 创建了一个新app叫demo61。接着对比 demo61/Gemfile 和 geekweibo/Gemfile 里面各个gem的版本号,相应的升级一下版本号。主要diff如下: 然后执行 bundle update。 二、执行 rails app:update 前几天才知道原来还有 rails app:update这个命令,用于app升级。执行一下,按照提示,相应的覆盖或忽略一些文件更新。执行完了之后,很多bin文件和config文件都更新了。同时会生成两个新的active_storage的migration file。一个是给 active_storage_blobs table新增了一个 service_name column: # This migration comes from active_storage (originally 20190112182829) class AddServiceNameToActiveStorageBlobs < ActiveRecord::Migration[6.0] def up unless column_exists?(:active_storage_blobs, :service_name) […]

极客微博双周功能更新及实现方式:生成分享图片、回复评论等,

自从10月17日对外发布了自己的业余项“极客微博”以来,至今过去了两个星期。看了下GitHub的统计,这段时间共commit了刚好50次。 主要的一些更新如下。 生成分享图片 这是这段时间工作量最大的一个更新。你可以点击微博卡片右下角的分享按钮,来生成一张分享这条微博的图片。 点击后,出现一个预览界面 点击底部的下载图标,即可以下载这张分享的图片。 技术实现上,主要的方案是使用html2canvas这个library。遇到的坑非常多,比如说跨域啊,图片缓存啊,滚动条啊等等。后面会专门写一篇技术文章,来细说一下这个事情。总之,费了好大劲。 回复评论 现在,你可以通过点击某一条评论,来回复这条评论。如下面的动图演示: ![2020-10-3116.58.32](https://images4blogs.oss-cn-hangzhou.aliyuncs.com/2020-10-31 16.58.32.gif) 回复出来的样式,现在设计的比较简单,主要是参考朋友圈的样式,没有做成树状的嵌套结构。 技术实现方面也比较简单。DB里面comments table加了一个parent_comment_id字段。然后通过Rails的has_many和belongs_to,自动就呼应上了。 用户默认头像 目前极客微博只支持通过GitHub登录。其实系统的设计是,当用户通过GitHub登录之后,会自动使用GitHub的头像。然而由于国内的网络原因,GitHub的头像不一定能下载成功。因为server端无法连接raw.githubusercontent.com这个域名。这就会导致很多用户登录之后,没有头像。 忘了在哪里看到的启发,后面决定使用用户昵称的第一个字符,来生成一个头像。效果如下: 技术上,使用的是ui-avatars这个服务。它可以根据你传的参数,自动的生成首字符的头像。比如https://ui-avatars.com/api/?name=创哥&length=1这个链接将返回 这样一张图像。 当然,你可以通过参数来控制很多样式,比如:背景颜色、字体样式(颜色、大小、粗细等)、图片大小、圆角等。非常不错的一个服务,推荐! UI上面的优化 其他还有一些UI的优化,比如把右下角三个图标对齐。之前如果其他的微博有点赞、评论的数字的话,会跟它上面或下面的微博,对应的几个图标在垂直方向上不对齐。如下图所示: 现在把它对齐了。 类似的对齐问题发生在评论列表里面。评论列表里,评论作者的头像跟上方,发评论的form的左边界是对齐的,但是没有跟form里面,当前用户的头像对齐,如下: 后面让几个头像对齐了。 发布时间:本来在每条微博的左下角加上了发布时间,如下图所示。 但是后来觉得没有意义。(至少现阶段)很少有人会关注某一条技术微博是什么时候发布的,更多的是关注这条微博对自己是否有用,所以后面又去掉了。 技术侧 防止XSS 根据ruby-china上面@pynix大神的提醒,给极客微博加上了防止XSS攻击的处理。 所谓XSS攻击,听起来就让人觉得好可怕。其实说白了就是javscript注入。比如说,用户发一条微博,内容是 &lt;script&gt;alert(1)&lt;/script&gt; 如果不处理的话,那么当这条微博显示出来的时候,就会弹出一个框。这就是XSS攻击。不得不说,这个名字真的起的不是那么的直观。 具体技术上怎么做的,也有点曲折。刚开始是在后端处理的。在用户的输入(微博或评论的内容)写入DB之前,先purify一遍。用的是Loofah这个gem,代码大致如下: tweet_params[:body] = Loofah.sanitize(tweet_params[:body]) # purify处理 Tweet.create(tweet_params) # 写入DB 但这会带来一些问题。那就是 Loofah.sanitize方法会把一些没有问题的内容也做处理。这样,当微博内容再次显示出来的时候,就出现乱码了,如下: 实际上,如果显示正确,应该是: 后来,由于没有找到好的办法,于是把purify的工作放到前端来。在使用marked这个JS library,把微博内容转化成markdown之前,先使用DOMPurify这个JS library处理一遍。目前不清楚这种做法是否还会有问题。如果有朋友知道,还麻烦指导一下。 最后,是技术上的一个重构。把评论列表,包括评论输入框,抽成了一个Vue component,CommentList.vue,然后feed页和微博详情页共用。 […]