日常碎碎念 2021.08.08

前言

备案依旧没搞好,这周的周志还是要在电脑上完成,等下周吧,估计就能把周志重新搬回去了哈哈😄。

本周回顾

  1. 发钱咯LOL

8月5日终于发钱了,又有钱交房租了😭。交完房租就一穷二白了。继续努力打工学习吧,等到学成归来之日,希望能够搞到更多钱。哈哈😄(我就一俗人,希望大家见谅)

  1. 项目开发完成

跟产品斗智斗勇了一周,终于把页面开发完成了。下周设置好入口,灰度出去就可以等发布了😆,爽。虽然自己只是在其中做的很小的贡献,但是能够做到这么个页面,我感觉还是很激动很振奋人心的。

  1. 买了一个多士炉

最近突然想吃西多士了,但是我家附近的茶餐厅感觉好破,不想在那些店里面吃,因此上万能的某宝,买了个小熊面包机来烤面包吃。

你敢信这东西包邮还只卖69元?定时回弹,烤出来也很香,真的是太赞了。

抹上黄油和花生酱,花生酱还有点甜味,活脱脱就是一个没有蛋液的西多士嘛🤷‍♂️,炒鸡好吃,白天搭配一杯咖啡的话,绝配好吧。

  1. 白嫖TME 游泳协会的游泳门票

周一的时候加了公司的游泳协会,碰巧周三有活动可以免费🆓去游泳,为了榨干福利,因此周三直接摸鱼去游泳。u1s1,深圳的游泳馆真的是太漂亮了,场地非常的干净,水质非常好。缺点的话,就是太多人了,一条25米的泳道要分成左右两列,有点痛苦。(鉴于是白嫖的,我就不care了)

下周计划

  1. 专心备战雅思口语
  2. 认真上(mo)班(🐟)

结尾

时间过的真快,实习已经过去一半了,还有一个月就要回校了。

日常碎碎念 2021.08.01

前言

上周博客到期了,于是将博客迁移回腾讯云的服务器上面,希望能够加速⏩访问速度,但目前还是没完全弄好(后面会展开说)。于是乎接下来的几篇周志,我估计都只能在本地的编辑器中书写✍️下来了(我感觉写周志,还蛮好玩的,可以把美好的时光记录下来)。

上周回顾

由于迁移博客的缘故,上周的周志被迫拖更,于是乎留到了今天来写。

1. 美食分享《墨西哥🇲🇽Taco》和《笋干炒鸡蛋》墨西哥Taco。说实话,来到深圳之后,我发现真的是满大街的Taco,广州居然没有这种美食真的是太可惜了。真的是好好吃啊!

笋干炒鸡蛋🥚。贼下饭,打算明天晚上再吃一顿。(鹅厂福利,可以凭借夜宵卷免费干饭,腾大13楼yyds)

2. 工卡免费吃包🍔

这个是我到这快半个月才知道的,居然可以到比克大厦楼下的麦当当,免费拿一个套餐,没想到麦当劳吃到吐的梦想,居然是阿鹅帮我实现的😂。1、3、5、6是个人认为最赚的,平时都得25+了,性价比最高,以后都去公司吃麦当当,不出去买了😄。


3. 人体工学椅子💺

终于,坐了半个月的椅子之后,我终于也拥有了属于自己的人体工学椅了,终于有肘部支撑了,感动😹。阿鹅还是没有把我忘记掉。(本来有个照片的,但防止被说违反保密协议,就下了。样子就是淘宝上的工学椅的样子)

2021-08-24补充:直到昨天我才知道原来这椅子还能躺下去,我😭了,我就说午睡怎么这么别扭。

4. 大闸蟹限定风味薯条

之前去MUJI Diner的时候,顺便买的一款限定口味的薯条。不过我后来发现,原来muji的小程序商城其实也有得卖,可能强调的是限时口味吧🤷‍♂️。

说实话,这个味道就是🦐味薯条,其实味道一般般,不是特别的惊艳。没必要为了所谓的“限定口味”买单,不建议大家购入。

5. 海心桥半日游

