Skip to main content

GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述,使得客户端能够准确地获得它需要的数据,而且没有任何冗余,也让 API 更容易地随着时间推移而演进,还能用于构建强大的开发者工具。

大概率你听说过 GraphQL,知道它是一种与 Rest API 架构属于 API 接口的查询语言。但大概率你也与我一样没有尝试过 GraphQL。

事实上从 2012 年 Facebook 首次将 GraphQL 应用于移动应用,到 GraphQL 规范于 2015 年实现开源。可如今现状是 GraphQL 不温不火,时不时又有新的文章介绍,不知道的还以为是什么新技术。

目标

本文将上手使用 GraphQL,并用 Nestjs 与 Strapi 这两个 Node 框架搭建 GraphQL 服务。


wenhaoapigraphqlneststrapi13 min read

rollup.js

近期准备写一个工具包 @wenhao/utils,由于要将其发布到npm上,必然就要兼容不同模块(例如 CommonJS 和 ESModule),通过打包器可以很轻松的将代码分别编译成这不同模块格式。

恰好 rollup 3 正式发布,也算是来体验一下。


wenhaorollupwebpackutils4 min read

目前技术圈的发展速度可谓是有目共睹,尤其是前端,每隔一段时间就出新的技术,可以说让很多初学者非常畏惧,没有一个明确的方向不知道从何学起。

同时也有很多人,只局限于使用手头已掌握的技术,而不愿去尝试新技术。举个例子,如今 vue3 都已经正式发布,但仍还有停留在 vue2 不愿尝试 vue3 的开发者。而 java 都发布 18 版本了,可还有很多人都还使用着 java8,这种现象可以说是非常常见了。

这里说说我个人编码经验与看法,仅作为个人观点,没别的意思


wenhaoLife16 min read

v2-45d641f2191559d4eff581d0607efd61_1440w

如果你的项目要长期使用并维护的话,那么代码自动测试就非常有必要使用。因为没人能保证在修改代码后,不会引发其他额外 bug(功能失效,渲染失败),而在修改完代码后,跑一遍测试就能很大程度让开发者发现自己所修改的代码是否存在问题,是否会导致原有功能失效。

尤其是在其他人接手这个项目时,诱发 bug 的概率自然也就更高(因为他有很大的可能不知道这部分代码的上下文的功能用途),所以这也就是为什么很多开源项目与大型企业的公司都会使用自动化测试,以及要求一定的代码覆盖率。

当然如果项目不是长期维护的,那么完全没必要编写测试代码,这么做无疑是在浪费开发者的时间。


wenhaofrontendtest9 min read

之前搭建过 Gitlab,但是就只是搭建而已,并未实际使用,因为我大部分的代码还是存放在 Github 上。

并且大部分项目都是在 Vercel 上运行的(Vercel 是真好用),但是最近国内访问 vercel 情况不容乐观,貌似被墙了呜呜。然后 Gitlab 的资源占用非常严重,几乎占用了一半的服务器性能,可 点我 查看运行状态。与此同时,随着很多私有项目越来越多,使用 git 私有仓库以及 Vercel 部署,肯定不如自建私有 git 服务和自有服务器部署使用体验来好。

于是就想搭建一个轻量级仓库,同时支持 CI/CD。经过一番的调研,决定使用 Gitea 和 Drone 作为解决方案。


wenhaogitgiteadrone6 min read

前段时间看了别人的一个写了羊了个羊刷次数网页版,但是 js 代码做了混淆,然后我的那个解混淆的工具还没适配上,短时间内还原不了。但由于是网页版,所以抓包数据还是能看到的,于是就准备复刻了一个(其实就没有也照样能写出来,因为确实没啥难度)。

可在此体验:7y8y.vercel.app (当然由于官方改动,现在功能已经失效了,但看看页面到不成问题,可能需要科学上网)

原本我是不考虑写的,但是这背后所涉及到的技术以及技术框架我是特别想聊聊,加之以后我也有很大的可能会再写一个类似的刷 xx 的网页版,所以就考虑写一个类似的模板以便后续应用需求。

相关模板:https://github.com/wenhao/protocol

与此同时,我也快有半年的时间没碰协议复现(网络通信协议重新实现,后文都简称协议复现)。我更喜欢说这个词,也有的人会说模拟请求,对应的关键词可能有 post 请求,抓包,发包,爬虫等等,但大致的意思是抓取请求数据包,然后脱离宿主机(浏览器,手机),将抓取的数据包重新发送一遍

你也可以理解成爬虫,但和爬虫相比,要做的不只是爬取数据,而是要基于某些请求包(或者说调用他人不提供的 api 接口,即爬取),来实现一定的功能。比如登录协议,签到协议,抢购协议,游戏封包等等,然后不依靠宿主机(即不用登录浏览器或者应用设备)就能实现诸如登录,签到等功能(在后台记录是有的)。因为这些都是基于网络通信协议的,只要抓包(抓取数据包),然后使用编程提供的网络请求模块来模拟请求,达到重新发包,重新请求的目的。在网页中有 http 协议,websocket 协议,而游戏中有相应的与游戏服务器对应的协议,邮件短信文件又是不同的协议(这里的协议都叫网络通信协议),所以我个人更倾向于称之为协议复现。

所以要做协议复现,那基本上有一定的逆向功底和爬虫能力,还有网络通信协议相关的知识了。此次的开发也算是回顾下这些相关技术了。

danger

注:本项目仅用于学习研究使用,请勿将本项目的任何内容用于商业或非法目的,否则后果自负。


wenhaohttpprotocol17 min read

老早老早之前就听过 monorepo(单一代码库) 这个名词,也大致了解其出现的意义与功能。但奈何自己的一些小项目中暂时还用不上多项目存储库,所以迟迟没有尝试使用。

但随着越来越多的开源项目使用 monorepo,现在不实践到时候也肯定是要实践的,这次实践也算是为以后的技能先做个铺垫了。


wenhaopnpmmonorepo6 min read

准备给我的一个 Vite 项目进行重构,其中一个功能(函数)要花费 JS 主线程大量时间,会导致主线程画面卡死,无法正常点击,直到该功能(函数)执行完毕而言。这样的用户体验非常差,于是就准备使用 WebWorker 对该功能封装。


wenhaovitewebworker3 min read
logo
文浩Marvin,一个分享有趣好用APP和网站技术的博主