6 | {%- if page.title -%}
7 |
{{ page.title }}
8 | {%- endif -%}
9 |
10 | {{ content }}
11 |
12 | {%- include filter.html -%}
13 |
14 | {%- if site.posts.size > 0 -%}
15 | {% assign postsByDay = site.posts | group_by_exp:"post", "post.date | date: '%Y 年 %m 月 %d 日'" %}
16 |
17 | {% for day in postsByDay %}
18 |
{{ day.name }}（{{ day.items | size }}）
19 |
20 | {% for post in day.items %}
21 | -
22 |
23 | {{ post.title }}
24 |
25 | {% endfor %}
26 |
27 | {% endfor %}
28 |
29 |
30 | {%- endif -%}
31 |
32 |
35 |
36 | this is a long text!!!!!!!!
37 |
38 |
49 | ```
50 |
51 |
--------------------------------------------------------------------------------
/_posts/2022-07-29-vue-upgrade.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: Vue 从 2.6 升级到 2.7 的问题
4 | date: 2022-07-29 14:00:00 +0800
5 | categories: Vue
6 | ---
7 |
8 | # 升级 Vue 到 2.7
9 |
10 | Vue 2.7 的一些特性向 Vue 3 靠拢。主要是包含了 Composition API。尽管是小版本升级，也得十分注意升级带来的一些项目上的变化。一个非常容易出现错误就是认为像 2.6 升级到 2.7 这种觉得不大的版本并不会带来严重的问题。但要知道，升级迭代往往新版兼容旧版本，而旧版本是无法兼容新版本特性的。
11 |
12 | ## Vue 2.6 可以用 Vue 2.7 写的组件吗？
13 |
14 | 如果用新的 Composition API 写的组件，是不可以用的。所以有这些问题考虑的时候，就得花很多心思去调研升级 Vue 版本会不会影响到目前项目的情况。需要非常细致，如果没有分析清楚就动键盘，写出一大堆组件却没法被低版本的项目引用，这心态会崩溃。
15 |
16 | ## 用 Vue 2.7 Composition 写好了组件，怎么给低版本 Vue 2.6 用？
17 |
18 | 可以有三种方案。需要确定的是，补救措施的目的是为了减少组件返工，减少开发时间。那么可以：
19 |
20 | 1. 将引入 Vue 2.7 组件的项目升级到 Vue 2.7。尽管这个方法很可行，但维护久远的项目想要升级这种主要依赖的版本，是需要非常慎重！不推荐。
21 | 2. 将 Vue 2.7 组件项目更改为 Vue 2.6 + Composition API 依赖的方式。只需要引入依赖 `@vue/composition-api` 即可。推荐，几乎无伤。
22 | 3. 将引入 Vue 2.7 组件的项目引入支持 Composition API。这样需要在项目中添加一个而外的依赖以补全 Composition API 的使用。还行，比第一个方案好。
23 |
24 | ```bash
25 | pnpm install @vue/composition-api
26 | ```
27 |
28 | 然后在 `main.js` 中:
29 |
30 | ```js
31 | import VueCompositionAPI from '@vue/composition-api'
32 | Vue.use(VueCompositionAPI)
33 | ```
34 |
--------------------------------------------------------------------------------
/assets/back.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
21 |
--------------------------------------------------------------------------------
/_posts/2022-08-17-cloudbase-miniprogram-future.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: 腾讯云开发预备收费和个人小程序的迁移
4 | date: 2022-08-17 11:04:41 +0800
5 | categories: 小程序
6 | ---
7 |
8 | # 腾讯云开发收费
9 |
10 | 早已听闻，腾讯云开发预计在 9 月中旬开始进行收费，原基础免费配额将变更为每月最低 19.9 元，并在优惠过后变更为每月 39.9 元。这对个人开发者而言无疑是很大的打击。
11 |
12 | ## 影响内容
13 |
14 | 个人在腾讯云中部署了几个小程序的后端服务。他们都是没有广告植入，也没有进行收费。也就是说，这几个小程序基本都是没有收益的（除了个别小程序有用户出于鼓励进行的少量打赏激励）。因此，我大概的，会在免费配额服务周期结束之后，慢慢停止小程序的服务。尽管决定比较难，但这算是最好的办法了。无奈个人小程序在收益方面的扩展艰难重重。
15 |
16 | 影响最大的是`单单记账`微信小程序。目前日活都还比较稳定，用户反馈也比较好，算是个人开发的比较满意的小程序了。回想起以前刚完成基础功能之后，会在一些社区进行一些简单的推广，也得到不少网友的好评。初衷其实也是想给自己一个干净、隐私、UI 不错的记账小程序，因为当时看到基本没有一个是满足上面要求的。大多记账小程序要么广告云集，要么目的不明确，要么要你手机号等个人信息。
17 |
18 | 直到现在，`单单记账`已经累计服务用户有 5000 多啦。瞄了下数据库，账单总量在 10 万以上。说下线服务，多少是有些遗憾的。且不说会对不住用户，就小程序而言，真的很适合手机端多平台用户的使用。
19 |
20 | ## 后续
21 |
22 | 考虑使用其他云服务进行替代，尝试使用了下`supabase`进行替换，但调研了下，函数的迁移比较困难，无异于重写一份。`supabase`主要以数据库为主，其他的云函数方面貌似还没有达到腾讯云开发或者`firebase`的地步。外加上在小程序调用的话，对 `supabase sdk` 的支持还可能有不少的未知数。所以替代方案暂时不再往深的方面思考。
23 |
24 | 尽管短期会对服务进行下线。但我也有计划将`单单记账`写成 app ，包含 Android 和 iOS 客户端。目前正在学习和接触相关技术知识中，且等后续实现...
25 |
26 | 对于技术选型，之前考虑直接使用 swiftUI 写一个原生的 iOS app。没错，我之前计划是不考虑 Android 客户端的，因为觉得 Android 用户可以直接使用小程序。但现在想法改变了，计划使用 Flutter 写一个两端的 app 。我对这个很期待，也正是这个期待，可以让我有不少的动力去执行。
27 |
--------------------------------------------------------------------------------
/_posts/2019-01-07-chrome-provisional-header.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "chrome出现Caution provisional headers are shown的问题"
4 | date: 2019-01-07 20:00:00 +0800
5 | categories: 前端
6 | ---
7 |
8 | 开发的一个项目出现一个Caution：
9 | ```bash
10 | Caution provisional headers are shown
11 | ```
12 | 注：这个提示出现在chrome开发者工具的每一个接口请求上。这也只是个警告，还要理它干啥？先看看Google“热搜”的第一个解答：
13 | [“CAUTION: provisional headers are shown” in Chrome debugger](https://stackoverflow.com/questions/21177387/caution-provisional-headers-are-shown-in-chrome-debugger)
14 | “请求被阻塞，东西发不出去，自然没有东西回来”
15 | 在答者那的例子他说是被adblock拦截了。
16 |
17 | ## 问题
18 |
19 | 在项目上线的这段时间内，前期由于使用的少，并未将问题暴露出来，后面使用的人数多了之后，就会出现一个高概率的事情：
20 | **个别接口请求一直处于pending状态，数据无法回流**
21 | 这个问题比较严重，后面一直在找解决方案。我的思路历程是：
22 | 1. 一开始发现这个问题的时候，有些不可思议，第一次遇到，如果这是一个普遍的问题，为啥又只会出现在个别接口（非固定的个别接口）？
23 | 2. 调试工具出现`provisional headers are shown`的警告，瞄准这个警告入手。找到了大量相关的问题描述和方法，在前端这边的处理都未解决。在拦截器修改头，在`net-internals`抓起日志等就差在每个请求后加上时间戳了（怀疑是前端缓存cache出现异常）。
24 | 3. 开始怀疑是后端的问题。与后端商量后，在日志打印那发现每一个请求返回都在几毫秒内。当然这个好像没有什么参考性，因为前端貌似这边请求并未成功发出。
25 | 4. 发现除chrome默认模式外，其它浏览器比如firefox、Edge都没这个问题。甚至在chrome无痕模式也没有这个问题。这时候觉得解决问题比找到原因更重要了（因为已经上线了）。
26 | 5. 经过后端前端的协调与商量，发现这大概率是因为前后端跨域而出现的问题。
27 |
28 | ## 解决
29 |
30 | **设置请求接口与静态文件处于同源状态（需要nginx配置），警告消失，经过一段时间观察，问题解决。**
--------------------------------------------------------------------------------
/_includes/head.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | {%- seo -%}
14 |
15 | {%- feed_meta -%}
16 | {%- if jekyll.environment == 'production' and site.google_analytics -%}
17 | {%- include google-analytics.html -%}
18 | {%- endif -%}
19 |
20 |
21 |
--------------------------------------------------------------------------------
/_posts/2021-07-31-Maximum-call-stack-size-exceeded-error.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "记一次Maximum call stack size exceeded error"
4 | date: 2021-07-31 14:34:00 +0800
5 | categories: Vue
6 | ---
7 |
8 | 一次在ci打包编译vue项目，上线到测试环境后出现了Maximum call stack size exceeded error错误。
9 |
10 | 这个错误意思是堆栈溢出。本地环境无任何这样的问题，但经过ci跑完之后就出现这个问题。
11 | 错误提示指向了打包后的js文件，由于代码压缩uglifyjs，所以直接是看不到错误根源的。在搜索了相关的资料后，有提到是vue单页面组件中存在重复定义的变量。但我有引用lint工具，如果出现这样但情况git提交是无法顺利进行的。
12 |
13 | ## 切换部署代码
14 |
15 | 把部署到测试环境的代码回退到上一个tag，意在排除是代码的问题。结果回退到上一个tag后，经过ci部署，线上仍旧出现这个情况。
16 |
17 | 经过一步步推测，觉得就是在打包编译的过程中出现了问题。
18 |
19 | ## 问题原因
20 |
21 | 在ci到log日志中，发现代码在build的过程中，prettier出现了不少的错误。所以根源就在于本地和docker镜像中的项目build所需要的某个package出现异常。
22 | 而异常就应该出现在prettier上。
23 |
24 | ## 问题处理
25 |
26 | 要是出自某个package上，只能是package的版本不一致导致的。在package.json中，看到版本：
27 |
28 | ```json
29 | "prettier": "^2.0.2"
30 | ```
31 |
32 | 这个版本符号"^"是插入符号，这会安装当前的主要版本，例如上面的版本的话，会更新到2.x.x最新的版本。这就会可能引起版本的不一致。
33 |
34 | 把这个符号移除掉，固定版本号之后，ci也不会出现问题，上线就恢复正常了。
35 |
36 | ## package.json版本总结
37 |
38 | package.json中的版本号有3个位。例如：`1.12.2`
39 |
40 | 从左到右，第一个数字为主版本号（marjor version），第二个数字为次版本号（minor version），第三个数字为补丁版本号（patch version）。
41 |
42 | `~`: 更新中间数字的最新版本。如`~1.3.1`会更新1.3.x最新版本。
43 | `^`: 更新第一个数字但最新版本。如`^1.3.1`会更新1.x.x最新版本。
44 |
45 |
--------------------------------------------------------------------------------
/_posts/2018-12-13-koa-async.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "koa异步写文件遇到的小问题"
4 | date: 2018-12-13 20:00:00 +0800
5 | categories: 前端
6 | ---
7 |
8 | 
9 | 最近用koa写个微信小程序二维码生成接口，出现了一个小坑：由于小程序二维码生成接口返回的是二进制流，需要通过fs操作生成图片返回给前端下载。期间反复出现下载文件大小为0（零 / 大小未知）的情况。
10 |
11 | **主要生成二维码代码如下**
12 |
13 | ```javascript
14 | // 其余代码省略
15 | const writeS = fs.createWriteStream('qrcode.png')
16 | await request({
17 | uri: `https://api.weixin.qq.com/wxa/getwxacode?access_token=${token}`,
18 | method: 'post',
19 | body: data,
20 | json: true
21 | }).pipe(writeS)
22 | // 其余代码省略
23 | ```
24 | 需要有个先后顺序问题，必须先等到文件写完后才能进行图片下载接口调用。处理方法是在前端调用生成二维码的接口，而接口的操作需要有个等待过程，即要在`createWriteStream`结束后**生成二维码接口**才返回数据。
25 |
26 | 前端在接收到**生成二维码接口**返回数据后才调用下载二维码接口。
27 |
28 | koa端等待写文件结束后返回，这里koa要用promise在callback后触发返回数据：
29 |
30 | ```javascript
31 | ctx.body = await new Promise((resolve, reject) => {
32 | writeS.on('finish', function () {
33 | resolve({
34 | code: 1
35 | })
36 | })
37 | })
38 | ```
39 | 前端监听操作：
40 |
41 | ```javascript
42 | if (res.data.code === 1) {
43 | window.open('图片下载地址')
44 | }
45 | ```
46 |
47 | 具体接口代码（[查看](https://github.com/GzhiYi/wxqrcode-generater/blob/master/index.js)）
--------------------------------------------------------------------------------
/_posts/2017-11-09-ubuntu-shadowsocks.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "如何在ubuntu下使用shadowsocks"
4 | date: 2017-11-09 20:00:00 +0800
5 | categories: Linux
6 | ---
7 |
8 | ### 提示：
9 | 1. 测试环境：Ubuntu 16.04 (gnome桌面环境)
10 | 2. 需要ss出国，就需要有ss账号。有很多的出售账号的地方。当然也可以自己搭建个人ss服务器，这里就不再赘述。
11 | 3. 需要下载软件Shadowsocks-Qt5,具体下面会列出。
12 | 4. 提供SwitchyOmega配置文件，不需要自己配置。
13 | 5. 每次开机需要手动连接Qt5，除非设置自动连接。
14 | 6. [文件](https://github.com/GzhiYi/frontend-log/releases/tag/ss)
15 | ## 步骤(Steps):
16 | - 下载Shadowsocks-Qt5：
17 | ```
18 | sudo add-apt-repository ppa:hzwhuang/ss-qt5
19 | sudo apt-get update
20 | sudo apt-get install shadowsocks-qt5
21 | ```
22 | - 打开Qt5，右键空白选择添加。对应填上自己的ss账号信息。
23 | 有多种添加账号的方式，哪种合适用哪种。账号信息填好就点击新建的账号连接。如果ip能连通一般有延迟显示。
24 | - 下载SwitchyOmega
25 | 可以提供gfw过滤等，在chrome下使用体验很不错。
26 | [chrome上车](https://chrome.google.com/webstore/detail/proxy-switchyomega/padekgcemlokbadohgkifijomclgjgif?utm_source=chrome-ntp-icon)
27 | [fireFox上车](https://addons.mozilla.org/zh-CN/firefox/addon/switchyomega/)
28 | 文件在提示第六条有release下载。
29 | - 配置SwitchyOmega
30 | 点击选项--导入/导出--从备份文件恢复。选择文件
31 | ```
32 | OmegaOptionsChrome.bak
33 | ```
34 | - 开启switchyOmega
35 | 选择switchyOmega的自动切换
36 |
37 | ## 开机自启方法
38 |
39 | 1. 选择Qt5添加的项目右键--编辑，勾选程序启动时自动连接
40 | 2. Qt5 设置--常规设置--登录时启动
41 |
--------------------------------------------------------------------------------
/_posts/2021-06-29-vue-dom-not-found.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "vue获取不到dom节点"
4 | date: 2021-06-29 20:00:00 +0800
5 | categories: Vue
6 | ---
7 |
8 | 在vue开发中，出现拿不到dom节点的问题，具体的场景是页面需要对echarts进行实例化，画布需要挂在到某个id的dom上，图表的数据需要从接口上获取，大致的代码如下：
9 |
10 | ```vue
11 |
12 | div#render-id
13 |
14 |
31 | ```
32 |
33 | 出现的异常：
34 |
35 | ```
36 | Cannot read property 'getAttribute' of undefined"
37 | ```
38 |
39 | 打印node节点发现为null。
40 |
41 | ### 问题解决
42 |
43 | 解决这个问题需要知道的是，获取不到节点的直接原因就是在query节点的时候render-id还没挂载到dom上。但会问，不是在mounted后才读这个节点吗？按照上面的代码逻辑，想法是正确的，即便是接口数据大，获取数据的时间长，也会在render-id这个元素挂载到dom后才会执行query操作。理论是不会出现读取不到该节点的问题。
44 |
45 | 处理思路应该聚集在渲染dom有什么另外的操作会影响。总结无外乎就是：
46 |
47 | 1. 优先确认query节点的操作要在dom渲染完成后操作（这是核心思路）。
48 | 2. 检查有无异步的操作产生影响。比如元素需要在接口获取到之后写入到document，但写入前读取是会出现这样的问题的。
49 | 3. 检查获取的元素或者元素的外层是否有loading的操作。
50 | 4. $nextTick(f)有时候会解决此类问题。
--------------------------------------------------------------------------------
/_posts/2021-11-04-should-i-buy-macbook.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "恰逢苹果新MacBook Pro发布，但我考虑许久是否需要购入"
4 | date: 2021-11-04 15:59:52 +0800
5 | categories: 随笔
6 | ---
7 |
8 | 
9 |
10 | ## 新MacBook Pro
11 |
12 | 应该大部分苹果爱好者都知道，苹果在前不久发布了新的MacBook Pro，搭载了新的m1 pro和m1 max芯片来炸场。说实话，除开刘海有点碍眼之外，其他的各方面我都很满意。尽管厚度在视觉上有所增加，但我好像更喜欢这样“踏实”的机身。14寸机身也是刚好，在发布那晚我就下单了。心想着终于可以有一台移动的高性能生产力工具，充满了一些小期待。
13 |
14 | 选购的是定制的32g内存版本，由于是定制版本，所以发货时间在5-6周之后。也没过多久，在这块热度稍微降下来之后，内心的想法有了一些改变。
15 |
16 | 就会让自己好好考虑，是否真的需要笔记本办公？
17 |
18 | ## 想法改变
19 |
20 | 公司台式机，性能低下但还能够开发，linux的开放也给我开发增添了不少的便捷和乐趣（微信等app除外）。双显示器，左边常挂vscode，右边挂chrome进行页面调试开发。除了性能不够强，app在linux表现不好外，台式机这种非移动的开发设备有比较大的优点是：不需要移动设备；相较于低头使用笔记本，抬高台式机显示器对颈椎有好处。
21 |
22 | 所以我好像不大能够接受长期的每天的上下班背着几斤重的笔记本，我更需要的是一个性能好的非移动开发设备。说是性能好，但其实前端开发并不需要那么好的性能。总结下来，最主要的改变想法的原因是不想每天背电脑过地铁安检，来来回回公司；不想低头办公保护颈椎。
23 |
24 | 不过其实上面的问题可以简单的解决，比如说笔记本放公司，比如说笔记本抬高仍旧使用键盘和鼠标。可好像莫名创造了购买笔记本的需求。
25 |
26 | 综合考虑，暂时不需要笔记本。
27 |
28 | ## 取而代之
29 |
30 | 个人很喜欢在macos下开发，类unix系统，没有像windows那么多的广告干扰，也能摸上linux开发的体验。所以我要有一台macos系统的设备。nuc就非常符合我的需求，体积小，不用移动，性能还可以，最重要的是可以黑苹果双系统。所以我带了一块nuc到公司，发现开发效率提升了很多。在想新的MacBook Pro于我而言绝对性能过剩。
31 |
32 | ## 我还是会考虑买MacBook Pro
33 |
34 | 我有iOS app开发的需求，以后我会买的，当然自己也想拥有一台高性能的Mac。未来会在更多款中考虑，比如和air以及mini对比。
35 |
--------------------------------------------------------------------------------
/_posts/2022-12-21-covid.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: 记感染新冠
4 | date: 2022-12-21 19:37:10 +0800
5 | categories: 生活
6 | ---
7 | 
8 |
9 | 这次入冬，每个人几乎都需要对面的新冠。在国家陆续开放后，新冠扑面而来的速度比我想象中还要快。大概一周的时间，我就感染上并表现出了轻症的一些症状。
10 |
11 | ### 初步确认感染
12 |
13 | 大概在上周一，我陆续的感觉到喉咙有些干疼，这种疼痛并不是很明显。我一度将它归咎为周末吃的一顿烤肉，而我也是那种属于容易细菌感染导致扁桃体发炎的人。因为症状不是很明显，所以没有把精力放在判断上。轻微的喉咙干痛持续到了周三。
14 |
15 | 周三，越发觉得喉咙疼痛加剧，但身体没有发热和更多的不适。在中午午饭后，感觉越来越明显，伴随的是全身的发热。大概在下午 3 - 4 点的时候，我拿出昨晚准备好的电子体温计，测了下体温，大概测了 3 次，都在 38 ℃以上。因此感到不妙后和公司负责人提出离开公司回去居家休息，避免感染更多的同事。当时公司已经有 2 位同事因发烧在家休息了。
16 |
17 | 在快到家的路上，觉得全是疲惫，浑身使不出力气，周身酸痛，尤其是膝盖，很酸涨的感觉。
18 |
19 | 大概在周五早上，我才测出抗原阳性。那时候已经不会感觉到发烧了。
20 |
21 | ### 最难受的症状
22 |
23 | 这次新冠感染，实际上我个人的感受是感冒的“放大版”。因为症状和普通的感冒非常类似，以往我感冒的症状，第一个就是喉咙痛，在痛完之后就开始走感冒的流程了。但新冠让我最难受的，其实是咽痛。非常疼，比扁桃体发炎还要疼上几个层次，关键是，这份疼痛持续了大概 3 - 4 天，而且减弱的趋势感知并不会很明显。疼痛感跟网上描述的差不多，就是吞刀片的感觉。这种疼痛在做吞咽动作的时候达到顶峰。期间因为喉咙痛导致 2 - 3 晚没法好好睡眠，最后都不得不吃止痛药才能勉强入睡。
24 |
25 | ### 大致恢复
26 |
27 | 大概在今天，我才可以说新冠的症状几乎完全消失。因为偶尔还会有几声咳嗽，而喉咙也一直有不大舒适的感觉。除了这个之外，没有其他的任何不适，胃口食欲也几乎没什么差别。总体来说，新冠的难受还是有很多的，很难想象那些年纪大，有基础病的人是会会遇到多难受的情况。现在住的这里，周围都能听到不间断的咳嗽声，我也可以判断附近大部分人都已经感染上了。希望这个社会和经济快好起来吧。
28 |
29 | ### 后续情况
30 |
31 | 【2022 年 12 月 26 更新】今天是线下复工第一天。自身症状已经全部没了，和正常没有啥区别。早上通勤地铁上咳嗽声可以说“声声入耳”，在我排队的前后左右几乎都是。这样的情况我真不确定自己阳康后身体的抗体能抵抗多久。就有种没完没了的感觉，而现在还正在处于感染高峰期。疫情已经破坏了很多人的生活秩序，真心希望这个世界能快点把 covid 驱逐。
32 |
--------------------------------------------------------------------------------
/new.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs')
2 | const dayjs = require('dayjs')
3 | const readline = require('readline')
4 | const { exec } = require('child_process')
5 | const { start } = require('repl')
6 |
7 | const rl = readline.createInterface({
8 | input: process.stdin,
9 | output: process.stdout
10 | });
11 |
12 | function generatePost(title, url, category) {
13 | const templateStr = `---
14 | layout: post
15 | title: ${title}
16 | date: ${dayjs().format('YYYY-MM-DD HH:mm:ss')} +0800
17 | categories: ${category}
18 | ---
19 |
20 | #
21 | `
22 | const fileName = `${dayjs().format('YYYY-MM-DD')}-${url}.md`
23 | fs.writeFileSync(`./_posts/${fileName}`, templateStr)
24 | return `./_posts/${fileName}`
25 | }
26 |
27 | const generatePromise = () => {
28 | return new Promise((resolve, reject) => {
29 | rl.question('🤔输入这篇文章名称：', title => {
30 | rl.question('🐼路由英文：', url => {
31 | rl.question('😪文章类别：', category => {
32 | const fileName = generatePost(title, url, category)
33 | console.log('文章已生成，现在编辑！', fileName)
34 | resolve(fileName)
35 | rl.close()
36 | })
37 | })
38 | })
39 | })
40 | }
41 |
42 | const begin = async () => {
43 | const fileName = await generatePromise()
44 | require('child_process').spawn('vim', [fileName], { stdio: 'inherit' })
45 | }
46 |
47 | begin()
--------------------------------------------------------------------------------
/_posts/2022-11-01-looking-for-a-good-job.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: 再次经历一次找工作
4 | date: 2022-11-01 20:26:10 +0800
5 | categories: 生活
6 | ---
7 | 
8 | # 找工作啦
9 |
10 | 如果有需要招聘 **前端开发工程师** 岗位的可以联系我【zhiyi.gong@outlook.com】，我会发送简历以查看是否相互合适😊。
11 |
12 | 工作地点暂定**广州**，远程岗位更佳！
13 |
14 | 我的 [github.com/GzhiYi](https://github.com/GzhiYi)。
15 |
16 | ## 离职
17 |
18 | 我在上一份工作中工作了将近 3 年，认识了非常多非常好的同事。尽管离职看起来非常干脆，但实际上还怀了很多的不舍。在上一个公司的开发路程中，学习和巩固了非常多的前端开发技能。上一份工作给我的最大印象就是氛围好，同事很 nice 。我是从入职后的几个月开始爱上了羽毛球，即便现在已经过去蛮久了，也会坚持每周打上球。这算是我项目技术外学习和热爱的另一个技能了。
19 |
20 | 从 11 月份开始，我就要寻找下一份工作了。
21 |
22 | ## 前段时间
23 |
24 | 在 10 月份的业余期间，我花了非常多的时间重构《单单记账》小程序的服务端代码。现在已经平稳的将用户登录信息从腾讯云的默认鉴权迁移邮箱登录鉴权上。要想在 10 月前我还在苦恼着“腾讯云快到期了咋办？”。我写了不少的小程序，几乎全部都是用了免费的云开发配额。最后除了《单单记账》外，其他的全部进行关停。另一个小程序《一起算账》也有着大概 5k 的累计用户，最后我还是把这个小程序的核心功能加入到《单单记账》中，也就是 AA 记账功能。再后续，我还开发设计了一个 PRO 会员的模块，慢慢的为后面 APP 的开发打下基础。尽管我觉得用户付费的意愿不会高，但总有喜欢的人的。我把这当作是一个特殊的开始。
25 |
26 | 《单单记账》服务端用的是 nestjs + mongodb 的组合，在基础的 CRUD 上可以说效率很高。由于已在个人服务器上跑完整的数据库服务，所以也告别了云开发查询的一些硬性限制。虽然服务器的配置比较低，但查询性能比以往高了很多，就算我的服务器是架设在新加坡上所带来的延迟加起来还比以前有效率。
27 |
28 | 还有一些更新迭代的计划列在了 Github Project 中。目前而言是需要将工作重心放在寻找工作上。可以说我并没有料到外部的就业环境有这么差😓。大概 3 年前我面试的机会也比现在多非常多，或许我找下一份工作需要实力外，还需要有一些运气。
29 |
30 | ## 后续
31 |
32 | 不料在 11 月左右，因为疫情的缘故，喜提了 7 天小区封禁。当时还没预料到广州的疫情原来这么严重，现在每天都能看到新闻提及昨日新增***（ 3 位数）例确诊病例。不过幸好物资等等都可以购买和配送到。这期间也在不停的为面试做准备，大概小区解封后，就可以外出面试了。不过我猜现在很多公司都支持线上面试了吧。
33 |
--------------------------------------------------------------------------------
/_posts/2022-07-22-gitlab-private-npm-package.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: 在自建 GitLab 中 使用 NPM Packages
4 | date: 2022-07-22 16:26:52 +0800
5 | categories: GitLab
6 | ---
7 |
8 | 如果不想将个人 npm 包放到外部访问，只能在个别项目上引入的话，可以使用 GitLab 的 Package Registry 服务。实际上不止 npm 包，还有很多比如 Composer、Ruby gems 等都可以将一个 Git 仓库作为一个 Package。
9 |
10 | 这里只说明 npm 的包上传和使用。
11 |
12 | ## 上传 package 到 GitLab
13 |
14 | 首先需要一个 Deploy Token 才能上传。这个 Token 可以让你读取包(packages)、代码内容(repository)、代码镜像(registry images)。
15 |
16 | 进入项目（具有package.json的仓库，这里不做区分，仓库就是 npm 包！） - 设置 - 仓库设置 - 部署令牌。英文则是：Settings - Repository - Deploy tokens。
17 |
18 | 填写令牌名称和过期时间（不填则永久），注意必须勾选 `读` 和 `写` 权限，否则不能正常上传和引入。
19 |
20 | 新建一个 .npmrc 文件存放当前项目的 npm 配置。内容如下：
21 |
22 | ```bash
23 | registry=https://私有GitLab域名/api/v4/projects/项目ID/packages/npm/
24 | //私有GitLab域名/api/v4/projects/项目ID/packages/npm/:_authToken=部署令牌
25 | ```
26 |
27 | 说明：
28 |
29 | 1. 私有 GitLab 域名。填写正在使用 GitLab 域名。
30 | 2. 项目ID。在项目主页信息中有个 Project ID 显示。
31 | 3. 部署令牌。由上面操作生成的具有读和写操作的令牌。
32 |
33 | 上传到 GitLab 上，还需要最后一步，在 `package.json` 中指定发布配置 Registry 地址。
34 |
35 | ```json
36 | "publishConfig ": {
37 | "registry": "https://私有Gitlab域名/api/v4/projects/项目ID/packages/npm/"
38 | }
39 | ```
40 |
41 | 然后就可以发布了。
42 |
43 | ```bash
44 | npm publish
45 | ```
46 |
47 | 发布成功后，就可以在 GitLab 仓库的 `包&镜像(Packages & Registries)` 中找到刚刚上传的镜像。
48 |
49 | ## 外部引用
50 |
51 | 在需要引入的项目中，创建一个 .npmrc 文件。一样将上面 .npmrc 内容复制过来，就可以直接 npm install 了，当然需要在 项目的 package.json 中设置引入包名以及版本。
52 |
--------------------------------------------------------------------------------
/_posts/2019-08-23-mp-pass.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "我想要小程序过审"
4 | date: 2019-08-23 20:00:00 +0800
5 | categories: 小程序
6 | ---
7 |
8 | 
9 | 小程序审核就是一个痛。资质、内容没问题的自然感受不到这样的痛苦。
10 |
11 | 尤其是个人小程序，不给你过，因为你小程序有UGC；不给你过，因为你诱导用户分享...
12 |
13 | 如果类目多还好，个人小程序就那几个能用（感兴趣）的类目，还能怎么办。反正上线过多次小程序，也尝试过很多次审核不通过，对于怎么避开审核组哥哥姐姐的法眼，我有一个代码级绕过的方法。
14 |
15 | ## 什么内容导致审核不过
16 |
17 | 要十分清楚什么内容导致小程序没法审核通过。审核不过会简单把驳回原因返回，无外乎是资质、内容之类的问题。有时候觉得描述的模凌两可，我的小程序没有这些违规的，怎么审核还是不过呢！不怕，多试几次之后，很有可能审核组会给一张审核不过的“证据图”。一般是小程序的截图。
18 |
19 | ## 怎么避开
20 |
21 | 知道什么原因后，就想办法绕开审核。希望你的小程序不是很违规，只想上线满足自己那种程度，不要干坏事！
22 |
23 | 我自己总结了两种办法，两种办法的核心都是：`不要在审核员在审核期间看到不该看到的内容`。
24 |
25 | 1. 使用延迟显示。
26 |
27 | 定义一个时间戳，你的内容将在时间戳到达后显示出来。基本的代码可以如下：
28 |
29 | ```javascript
30 | // 判断是否在审核期间
31 | const nowTime = Date.parse(new Date())
32 | if (nowTime < 1565078400000) { // 2019-08-06 16:00:00
33 | this.globalData.isEscape = false // true 的时候就放开内容
34 | }
35 | ```
36 |
37 | 这样就可以屏蔽掉并保证在isEscape为false的时候不显示违规内容。当然这么做还是有缺点的：你不能保证你的小程序审核时候处于审核期，有可能审核周期很长，那怎么办？
38 |
39 | 2. 使用接口控制显示。
40 |
41 | 接口这个总该稳了吧？
42 |
43 | ```javascript
44 | wx.request({
45 | url: '##',
46 | method: 'GET',
47 | success(res) {
48 | getApp().globalData.isEscape = res.data.isEscape
49 | }
50 | })
51 | ```
52 |
53 | 这其实也不是很好，毕竟接口存在延迟。多少会有。尤其是在云开发的免费配额上，这基本是会影响体验。判断究竟用那种方法，取决于你小程序上线的周期安排等。
54 |
55 | ## 提示
56 |
57 | 小程序审核应该能绕过页面逻辑直接打开全部pages定义的页面的，所以要针对这个做一些跳转屏蔽处理。
--------------------------------------------------------------------------------
/Gemfile:
--------------------------------------------------------------------------------
1 | source "https://rubygems.org"
2 | # Hello! This is where you manage which Jekyll version is used to run.
3 | # When you want to use a different version, change it below, save the
4 | # file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
5 | #
6 | # bundle exec jekyll serve
7 | #
8 | # This will help ensure the proper Jekyll version is running.
9 | # Happy Jekylling!
10 | gem "jekyll", "~> 4.2.2"
11 | # This is the default theme for new Jekyll sites. You may change this to anything you like.
12 | gem "minima", "~> 2.5"
13 | # If you want to use GitHub Pages, remove the "gem "jekyll"" above and
14 | # uncomment the line below. To upgrade, run `bundle update github-pages`.
15 | # gem "github-pages", group: :jekyll_plugins
16 | # If you have any plugins, put them here!
17 | group :jekyll_plugins do
18 | gem 'jekyll-sitemap'
19 | gem 'jekyll-feed'
20 | gem 'jekyll-seo-tag'
21 | end
22 |
23 | # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
24 | # and associated library.
25 | platforms :mingw, :x64_mingw, :mswin, :jruby do
26 | gem "tzinfo", "~> 1.2"
27 | gem "tzinfo-data"
28 | end
29 |
30 | # Performance-booster for watching directories on Windows
31 | gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
32 |
33 | # Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
34 | # do not have a Java counterpart.
35 | gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
36 |
37 | gem "webrick", "~> 1.7"
38 |
--------------------------------------------------------------------------------
/_posts/2022-05-13-using-CSS-custom-properties.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "使用 CSS 自定义属性解决行内 hover 等伪类样式问题"
4 | date: 2022-05-13 17:09:00 +0800
5 | categories: CSS
6 | ---
7 |
8 | 在个别情况需要用到 CSS 自定属性解决一些自定义样式问题。例如有个组件定义一个 props 为 `hoverColor`，意思是可以根据传入的颜色决定组件内某处元素 hover 的背景色。css 本身不支持行内的 hover 属性定义，所以不能直接在 style 内通过变量去设置 hover 样式。
9 |
10 | ## CSS 自定义属性
11 |
12 | 包含的值在整个文档中生效并可重复使用，属性名需要`--`打头。通过 style 去设置值：
13 |
14 | ```html
15 |
16 | ```
17 |
18 | 通过 var 去取值：
19 |
20 | ```scss
21 | .item:hover {
22 | background-color: var(--hover-color);
23 | }
24 | ```
25 |
26 | 在 chrome 和 safari 上都具有不错的兼容性，chrome 上最佳。
27 |
28 | ## 和 sass 配合处理数组配置的样式问题
29 |
30 | 假设有这样一个配置数组：
31 |
32 | ```js
33 | export const boxData = [
34 | {
35 | title: 'boxa',
36 | hoverColor: '#f5a432'
37 | },
38 | {
39 | title: 'boxb',
40 | hoverColor: '#f32422'
41 | },
42 | {
43 | title: 'boxc',
44 | hoverColor: '#f54432'
45 | }
46 | ]
47 | ```
48 |
49 | 组件渲染这个数组，生成 3 个 div 盒子：
50 |
51 |
52 | ```vue
53 |
54 |
55 | ```
56 |
57 | boxData 为上方定义的数据。
58 |
59 | 根据上面的做法，配合 sass 可以实现定义多个 css 自定义属性。
60 |
61 | ```vue
62 |
67 | ```
68 |
69 | ```sass
70 | @for $i from 0 to 3 {
71 | .hover-item-#{$i}:hover {
72 | background-color: var(--hover-color-#{$i});
73 | }
74 | }
75 | ```
76 |
77 | 如果有更好的做法，欢迎评论中留言～
78 |
--------------------------------------------------------------------------------
/_sass/minima.scss:
--------------------------------------------------------------------------------
1 | @charset "utf-8";
2 |
3 | // Define defaults for each variable.
4 |
5 | $base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
6 | $base-font-size: 16px !default;
7 | $base-font-weight: 400 !default;
8 | $small-font-size: $base-font-size * 0.875 !default;
9 | $base-line-height: 1.5 !default;
10 |
11 | $spacing-unit: 30px !default;
12 |
13 | $text-color: #111 !default;
14 | $background-color: #fefbf1 !default;
15 | $brand-color: #2a7ae2 !default;
16 |
17 | $grey-color: #828282 !default;
18 | $grey-color-light: lighten($grey-color, 40%) !default;
19 | $grey-color-dark: darken($grey-color, 25%) !default;
20 | $border: #ebeef5 !default;
21 |
22 | $table-text-align: left !default;
23 |
24 | // Width of the content area
25 | $content-width: 800px !default;
26 |
27 | $on-palm: 600px !default;
28 | $on-laptop: 800px !default;
29 |
30 | // Use media queries like this:
31 | // @include media-query($on-palm) {
32 | // .wrapper {
33 | // padding-right: $spacing-unit / 2;
34 | // padding-left: $spacing-unit / 2;
35 | // }
36 | // }
37 | @mixin media-query($device) {
38 | @media screen and (max-width: $device) {
39 | @content;
40 | }
41 | }
42 |
43 | @mixin relative-font-size($ratio) {
44 | font-size: $base-font-size * $ratio;
45 | }
46 |
47 | // Import partials.
48 | @import
49 | "minima/base",
50 | "minima/layout",
51 | "minima/syntax-highlighting"
52 | ;
--------------------------------------------------------------------------------
/_posts/2018-12-12-es6-module.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "ES6 Module语法小结"
4 | date: 2018-12-12 20:00:00 +0800
5 | categories: 前端
6 | ---
7 |
8 |
9 | ## `export`
10 |
11 | 1. 输出变量。
12 |
13 | ```javascript
14 | export const name = 'GzhiYi';
15 | export const job = 'Frontend';
16 | ```
17 | 以上可简写（荐）：
18 | ```javascript
19 | const name = 'GzhiYi';
20 | const job = 'Frontend';
21 |
22 | export { name, job };
23 | ```
24 | 2. 输出函数或者类`class`。
25 |
26 | ```javascript
27 | export function exportMe () {}
28 | export class exportMeToo {}
29 | ```
30 |
31 | 3. 关键字`as`重命名输出。
32 |
33 | ```javascript
34 | const name = 'GzhiYi';
35 | const job = 'Frontend';
36 |
37 | export {
38 | name as changeName,
39 | job as changeJob
40 | };
41 | ```
42 |
43 | ## `import`
44 |
45 | 1. 导入`export`输出的接口。
46 |
47 | ```javascript
48 | import { name, job } from 'filePath';
49 | // import 进来的变量均是readOnly，也不建议改写引入的其它类型数据。
50 | ```
51 | 2. 关键字`as`重命名输入。
52 |
53 | ```javascript
54 | import { name as changName } from 'filePath';
55 | ```
56 |
57 | ## 整体引入
58 |
59 | ```javascript
60 | // 假设demo.js文件有如下内容
61 | function funA () {}
62 | function funB () {}
63 |
64 | export { funA, funB };
65 |
66 | // 平常加载
67 | import { funA, funB } from './demo';
68 |
69 | // 整体引入
70 | import * as allFun from './demo';
71 | allFun.funA();
72 | allFun.funB();
73 | ```
74 |
75 | ## `export defalut` 指定默认输出
76 |
77 | ```javascript
78 | // demo.js
79 | export default function () {};
80 |
81 | // 引入
82 | import funName from 'demo';
83 | // 不需要知道封装demo.js包含的函数名，import后无需接大括号，因为默认输出的只有一个。
84 | ```
85 |
--------------------------------------------------------------------------------
/_posts/2021-08-03-vue-docker-buildkit.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "用docker构建vue项目镜像，与buildkit体积对比"
4 | date: 2021-08-03 16:18:06 +0800
5 | categories: Docker
6 | ---
7 |
8 | ## 使用Dockerfile去打包一个vue项目镜像
9 |
10 | ```bash
11 | vue create hello-world
12 | cd hello-world && touch Dockerfile
13 | ```
14 |
15 | Dockerfile内容
16 |
17 | ```bash
18 | FROM node:lts-alpine
19 | RUN npm install -g http-server
20 | WORKDIR /app
21 | COPY package*.json ./
22 | RUN npm install
23 | COPY . .
24 | RUN npm run build
25 | EXPOSE 8080
26 | CMD ["http-server", "dist"]
27 | ```
28 |
29 | ### 镜像构建与容器运行
30 |
31 | ```bash
32 | docker build -t vue:demo . # 构建镜像
33 | docker run -it -d -P vue:demo
34 | docker container ls # 查看映射的端口
35 | ```
36 |
37 | 查看生成的镜像大小为：287MB。
38 |
39 | ### 使用buildkit优化镜像体积
40 |
41 | 新的Dockerfile
42 |
43 | ```bash
44 | # systax = docker/dockerfile:experimental
45 | FROM node:lts-alpine
46 | RUN npm install -g http-server
47 | WORKDIR /app
48 | COPY package*.json ./
49 | RUN --mount=type=cache,target=/app/node_modules,id=my_app_npm_module,sharing=locked\
50 | --mount=type=cache,target=/root/.npm,id=npm_cache \
51 | npm install
52 | COPY . .
53 | RUN --mount=type=cache,target=/app/node_modules,id=my_app_npm_module,sharing=locked \
54 | # --mount=type=cache,target=/app/dist,id=my_app_dist,sharing=locked \
55 | npm run build
56 | EXPOSE 8080
57 | CMD ["http-server", "dist"]
58 | ```
59 |
60 | ### 构建镜像
61 |
62 | ```bash
63 | DOCKER_BUILDKIT=1 docker build -t vue:buildx .
64 | ```
65 |
66 | 对比查看，tag为buildx的镜像体积为：124MB。
67 |
68 | 体积减少了一半，是用buildkit对node_modules进行缓存处理。
--------------------------------------------------------------------------------
/_posts/2019-11-28-http-cache.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "HTTP缓存"
4 | date: 2019-11-28 20:00:00 +0800
5 | categories: 学习
6 | ---
7 |
8 | ## 缓存相关头
9 |
10 | ### 响应头
11 |
12 | - Expire。资源过期时间。
13 | - Cache-Control。缓存控制字段，精确控制缓存策略。
14 | - Last-Modified。资源最近修改时间。
15 | - Etag。资源标识。
16 |
17 | ### 请求头
18 |
19 | - Cache-Control。缓存控制字段，精确控制缓存策略。
20 | - If-Modified-Since。资源最新修改时间。
21 | - If-None-Match。缓存资源标识。
22 |
23 | ### 字段匹配
24 |
25 | If-Modified-Since和Last-Modified
26 | Etag和If-None-Match
27 |
28 | ## 浏览器和服务器约定资源过期时间
29 |
30 | 服务器和浏览器之间约定文件的过期时间，控制的字段为：Expires。在这个时间未到之前，浏览器对同一个文件不会向服务器发起请求。
31 |
32 | **缺点：**Expire到期后，如果文件未进行过改动，浏览器还是会向服务器请求读取文件。
33 |
34 | ## 服务器告诉浏览器资源上次的修改时间（解决上面的问题）
35 |
36 | 服务器返回文件的时候，在响应头上增加一个最近修改时间（Last-Modified）。浏览器在Expires时间到之后，会向服务器发起文件请求，这时带上一个最近修改时间（If-Modified-Since = Last-Modified）。服务器在接受到请求之后，会拿这个时间和服务器上目标文件的上一次修改时间做对比：
37 | - 相等。进行304跳转，不要读取服务器文件了，读取缓存就行了。
38 | - 不相等。读取服务器上的文件。
39 | **缺点：**
40 | 1. Expires过期时间浏览器断可以修改，这样会导致缓存不准确。
41 | 2. Last-Modified过期时间只能精确到秒。（一秒内可能多次改动，这样会造成两个可能的问题：文件一秒内改动多次，但还是通知浏览器读缓存。如果文件修改了，但内容不变，那就会去读服务器文件了。）
42 |
43 | ## 增加相对时间控制，引入Cache-Control
44 |
45 | 服务器在返回资源给浏览器的时候，会增加一个相对时间：Cache-Control：max-age=1000s。这个的意思是告诉浏览器，1000s内使用浏览器缓存的文件。
46 |
47 | **优先级：**
48 | Cache-Control优先于Expires。有Cache-Control就以Cache-Control为准。
49 |
50 | ## 继续升级缓存机制
51 |
52 | 带上Etag-可以理解为文件的唯一Id，由服务器返回到浏览器上。
53 | 在有效期过后，带上一个等同于Etag值的If-None-Match请求头，比较后处理是否读取文件。
54 |
55 | ## 最后是我前端的一个技巧啦
56 |
57 | 由于上面那么多的缓存判断条件，都不能满足一个情况，既浏览器永远无法主动知道服务器的文件已经更新。那好：静态资源在请求链接上更新就行了。
58 |
59 | ```javascript
60 |
61 | ```
--------------------------------------------------------------------------------
/_posts/2020-01-20-docker-easymock.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "Docker安装easymock"
4 | date: 2020-01-25 20:00:00 +0800
5 | categories: 学习
6 | ---
7 |
8 | 为了方便本地mock接口，需要在本地用docker跑一个easy-mock服务。第一时间想到docker运行，方便管理和使用。基本上是非常简单就可以跑起来的。所以在这记录一下安装easy-mock的步骤，也为了下次更快的安装。
9 |
10 | > 假设在目录"/Users/用户目录名/easymock"存放easy-mock配置。
11 | > 当然需要先安装好docker啦，不再赘述。
12 |
13 | ## Docker compose文件
14 |
15 | x在easymock目录下新建一个docker-compose.yml文件，内容如下：
16 |
17 | ```yml
18 | version: '3'
19 |
20 | services:
21 | mongodb:
22 | image: mongo:3.4.1
23 | volumes:
24 | # ./data/db 数据库文件存放地址，根据需要修改为本地地址
25 | - './data/db:/Users/用户目录名/easymock/data/db'
26 | networks:
27 | - easy-mock
28 | restart: always
29 |
30 | redis:
31 | image: redis:4.0.6
32 | command: redis-server --appendonly yes
33 | volumes:
34 | # ./data/redis redis 数据文件存放地址，根据需要修改为本地地址
35 | - './data/redis:/Users/用户目录名/easymock/data'
36 | networks:
37 | - easy-mock
38 | restart: always
39 |
40 | web:
41 | image: easymock/easymock:1.6.0
42 | command: /bin/bash -c "npm start"
43 | ports:
44 | - 7300:7300
45 | volumes:
46 | # 日志地址，根据需要修改为本地地址
47 | - './logs:/Users/用户目录名/easymock/easy-mock/logs'
48 | # 配置地址，请使用本地配置地址替换
49 | - './production.json:/Users/用户目录名/easymock/easy-mock/config'
50 | networks:
51 | - easy-mock
52 | restart: always
53 |
54 | networks:
55 | easy-mock:
56 | ```
57 |
58 | ## 运行
59 |
60 | `docker-compose up -d`即可运行。
61 |
62 | ```bash
63 | easymock_redis_1 is up-to-date
64 | easymock_mongodb_1 is up-to-date
65 | easymock_web_1 is up-to-date
66 | ```
67 | 后打开`localhost:7300`
--------------------------------------------------------------------------------
/_posts/2018-10-15-anti-theft.md:
--------------------------------------------------------------------------------
1 | ---
2 | date: 2018-05-16
3 | layout: post
4 | title: "防盗链的解析"
5 | date: 2018-10-15 20:00:00 +0800
6 | categories: 小程序
7 | ---
8 |
9 | ### 前言
10 |
11 | 最近涉及到了图片防盗链的问题，链接是特殊的，不能被其他网站解析为图片。说下来有几种办法，当然解决后发现还是最后那种简单便捷。唯一的缺点就是大概也许差不多可能无法访问到。这个没关系，只要保佑保佑，总会比加iframe轻松愉悦的。
12 |
13 | 首先，你看到的图片会是这样的：
14 |
15 | 
16 |
17 | 实际上，如果你能看到上面这张图，说明你骨骼精奇，自带解锁功能。
18 | 但是我们想直接看到：
19 |
20 | 
21 |
22 | 那怎么做呢？
23 |
24 | ### 页面头部加入标签
25 |
26 | ```html
27 |
28 | ```
29 |
30 | 这种办法通过控制referer绕过防盗链的检测。html可以通过这个参数决定http请求中的referer，要注意使用这个标签属性的时候，浏览器原有的referer策略就发生改变了。
31 |
32 | ### 图片在iframe内显示
33 |
34 | ```javascript
35 | let url='防盗的链接';
36 | let finalUrl = displayImg(url);
37 | console.log(finalUrl);
38 | document.getElementById('img').innerHTML = finalUrl;
39 |
40 | displayImg = (url) => {
41 | let iFrameid = 'frameimg' + Math.random();
42 | window.img = '
';
43 | return '';
44 | }
45 | ```
46 |
47 | 这样可以正常显示图片，除了多了iframe外也没啥太大的问题，但是我发现在Vue里面一旦数据更新iframe就会刷新，外加上插件vue-draggable没法用了所以我就放弃这个方法了。这也促使我找更好的方案👇。
48 |
49 | ### 传送门 | 跳板
50 |
51 | 所以最后我还是找到了一个好的方法，搜索引擎下，发现大部分的跳板都被清理了。不要慌，总会有的，对于怎么找到这个跳板的话，我的建议是怎么不去对比一下开头的两张图？😄😄😄
--------------------------------------------------------------------------------
/_posts/2021-09-08-git-commit-format.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "Git提交信息格式化（规范）"
4 | date: 2021-08-08 06:05:05 +0800
5 | categories: Git
6 | ---
7 |
8 | ## Git 提交信息格式
9 |
10 | 每一条提交的记录信息由`header`、`body`、`footer`组成。
11 |
12 | ```
13 |
14 |
15 |
16 |
17 |