周末难得回去了广州,顺带去广州的新晋网红打卡点“弯弓射大雕”(海心桥)。

去的那天,太阳🌞贼晒,不过幸好桥上的江风,吹过来很舒服,不然就要比被晒成人干了😂。如果正在看博客的你,有空来到广州,海心桥作为广州塔附近的景点,我会非常推荐你去看一下的。(免费上桥,晚上拍夜景超级多人)

6. MagSafe 随想

去完海心桥,顺路就跑去了天环广场的Apple Store上手摸了MagSafe。这东西摸起来挺圆滑顺手的,非常有质感。可惜就是749元只能买一个充iPhone 12 2/3电的充电宝,实在是太亏了,要是349我或许还能考虑一下购入来玩玩。


本周回顾

1. 公司聚餐

周一的时候刚对完需求,准备自己一个人孤零零跑去腾大恰饭的。突然Mentor就喊住我,让我跟大部队去聚餐,我直接黑人问号❓这又搞的什么活动?听到说是部门Boss要请大家恰饭,我就屁颠屁颠的跟着去了。u1s1,阿鹅就是豪气,直接晚上来了顿海鲜宴(关键是不用AA,公司报销)实在是太爽了吧!好想留在组内工作,太幸福了😭。

2. 水淹深圳

周二的时候,深圳下大暴雨,河南又是水灾,深圳也到处都是水,真的是难受😣噢。

3. 开始写项目了😭

来活了,被拉去做一个分类的页面,而且据说还要上线到核心页面,有点震惊🤯。一上来居然就能接触到这么重要‼️的页面,真的好激动啊超兴奋的,希望能好好的完成✅任务。由于公司保密协议的原因,就不放图了,到时候发版的时候,我再截图给大家看,我做了哪一部分的页面吧哈哈😄。

4. 吃到了Shake Shack

来到深圳,怎么能够浪费周末宝贵的时间呢?因此周五的晚上,特地搭了一站地铁🚇到高新园的万象天地,整了一个Shake Shack的汉堡🍔和奶昔🥤。

卖相很棒,牛肉汁水很足,卖45一个小贵,但是是可以接受的,时不时来一个也没啥问题,如果你想尝鲜的话,可以买一个这个来尝一下。如果你问我有没有平替,我的答复是有的,假如你不care这个牌子和卖相的话,肯德基老爷爷的和牛堡味道也差不多,可以用来代替。

超甜,超浓,齁的慌,味道就是麦当劳融化了的甜筒🍦的味道。而且41一杯也太tm贵了吧,定这个价格真的是脑子🧠有洞了。要不是深圳有钱人多,来尝鲜的人多,早倒闭关张了,我估计放广州一会就凉透了。非常不推荐,还不如出门买瓶快乐水或者隔壁星巴克奈雪的茶搞点好喝的算了。

5. 宜家饭堂

周末例行,宜家饭堂见。

这次吃的是牛排,三文鱼,沙拉,虾排和雪碧。牛排在39这个价位真的是很不错了,很好吃,下次必点;三文鱼一如既往的出色,油脂的香味填满口腔,每次来都会吃;虾排很脆,而且能看到里面的虾仁,只是我个人觉得有点油,下次就不会再点了;沙拉就是普通的沙拉,配上芝麻沙拉酱很好吃,热量起飞了😅。

临走前,还恰了2元的双色冰激凌,口感很神奇。下图的雪糕看起来是很丝滑的,但是吃的时候,外面像是结冰了,吃下去是有点硬硬的感觉,但是抿一会就融化了,很奇妙,体验很赞。

还看到一个很有意思的东西,宜家的雨伞居然在晴天☀️和雨天🌧️是卖不同价格的😄。估计是为了鼓励大家环保一点,多晒晒太阳吧,营销策略真有意思。

6. 麦德龙游记

终于进到了心心念念的麦德龙了。这家商店以前老牛逼了,主要做的是toB的业务。可惜的是理念太超前了,当时国内还没有这种toB的理念,导致这家德国商超水土不服,业务在中国不咋行。最近几年可能是收到网购和盒马之类的新零售的冲击,也开始做起了toC和网络服务,总算是跟上了时代的脚步。(不过还是很破败,一次品牌大翻新才能够拯救麦德龙了)

这里分享几个我觉得有意思的点:

6.1 超市内部居然有卖汽车用的产品

比如汽油,润滑油之类的汽车用产品,这个我估计是来自德国那边的销售习惯。默认大家都是自己来维护汽车的,放在国内这种销售策略挺奇妙的。

6.2 禽肉的售卖是在一个大冷室里面的(大冰箱)

上图中,右边有三个售货员,左侧第一个售货员穿的是羽绒服。我刚开始还很好奇,为啥这么热的天还穿个羽绒服,而且卖肉还专门搞个小房间来放着。

进去了之后才知道原因,里面就是一个大冷库,估计只有4-5度的样子,穿短袖短裤进去冷到爆了🥶,我是很佩服我出来后拍的这个图片里面的男士的,这么冷还穿着短袖在里面挑肉。

不过人家超市也是有做准备的,外面挂了几件公用的羽绒服让你保暖,还挺人性化的,真的好有趣,着实是开眼界了。(还有之所以要单独搞个房子,一方面是为了保鲜,另外一方面是为了隔绝腥味,房子里面的肉腥味真的是很重,有点受不了了🤮)

6.3 香料墙

麦德龙这里居然有很多西餐的香料卖,这着实吸引到了我,以后想做西餐的时候,可以考虑到麦德龙采购几包。比如鲜罗勒,在普通市场太难买到了(我目前就知道家附近的超大型市场有的卖)。未来想做的时候就可以来麦德龙买了,太赞了吧!

最后,买了一包伊比利亚的火腿回家做宵夜。

不得不说这刀工是真的好,晶莹剔透的,都能看到肉片背后的光了。(我知道是机器切的)

说会味道的话,我只能说,88元的火腿是值得起这个价格的。吃下去的油脂香味和肉香味非常的浓郁,很好吃,配着啤酒和蜜瓜,绝配。我估计如果有白葡萄酒配着会更香。这次尝鲜买了红牌的火腿,以后有机会买黑牌的尝一下,据说是100%的散养的猪🐷做成的火腿,味道很更好吃。以后一定要试试看。也推荐给大家尝试一下,真的是很不错。

下周计划

  1. 专心备战雅思口语
  2. 认真上(mo)班(🐟)

结尾

时间过的真快,再过一周,就算是一个月了,有点舍不得了。(下周就要发工资了,好开心啊LOL)

日常碎碎念 2021.07.20

前言

时间过的飞快,转眼间7月份就过去一半了,实习第一周也就这么过去了。不知不觉间,透过《日常碎碎念》这个形式的周志,来填充博客的内容看来是非常明智的选择。毕竟技术文章的产出是需要时间的沉淀的,中间的空窗期不写点东西上来的话,很容易让自己失去继续写博客的热情🔥。通过这段时间的记录📝,除了感受到生活的苦,也能更好的发现生活中的甜。希望这个栏目能够继续延续下去,继续记录生活(即使没人来看😂)。

上周总结

  1. 完成实习中的第一个需求的开发
  2. 宜家餐厅游记
  3. 去了MUJI Diner吃了个晚饭
  4. 好物分享:《米家充电台灯》
  5. 亿本新书:《岩田先生》

1. 完成实习中的第一个需求的开发

大公司就是不一样,所有的开发流程都是十分规范的。大概流程就是: 产品经理从内部系统发需求单,部门leader分配任务,开发者接单,评估时间,完成开发,等待测试验收,体验环境测试,外网上线。

本周的主要任务是为内部的一个广告平台增加了一个小功能。任务的大致内容就是给一个表单加一个按钮而已。但万万没想到的是这个表单的生成为了解耦和方便配置,做成了JSON生成的表单系统。这些其实都是小问题,不就是编写配置文件嘛,so easy啦!如果你也是这么想的,那就掉坑里了,我也是。这东西的配置项完全没有整理文档,表单生成器一行注释都没有。不幸中的万幸就是开发者还在助理,遇到技术难题还能请教一下,要是离职了就更痛苦了。

作为实习生,总不能一上来就说做不了吧,这也太尴尬了😅。没办法,只能硬着头皮上了,慢慢翻源码打断点,慢慢理解前开发者的idea。最终还是在周五完成了✅开发任务,大概也就比原来的计划慢了一天。(其实也没这么痛苦😖,只是要费点时间而已,做是肯定能做出来的。另外腾大晚上的免费晚饭着实是成为了我奋斗💪坚实的后盾,每天解决完一个小问题后,跑去吃顿爽的,再回来开工,着实是让人放松愉悦呀😄。)

2. 宜家餐厅游记

长这么大个人,去宜家就去了两次,这周末是第二次。第一次去甚至都没机会品尝一下宜家餐厅,吃了1元的冰淇淋🍦就走了。趁这次周末有空余时间,又来到了深圳,出去逛一下。因此选定了宜家餐厅作为目的地之一。

我去的深圳宜家,位于欧洲城。从白石洲站出来,转M487公共汽车,一直搭到总站就行了,全程1.5元,可以直接刷羊城通

大致方向

别人去宜家,主要目的应该是为了购买家具🪑。我这次去宜家,主要的目的就是吃吃吃。废话不多说,直接上图。

1.香草三文鱼

整顿饭中最令人欣喜的部分,真的是好好吃啊😋。鱼肉本身就很有油脂的香味,搭配芥末酱吃,芥末的辣味更能激发出鱼本身的鲜味。再撒上旁边配的柠檬汁,酸酸的,非常的清新开胃。作为前菜而言,非常棒👍。(一楼门口的食品超市有的卖,但是考虑到晚上还要去MUJI Diner,拿着不太方便;另外秉持着”少食多滋味”的教训,还是没买下来。待到下次再来的时候,再细细品尝吧😄)

2.瑞典🇸🇪肉丸

听说这是宜家的招牌菜,于是乎就拿了一份。但说实话,就是普普通通的猪肉丸的味道,可能比较新奇的是,配了一点蓝莓🫐酱,可以蘸着吃,解解腻。凭良心讲,我是不推荐大家点这个的,不会特别惊艳。

3.肉酱意面🍝

点这个纯粹是我怕不够吃拿的。大概就是普通的番茄肉酱意面吧,没啥可圈可点的。

4.提拉米苏

这个提拉米苏貌似也是招牌点心,因此拿了一份尝一下。确实挺好吃的,有点甜,跟朗姆酒的酒味一中和,感觉非常协调。用这份甜点🍮收尾确实不错。

全餐总花费83.2元,如果不吃意大利面的话还能更便宜。另外取餐的时候看到牛扒貌似也好好吃的样子,下次可以来试试看。感觉宜家以后会成为我的一个周末消遣的好去处。

另外这次最大的一个收获,就是买了3.5元的宜家环保袋♻️,真的是好好看啊。便宜耐操值了!

3. 去了MUJI Diner吃了个晚饭

全球第一家MUJI Hotel,全球第二家MUJI Diner就位于深圳的深业上城2楼处。去到旗舰店除了吃饭,还买到了限定的小零食和杯子,好开心啊😄。

溜达了一圈,又出去Shopping Mall逛了一圈,直到下午6点才走回去吃了一顿饭。但是真的是好贵啊,想要吃日式定食,还是中午来吃吧🤷‍♂️。

首先,最近推出的58元夏日新品套餐仅限中午,晚上就只有牛扒汉堡等大菜,而且巨贵,一份和牛沙拉88元,一份植物肉汉堡78元。(虽然处于好奇心,我还是点了植物肉汉堡,但真的好痛心,毕竟这个价钱,中午已经可以吃上沙拉+主菜+甜品了)

汉堡是用黄油🧈煎过的,因此非常的酥脆。搭配植物肉的”肉香味”,非常的好吃,薯条也是新鲜脆口的,很赞。但是植物肉的口感就不敢恭维了,就跟小卖部,售价1元一包的素肉一样,没啥区别,与真正的肉饼还是有一段距离的。如果财力雄厚确实可以来试试看。

4. 好物分享:《米家充电台灯》

最近搬了新的房子,可恶的是灯只有一个开关,设置在入口处。这个设计主要是为了回到家的时候,在门口就能开灯。但最反人类的地方在于,上床前,你得走到门口,关了灯,摸黑走回床边。太弱智了吧!

因此,最近上小米商城,购入了价值99元的米家充电台灯。

4.1 优点

  1. 纯白MUJI简约风
  2. 金属材质
  3. 价格便宜
  4. 无频闪

4.2 缺点

  1. Micro USB充电头
  2. 只有三种模式,暖光亮,暖光暗,白光亮
  3. 充电提示灯不明显(如果开着灯,很难察觉到闪烁,提醒自己要充电)

4.3 使用感受

简洁大气,MUJI简约风+价格便宜,实在是一把好台灯。质感也非常棒,金属材质摸起来非常稳重。作为床头灯或者办公台灯都是非常好的选择。

5. 亿本新书:《岩田先生》

最近在稽核看到了这本新书,出于好奇买了下来。

这本书主要是写了两个部分。

首先是岩田聪的传奇一生,从札幌的天才高中程序员,到HAL研究所社长,再到任天堂社长,他是如何一步步走过来的,他的个人经历与经验中,对创意的思考。

其次是岩田聪在公司治理理念等方面的语录。

这本书我也是刚刚到货,刚刚看。以后有时间也会跟着《自制编程语言》之后,将读后感或者读书笔记分享出来。目前暂定这个读书栏目为”亿本新书”,希望能够在这个栏目上有所产出呀。

下周计划

  1. 上班摸🐟
  2. 需求转测试 做下一个开发任务
  3. 背单词
  4. 每天中午做一部分的雅思题目(当日做错题积累)

总结

周末确实是玩爽了,这周又要开始做打工人啦。加油LOL!

最近博客会迁移到腾讯云,到时候就会有HTTP2.0啦,搭配对象存储,国内的访问速度应该能更快了。

mapStateToProps 和 mapDispatchToProps的区别

背景

最近开始实习,部门主要使用的是一个内部的跨端框架,这东西本质上还是React Native,只不过是做了一层套娃重命名了标签名称(像极了ReactRouter和ReactRouter-Dom的关系),并且封装📦了自己的一堆私有的API。由于导师就是负责开发这个框架,因此很无奈只能转React,做React开发了(印证了之前的猜想)。

今天这篇文章主要就分享一下我在使用Redux过程中的一些笔记📒或者使用经验。

(本文章不会详细阐述其具体的使用方法,只是会记录一些实际应用的效果)

区别

  1. 相同点
  • 两者都是函数
  • 用于将Redux的Store映射到组件props(入口参数)上
  1. 异同点
函数名称官方描述个人理解
mapStateToProps建立一个从(外部的)state对象到(UI 组件的)props对象的映射关系将Store上的State挂载到props上 (实现了单向数据流)
mapDispatchToProps建立 UI 组件的参数到store.dispatch方法的映射将Store上的Dispatch函数挂载到(调用的时候,相当于是在触发Store上的函数)

实例

(此处引用阮一峰老师提供的“计数器”代码,作为本文章的例子,感谢阮老师的分享🙏)

初始化环境

 import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
 import { createStore } from 'redux'
 import { Provider, connect } from 'react-redux'

创建计数器组件

 class Counter extends Component {
   // 创建渲染器
   render() {
     // 从入口参数上获取mapState和mapDispatch挂载的属性和方法
     const { value, onIncreaseClick } = this.props
     // 返回JSX
     return (
       <div>
         <span>{value}</span>
         <button onClick={onIncreaseClick}>Increase</button>
       </div>
    )
  }
 }

创建Action

Action说明了Redux中可以做什么动作。

 const increaseAction = { type: 'increase' }

有点类似于Java中的抽象类的概念

创建Reducer

Reducer说明了Action做什么动作。

 function counter(state = { count: 0 }, action) {
   // 读取Redux中管理的count变量
   const count = state.count
   // 检测dispatch触发了哪一个动作
   switch (action.type) {
       // 触发"增加"动作
     case 'increase':
       // 将值+1并返回一个state到Redux的Store中
       return { count: count + 1 }
     default:
       return state
  }
 }

有点类似于Java中的实现类

PS:

Action和Reducer的关系,在我看来有点类似于抽象实现的关系,不知道🤷‍♂️对不对,以后再继续深入探究一下。

创建Store

 const store = createStore(counter)

实现挂载函数

 // Redux的角度: 将Redux管理的全局State(Store)上的值挂载到了组件上
 // 组件的角度: 获取(订阅)了Redux管理的全局State(Store)上的值
 function mapStateToProps(state) {
   return {
     value: state.count
  }
 }
 ​
 // Redux的角度: 将操作全局State(Store)上的方法挂载到了组件上
 // 组件的角度: 获取了管理的全局State(Store)的方法
 function mapDispatchToProps(dispatch) {
   return {
     onIncreaseClick: () => dispatch(increaseAction)
  }
 }

挂载到组件上

 // Connected Component
 const App = connect(
   mapStateToProps,
   mapDispatchToProps
 )(Counter)

页面渲染

 ReactDOM.render(
   <Provider store={store}>
     <App />
   </Provider>,
   document.getElementById('root')
 )

流程图例

Redux与组件之间是如何传递reducer和state以及组件如何dispatch reducer的
  • 通过mapStateToProps将全局State挂载到了组件的Props上,组件因此可以直接读取到Store中管理的state值。
  • 通过mapDispatchToProps将管理全局State的方法挂载到了组件的Props上,组件就可以从入参中获取操作方法,进而在组件中dispatch(触发)State中的Reducer进而修改State中的值。

结尾

这篇文章主要是梳理了一下本周解决的一个知识点,加深自私点在脑海中的印象。文章中阐述不清楚的点,欢迎透过邮箱📮与发起讨论,希望透过讨论也能让你明白这个过程发生了什么。

延伸资料

  1. React-Redux 的用法(中文)
  2. 使用mapStateToProps导出数据(官方英文)
  3. 使用mapDispatchToProps触发Actions(官方英文)
  4. 计算器代码(Github)PS:建议可以先不看🙈这两个函数入参的描述,因为很容易把人搞晕😵,可以着重看看[1]中,阮一峰老师提供的实例,搭配[2] [3]思考🤔一下,相信你很快也能get到这个函数在干什么,有什么用🤷‍♂️。

日常碎碎念 2021.07.13

前言

期末考试完成,终于可以启程去🐧厂搬砖了。

上周总结

  1. 深圳租房
  2. 入职鹅厂
  3. 周末去深圳湾公园拍了照

1. 深圳租房

说实话,虽然来了深圳很多次了,但来深圳租房子还是第一次,也是在外租房子的第一次☝️。着实是花了不少的时间做准备,不过幸好有家人👪的帮助,最终还是顺利租下了一间房子。(虽然对比合租贵了几倍,但是优越的交通和商业便利性,绝对是物有所值的)

另外,u1s1,深圳租房是真TM贵,要不是来大厂了,真的还得倒贴钱,或者住更远的郊区去。但深圳的公共交通我认为是真的稀烂,便利程度跟妖都相比简直就是辣鸡🚮。(也有可能是因为鹅厂的写字楼太偏僻了,给我造成公共交通不方便的错觉。)

腾讯的写字楼专门建在立交桥边,根本没有什么很好的公共交通通勤,要么是搭班车,要么就只能选择骑电驴或者自行车去,再或者是走路,上下班痛苦的一批,太傻逼了。

2. 入职鹅厂

普天同庆同庆,我终于也能成为一名鹅厂人咯LOL。6月底的时候,深圳还有疫情,搞得我心神不宁的,差点就要改期去阿里了。(其实阿里也很香,家-公司通勤时间只要30min)。不过万幸的是,在政府有效率的处理+大家的努力配合,遏制住了疫情,最终我也得以来到深圳加入鹅厂,开始实习工作,希望在这几个月的实习中能够有所收获吧。

我的牛牛鹅宝

3. 深圳湾公园游记

周末搬完家之后,就出去逛一下,去了深圳湾公园。(主要是网上说有一个地铁口出来就能看到大海,所以慕名前来,虽然还是走错了😂)吹着微微的海风真的很舒服,还看到了新石器的无人车在肯德基,深圳政府真的好有钱啊,能够吸引这么多的高新企业来落地,慕了慕了。

对象就是香港元朗了🇭🇰

本周计划

  1. 上班摸🐟
  2. 学习开发规范 & 开发流程 (Hippy好难用啊🤯)
  3. 背单词 + 雅思口语准备
  4. 准备雅思考试

总结

来到鹅厂的这几天,真的是感觉非常充实,好吃的饭堂,965的工作时间,完善的人事流程&福利,都让我非常感恩,虽然不考虑转正,但希望日后从海外学成归来时,还能做企鹅人呀LOL

PS:昨天出成绩了,绩点3.75,人生巅峰啊😄,希望能够再创佳绩吧🤷‍♂️

日常碎碎念 2021.07.02

前言

u1s1,学校真的是NT,7月2日最后一门考试开卷+手机考试+线下考试。干嘛不早点考试嘛?真的是脑瘫,之前那么多空余时间,👴就是玩,就是不考试,就吊着你,不让你离校,真的是吐了🤮。白白浪费了起码一周的时间,搞得实习+学习的计划都要往后延迟,麻烦的一批。美名其曰对你好,佛了🙏。

本周总结

  1. 完成GuBlog前端页面的开发
  2. 完成Instagram Downloader快捷指令的开发
  3. 技术分享《PPG式心率测量小程序的技术分享》和《React脚手架V1.0》
  4. 期末考试结束

1.完成GuBlog前端页面的开发

下周就要去实习了,之前Leader说可以提前了解一下React Native的最佳实践。但是很可惜的是,我大学期间学习的是Vue,没办法👐,只能从头开始学习React咯🤷‍♂️。经过6月下半个月的学习,大致掌握了React和React Router的使用,因此开了这个小项目来实践一下。预估完成✅时间需要一个月,目前只是抱着做着玩的心态在编程,能做多少就做多少,不期望能够完整实现,目标只是为了熟悉一下React的脚手架搭建以及React的开发流程。

2.完成Instagram Downloader快捷指令的开发

3.技术分享《PPG式心率测量小程序的技术分享》和《React脚手架V1.0》

最近一周有空,将之前的一些项目和当前的一些新的进度做了总结分享以及技术储备,在博客上记录📝下来。希望留待以后能够用上。

4.期末考试结束

终于考完期末考试啦🥳!!LOL

终于可以在家里开始摸🐟生活了,被困在学校一个半月了,学校距离市区比较远,困了一个半月真的是无聊🥱死了。终于可以回到城区开始划水生活了,开心!

下周计划

  1. 鹅厂实习
  2. 准备雅思口语

总结

时光飞逝,转眼间2021年就过去一半了。虽然6月的突然袭来了疫情,但是靠着政府强有力的把控,还是成功的在一个月内控制住了疫情的蔓延,并最终清零,🐂🍺的不行!7月终于要迎来人生的第一次实习生活了(而且还是在从未想象过的鹅厂),希望能够顺顺利利吧。加油!

[快捷指令] Instagram下载器【已废弃】

背景

最近把Facebook的账号找回来了,上Instagram看了一下。发现有好多胶卷的照片真的好毒啊!好好看,好想下载下来做背景图。但是此时我才发现,Ins居然是不能长按照片下载的,包括网页端也是需要透过插件,解析出埋藏在DOM结构中的图片链接🔗才能下载的。这种防君子不防小人的防盗链方法真的是非常的鄙视🤬。但是能透过DOM中找到图片的链接,并且实验证明是可以直接下载的,已经属于不幸中的万幸了。(要是加上UA验证之类的就死掉☠️了)

最近我从菊花切换回了Apple,所以就可以借助快捷指令+Scriptable来帮助我自动化完成解析下载。

快捷指令链接:

https://www.icloud.com/shortcuts/ebce83c29b3b4c63b782adae6656bb80

前置要求:

  1. 安装Instagram
  2. 安装Scriptable

使用说明:

  1. 点击想要下载的图片的···
  2. 选择分享到..
  3. 选择Instagram Downloader
  4. 等待运行
  5. 返回到Instagram时则代表运行完成

注意事项⚠️:

  1. 作者如果设置了Private的话,快捷指令将无法下载图片
  2. 账号被Ban,快捷指令同样无法下载图片

React脚手架V1.0

背景

最近开始捯饬React,想着学会了React就能把React Native给学习了,然后就能写App。为了能够在React Native上少踩坑,我搭建这个脚手架之后,准备开发一个博文发布系统,作为DEMO练练手。

依赖构成

  1. React核心
  2. React-router-dom 路由
  3. Redux 状态管理
  4. ESlint 代码格式管理
  5. Vite 打包工具
  6. Axios 网络请求库
  7. Antd UI库

搭建流程

1. 初始化React

1.1 模板初始化

我们可以直接使用Vite自带的模板,初始化React,在本教程中我使用的是template指令来初始化项目。

运行以下指令初始化项目

 # npm 6.0
 npm init @vitejs/app gublog(项目名称) --template react(模板名称)
 ​
 # npm 7.0+ (需要额外的双横线)
 npm init @vitejs/app gublog(项目名称) --(额外的双横线) --template react(模板名称)

运行指令后,npm将创建一个以项目名称命名的文件夹📁,来初始化项目。

初始化完成后的文件树结构为:

 root
 └── gublog(项目名称)
    ├── dist
    ├── node_modules
    ├── src
    ├── index.html
    ├── package-lock.json
    ├── package.json
    └── vite.config.js

1.2 启动环境

  1. cd 项目文件夹
  2. npm install #下载依赖
  3. npm run dev #启动开发环境
环境启动成功

出现上图的网页时,我们就已经搭建出Vite + React的开发环境

2. 安装React-router-dom

为了能够实现无刷新切换页面,此处我的脚手架也会引入官方提供的Router来做前端路由管理。

2.1 安装依赖

运行指令安装路由组件

 npm install react-router-dom --save-dev

2.2 注意⚠️

React-Router-Dom就是React Router V4的浏览器版本,原来文档的Router要被替换成BrowserRouter才能使用。为了不使用方面,我们可以使用as关键字来修改别名。

 import 'BrowserRouter' as 'Router' from 'react-router-dom'

这里我真的很想吐槽,搞一个React-Router就好了嘛🤷‍♂️,干嘛还搞一个React-Router-Dom。这东西本质上就是套娃再封装📦。而且最近的V4版本还舍弃了旧的Router标签,改成了BrowserRouter。真的是NT。

解决方法来源:

3. 安装Redux

安装Redux主要是为了使得组件的耦合降低,使得更容易的管理状态,因此被打包到脚手架当中。

3.1 安装依赖

 npm install redux --save-dev

4. 安装ESlint

4.1 安装依赖

 npm install eslint --save-dev

5. 安装Axios网络请求库

5.1 安装依赖

 npm install axios --save-dev

6. 安装AntdUI库

AntdUI是阿里针对React设计的一个UI库,开箱即用,有丰富的文档。(而且还能改颜色)

6.1 安装依赖

 npm install redux --save-dev

6.2 引入环境

  1. main.css中添加import 'antd/dist/antd.css'导入CSS库
  2. Main.jsx的代码头部添加import {组件名称} from antd导入组件

结尾

这篇文章就此告一段落。Axios和ESlint的使用我还在摸索中,后面还会继续更新,敬请期待。目前在使用这个脚手架重写GuBlog日志程序当中,后面时机成熟后也会同新版本的脚手架文章一同推出。

npm 安装、删除依赖命令

npm安装依赖

  • npm install xxx 利用 npm 安装xxx依赖到当前命令行所在目录
  • npm install xxx -g 利用npm安装全局依赖xxx
  • npm install xxx –save 安装并写入package.json的”dependencies”中
  • npm install xxx –save-dev 安装并写入package.json的”devDependencies”中

npm删除依赖

  • npm uninstall xxx 删除xxx依赖
  • npm uninstall xxx -g 删除全局依赖xxx