前言

接前一篇美女运营天天找我改配置，给她写了个脚本，终于安静了

之前只是写了一个脚本，本地运行，通过读取文件流获取文件数据，格式化对应数据，运营老师也不会安装node，还是需要我去操作。现在我用electron生成一个桌面应用直接生成后复制json，去配置，全程不需要我参与了。

之前的脚本

const fs = require('fs')

const csv = require('csv-parser');



const csvfilePath = './xxx.csv';

const uidsfilePath = './uids.json';



const results = [];

let newarr = [];

let lineCount = 0;



fs.createReadStream(csvfilePath)

	.pipe(csv({ headers: true }))

	.on('data', (data) => {

		results.push(data);

		lineCount++;

	})

	.on('end',async () => {

		console.log(results[0])

		await format(results);

		fs.writeFile(uidsfilePath, JSON.stringify(newarr), () => {

			console.log('done')

		})

	});

const format = (results) => {

	newarr = results.map(item => {

		if(item._0 === 'key' || item._1 === 'value') {

			return {}

		}

		return {

			label: `${item._1}-${item._0}`,

			value: item._1

		}

	})

}

electron

简介

Electron 是一个用于使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的框架。它由 GitHub 开发，基于 Chromium 和 Node.js。这意味着开发者可以利用他们熟悉的 Web 开发技术来创建桌面应用。

优势

• 跨平台开发


• 快速开发迭代


• 丰富的生态系统

架构与核心概念

• 主进程和渲染进程：

主进程：主进程是整个 Electron 应用的核心，它负责创建和管理应用程序的窗口。主进程通过BrowserWindow模块来创建浏览器窗口，这个窗口就是用户看到的应用界面的载体。

渲染进程：渲染进程主要负责渲染应用的用户界面。每个BrowserWindow都有自己独立的渲染进程，它使用 Chromium 浏览器内核来解析 HTML 和 CSS 文件，执行 JavaScript 代码。

• 进程间通信（IPC）：
  由于 Electron 应用有主进程和渲染进程之分，进程间通信就显得尤为重要。Electron 提供了ipcMain（用于主进程）和ipcRenderer（用于渲染进程）模块来实现进程间的消息传递。

使用vue3和vite创建vue的项目然后引入electron

安装vite

npm create vite@latest electron-desktop-tool

安装 引入electron&插件

npm install -D electron // electron

npm install -D electron-builder //用于打包可安装exe程序和绿色版免安装exe程序

npm install -D electron-devtools-installer // 调试

npm install -D vite-plugin-electron // vite构建插件

创建主进程

在vue 同级src目录下，创建src-electron 文件夹 新建main.js

// src-electron/main.js

const { app, BrowserWindow } = require('electron')

const { join } = require('path')



// 屏蔽安全警告

// ectron Security Warning (Insecure Content-Security-Policy)

process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'



// 创建浏览器窗口时，调用这个函数。

const createWindow = () => {

    const win = new BrowserWindow({

        width: 800,

        height: 600,

        title: 'electron-vite',

        // icon: join(__dirname, '../public/logo.ico'),

    })



    // win.loadURL('http://localhost:3000')

    // development模式

    if(process.env.VITE_DEV_SERVER_URL) {

        win.loadURL(process.env.VITE_DEV_SERVER_URL)

        // 开启调试台

        win.webContents.openDevTools()

    }else {

        win.loadFile(join(__dirname, '../dist/index.html'))

    }

}



// Electron 会在初始化后并准备

app.whenReady().then(() => {

    createWindow()

    app.on('activate', () => {

        if (BrowserWindow.getAllWindows().length === 0) createWindow()

    })

})



app.on('window-all-closed', () => {

    if (process.platform !== 'darwin') app.quit()

})

配置插件入口

在vite.config.ts中配置vite-plugin-electron 插件入口

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import electron from 'vite-plugin-electron'



// https://vitejs.dev/config/

export default defineConfig({

    plugins: [

        vue(),

        electron({

            // 主进程入口文件

            entry: './src-electron/main.js'

        })

    ],

    /*开发服务器选项*/

    server: {

        // 端口

        port: 3000,

    }

})

配置package.json

在package.json 新增入口文件 "main": "./src-electron/main.js",

原神启动 emmm electron启动

运行 npm run dev 启动项目

打包配置

首先配置一下打包的命令,在package.json "scripts"里面配置这个打包命令

  "scripts": {

    "dev": "vite",

    "build": "vite build",

    "preview": "vite preview",

    "postinstall": "patch-package",

    "electron:build": "vite build && electron-builder",

    "pack32": "vite build && electron-builder --win --ia32",

    "pack64": "vite build && electron-builder --win --x64"

  },

同样package.json 需要添加打包配置

  "scripts": {

      ...

  },

  "build": {

    "productName": "ElectronDeskTopTool",

    "appId": "dyy.dongyuanwai",

    "copyright": "dyy.dongyuanwai © 2024",

    "compression": "maximum",

    "asar": true,

    "directories": {

      "output": "release/"

    },

    "nsis": {

      "oneClick": false,

      "allowToChangeInstallationDirectory": true,

      "perMachine": true,

      "deleteAppDataOnUninstall": true,

      "createDesktopShortcut": true,

      "createStartMenuShortcut": true,

      "shortcutName": "ElectronDeskTopTool"

    },

    "win": {

      "icon": "./public/logo.ico",

      "artifactName": "${productName}-v${version}-${platform}-setup.${ext}",

      "target": [

        {

          "target": "nsis"

        }

      ]

    },

    "mac": {

      "icon": "./public/logo.ico",

      "artifactName": "${productName}-v${version}-${platform}-setup.${ext}"

    },

    "linux": {

      "icon": "./public/logo.ico",

      "artifactName": "${productName}-v${version}-${platform}-setup.${ext}"

    }

  },

然后npm run electron:build

页面效果

github地址

后续还会继续更新~

1. offer收割机，就职新公司

5年前的就业环境非常好，当时面试了很多家公司，收到了很多 offer。最终我决定入职一家互联网教育公司，新的公司福利非常好，各种零食随便吃，据说还能正点下班，一切都超出我的期望，“可算让我找着神仙公司了”，我的心里一阵窃喜。

在熟悉环境之后，我趁着上厕所的时候，顺便去旁边的零食摊挑了点零食。接下来的一天里，我专注地配置开发环境、阅读新人文档，当然我也不忘兼顾手边的零食。

入职几天后 ，领导给安排了一个小需求，我和同事沟通完技术方案后，就开始开发了。

2. 单元测试有点奇怪

完成开发后，我决定写个单元测试验证下，在研究单元测试代码后，我发现这种单测写法和我之前的写法不太一样。

这家公司的单测好像没有启动整个项目，仅加载了部分类，而且不能访问测试环境数据库~ 于是我决定按照前东家写单测的方式重新写单元测试。

于是我新增了一个单测基类，在单测中启动整个SpringBoot，直接访问测试环境数据库。然而也并不是很顺利，启动阶段总是会遇到各种异常报错，需要一个一个排查…… 所幸项目排期不紧张，还有充足时间。

我做梦也没有想到，此刻，已经铸成大错。

3. 故障现场

我身边的工位旁慢慢地聚集了越来越多的人，本来我还在安安静静的调试单元测试，注意力不自觉的被吸引了过去。

“测试环境为什么这么多异常，访问不通啊。到处都是 500 报错”，不知道谁在说话。

“嗯，我们还在排查，稍等一下”，我旁边的同事一边认真排查日志，一边轻声回复道。

“为什么数据库报的异常是， 查不到数据呢？” ，同事在小声嘀咕，然后打开 命令行，立即登上 MySQL。

我亲眼看着他在操作，奇怪的是数据库表里的数据全部被删掉了，其他的几个表数据也都被删除了。

简直太奇怪了，此刻的我还处于吃瓜心态。

有一个瞬间我在考虑，是否和我执行的单元测试有关系？ 但我很快就否决掉了这个想法，因为我只是在调试单元测试，我没有删数据库啊，单测里也不可能删库啊。 我还在笑话自己 胡思乱想……

很快 DBA 就抱着电脑过来，指着电脑说，你们看这些日志，确实有人把这些表删除了。

"有 IP 吗，定位下是谁删除的， 另外线上环境有问题吗？”，旁边的大组长过来和 DBA 说。

“嗯，我找到ip 了，我找运维看下，这个ip是谁的”。DBA 回复道。

4. 庭审现场

当 DBA 找到我的时候，我感到无辜和无助，我懵逼了，我寻思我啥也没干啊，我怎么可能删库呢。 （他们知道我刚入职，我现在怀疑：那一刻他们可能会怀疑 我是友商派过来的卧底、间谍，执行删库的秘密任务）

经过一系列的掰扯和分析，最终定位 确实是我新增的单元测试把数据库删了。

5. 故障原因

需要明确的是，原单元测试执行时不会删除数据库；测试环境启动时也不会删除数据库。

只要在单元测试中连接测试数据库，就会删除掉数据库的所有数据。为什么呢？

5.1 为什么单元测试删除了所有数据？

原单元测试 使用的是 H2 内存数据库，即Java 开发的嵌入式(内存级别)数据库，它本身只是一个类库，也就是只有一个 jar 文件，可以直接嵌入到项目中。H2数据库又被称为内存数据库，因为它支持在内存中创建数据库和表。所以如果我们使用H2数据库的内存模式，那么我们创建的数据库和表都只是保存在内存中，一旦应用重启，那么内存中的数据库和表就不存在了。 所以非常适合用来做单元测试。

H2 数据库在启动阶段，需要执行用户指定的 SQL 脚本，脚本中一般包含表创建语句，用来构建需要使用的表。

但是我司的 SQL 脚本除了创建表语句，还包含了删除表语句。即在创建表之前先删除表。 为什么呢？ 据他们说，是因为这个 SQL 脚本可能会重复执行，当重复执行时创建表语句 会报错。所以他们在创建表之前，先尝试删除表。这样确保 SQL 脚本可重复执行。（ 其实可以用 Create if not exists ）

故障的原因就是：测试数据库执行了这个删表再建表的 SQL 脚本，导致所有数据都被清除了。

5.2 为什么测试数据库会执行这条 SQL 脚本呢？

1） 我新建的单元测试把H2 内存数据库换成了测试数据库。

2） spring.data.initialize=默认值为 true； 默认情况下，会自动执行 sql 脚本。

所以测试数据库 执行了 SQL 脚本。

5.3 为什么在测试环境正常启动时，没有问题，不会删除所有数据呢？

只有单测引入测试数据库才会出问题，在测试环境正常启动项目是没问题的。

当编译项目时，测试目录下的文件、代码和正式代码编译后的结果不会放到一起。因为 SQL脚本被放在了 测试目录下， 所以正式代码在测试环境启动时，不会执行到这个 SQL脚本，自然不会有问题。

6. 深刻教训

最终数据被修复了，DBA有测试数据库的备份，然而快照并非实时的，不可避免地还是丢失了一部分数据。

所幸的是出问题的是测试环境，并非线上环境。 否则，我会不会被起诉，也未可知。

后续的改进措施包括

这可能是程序员们在技术上越来越保守的原因……不经意的一个调整可能引发无法承受的滔天巨浪

前端开发者应该对 Ant Design 不陌生，特别是 React 开发者，antd 应该是组件库的标配了。

近年来随着 AI 的爆火，凡是想要接入 AI 的都想搞一套自己的 AI 交互界面。专注于 AI 场景组件库的开源项目倒不是很多见，近日 antd 宣布推出 Ant Design X 1.0 🚀 ，这是一个基于 Ant Design 的全新 AGI 组件库，使用 React 构建 AI 驱动的用户交互变得更简单了，它可以无缝集成 AI 聊天组件和 API 服务，简化 AI 界面的开发流程。

该项目已在 Github 开源，拥有 1.6K Star！

看了网友的评论，看来大家还是需要的！当前的 Ant Design X 只支持 React 项目，看来 Vue 开发者要羡慕了...

ant-design-x 特性

• 🌈 源自企业级 AI 产品的最佳实践：基于 RICH 交互范式，提供卓越的 AI 交互体验


• 🧩 灵活多样的原子组件：覆盖绝大部分 AI 对话场景，助力快速构建个性化 AI 交互页面


• ⚡ 开箱即用的模型对接能力：轻松对接符合 OpenAI 标准的模型推理服务


• 🔄 高效管理对话数据流：提供好用的数据流管理功能，让开发更高效


• 📦 丰富的样板间支持：提供多种模板，快速启动 LUI 应用开发


• 🛡 TypeScript 全覆盖：采用 TypeScript 开发，提供完整类型支持，提升开发体验与可靠性


• 🎨 深度主题定制能力：支持细粒度的样式调整，满足各种场景的个性化需求

支持组件

以下圈中的部分为 ant-design-x 支持的组件。可以看到主要都是基于 AI Chat 场景的组件设计。现在你可以基于这些组件自由组装搭建一个自己的 AI 界面。

ant-design-x 也提供了一个完整 AI Chat 的 Demo 演示，可以查看 Demo 的代码并直接使用。

更多组件详细内容可参考 组件文档

使用

以下命令安装 @ant-design/x 依赖。

注意，ant-design-x 是基于 Ant Design，因此还需要安装依赖 antd。

yarn add antd @ant-design/x

import React from 'react';

import {

  // 消息气泡

  Bubble,

  // 发送框

  Sender,

} from '@ant-design/x';



const messages = [

  {

    content: 'Hello, Ant Design X!',

    role: 'user',

  },

];

const App = () => (

  <div>

    <Bubble.List items={messages} />

    <Sender />

  </div>

);



export default App;

Ant Design X 前生 ProChat

不知道有没有小伙伴们使用过 ProChat，这个库后面的维护可能会有些不确定性，其维护者表示 “24 年下半年后就没有更多精力来维护这个项目了，Github 上的 Issue 存留了很多，这边只能尽量把一些恶性 Bug 修复”

如上所示，也回答了其和 Ant Design X 的关系：ProChat 是 x 的前生，新用户请直接使用 x，老用户也请尽快迁移到 x。

感兴趣的朋友们可以去试试哦！

背景

纯血鸿蒙OS Next系统最近出现了两款热门应用：出境易、卓易通，其功能是：让你在出境后可以方便安装到各种Android应用。

发生了什么？

「出境易」这款应用可以在纯血鸿蒙OS NEXT里直接安装&运行Android应用！

纯血鸿蒙官方声称：「不支持运行Android应用」！

于是：

• 很多正在努力开发、兼容纯血鸿蒙应用的开发者都在议论：是不是可以停鸿蒙开发、继续写回Android了?


• 也有很多粉丝后台私信Carson，问：目前继续学鸿蒙开发到底还有没意义？

本文意图

今天Carson来带大家扒扒「出境易」、「卓易通」到底是怎么能在纯血鸿蒙OS NEXT里运行Android应用的。具体包括：「出境易」、「卓易通」这两款Android应用

问题1：在纯血鸿蒙系统里运行的底层支持是什么？

• 无论黑科技有多 “黑”，总需要底层给与相关支持才有运行的可能。


• 在初次安装「出境易」、「卓易通」时需下载一个环境，抓包&解包可得到：

其中最为关键的文件：anco_hmos.img，从字面解释来看：

• anco：AndroidCompatible = 安卓兼容


• hmos：HarmonyOS = 鸿蒙OS系统


• 整体看，即**「鸿蒙OS系统里的安卓兼容」**

实际上，这其实是一个安卓镜像文件，是一个嵌入到鸿蒙OS系统层面的安卓运行环境（类似虚拟机的作用，但实际不是虚拟机）。

其实是类似wsl技术，即Windows Subsystem for Linux = Windows的Linux子系统，能让开发者在Windows操作系统中直接运行Linux环境，而无需任何虚拟机。

所以，要在纯血鸿蒙OS 上安装「出境易」、「卓易通」不仅需要下载很大的安卓镜像资源包，还需要重启系统，因为「出境易」和 「卓易通」是单独的“运行环境”。

值得一提的是：

• 因为本身鸿蒙OS内核就兼容了Linux ABI（应用程序二进制接口），即鸿蒙OS内核本身就可以运行为Linux设计的应用。


• 所以，虽然这是一个安卓镜像，但这个属于鸿蒙的安卓镜像并没有包含Linux 内核，只是包含运行时（Runtime）部分。 以下是鸿蒙内核架构图：
  

问题2：在纯血鸿蒙系统里的运行环境是什么？

那么，这类Android应用到底是运行在什么环境上的呢？打开「出境易」内的app后，通过执行shell ps -ef会出现以下进程：

• 即其运行环境是：通过lxc-start命令启动了一个基于iSulad的容器的进程。


• iSulad 是华为自研的容器引擎，是一个非常通用的容器引擎，具有轻、快、 易、灵的特点。以下是其架构图：

iSulad官网介绍：http://www.openeuler.org/zh/other/pr…

问题3：「出境易」、「卓易通」本质是什么？

二者的功能都是：让你在出境后可以方便安装到各种app。听起来是不是有点类似国内的应用商店？

• 实际上，二者在鸿蒙next商店下载的是一层壳，负责与纯血鸿蒙OS进行权限交互（图片、文件IO等）


• 本体也是Android应用的apk，即出境易.apk、卓易通.apk。拿出来也是可以在Android手机上安装的。（如下图）
  

除此以外，「出境易」还含有一个「文件共享.apk」、「卓易通」还有一个「搜应用.apk」、「文件共享.apk」。

这里值得一提的是，两个“应用商店”可搜到的应用原理不同：

• 出境易：白名单方式，即只有与其合作的Android应用可以安装；


• 卓易通：黑名单方式，即只有纯血鸿蒙OS上架的应用不可以安装；

下面附上视频：纯血鸿蒙OS 「出境易」、「卓易通」安装Android应用实机演示

http://www.bilibili.com/video/BV1Q9…

性能如何？

既然能跑了，那么用户体验如何呢？网友们已经开始跑分了：

• 测试环境：麒麟9000s；


• 结论：单核心正常跑分1000，目前「出境易」是930分左右，效率是93%；

• 分析：上面提到其底层支持是类似wsl的技术，同时运行环境是采用华为自研的iSulad 容器引擎的方式，并非所谓的虚拟机环境。这种嵌入方式可以使得安卓应用能够在鸿蒙系统上运行，但又不会占用过多的资源或影响系统的稳定性；


• 结合业界常见容器水平93%左右，华为的iSulad容器达到了业界水平，可理解为：GPU性能几乎无损。

但是对于内存使用就不太友好了，容器本身内存占用极大，基本一个容器进程就是8GB，随便开两个应用12GB就没了。

同时结合网上使用的评价：手机容易发烫（功耗高）、应用Bug较多等等，可以总结为：以这种方式在纯血鸿蒙OS上运行的Android应用 「能用」，但是「不好用」，与原生体验还是存在很大差距。

结论

• 从技术角度 分析：基于anco_hmos，采用类似wsl的方式同时结合iSulad容器引擎，使得在纯血鸿蒙OS上运行Android应用成为了板上钉钉的现实。


• 从性能角度 实践：在CPU性能可认为几乎无损的情况下，内存跟功耗问题短时间内还是无法解决；


• 从用户体验 观察：应用Bug较多，结合性能内存问题，目前暂时仅处于一个**「能用」**的状态。

基于上述分析 & 问题表现，在纯血鸿蒙OS上运行Android应用在国内大范围使用短时间内几乎不可能，更多的是在一些小众、边缘、尝试探索的场景，比如一些使用频率较低的小众app、尝试出海境外的场景（如本文提到的「出境易」等）。

最后

如何看待这次在纯血鸿蒙OS上运行Android应用的事件呢？评论区留言你的看法！

参考文章：

• http://www.bilibili.com/video/BV1Q9…


• zhuanlan.zhihu.com/p/105768126…


• cn.club.vmall.com/mhw/consume…

2024 年，我离开了待了两年的互联网公司，来到了一家聚焦教育机器人和激光切割机的公司，没错，是一家硬件公司，从未接触过的领域，但这还不是我今年最重要的里程碑事件

5 月份的时候，正式提出了离职，没有骑驴找马，完全裸辞。对于 gap 的这段时间，做了简单的规划，先去旅游一趟，然后用一个半个月时间备考雅思，九月、十月重新找工作

随后的两个月，公司找到接替我的新同学，站好最好一班岗，跟同事做了告别。7 月 5 号，拿着离职证明，收拾好东西，离开了西丽。隔天就参加 VueConf 大会，见到了尤雨溪和 Anthony Fu

做了这么多年精神股东，终于来支持一回，希望 React 越办越好 👏

VueConf 结束之后，就去流放岭南，在广西桂林，体会到了什么叫做“江作青罗带，山如碧玉簪”

这里的山水真的很美，养得蚊子珠圆玉润，也感受到喀斯特地貌对于经济发展的阻碍，拔地而起的峭壁山峰，割裂了交通，住房和经济

在去到九马画山的偏方小路上，看到一路上种植着柚子，玉米等等，这是属于亚热带季风气候的回馈，光照充足，雨水充沛，水果种植，也成了当地人除旅游业之外的另一条生计

这一次是 p 人之旅，没有特种兵定点打卡，而是更多感受地理，人文。嗦了三天的桂林米粉之后，又回到了深圳，开启了雅思备考

关于考雅思，一个是本身对英语感兴趣，另一个是看过许多老前辈的经验之谈，学好英语对于程序员职业发展来说，是长期利好的事情

在这段时间，还学会做饭，个人以为，做饭和编程一样，都是属于创造的艺术

心血来潮还买了一个小米空气炸锅，第一次用觉得超级神奇的，仅仅依靠空气就能够把鸡米花烤得 tree tree 的

接下来的一个半月的时间，把自己当成高考生，按部就班地学习

8 月 30 号早上踏入考场，上午听力阅读写作，下午口语。成绩出得很快，三天后如期而至，得到了一个非常低的分数，这给了我当头一棒

付出了大量的时间精力，并不意味着有美好的收获，我花了三天时间做了痛苦而又深刻的复盘，是能力基础问题？是自律问题？是备考策略问题？是心态问题？最后结论是出来的是备考策略出现重大失误，罔顾实际情况，按照自己天真烂漫的想法去复习

复盘这几天我似乎有点“龙场悟道”，这个“道”后来我把它总结了「成长型思维」，关于成长型思维具象表现是，对于雅思考试的折戟失败，我没有消沉，在这段经历中，让我学会了第一件事情是——做人、做事需要符合物理、客观的规律，也就是雷军所说的「顺势而为」

无业 gap 的时期，并不美好，每天处于没有收入、消耗积蓄的焦虑，所以到了 9 月份，我需要重新开始找工作，自媒体和独立开发被我 pass 掉了，这两者现下并不能带来稳定的收入

又回到了起点，这一次我反而更加自信，充分吸取教训，我需要做好正确的求职策略，搜集各路面试资料，结合自身的实际情况，并且在 AI 的辅助下，写了一份《前端求职大攻略》

把自己求职涉及到的方方面都罗列出来，同时使用 PDCJ 模型，P = Plan（计划），D = Do （执行），C = Check（检查），J = Just（调整），也就是阶段性地计划、施行，再不断地检查、调整，确保自己的面试正确而又高效地进行

就业环境并不会因为你认真做好求职攻略、努力复习就给到丰厚机会，相反，每天投递的数十份简历都石沉大海，一个星期可能都约不到面试机会，这大概就是铜九铁十了吧

求职遇冷，那就好好抓住每一个来之不易面试机会，比如大学舍友的朋友内推了的转转前端岗位，面试前两天，刷完了转转的前端面经，一遍一遍地背前端面试题宝典的八股文，甚至于上厕所，也会拿着小程序刷题

但是，转转还是把我挂了，二面都没进

沮丧是没有用的，迅速复盘转转的整场面试，重听了当时的录音，把自己回答不上的问题找补，犯错的点做具体的纠正，为下一次面试做好准备

不久，意外接到了童心制物 HR 的简历邀请，是一个 Nodejs 的岗位，我拒绝了，如实说目前仅接受前端岗位，HR 却跟我要了简历转发给他们前端部门，没想到还通过了简历筛选，得到了一面的机会

一面发挥的很好，其中问到了一个难题，“如果不用 eval，还有其他方式去执行 js 函数吗”，刚好之前研究过 laf 的源码，知道可以用 vm 模块可以实现。之后又是二面和 HR 面，都顺利通过了，拿到了最终的 offer

童心制物涉及教育方向，这也是我很看重的一个点，大学的时候参加过支教，一直对教育这一块感兴趣，另外，这家公司给的薪资和福利都比较合理，所以……我入职啦

求职告一段落，顺便写了一篇博客作为输出，感兴趣可以查看——《前端开发实用的面试备考分享（内含资料 + 内推）》

这一段求职经历，总体上算是成功的，找到了理想的公司，理想的职位，但人不可能躺在功劳簿上过一辈子，新阶段会有新挑战，需要重新改变，重新努力

入职之后，体验了公司的激光设备，感受到了巨大的创造力：

用 F1 Ultra 雕刻的金属卡片，用 P2S 切割+雕刻的木板：

用 M1 Ultra 和热压机做的工服：

加入了心心念念的篮球社，开启了每周打篮球的固定活动，没想到老板也是篮球迷，现在每周都会一起打，看着他能明显感受身上的年轻、务实，身边的同事也是对他好评，我相信这些称赞不是人情世故

公司没有设立职称体系，转而实行扁平化管理，此举弱化了上下级概念。此外，公司还推行 AMA（Ask Me Anything，即问我任何事）活动，所有员工均可匿名提出任意问题，老板会逐一进行解答。可以看到，公司正在着力打造更为平等、透明、高效的职场环境，这也促使我对自身与企业之间的关系展开深入思考。

思考的结果为：作为员工，其行为与目标应当与公司的发展相契合。基于这一思考，我察觉到自己过往存在一些不良习惯，有时为了维护同事关系，或是顾及上下级的地位差异，对问题视而不见，对待工作打折妥协。

知行合一，慢慢将思考转化为行动，比如与同事协作后，即时给予反馈，对于公司内部平台出现的 bug，立即同步给相应负责人，尽量做到事事有反馈、发挥 owner 精神等等

童心制物很开放，有很多的活动可以参加，比如 Factory Day 工厂日，在周四那天乘着大巴，去到惠州工厂，参观了整条产线，看到了机器从零到一的生产过程

还有 MakeX 机器人挑战赛，这是一个具有重要影响力的国际化机器人赛事和教育平台，今年是第七年了，MakeX 总决赛又回到了深圳举办，立即报名了技术支持，参与了一天的活动现场

场馆设有各个国家的文化摊位，期间还被俄罗斯的大朋友投喂了巧克力零食

看大朋友、小朋友们激烈比赛：

以及让我难过了一天的创客马拉松，这是公司的特色活动，参与的最新的一期比赛，在决赛路演输了，作为队长很自责，忙碌了一周并没有好的结果，促使我进行反思，是带队伍问题？是项目推进问题？是质量问题？还是路演问题？

失败或许不是一件坏事，让我刻骨铭心，反而推着我进步

回头来看，今年最大的里程碑节点是备考雅思失败后的悟“道”，也就是成长性思维，这种认知层面的巨大改变，进而影响了我的工作、生活

我似乎不再害怕去面对我从未遇到的难题，我知道肯定方法、有途径能够去解决它，即使事与愿违，这过程中我也能收获到经验、智慧和勇气

我不再陷入完美主义，先做一个垃圾出来，再慢慢去迭代、优化，不要幻想一下子就能得到 100 分，但先拿到 60 分，再一点点进步，日拱一卒，等待那个增长拐点

我也变得更加正向，“世上只有一种英雄主义，就是在认清生活真相之后依然热爱生活”，坚持开放、乐观的心态，拒绝被悲观、消极所同化

或许我的所谓悟“道”、成长型思维，这些认知只是浅薄的，缺乏更多实践和经历，但是没有关系，做时间的朋友，随着年岁和阅历的增长，这套成长型思维也会随之”成长“

碎碎念的年终总结到此为止，写完之后还是很感慨，今年发生了很多事情，但在当时，只觉得是一个风平浪静的日子，或许此时此刻，也觉得是风平浪静的深夜。弱智吧有一句话，“有人看不到未来，其实是看到了未来”，初看的时候不理解，后来明白了，未来是动态的、不确定的，这就是未来的真面目，以为的看不到，其实恰恰是看到了，所以 2025，未来见。

没错！95年，还剩几个月就奔三了。2024年，注定是人生中意义非凡的一年，忐忑、裁员、出书、求职、转正这几个词贯穿了一整年。

忐忑

在上一家公司时，我从面试开始和到入职半年转正后，其实内心对于公司的状况一直保持一种忐忑不安的心情，这种感觉跟我老婆说过几次，我们一致认为应当有心理准备。原因在于薪资与公司的组织架构、基础建设、日常工作量安排和人员扩充速度都让人感到迷惑。

公司是在一个包括高层话事人不断更换，高层（副总裁）突然接受停止调查；技术部门仅仅作为辅助，技术氛围低沉，基建缺失，直属leader作用甚微；工作量与人员匹配失常，人多活少，尽管如此年初还在不断扩招中，泡沫感极强，伴随着薪酬发放日漂浮不定，每到月底像是在开盲盒，你永远不知道银彳亍卡何时会有一笔款到账。

裁员

一系列薪酬制度改革和薪酬拖欠不得不怀疑高层战略的正确性，直到四月某一天CTO私聊我，泡沫破裂，裁员尘埃落定。

我被归属于第一批裁员名单中，与CTO交谈中，似乎也流露一丝对高层决策的不满，但没有明说，给我的理由是当前工作任务都很简单，匹配不了我的能力，所以给了我一个名额。

这放在当时听上去有些许意外，但我接受了这种措辞，并不是因为CTO说了几句好听的话，更多是我作为一个技术人的直觉认为这个CTO靠谱。离职过程中对人事提出的补偿计算方式以及分期发放，我都拒绝了，最后经过与人事反复讨论之后拿到了补偿，少不了他的协助，所以内心表示感谢。从现在的视角看来，似乎是他已经意料到公司的发展趋势，以致于后来被裁员的人有很大一部分都没有赔偿。

出书

离职后我在家休息了一个月，期间也为了帮一个粉丝忙，接手了他工作的一部分任务，主要是做游戏业务的动画。期间有被一个后端恶心到，业务不熟悉，接口一直不通就算了，关键还理直气壮说是前端问题；我佩服那个粉丝能够忍气吞声这么久，换做其他人也很难不高血压，为此特意发圈宣泄。

由于后端提供的接口迟迟不通，需求没有预期上线，为此他们老板还大发雷霆，最后把锅推给了这个前端粉丝，声称把他给炒了。没过一个月，粉丝的这个公司被帽子叔叔查封，业务涉及到了灰产，老板和负责人进去了。员工的工资都没发，但我的报酬是因为签了合约，在deadline之前要求他们打款，对我没有影响，这是苦了这个粉丝。

在此之后我便全职写书，《NestJS全栈开发解析：快速上手与实践》 这本书临近结尾，我一鼓作气完成了并在5.1号劳动节那天交稿；写书的想法也有一部分是来源于CTO的启发，后面图书审阅也是找了CTO帮忙，熬夜帮我看完并给了这个评语，为此我很感谢他。

经过几个月的审批和改稿，图书在9月份正式发布了各大平台，这是一件值得高兴的事情。

而对于前司的后续，据说后面还搬到一个CBD进行办公，但当时员工已经欠薪几个月，以至于到年底，公司被迫全员原地解散，很遗憾这不是一个好结果。

求职

交稿完成后，花了一个月左右时间求职，拿到了3个offer，最后选择了去深圳的美图，这是凭借NestJS的图书写作获得的一个岗位。之后由于组织架构变化，我在转正前夕面临选择继续从事Node全栈还是Go语言开发，考虑一番后我选择了后者，顺利转到了后端架构组，负责go语言开发，这对我来说又是一个新的尝试和挑战，我选择了这种变化，与框架和语言无关，只不过是践行我的人生哲学：【不断变化】，让自己处于一种长期乐观、短期痛苦、当下快乐的舒适区边缘中。

觉醒

关于成长，过去我一直不喜欢看历史，或许归根于上学时代对于历史学科的厌倦，没看过基本历史文献。2024年底，我看了教员的《毛选》、《实践论》、《矛盾论》、《寻乌调查》，第一种感受是成功绝不是偶然，环环相扣的逻辑能力令人惊叹。我想这些书籍回答了我一直以来的问题：

如何成为一个独立、深度思考的人？

我们人生中做了一个坏的决定，在股市中选择了不争气的股票，最坏的结果无非是让自己从头再来。但革命不同，选择错了就有可能让整个民族处于被毁灭的境地中，每一步都步履蹒跚，这该有怎样的智慧与思维？

第二种感受是遗憾没有早点开悟，在临近30岁时才开始阅读这些书籍，当然也很庆幸没有太晚，一切都来得及！

特别的是，《寻乌调查》报告里面的细节，应该是我人生中读过的一本最详细的一本书籍，里面还记载了寻乌与我老家（兴宁）相关的历史宜了，没有一句多余的，都是干货。第一次感受原来伟人离我这么近。

教员做了这个调查报告之后，便留下一句千古格言：没有调查，就没有发言权！反观自身，何尝不是应该这样呢？

关于家庭，今年整个过程中家里的大大小小的事基本上都是我老婆操办，为我们的小家默默付出了很多，加上我去了深圳之后，我的衣食住大部分也是她来打理，一个人照顾小孩，现在甜筒一岁半了，如我们所愿健康成长，这隶属她的功劳。

一个家庭要想变好，靠一个人努力不行，需要“拉拢”有能力的人一起，话事人脑子要清醒，能够明辨是非，唯唯诺诺绝对是会出问题的。

一个家族要想变好，靠一两个人不行，得靠一两个家庭真正向好，大家庭才会有希望。

最后，没有Flag，年度总结中对未来进行遐想没有意义，沉浸于自己完成所有Todo List的那种兴奋是虚构的，而实践中那种痛苦、无助才是我们最真实的感受，人不能总活在无限遐想的递归当中。

我看过那些在新年Flag列举诸多愿望，买了一堆书籍想要读完的，来年能真正落地完成的少之又少，毕竟我亦如此。

2025年，爱自己，爱家人，步步为营，不负将来！祝所有支持我的粉丝朋友们，一切如意，事业感情双丰收~

引言

什么是博弈论（Game Theory）？百度百科的介绍如下

博弈论，又称为对策论（Game Theory）、赛局理论等，既是现代数学的一个新分支，也是运筹学的一个重要学科。

博弈论主要研究公式化了的激励结构间的相互作用，是研究具有斗争或竞争性质现象的数学理论和方法。博弈论考虑游戏中的个体的预测行为和实际行为，并研究它们的优化策略。生物学家使用博弈理论来理解和预测进化论的某些结果。

博弈论已经成为经济学的标准分析工具之一。在金融学、证券学、生物学、经济学、国际关系、计算机科学、政治学、军事战略和其他很多学科都有广泛的应用。

博弈论在生活中的影响无处不在，比如许多朋友会面临一种选择选择，两家公司给你发了offer，一家公司薪资高，职位高，但可能需要频繁加班，压力很大。另一家公司薪资比你现在低一些，但是可以保证你准时下班，让你有充足的业余时间。对于单身的人来说这个并不难选择，但是当你结婚生子，这个问题就会瞬间变得复杂。

还有一个现象，为什么当团队内有一个人下班晚，整个团队的下班平均时间就都会往后延。

学习博弈论，只为了一件事情：拥有识别博弈格局的眼光，拥有改变规则的意识。简单来说，先理解长期存在的现象，并能够去改变不好的局面。

看完这篇文章，你或许就会拥有一个全新的视角去看这个世界。

介绍博弈论，我们先从三个基本概念开始，分别是帕累托最优，囚徒困境和纳什均衡。

帕累托最优

每一个成家、有孩子的人，再找工作时都会考虑如何平衡工作、收入、家庭三者之间的关系，说白了就是钱多事少离家近。

你现在有一份不错的工作，有一份稳定的收入，到了下班时间，你回家陪伴家人，辅导孩子写作业，顺便还能做做家务。公司、家人对你很满意，有房有车，收入足以满足日常花销，甚至有点小积蓄。

其实外面有其他公司给你抛来了橄榄枝，有的公司承诺如果你过去，会给你升值加薪。当然也有别的机会，你工作可能更清闲，但你的收入也会下降。

你很难做出抉择，你不是一个个体，你还需要考虑别人的选择。因为你一旦选择更高收入，就意味着要做更多的工作，没法按时下班，家人会对你有意见。新工作压力可能很大，你的状态也会变差，你不但没法照顾家人，可能家人还要额外提供给你情绪价值，家人一定会不满意。

此时，你在工作、收入、家庭取得了平衡，你无法在不影响收入和家人满意度的情况下去换另一份工作，此时的局面就叫做“帕累托最优”。

我们都希望工作和家庭最理想的状态是帕累托最优的，可我们都知道，生活中似乎很难达到这个状态，帕累托最优这个状态很理想化，因为它是不稳定的。

博弈论要求我们需要考虑竞争对手怎么做，虽然我不想把工作称之为竞争对手，但是在这个三角关系中，这里的竞争对手就是你的工作。

工作中公司一定要求你尽职尽责的完成本质工作，你要能够承担一定的责任，最好你要有一点创新，能够给公司带来一定改变，带来额外的价值。

一直以来你自己负责一个项目，这时候你的工作由你自己安排，要做的事情有很多，但你有没有三头六臂，那你只能一件一件来。当天既然没法做完所有工作，那到点下班就好。

可你的项目越来越有前景，公司决定增加人手，公司招进来了另一位同事，我们叫他小齐。现在你俩需要一起负责这个项目，你们既是合作关系，又是竞争关系。

那工作还是这么多，却有两个人来干了。如果你按点下班，可同事还想“承担”，他多做一点，你就少做一点，时间长了对你可不是一个好消息，你不得不选择加班。

这也就解释了为什么有时候一个团队只要有一个人加班，大家普遍的下边时间都会变晚，也称之为内卷。

这时候你想了一个办法，你请同事吃了一顿饭，你说你还单身，你得丰富一下业余生活。我认识一个单身的女同事，听说你俩爱好挺像，我把她微信推给你，以后你们下班可以一起约着出去玩。

后来你们都不加班了，你们依然是平等竞争，而且你又可以按时回家陪娃了，这就叫“帕累托改进”。

压倒性策略

或许你听过囚徒困境的故事，囚徒困境的故事最适合解释这个概念，但你和小齐的故事还在继续。

（注：下面的例子纯属虚构，如有雷同，纯属巧合）

你和小齐接手了全新的项目，有大量的代码开发工作，你俩的技术水平相当。可之前你给他介绍的单身女同事，后来找了男朋友，可惜那个人不是他。他感觉被套路了，给你说在你没有给他介绍下一个对象之前，他暂时决定和你势不两立。

可工作还得继续，你们都可以选择写出高质量的代码，需要花费更多的精力，但很明显你的口碑会变好。也可以得过且过，写出质量一般的代码，工作量明显变少，但项目质量可能一般。

根据两人的选择，存在几种情况

• 两人都贡献高质量代码，项目质量得到广泛认可和领导称赞，声誉增加了


• 如果一人费心费力提供了高质量代码，而另一个人敷衍了事，代码不规范、质量差。那么项目依然会正常上线，写低质量代码的人可以说是被大佬带飞（+7），而高质量代码因为加班、熬夜，所获的收益变少了（+2）


• 如果两人都敷衍了事，上线之后问题频发，虽然工作完成了，可产品运营会不停的和你领导吐槽，领导对你们的印象大打折扣（+3）

注意：我们这个例子不考虑这个工作对于后续年终奖或职业生涯发展如何。就只针对这个工作，我们来分析一下你和小齐的博弈策略。首先我们把不同的策略和结果画在下面这个矩阵图里。多说一句，这种画法是美国经济学家托马斯·谢林发明的。

其实你明显看可以看出，最好的结果就是两个人都贡献高质量的代码，然后项目稳定，还能收获良好的口碑。

但是，博弈论要求我们每次做判断都要考虑对方-----并不是说怎么样对对方好，而是对方会如何选择，然后你根据对方的选择再考虑怎么做。

我们具体看看你的收益分析：

• 如果小齐开源高质量代码：你选择开源高质量代码，收益为 +5。你选择写低质量代码，收益为 +7。 （低质量代码收益更高）


• 如果小齐开源低质量代码： 你选择开源高质量代码，收益为 +2。你选择开源低质量代码，收益为 +3。 （低质量代码收益更高）

你发现，无论小齐怎么做，你选择写一些低质量的代码，你的收益都会更高！于是你来说，选择写份低质量的代码，就是一个压倒性策略。

可反过来对小齐来说呢，这就是一个被压倒策略！但博弈论的前提是大家都是理性人，小齐也聪明的很，于是他也意识到选择写低质量代码，是一个压倒性策略。

对理性人来说，在博弈中一定要选择压倒性策略，任何情况下都不要选择被压倒性策略。

你俩同时这样选择，这就引出接下来的一个最重要的概念，纳什均衡。

纳什均衡

上面说到你俩同时放松了对自己的要求，写的代码缺乏设计，代码不健壮，上线之后问题频发，领导对你俩很不满。

这个结果可不是帕累托最优，但这个结果是稳定的，不管我们是否喜欢这个局面，但我们认可这个局面了。

线上一直报警，产品运营一直来找我们排查问题，这些都惹人心烦。我们或许都想把项目做好，但在这个组合里，没有一个人愿意单方面改变自己的策略。

因为无论对谁来说，此时选择去写高质量代码，都会让自己的利益受损，谁不想更轻松一点呢？

这种没有任何一方愿意单方面改变策略的局面，就是纳什均衡。

纳什均衡的概念由约翰·纳什提出，他是著名数学家、经济学家，还是《美丽心灵》男主角原型，他与另外两位数学家在非合作博弈的均衡分析理论方面做出了开创性的贡献，对博弈论和经济学产生了重大影响，而获得1994年诺贝尔经济学奖。

文章开头的对于找工作和家庭的例子就是一个纳什均衡，要记住纳什均衡不是最优的局面，如果你观察到身边的人在一家公司干了5年甚至10年以上，他的薪资或许会落后于市场平均水平，但对他来说，这份工作对于工作、生活、收入来说，大概就是一个纳什均衡。当然有的工作也可能不让你准时下班，甚至可能让你没有业余时间，就像一个在大厂996，忙到没有时间顾家和看娃的人来说，这也是一个纳什均衡。

如果你观察到社会上的一个现场长期稳定的存在，它对于所有参与方来说就是一个纳什均衡。纳什均衡告诉我们评价一个事情不能看它是不是对整体最好，它必须要让所有参与者都不愿单方面改变才行。

说在最后

公司领导发现项目问题不断，悄悄从HR那里调出了你和小齐的打卡记录，赫然发现你们天天5:30准时打卡，项目问题这么多，你俩准时下班，难怪运营天天说问题解决不及时，他决定宣布，在这个项目结束之前，项目组实行996工作制。

本来还想平衡好工作和家庭，这下可好了，不但日常加班，还损失了周六的时间。

那你说，这该怎么办呢？欢迎你在评论区说出你的看法，也希望你点赞、评论、收藏，让我知道对你有所收获，这对我来说很重要。也欢迎你加我的wx：Ldhrlhy10，一起交流～

本篇文章是第65篇原创文章，2024目标进度65/100，欢迎有趣的你，关注我。

token-bucket-limiter-redis 是一个令牌桶算法 + redis 的高效限流器，用于Node服务接口限流。

当然作为一个前端你可能很少接触Node接口开发，用的接口应该都是后端同学提供的，他们有自己的限流策略，但是你一定使用过SSR框架来开发服务端渲染项目，那么此时你的项目就只能靠我们自己来做限流了，否则遇到突发流量时，你的项目可能很容易崩溃。

• 使用令牌桶算法实现


• 支持基于内存和基于 redis 存储的两种选择，满足分布式限流需要


• 高性能，令牌生产的方式为每次请求进来时一次性生产上一次请求到本次请求这一段时间内的令牌，而不是定时器生成令牌


• 快速，使用 lua 脚本与redis通讯，lua 支持将多个请求通过脚本的形式一次发送到服务器，减少通讯，并且脚本支持缓存，多客户端可以复用


• 安全，lua 脚本保证redis命令执行的原子性


• 内存效率高，键过期后自动删除，不占用过多内存


• 提供多种极端场景下的降级和容错措施

其他限流方法的对比，大家可以自行搜索，这里就不赘述了，令牌桶算法是更适合大部分场景的限流方案。

令牌桶算法：按照一定的速率生产令牌并放入令牌桶中，最大容量为桶的容量，如果桶中令牌已满，则丢弃令牌，请求过来时先到桶中拿令牌，拿到令牌则放行通过，否则拒绝请求。这种算法能够把请求均匀的分配在时间区间内，又能接受服务可承受范围内的突发请求。所以令牌桶算法在业内较为常用。

该项目github地址：token-bucket-limiter-redis

安装

npm i --save token-bucket-limiter-redis

引入

import { RateLimiterTokenBucket, RateLimiterTokenBucketRedis } from 'token-bucket-limiter-redis';

使用

限流方案我们分为无状态限流器和有状态限流器两种：

有状态的限流器（区分key的限流器）：这种限流器会根据某种标识（如IP地址、用户ID、url等）来进行区分，并对每个标识进行单独的限流。可以更精细地控制每个用户或者每个IP的访问频率。

无状态的限流器（不区分key的限流器）：这种限流器不会区分请求的来源，只是简单地对所有请求进行统一的限制。

基于内存的无状态限流器

const globalRateLimiter = new RateLimiterTokenBucket({

    tokenPerSecond: 100,

    capacity: 1000,

  });



const globalTokens = globalRateLimiter.getToken();



if(globalTokens > 0){

  // pass

}

基于内存的有状态限流器，自定义key

const globalRateLimiter = new RateLimiterTokenBucket({

    tokenPerSecond: 5,

    capacity: 5,

    keyPrefix: 'test', // 指定限流器所属项目或模块

  });



const key = ip + uid; // 标识用户信息的key



const globalTokens = globalRateLimiter.getToken(key);



if(globalTokens > 0){

  // pass

}

这里附上 node 端获取ip的方法

function getClientIp(req) {

  // 获取 X-Real-IP 头部字段

  const xRealIP = req.headers['x-real-ip'];



  // 优先使用 X-Real-IP 头部字段

  if (xRealIP) {

    return xRealIP;

  }



  // 获取 X-Forwarded-For 头部字段，通常包含一个或多个IP地址，最左侧的是最初的客户端IP

  const xForwardedFor = req.headers['x-forwarded-for'];



  // 如果 X-Real-IP 不存在，但 X-Forwarded-For 存在，则使用最左侧的IP地址

  if (xForwardedFor) {

    const ipList = xForwardedFor.split(',');

    return ipList[0].trim();

  }



  // 获取连接的远程IP地址

  const remoteAddress = req.connection?.remoteAddress;

  // 如果都不存在，使用连接的远程IP地址

  if (remoteAddress) {

    return remoteAddress;

  }



  return '';

}

基于内存的有状态限流器，使用ip作为默认key

const globalRateLimiter = new RateLimiterTokenBucket({

    tokenPerSecond: 5,

    capacity: 5,

    keyPrefix: 'test', // 指定限流器所属项目或模块

  });



// 使用 ip 作为key，无需传入，自动获取ip

const globalTokens = globalRateLimiter.getTokenUseIp(req);



// 使用 ip 加上自定义的其他key，如传入则组合在ip后 ip+uid

const globalTokens = globalRateLimiter.getTokenUseIp(req, uid);



if(globalTokens > 0){

  // pass

}

注意，单纯使用ip作为限流key可能会有问题，有以下几种可能过个机器的外网ip相同的情况：

• 使用共享的公共 IP 地址： 在一些特殊的网络环境下，多个设备可能共享同一个公共 IP 地址，如咖啡馆、图书馆等提供 Wi-Fi 服务的地方。在这种情况下，所有连接到同一网络的设备都会共享相同的公共 IP。


• 使用代理服务器： 如果多个机器通过相同的代理服务器访问互联网，它们可能会在外网上表现为相同的 IP 地址，因为代理服务器向互联网发起请求，而不是直接来自每个终端设备。


• 使用 NAT（网络地址转换）： 在家庭或企业网络中，使用了 NAT 技术的路由器可能会导致多个内部设备共享同一个外网 IP 地址，同一公司下的内网设备公网ip可能是同一个。

综上，如果你需要考虑以上集中情况的话，你需要结合其他可以标识用户身份的key，如uid，浏览器指纹等：

// 使用 ip 加上自定义的其他key，如传入则组合在ip后 ip+uid

const globalTokens = globalRateLimiter.getTokenUseIp(req, uid);

附上浏览器指纹获取方法：

function generateFingerprint() {

  try {

    // 收集一些浏览器属性

    const userAgent = navigator.userAgent || '';

    const screenResolution = `${window.screen.width}x${window.screen.height}`;

    const language = navigator.language || '';

    const platform = navigator.platform || '';



    // 将这些属性组合成一个简单的指纹

    const fingerprint = userAgent + screenResolution + language + platform;



    // 返回指纹

    return fingerprint;

  } catch (error) {

    return '';

  }

}

在 express 中使用

const express = require('express');

const app = express();



const globalRateLimiter = new RateLimiterTokenBucket({

    tokenPerSecond: 5,

    capacity: 5,

    keyPrefix: 'test', // 指定限流器所属项目或模块

  });



// 全局中间件

app.use((req, res, next) => {

  console.log('Express global middleware');

  // 使用 ip 作为key，无需传入，自动获取ip

  const tokens = globalRateLimiter.getTokenUseIp(req);



  if(tokens > 0){

      next();

  }else {

    res.status(429).send({ message: 'Too Many Requests' })

  }

});



app.listen(3000, () => {

  console.log('Express app listening on port 3000');

});

在 koa 中使用

const Koa = require('koa');

const app = new Koa();



const globalRateLimiter = new RateLimiterTokenBucket({

  tokenPerSecond: 5,

  capacity: 5,

  keyPrefix: 'test',

});



// 全局中间件

app.use(async (ctx, next) => {

  console.log('Koa global middleware');

  // 使用 ip 作为 key，无需传入，自动获取 ip

  const tokens = globalRateLimiter.getTokenUseIp(ctx.req);



  if (tokens > 0) {

    await next();

  } else {

    ctx.status = 429;

    ctx.body = { message: 'Too Many Requests' };

  }

});



app.listen(3000, () => {

  console.log('Koa app listening on port 3000');

});

在 fastify 中使用

const fastify = require('fastify')();



const globalRateLimiter = new RateLimiterTokenBucket({

  tokenPerSecond: 5,

  capacity: 5,

  keyPrefix: 'test',

});



// 全局中间件

fastify.addHook('onRequest', (request, reply, done) => {

  console.log('Fastify global middleware');

  // 使用 ip 作为 key，无需传入，自动获取 ip

  const tokens = globalRateLimiter.getTokenUseIp(request);



  if (tokens > 0) {

    done();

  } else {

    reply.status(429).send({ message: 'Too Many Requests' });

  }

});



fastify.listen(3000, (err) => {

  if (err) throw err;

  console.log('Fastify app listening on port 3000');

});

基于redis的无状态限流器，传入redis客户端

支持分布式限流，外部传入redis客户端 (由ioredis包创建)

import Redis from 'ioredis';



const redis = new Redis({});



const globalRateLimiter = new RateLimiterTokenBucketRedis({

    tokenPerSecond: 100,

    capacity: 1000,

    keyPrefix: 'test', // 指定限流器所属项目或模块

    redisClient: redis,

  });



const key = 'myproject'; // 使用全局唯一key (当key省略时，默认为RateLimiterTokenBucketGlobalKey)



const globalTokens = globalRateLimiter.getToken(key);



if(globalTokens > 0){

  // pass

}

基于redis的有状态限流器，传入redis客户端

支持分布式限流，外部传入redis客户端 (ioredis)

import Redis from 'ioredis';



const redis = new Redis({});



const globalRateLimiter = new RateLimiterTokenBucketRedis({

    tokenPerSecond: 5,

    capacity: 5,

    keyPrefix: 'test', // 指定限流器所属项目或模块

    redisClient: redis,

  });



const key = ip + uid; // 标识用户信息的key

const globalTokens = globalRateLimiter.getToken(key);



// 使用 ip 作为key

const globalTokens = globalRateLimiter.getTokenUseIp(req);



// 使用 ip + 自定义key

const globalTokens = globalRateLimiter.getTokenUseIp(req, key);



if(globalTokens > 0){

  // pass

}

基于redis的有状态限流器，使用内置redis

外部仅需传入redis配置（ioredis）

const redisOptions = {

  port: 6379,          // Redis 端口

  host: 'localhost',   // Redis 主机名

  password: 'password' // 如果有的话，你的 Redis 密码

  db: 0,

};



const globalRateLimiter = new RateLimiterTokenBucketRedis({

    tokenPerSecond: 5,

    capacity: 5,

    keyPrefix: 'test', // 指定限流器所属项目或模块

    redisOptions: redis,

  });



const key = ip + uid; // 标识用户信息的key



const globalTokens = globalRateLimiter.getToken(key);



if(globalTokens > 0){

  // pass

}

添加内存阻塞策略

内存阻塞策略可以保护redis服务器，抵御DDoS攻击

const redisOptions = {

  port: 6379,          // Redis 端口

  host: 'localhost',   // Redis 主机名

  password: 'password' // 如果有的话，你的 Redis 密码

  db: 0,

};



const globalRateLimiter = new RateLimiterTokenBucketRedis({

    tokenPerSecond: 5,

    capacity: 5,

    keyPrefix: 'test', // 指定限流器所属项目或模块

    redisOptions: redis,



    // 内存阻塞策略（只计算当前服务器或实例的请求数，非分布式）

    inMemoryBlockOnConsumed: 50, // 如果某个key在一分钟内消耗的令牌数量超过 50，将在内存中阻塞该key的请求，不会发起redis，防止DDoS攻击

    inMemoryBlockDuration: 10, // 阻塞持续时间s

  });



const key = ip + uid; // 标识用户信息的key



const globalTokens = globalRateLimiter.getToken(key);



if(globalTokens > 0){

  // pass

}

getToken 方法支持第二个参数，传入判断阻塞的标识键，通常是ip或用户id，因为我们要阻塞的是某个具体的用户或机器，不传的话默认使用第一个参数，即令牌标识键。

当你使用无状态限流器，或是有状态限流器的键无法标识某个具体用户时可能需要填写该参数：

const key = 'myproject'; // 无状态限流器

const key = 'url'; // 有状态限流器，但是只限制某个路由



const blockKey = 'ip'; // 阻塞标识键须使用ip或用户id



const globalTokens = globalRateLimiter.getToken(key, blockKey);



// 使用 ip + 自定义key

const globalTokens = globalRateLimiter.getTokenUseIp(req, key, blockKey);



if(globalTokens > 0){

  // pass

}

内存阻塞策略优先于redis限流器以及redis保险策略，即使redis不可用时内存阻塞策略依旧生效。

添加保险策略，配置当redis服务错误时是否自动使用内存限制器

const redisOptions = {

  port: 6379,          // Redis 端口

  host: 'localhost',   // Redis 主机名

  password: 'password' // 如果有的话，你的 Redis 密码

  db: 0,

};



const globalRateLimiter = new RateLimiterTokenBucketRedis({

    tokenPerSecond: 5,

    capacity: 5,

    keyPrefix: 'test', // 指定限流器所属项目或模块

    redisOptions: redis,



    // 内存阻塞策略

    inMemoryBlockOnConsumed: 50, // 如果某个key在一分钟内消耗的令牌数量超过 50，将在内存中阻塞该key的请求，不会发起redis，防止DDoS攻击

    inMemoryBlockDuration: 10, // 阻塞持续时间s



    // 保险策略，使用内存限流器

    insuranceLimiter: true,

    insuranceLimiterTokenPerSecond: 3, // 如果未填写将取tokenPerSecond的值

    insuranceLimiterCapacity: 3, // 如果未填写将取capacity的值

  });



const key = ip + uid; // 标识用户信息的key



const globalTokens = globalRateLimiter.getToken(key);



if(globalTokens > 0){

  // pass

}

开启保险策略后，支持传入保险限制器的每秒令牌数和令牌桶容量，如果不传，将取redis限流器的值。

当你的服务是集群部署时，例如使用 pm2 的集群模式时，会用到这些选项，因为使用redis时令牌是共享的，而集群模式下每个服务是一个实例，每个实例有自己的内存空间，所以你要适当地考虑使用内存限流器时每个实例的限流速率。

注意事项

FAQ

不使用定时器生成令牌有什么好处？

时间精度：定时器的精度可能会受到系统调度和网络延迟的影响，这可能导致令牌的生成速率无法精确控制。

资源消耗：如果令牌桶的数量非常多，那么需要维护的定时器也会非常多，这可能会消耗大量的系统资源。

时间同步：由于精度问题，如果系统中存在多个令牌桶，且每个令牌桶都使用自己的定时器，那么这些定时器之间可能并不同步。

冷启动问题：如果使用定时器生成令牌，那么在服务刚启动时，令牌桶可能会是空的，这可能导致在服务启动初期无法处理请求。

除了ip还有哪些可以标识具体用户的key

• 浏览器指纹


• 用户id


• 用户名


• 邮箱


• 手机号


• 其他可以标识用户身份的key

// 生成浏览器指纹

export function generateFingerprint() {

  try {

    // 收集一些浏览器属性

    const userAgent = navigator.userAgent || '';

    const screenResolution = `${window.screen.width}x${window.screen.height}`;

    const language = navigator.language || '';

    const platform = navigator.platform || '';



    // 将这些属性组合成一个简单的指纹

    const fingerprint = userAgent + screenResolution + language + platform;



    // 返回指纹

    return fingerprint;

  } catch (error) {

    return '';

  }

}

前言

之前搞得语音识别突然发现浏览器就有接口可以直接用，而且识别又快又准，参考：使用 JavaScript 的 SpeechRecognition API 实现语音识别_speechrecognition js-CSDN博客

进入正题

这个功能首先要感谢一下作者常康，仓库地址(gitee.com/agriculture… 这个项目很早之前就关注了，最近这段时间正好要用才真正实践了一下，只是初步测试了一下，在性能方面还需要进一步测试，本人电脑就很拉识别就很卡。

先看效果

改动

主要对姿态识别做了一些小改动，将原图片识别改成视频视频识别，如果要调用摄像头将video.open(0);的代码注释放开即可

package cn.ck;



import ai.onnxruntime.OnnxTensor;

import ai.onnxruntime.OrtEnvironment;

import ai.onnxruntime.OrtException;

import ai.onnxruntime.OrtSession;

import cn.ck.config.PEConfig;

import cn.ck.domain.KeyPoint;

import cn.ck.domain.PEResult;

import cn.ck.utils.Letterbox;

import nu.pattern.OpenCV;

import org.opencv.core.Mat;

import org.opencv.core.Point;

import org.opencv.core.Scalar;

import org.opencv.core.Size;

import org.opencv.highgui.HighGui;

import org.opencv.imgproc.Imgproc;

import org.opencv.videoio.VideoCapture;

import org.opencv.videoio.Videoio;



import java.nio.FloatBuffer;

import java.util.ArrayList;

import java.util.Collections;

import java.util.List;



/*

 *  姿态识别，可以识别动作等等.,比如跳绳技术

 */

public class PoseEstimation {



    static {

        // 加载opencv动态库

        //System.load(ClassLoader.getSystemResource("lib/opencv_java470-无用.dll").getPath());

        OpenCV.loadLocally();

    }



    public static void main(String[] args) throws OrtException {



        String model_path = "src\main\resources\model\yolov7-w6-pose-nms.onnx";

        // 加载ONNX模型

        OrtEnvironment environment = OrtEnvironment.getEnvironment();

        OrtSession.SessionOptions sessionOptions = new OrtSession.SessionOptions();

        OrtSession session = environment.createSession(model_path, sessionOptions);

        // 输出基本信息

        session.getInputInfo().keySet().forEach(x -> {

            try {

                System.out.println("input name = " + x);

                System.out.println(session.getInputInfo().get(x).getInfo().toString());

            } catch (OrtException e) {

                throw new RuntimeException(e);

            }

        });



        VideoCapture video = new VideoCapture();



//        video.open(0);  //获取电脑上第0个摄像头



        //可以把识别后的视频在通过rtmp转发到其他流媒体服务器，就可以远程预览视频后视频，需要使用ffmpeg将连续图片合成flv 等等，很简单。

        if (!video.isOpened()) {

            System.err.println("打开视频流失败,未检测到监控,请先用vlc软件测试链接是否可以播放！,下面试用默认测试视频进行预览效果！");

            video.open("video/test2.mp4");

        }

        // 跳帧检测，一般设置为3，毫秒内视频画面变化是不大的，快了无意义，反而浪费性能

        int detect_skip = 4;



        // 跳帧计数

        int detect_skip_index = 1;



        // 最新一帧也就是上一帧推理结果

        float[][] outputData   = null;



        //当前最新一帧。上一帧也可以暂存一下

        Mat img = new Mat();





// 在这里先定义下线的粗细、关键的半径(按比例设置大小粗细比较好一些)

        int minDwDh = Math.min((int)video.get(Videoio.CAP_PROP_FRAME_WIDTH), (int)video.get(Videoio.CAP_PROP_FRAME_HEIGHT));

        int thickness = minDwDh / PEConfig.lineThicknessRatio;

        int radius = minDwDh / PEConfig.dotRadiusRatio;

            // 转换颜色空间

            Mat image = new Mat();



            // 图像预处理

            Letterbox letterbox = new Letterbox();

            letterbox.setNewShape(new Size(960, 960));

            letterbox.setStride(64);





// 使用多线程和GPU可以提升帧率，线上项目必须多线程！！！,一个线程拉流，将图像存到[定长]队列或数组或者集合，一个线程模型推理，中间通过变量或者队列交换数据,代码示例仅仅使用单线程

        while (video.read(img)) {

            if ((detect_skip_index % detect_skip == 0) || outputData == null) {

                Imgproc.cvtColor(img, image, Imgproc.COLOR_BGR2RGB);

                image = letterbox.letterbox(image);

                int rows = letterbox.getHeight();

                int cols = letterbox.getWidth();

                int channels = image.channels();

                // 将图像转换为模型输入格式

                float[] pixels = new float[channels * rows * cols];

                for (int i = 0; i < rows; i++) {

                    for (int j = 0; j < cols; j++) {

                        double[] pixel = image.get(j, i);

                        for (int k = 0; k < channels; k++) {

                            pixels[rows * cols * k + j * cols + i] = (float) pixel[k] / 255.0f;

                        }

                    }

                }

                detect_skip_index = 1;

                OnnxTensor tensor = OnnxTensor.createTensor(environment, FloatBuffer.wrap(pixels), new long[]{1L, (long) channels, (long) rows, (long) cols});

                OrtSession.Result output = session.run(Collections.singletonMap(session.getInputInfo().keySet().iterator().next(), tensor));



                // 处理输出结果并绘制

               outputData = ((float[][]) output.get(0).getValue());

            }else{

                detect_skip_index = detect_skip_index + 1;

            }

            double ratio = letterbox.getRatio();

            double dw =letterbox.getDw();

            double dh = letterbox.getDh();

            List<PEResult> peResults = new ArrayList<>();

            for (float[] outputDatum : outputData) {

                PEResult result = new PEResult(outputDatum);

                if (result.getScore() > PEConfig.personScoreThreshold) {

                    peResults.add(result);

                }

            }



            // 对结果进行非极大值抑制

            peResults = nms(peResults, PEConfig.IoUThreshold);



            for (PEResult peResult: peResults) {

                System.out.println(peResult);

                // 画框

                Point topLeft = new Point((peResult.getX0()-dw)/ratio, (peResult.getY0()-dh)/ratio);

                Point bottomRight = new Point((peResult.getX1()-dw)/ratio, (peResult.getY1()-dh)/ratio);

                // Imgproc.rectangle(img, topLeft, bottomRight, new Scalar(255,0,0), thickness);

                List<KeyPoint> keyPoints = peResult.getKeyPointList();

                // 画点

                keyPoints.forEach(keyPoint->{

                    if (keyPoint.getScore()>PEConfig.keyPointScoreThreshold) {

                        Point center = new Point((keyPoint.getX()-dw)/ratio, (keyPoint.getY()-dh)/ratio);

                        Scalar color = PEConfig.poseKptColor.get(keyPoint.getId());

                        Imgproc.circle(img, center, radius, color, -1); //-1表示实心

                    }

                });

                // 画线

                for (int i = 0; i< PEConfig.skeleton.length; i++){

                    int indexPoint1 = PEConfig.skeleton[i][0]-1;

                    int indexPoint2 = PEConfig.skeleton[i][1]-1;

                    if ( keyPoints.get(indexPoint1).getScore()>PEConfig.keyPointScoreThreshold &&

                            keyPoints.get(indexPoint2).getScore()>PEConfig.keyPointScoreThreshold ) {

                        Scalar coler = PEConfig.poseLimbColor.get(i);

                        Point point1 = new Point(

                                (keyPoints.get(indexPoint1).getX()-dw)/ratio,

                                (keyPoints.get(indexPoint1).getY()-dh)/ratio

                        );

                        Point point2 = new Point(

                                (keyPoints.get(indexPoint2).getX()-dw)/ratio,

                                (keyPoints.get(indexPoint2).getY()-dh)/ratio

                        );

                        Imgproc.line(img, point1, point2, coler, thickness);

                    }

                }

            }

            //服务器部署：由于服务器没有桌面，所以无法弹出画面预览，主要注释一下代码

            HighGui.imshow("result", img);



            // 多次按任意按键关闭弹窗画面，结束程序

            if(HighGui.waitKey(1) != -1){

                break;

            }

        }



        HighGui.destroyAllWindows();

        video.release();

        System.exit(0);



    }



    public static List<PEResult> nms(List<PEResult> boxes, float iouThreshold) {

        // 根据score从大到小对List进行排序

        boxes.sort((b1, b2) -> Float.compare(b2.getScore(), b1.getScore()));

        List<PEResult> resultList = new ArrayList<>();

        for (int i = 0; i < boxes.size(); i++) {

            PEResult box = boxes.get(i);

            boolean keep = true;

            // 从i+1开始，遍历之后的所有boxes，移除与box的IOU大于阈值的元素

            for (int j = i + 1; j < boxes.size(); j++) {

                PEResult otherBox = boxes.get(j);

                float iou = getIntersectionOverUnion(box, otherBox);

                if (iou > iouThreshold) {

                    keep = false;

                    break;

                }

            }

            if (keep) {

                resultList.add(box);

            }

        }

        return resultList;

    }

    private static float getIntersectionOverUnion(PEResult box1, PEResult box2) {

        float x1 = Math.max(box1.getX0(), box2.getX0());

        float y1 = Math.max(box1.getY0(), box2.getY0());

        float x2 = Math.min(box1.getX1(), box2.getX1());

        float y2 = Math.min(box1.getY1(), box2.getY1());

        float intersectionArea = Math.max(0, x2 - x1) * Math.max(0, y2 - y1);

        float box1Area = (box1.getX1() - box1.getX0()) * (box1.getY1() - box1.getY0());

        float box2Area = (box2.getX1() - box2.getX0()) * (box2.getY1() - box2.getY0());

        float unionArea = box1Area + box2Area - intersectionArea;

        return intersectionArea / unionArea;

    }

}

姿态识别模型提取链接，
通过网盘分享的文件：yolov7-w6-pose-nms.onnx
链接: pan.baidu.com/s/1UdAUPWr1… 提取码: du6y

后言

就像原作者说的，不是每个同学都会python,不是每个项目都是python语言开发，不是每个岗位都会深度学习。

希望java在AI领域能有更好的发展

前言导读

这个专题主要是发表一些生活的感想感悟，言论主观得一塌糊涂哈 各位网友有自己的想法都可以分享发出来。

• 
  

  为什么要写这个话题

  
  


• 
  

  1 第一个原因 父母养老问题

  
  

父母养老的问题， 相信各位北漂 深漂的游子都比较有感触吧。 自己远在深圳 广州 北京 上海 等地工作。一旦有个什么事情，自己也很难第一时间赶回去处理。即使回来了 也是各种奔波。身心巨累，所以这时候很多人，在这个时候犹豫了。是否考虑回去。

• 
  

  2 第二个原因 生活节奏

  
  

经历过一线城市高压力快节奏的生活，自己再次回到小县城，之后那种骑着小电驴能到处游玩。 能够干着轻松的工作，能陪伴自己的家人。这种鲜明对比 好似在疫情之后房价暴跌之后愈发明显。 好像去到省城 去到一线城市，不再是我们唯一的选择。似乎对了很对选择。

• 
  

  3 第三个原因 居住环境和工作环境

  
  

工作的规划的居住问题， 相对一线贵的让头疼的房价 小县城好像也有他独特的优势。虽然在工作靠的
更多的是人情关系， 人情世故貌似是这样的必修课，当然这些也是一部分年轻人比较反感的， 这个见仁见智， 有些人被迫接受这些， 有人反感这些就远离这些。这都很正常。

具体自己所见 所闻

从一线新家回去一次的经历

上图可以看到 回一次家过程非常曲折 新塘站 - 广州白云站 -武昌火车站- 汉口北地铁站 - 红安城乡公交总站。经历了 九九八十一难 我才到达老家。感觉非常折磨人， 此刻我是真的有点动摇了，是否自己几年的前的决定是个错误的决定。 有时候也感慨每年就回来那么两次。忍忍就好了，一切都会过去。

和人交流想法转变

但是这次回来住在表弟家里就在晚上的时候，吃完晚饭 ，去他堂哥家里 休息了，也是交流了很多， 也都是程序员但是他们选择不去武汉留下老家了， 可以避开那些快节奏的生活和高压力。 虽然收入相对可以减少些。 当时就很感触这个不正是我们想要的稳定的生活吗。 可能 20 多岁的时候， 那时候想着有很多很多目标， 几年几年做到某一个高度。 要是实现的自己的某个目标啥的， 但是我们发现，那些真的能成的毕竟是少数， 大多数人还是选择了相对平衡和稳定的生活。

抉择问题

各位好像都有遇到我们，高考要上什么样的学校，选择什么样的专业都不是自己选的，都是父母为自己选择，好像都没有自己为自己的人生真正负责过， 等自己长大了，有一些成就后，想定居哪里以后在哪里发展， 和什么样的人结婚生儿育女，好像都是父母长辈替我们决定的。 这时候内心就会有很多疑问，只要自己决定还是说，尊重父母意见， 以前我很不理解一些选择， 为什么可以留在一线还要回去，现在才知道有部分是权衡利弊的选择，有部分人也只是为了选择而选择 或者是为了父母的选择，
父母都只想子女留在身边（这个想法个人看来有点自私，但是也是目前现状），经历这么多的事情，也是切身感受到，人跟人观念的不同，我们既要找到和我们同频共振的那部人人， 同时也要能接受和尊重那些跟我们不同观念人，因为这个世界允许存在差异，正是因为存在差异才会有不同的观点想法。 也会让我们能多思考怎样能过好自己的生活 ，怎样才能规划好自己的未来。

小县城慢节奏优点

小县城没有快节奏 高压力，相对比较适合那些慢节奏生活的人， 也方便照顾年迈的父母， 如果一旦一个什么事情都可以随时有个照应。这些都是在一线头痛的事情。

一线职业发展优点

一线城市有更多的就业机会，和各种线下活动。技术交流，能让自己职业发展更上一层楼。也能节假日去看看各种游玩地区 。

最后总结：

无论是选择留在家乡小县城还是奔向一线城市，我们都要承担对应带来的负面的后果，也能享受对应能带来的福利。这些就看自己选择，如果像我这样的情况父母身体真的很差，建议可以送去敬老院 然后自己再去拼搏 或者留在自己身边 这个看父母自理能力和我们自己是否愿意长期照顾年迈的父母了，以上的观点都是我自己主观分享不代表所有人 各位可以结合自己实际情况做出最佳选择。也预祝各位 2024 国庆节快乐祖国成立 75 周年普天同庆。

从 13 年实习开始，开发环境从 Ubuntu 转战 MacOS，中间换了好几次电脑，每次都是直接用 Mac 自带的 Time Machine 来迁移数据，仅需一块移动硬盘或者一根 type c 线，经过一个晚上的数据迁移，第二天就可以用新电脑工作了，除了配置升级了，几乎感受不到换电脑的乐趣，并且升级过程中，也积累了不少系统升级的旧疾，这次从Intel芯片到 M3 Max 芯片，我打算从零开始，重新蒸腾一番，顺带更新一下工具库，说干就干，Go！
先介绍下新电脑的配置

• 太空黑：从经典的银色、到太空灰，这次体验一下太空黑


• 14 寸：用了大概 3 年的 14 寸，就一直用 15/16寸，因为这台不是用于办公，考虑携带方便，所以入手 14 寸（大屏幕肯定爽，但是在家主要也是外接显示器）

• M3 Max：想要体验一下本地大模型，直接入手 Max（找个借口🤐）


• 64G 内存：一直有在 macbook 上装虚拟机（Parallels Desktop）运行 Windows的习惯，升级了一下内存


• 2TB SSD：以前 512 的时候，由于各种 npm 包、docker 镜像，还是隔一段时间就要重启一下、硬盘清理等方式来释放空间，一步到位

后面还换过几台，从最开始的 touchbar ，蝶式键盘，再到取消 touchbar，这时候更多的是工作工具的更换，连拍照的激情都没有🥱🥱

开发工具

科学上网工具

作为开发，第一件事情是需要一个趁手的科学上网工具，不然类似下载 Google Chrome、安装 Homebrew 等基础的工具都会十分麻烦
我的科学上网工具，支持按照规则配置自动代理，同时也支持终端代理，以下是终端代理，这里不方便推荐具体工具

# 防止终端命令无法确定是否需要科学上网，不建议把这个命令持久化到 bashrc/zshrc,在需要时打开终端输入即可

 export https_proxy=http://127.0.0.1:1235 http_proxy=http://127.0.0.1:1235 all_proxy=socks5://127.0.0.1:1234

Xcode

Xcode 命令行工具，许多开发工具和依赖所需的基础，运行一下命令，选择安装，稍等一会即可

xcode-select --install

Homebrew

通过 homebrew 来管理一些开发工具包，如 git、node等等，由于需要下载 github 地址，这里需要借助你的翻墙工具

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

然后按照提示，把命令加到 PATH

(echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> ~/.zprofile

eval "$(/opt/homebrew/bin/brew shellenv)"

Git/Tig

brew install git

# brew install git-gui 

# brew install tig 个人是 vim 用户，偏向这种终端 gui

# 这里会自动安装 zsh 的自动补全工具，后续安装 zsh 可用

# /opt/homebrew/share/zsh/site-functions

安装 git 和 tig 都会默认新增 zsh 的补全方法，好吧，这是提醒我要立马安装 zsh
tigrc 可以用来自定义 tig 的一些配置和快捷键绑定

A sample of the default configuration has been installed to:

  /opt/homebrew/opt/tig/share/tig/examples/tigrc

to override the system-wide default configuration, copy the sample to:

  /opt/homebrew/etc/tigrc



zsh completions and functions have been installed to:

  /opt/homebrew/share/zsh/site-functions

在任意已经初始化 git 的项目，打入 tig ，然后你就可以使用 vim 的方式来操作了 jk 等等

另外，使用 git 我还会额外安装两个 git 相关的小插件
一个是 tj 大神开发的 git-extras

brew install git-extras



# 添加到 ~/.zshrc

source /opt/homebrew/opt/git-extras/share/git-extras/git-extras-completion.zsh

详细的命令可查看文档，我比较常用了是 git summary、git undo、git setup

然后通过git 的 alias 来实现一个自定义的命令，git up 来实现每次切换到一个仓库时，有意思的更新一下最新代码

git config --global alias.up '!git remote update -p && git pull --rebase && git submodule update --init --recursive'

iTerm

实现通过 command + ecs 键，快速切换显示/隐藏 iTerm

• 设置默认终端


• 安装 shell integration

• 选配色：Solarized


• 安装 oh-my-zsh

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

• 修改主题，配置插件等等

brew install zsh-syntax-highlighting

brew install zsh-autosuggestions 

brew install autojump

brew install fzf

#ZSH_THEME="robbyrussell"

#ZSH_THEME="agnoster"

#ZSH_THEME="miloshadzic"

#ZSH_THEME="sunrise"

# ZSH_THEME="ys"

ZSH_THEME="gnzh"



plugins=(git ruby autojump osx rake rails lighthouse sublime)

plugins=(bgnotify)

plugins=(web-search)

plugins=(node)



source /opt/homebrew/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh

source /opt/homebrew/share/zsh-autosuggestions/zsh-autosuggestions.zsh

[ -f /opt/homebrew/etc/profile.d/autojump.sh ] && . /opt/homebrew/etc/profile.d/autojump.sh

source <(fzf --zsh)

这就起飞了！看看效果

Docker Desktop

作为开发，docker 技能必不可少，mac 下直接使用 docker desktop，可以省掉很多事情，特别是当你如果需要在本地跑 k8s 环境时，直接勾上 Enable Kubernetes 即可；另外新版本查看镜像，也可以扫描镜像每一层是否有安全漏洞，十分方便

VSCode

vscode 不仅适合前端开发，对于 Go、Rust 等开发者，整体体验都不错。安装后的第一件事，就是把 code 命令加到 Terminal

然后第二件事就是安装 github 的 Copilot 插件，开发、看源码现在是少不了它了

第三件事就是在 vscode 开启 vim 模式（安装 vim 插件)从 vim - sublime - vscode，一直保留 vim 的使用习惯，改不掉了😂
其他的就是各种高亮、开发辅助插件，大家按需安装即可

其他

• 前端
  
  
  
  • NVM：node 版本管理
  
  
  • pnpm：上一台电脑只有 512G，在动不动就几个 G 的前端项目，硬盘一直告警，至此只用 pnpm
  
  
  
  


• Go
  
  
  
  • GVM： go 版本管理
  
  
  • GoLand：虽然 vscode 可以开发 go，但是整体体验还是比不上收费的 goland
  
  
  
  

环境搭建可参考 Go + React 指北

效率工具

ChatGPT

说到效率工具，ChatGPT 绝对是提高效率神器，从日常问题到开发、图片生成、画图等等，哦，还可以帮忙挑西瓜🍉


对了，用了苹果芯片，ChatGPT app 直接通过 option + space 即可随时调出，支持实时对话、支持截屏问问题等等，好用程度大幅上升⬆️⬆️⬆️

Bartender($)

吐血推荐，让你状态栏更加一目了然
支持自定义显示哪些 icon，配置哪些 icon 始终不显示，哪些第二状态栏显示

快捷键切换第二状态栏，一下子清爽颜值高

iStat Menus($)

拥有时刻关注着网速、CPU使用率、内存使用率的强迫症，绝对不少

Yoink

当你要把一个文件从一个地方移到另外一个地方时，当你想快速复制一张图片时，剪切板记录、跨设备文件接力等等，这个小小的工具都能帮助你
有时候通过截屏软件截图，可以一次性把需要的截屏操作完，然后在剪贴板直接拖下来使用，十分方便！

BettersnapTool

一款小而美的工具，用来快速调整你的窗口，比如当前窗口在两个显示屏直接切换；全屏，左右分屏等等

iShot

本来我一直使用 Skitch 的，但是这次切换新电脑之后，发现它下架了，之前有朋友推荐了，也使用了一段时间，感觉很不错，除了普通的截图，还有长截图、带壳截图；还有其他的小工具，官方宣传是
截图、长截图、全屏带壳截图、贴图、标注、取色、录屏、录音、OCR、翻译一个顶十个，样样皆优秀！

Draw.io

好吧，这个绝对画图神器，日常写文档几乎离不开他，在线版直接打开即可使用，也可以安装 vscode 插件，不过我还是习惯下载一个 app，这样本地的文件，直接打开即可使用
距离成为架构师，你只差一个 draw.io

Parallels Desktop

如果你有使用 Windows 的诉求，那么我建议你花点钱买个 pd，融合模式一开，原来我的 16 年的机器，玩个魔兽、英雄联盟完全没问题
安装直接点击下载 Windows 11，网速好的话，10 来分钟就安装成功了

融合模式，应用和直接使用 mac 的应用没任何差别

全屏模式，可以看到截图的时候有一部分黑色，应该是没有兼容刘海屏的原因

Markdown 编辑器

Quiver，原来所有的笔记、文档基本都靠它来记录，21 年的时候作者停止维护了，再加上使用纯 markdown 工具，还需要自己找图床，最后都转到语雀、飞书等在线文档
中间还用过其他的、Mweb、Typora 等等，如果自己搭建图床，推荐使用 Typora

Mweb 包含PC 和 移动端，通过 iCloud 同步，也是十分方便！

图床工具

原来写 markdown 的时候，使用的是微博免费的图床，2 年后，然后发现图片都失效了！失效了！

所以，图床还是自己维护比较靠谱！

PicList，免费开源，我自己是购买了阿里云按量付费的 OSS，简单配置一下 aks，即可上传图片，配合 Typora，轻松完成写作

配置好之后，图片拖到 markdown 编辑框，即可实现自动上传

BreakTime 定时提醒工具

为了你的健康，你可以让电脑提醒你，每隔30分钟休息一下，倒杯水，看看风景

DaisyDisk （付费）磁盘空间，文件大小分析工具

作为只能买 256G 的屌丝，每天困扰我的一件事就是磁盘空间不足
现在我是 2T 了，可以不用了
也可以使用 腾讯柠檬用过一段时间，也很好用

微信输入法

搜狗输入法、RIME、百度输入法（作恶多端，还用）
上一次推荐，我还是使用搜狗输入法，有朋友推荐微信输入法，体验了一把，简洁、功能齐全，所以手机、PC 全部改用微信输入法
推荐跨设备复制黏贴，速度比苹果自带的快了许多

思维导图：Xmind, MindNode

脑图应用，一般在项目开发过程中用于 需求分解，Model Design 等等。

其他小应用

• Caffeine


• Manico, 在 macOS 强大的触摸板下，一直认为这个软件没什么用, 而且快捷键还有很多冲突


• tmate, 搞基神器，结对编程，定位问题必备神器

Chrome 插件推荐

• Vimium, 通过键盘快捷键操作网页，比如打开，关闭，查找书签等等


• FeHelper(前端助手)：JSON自动格式化、手动格式化，支持排序、解码、下载等，更多功能可在配置页按需安装


• Axure RP Extension for Chrome


• Grammarly for Chrome，语法检查


• Octotree，github源码查看神器


• OneTab，节省高达95％的内存，并减轻标签页混乱现象


• Postman Interceptor


• React Developer Tools


• Redux DevTools


• Yet Another Drag and Go：超级拖拽.向四个方向拖拽文字即可进行相应的搜索.拖拽链接可在前台/后台,左侧/右侧打开


• 掘金


• Sider: ChatGPT 侧边栏 + GPT-4o, Claude 3.5, Gemini 1.5 & AI工具”的产品徽标图片 Sider: ChatGPT 侧边栏 + GPT-4o, Claude 3.5, Gemini 1.5 & AI工具


• xSwitch：前端开发代理神器，在线 debug 问题，把线上资源代理到本地，方便复现问题

作为一个从事 Web 工作 8 年来的相关人员的一点心路历程，希望我的经历能给大家带来稍许乐趣。

迷茫，特别迷茫

俗话说得好：“岂能尽如人意，但求无愧于心”，工作 8 年来，我经常这样自我安慰。不过这并不影响我也经常感觉无所适从，烦闷与迷茫。尤其是到了一些特殊的年月节点，这种焦虑感总是更加强烈。

那到底有什么迷茫的呢？一言以蔽之，有了对比，就有了伤害。正如标题所言，女朋友和技术能力，换一个通俗的话，也可以叫“美女与金钱”，当然更常规的说法，是“家庭与事业”。

如果简单横向对比起来，我迷茫确实看起来不意外：

• 我好歹也是正儿八经 985 大学软件工程方向本科毕业，也算是科班出身；


• 工作了 8 年，不仅是被同学、绝大部分同行从业人员从薪资水平、发展前景、人际交往、生活质量等各方向甩在身后，甚至都比不上复读一年考上不知名二本学校、去年才毕业的表弟；


• 没房没车，没有成婚，还背井离乡，漂泊千里之外；


• 日子看起来浑浑噩噩，没有什么远大志向，也没什么乐衷的兴趣……

怎么就变成这样了呢，我觉得我有老老实实、脚踏实地地做事情啊。回想自己从业这些年：

• 从一开始的 JSP + Spring MVC + MySQL 这套原始的 Java Web 开发;


• 到当时外面还比较时髦的 MEAN(MongoDB、Express.js、Angular 和 Node.js);


• 后来回归到 Angular + Spring 这套，然后改为现在常用的 Vue + Spring，其中还一度以为 WebFlux 会有大用;


• 当然前几年除了做些全栈开发，还不得不兼备 K8s 相关一大套的运维技能；


• TiDB、Redis、ES、Prometheus 什么的都要搞一搞，Flink 什么的也得弄一弄，加上一大堆第三方自动化、监控等工具的使用配置；


• 现在没事时用 Python 写个脚本处理一些批量任务，自己搞搞 Flutter 练手自己用的 APP。

我都觉得自己还是挺厉害的，因为这些就没一个是学校里教的东西，都是出来挨打自学的。

但实际上的现状呢，我还是呆在一个电子厂里面，拿着千把块，做着鸡毛蒜皮的事情，下班就回到公司的宿舍，龟缩起来。这样 855 毫无意义的日子，居然一呆就是 8 年了。

“可怜之人必有可恨之处？”

那我当然是自以为是的可怜了，毕竟如果真得像我说的那样出色，是金子自然会发光了，也怎么可能愿意继续呆在这种地方，离最近的地铁站、火车站都要30多分钟公交的制造业工厂里面？

确实，扯开嘴巴滋哇乱叫谁不会，有什么因就有什么果了。

• 大四的时候，跨专业自学准备心理学方向的考研，错过了秋招；没考上之后，当时的技术能力，已经不支撑找个满意的工作了。


• 做中学，两年后的 18 年正是行业发展高潮，准备出去看看。结果年轻，血气方刚，在领导的 PUA 和自以为是没能干出一点功绩就离开，不满意，然后留下来。


• 又之后的一年之余，已经发现技术水平和人生阅历和同行差距过大，还是骑驴找马。在得到几个 offer 之后，却不知原因突然想回老家城市，这些深圳广州的机会就莫名其妙放弃了，重庆的眼高手低又没找到满意的。


• 之后疫情时代，在一些大城市比如 SH、SZ 等出现强烈的排外现象之后，越发想要回家。但重庆的互联网行业，和主流城市差距可太大了。当时当地政府甚至在大力发展实体制造业，老家区县招商建工厂，租 100 亩送 100 亩。


• 疫情尾期和这两年，什么“前端已死”、行业落寞，找工作难度陡升，试想，什么样的公司会找一个 8 年工作经验的初中级前端?全栈?运维?……

去年我找工作从 5 月份找到 10 月份，沟通了 200 多个岗位，只有 20 多个接收了简历，约到 3 个网上面试，最后一个没过。除了一些需要线下面试的没法去，也有面试的匹配度也不够、岁数不够年轻等其他因素。8 年来最多就管理过不到 10 人的小团队，当然不到一年就结束了，也没有能力发展管理岗。

与自己和解是不是自欺欺人？

会不会有种“咎由自取”的感觉，我偶尔也会想：

• 如果 18 年我去了深圳而不是听信领导的话留在了东莞这里，我的发展轨迹会不会有所改善？


• 更有甚，如果大学不是脑袋一热为了自救去考什么心理学专业的研究生，好好学习技能找工作或者考本校，会不会又是另一番风景？


• 甚至更早，如果当年高考没有发挥失常，或者要是考得更差一点，去个师范，实现我儿时的理想，成为一名教师，情感上是不是更能自洽？

有句网络流行语是这样说的：有人看段子，有人照镜子。曾几何时，我也这样觉得：

• 反正现在没车没房没女友，离家又远没外债；


• 物质能力虽不高，但消费欲望不强；


• 不能为国家做大贡献，但也还没有给社会添乱；


• 下班回宿舍看看视频、打打游戏、玩玩手机，偶尔出去打打球，散散步……

没有复杂的人际关系，没有太大的家庭工作压力，清闲时间也比较充足，简简单单三餐一宿，我明明很惬意的，也明明已经惬意了 8 年来。

——“你一个月多少工资？” 、“怎么才这点？”

——“你现在什么级别？” 、“怎么才这个级别？”

——“你开什么车？” 、“什么？你连驾-照都没有？”

——“你孩子几岁了？” 、“啊，你还单身？”

——“天啦，你怎么混成这样了？”
……

“人的悲喜并不相通，我只觉得他们吵闹”。“墨镜一带，谁都不爱”，我脑袋摇成螺旋桨，我飞走咯，千里之外~

未立，缺少的是女朋友？

我的看法认为：可能不是。

没有什么是一成不变的，比如年龄。我这个年纪可能不仅和更年轻的同行抢岗位抢不过，也可能在另一个相亲市场也抢不过。

虽然嘴巴上可能有的人觉得单身好，而且现在这个男女关系和社会认同比较复杂的时代。前段时候和老同学聊天聊到近况，他们都一直以为我是一个不婚主义者。当然，这并不影响我们老一辈甚至再老一辈亲戚的期盼，他们偶尔也会认为，结婚之后，一个人才成长了，他们才会放心。

你别说，你还真别说。这半年我没有写博客，也没有太多了解“行业寒冬”的发展情况，有一部分原因还真是因为年初聊见了个相亲对象。这对我是一个完全没有经历过的赛道，难得的是我感觉还不差，虽然发展极为缓慢，但还没有遇到网上那样的“悲惨经历”，当然，也可能是异地的原因。

我要经历这种事，只能是亲戚朋友帮忙，加上微信之后聊了聊，整体氛围很好，就这么聊了一个多月。本来过年的时候约个见面的，但没想到升级了，直接他们父母到我家来坐了坐，然后又邀请我父母去她家吃了饭。这在农村的意思就是老一辈的过场已经走完了，双方家长没有意见，我们能不能成、就全看自己了。

这半年虽然几乎天天都有聊，绝大多数情况下都很愉快，我也变得有些期待每次的聊天；平时也有礼尚往来，偶尔互有一些小惊喜小礼物；五一节我也回去见了面，牵牵小手，后来得知当天她出门之后才发现来例假、身体不适但还是陪我走了将近三万步的路、甚至没让我发现异样……

但问题的关键在于，似乎都没有聊到什么重点和关键的问题，没有实际的发展，感觉温度没有理想上升。仔细想想，把这每天和她相关的一两个小时删除掉，那和我这些年的日子几乎没什么区别，好像一样是挺自在惬意的，她甚至都没有给我一些需要我去翻视频学点“人情世故”才能处理的问题和情景。

本来以为是好事，但我的榆木脑袋才终于不得不承认异地一定是个大问题。所以到现在，我这股子想回家的心情就变成了内因和外因相结合的无懈可击的推力。但是却还没有热切到一拍脑袋裸辞先回家，再看天的程度。

未立，缺少的是技术能力？

我的看法认为：可能也不是。

虽然我个人学的东西有一点点乱，但怎么说呢，并不影响我自娱自乐。偶尔开发一个自用的小玩意儿，还盲目觉得挺有成就感。

而且，从实际情况来讲，现在的“技术能力”真的不是那么的重要，如果是做产品，可能一些经验能力也不可或缺，但会写代码的人，可是一抓一大把。

比如说，现在的 AI 大模型几乎是热到爆的话题，也算是百花齐放，也各自杀红了眼，现在的新东西，不说自己有个 AI，都不好意思大声讲话，新出的 PC 都挂上 AI PC，魅族都不做手机，改名为 AI 终端了。

作为普通用户和普通个人开发者角度来讲，现在使用这些大模型 API 其实非常便宜了。价格战百万 token 才几十块甚至几块钱，文本对话、文生图、图生文，也都有一定的可用性了。

但是呢，但是呢，能拿来做什么呢？有创造性的同行都已经借着东风，扶摇直上九万里了，我还在感慨好便宜啊，除了BAT平台，这两天还去零一万物、深度求索等平台注册了账号，部分也少少充值了些。但是，虽然好便宜啊，可是能用来做点什么呢？我还真的没有创造性。

既然都说到这里，也厚脸皮顺便说一句，最近弄了个比较简陋的，使用Flutter开发，支持诸多AI大模型API调用的，假装类似智能工作生活助手应用。顺带加上之前的极简记账、随机菜品、猫狗写真，放在 Github 上 Sanotsu/swmate ，虽然很简陋也不完善，但感兴趣的朋友可以看看。

生活不需要别人来定义

可能“三十而立”意思是指人在三十岁前后有所成就。少年老成的例子很多，大器晚成的人物也不少，但到最后，这都是别人来定义的这个“立”的含义。

就如见世面，有的人是“周游列国、追求自由”，有的人是“四体勤、五谷分”，有的人的成就是“成家立业，香车美女环绕”，有的人是“著作等身”，也有的人却是成为“艾尔登之王”……外面的人看到的或许不同，但那份自己内心的快乐，是为了、也是应该能够取悦自己的。

今天是我三十岁生日，大概500天前我列了三十岁前想要完成的 10 件小事，结果当然只完成了小部分:

• 体重减到正常 BMI 值；


• 开发一个能自用的 APP/入门一门外语；


• LOL 上个白金/LOLM 上个宗师;


• 谈一次恋爱；


• 出去旅游一次；


• 换一份工作，换一个城市；


• 补上自己的网站博客，整理自己的硬盘；


• 看 10 本名著，并写下每本不多于 5000 字的读后感；


• 完成一部中篇小说；


• 完成 50 篇用心写的博文，可包含那 10 篇读后感。

人生是一条连续的时间线，除了起止点，中间这段旅程，并不会因为某一刻的变化而停下来，最多是慢下来；三十岁之前没有完成的事情，三十岁之后依旧可以去做；以前看得太重的东西，以后还可以改变很多；珍惜的事情太多，抱怨的时间太少；人生这段路，就这么些年，就该为自己走走看；路虽然走得不同，但走路的心情，却可以自己来定。

取悦自己真的比迎合他人要轻松和快乐许多。

共勉吧诸君，感谢垂阅。

上周许久未见的大学学长叫我出去喝酒，他这次来贵阳是为开分店的事情而来的，他比我高一个年级，在我毕业的时候，他就自己开始做生意了，短短两三年，到现在他已经开了七八个分店了，还在不断发展，并且加盟的人也不少，平均下来，现在每个月的收入也是很可观的。

对于我们这种末流二本院校毕业的学生，特别还是在贵州这个经济相对比较落后的地区，拿到这个成绩还是挺厉害的，并且这个收入并不是固定的，还是不断增长。

学长是学市场营销的，这也算是个天坑专业，所以那会他就知道自己将来肯定是从事不了这个行业的，所以自己就在宿舍开了一个小卖部，每天下课后就骑着电瓶车去送货，虽然每个月赚不了多少钱，但是对于做生意这一块，他的思维肯定是得到了锻炼。

因为我们是在广西读书，所以螺蛳粉就比较多，在毕业后，他就去柳州考察做螺蛳粉，联系好各种渠道后，回到贵州就直接开干。

因为那会贵州的各个市里面卖螺蛳粉的还很少，并且没有特色和品牌效应，所以自己就先设计名称，logo，最后先开了一个店铺，自己亲自下厨，因为比较有特色，一个月直接干到了全市螺蛳粉餐饮销量的第二名。

随后又开了第二家，第三家......别人在看到他赚了钱后，其它市区的人也纷纷向他学习，他自己就收加盟费用，现在他要做的事情就是玩，还有考察门店，然后扩展。

从他的事迹中，我说两个点。

勇于放弃

对于很多人而言，读书的目的就是为了找一份稳定的工作，最好是体制内。

如果你读完大学后出去做销售，做生意，那么对于你身边的很多人而言，他们会觉得你这个大学白读了，因为在他们眼中，只有坐在办公室里面才是最体面了。

你和他说做生意，创业这些东西，他会给你说：这些不稳，以后没有退休工资。

但是如果你真听他们的，那么后面后悔的一定是你。

就像学长，如果他也和别人一样毕业后回到自己那地方加入考编大军，那么他现在肯定和别人一样，也在背书，焦虑，但是他选择了其它的路。

这时候有些人就会抬杠：考上了就能吃一辈子，而你做生意如果运气不好那么就直接亏光，到时候你就知道编制的香了。

这也是很多人的通病。

我觉得如果一件事情你看不到希望，就别过于去迷恋它，舍不得它，不然会被它束缚，比如学历，经验等等。

敢想敢干

可能你会觉得他家里应该有底子的，不然毕业后怎么就能开店。

但是我们问一下自己，就算你家里有底子，毕业后就给你十万块让你开店，你觉得你行吗？恐怕大部分人都不知道自己该做什么吧。

首先躬身入局本身就是一件很难的事情，我们多数人能够拼命上班，但是如果让你脱离平台去自己干一件事就比登天还难。

因为你在公司有别人给你安排好，你去做就行了，换句话来说，你就是个干苦力的，真让你去谈判，去闯市场，大多数人是没这个能力的。

这也是一种损失厌恶心态，因为你怕自己花时间去做，到后面不仅亏了钱，还把自己弄得很累，而安安稳稳打工不一样，它是“稳赚不赔”的。

但是这个世界上很难有稳赚不赔的东西，就说安安稳稳打工拿工资，但是工资不高，那一定是在亏着走的，除非你觉得自己的时间毫无价值，那么就是赚的。

感觉等不到35岁AI就把我裁了

哥们干前端，刚过34周岁生日，请有缘的老哥兄弟们在评论区里祝哥们生日快乐先。

让我焦虑的不是年纪，是这个叫Windsurf Editor的东西

之前用过他们家的AI工具，感觉和市面上卷的AI工具相差无几。但自从Cursor出了个编辑器想要取代vs code，这事儿就逐渐不对劲了。

Codeium他们家也出了个编辑器叫Windsurf Editor，今天体验了一下，突然开始焦虑了。体验下来就一个感受：我想过这一天会来，没想到来的这么快。

事情是这样的，我让AI帮我创建了一个前端项目，其中要用到xxx技术。然后全程我除了accept它给我生成的指令，我没有敲一行代码。

我自己不喜欢读长篇文字，所以直接看图吧。

可以看出它已经具备分析整个项目和整合项目代码的能力。

然后我让它帮我封装了一个RESTFUL式的基于axios的单例请求文件。结果我发现它在request文件中用到了状态管理中的数据(pinia)以及UI组件(ElementPlus)，于是让它帮我修改。

最后还不忘给个使用示例

结语：这是一场程序员和技术的自我革新，不仅是我们这个领域，新的时代真的来临，大家一起努力吧，共勉之。

作者：fhf
来源：juejin.cn/post/7441543396979097610

事情是这样的。

Business Insider 最近获得了特斯拉内部薪酬数据库（截至 2021 年 12 月）的访问权限，里面有 10 万名员工的薪酬数据。

然后他们发现了有关特斯拉薪酬的一系列猛料：

• 面试 9 轮只为招聘特斯拉铁粉；


• 采用低底薪 + 股票奖励策略，打出 “高风险、高回报” 口号；


• 特斯拉底薪低于同行，不及苹果、谷歌、英伟达、Meta、福特等科技公司和传统汽车制造商；


• 工程师更有可能获得股票奖励；


• 仅有 4% 的员工通过激励股票期权（ISOs） 获得股票，且通常授予高管；


• ……

更多爆料细节如下——

马斯克招人策略：低底薪 + 股票奖励

透过这份曝光的内部薪酬文件，我们看到特斯拉向员工喊出的是 “高风险、高回报” 这一口号。

why？？

一切的一切，还是归于特斯拉想要招聘自身铁粉。据一位了解招聘的内部员工透露：

他们可能在别处得到更好的报酬，但我们想要的是铁杆的特斯拉人。

而为了实现这一目标，特斯拉主要靠 “低底薪 + 股票奖励” 这一策略以及配套的招聘系统。

对于前者，一位特斯拉前销售经理将其比喻为 “金手铐”：

股票是主要的钩子…… 我要低下头再等几个月，直到我获得股权。

至于后者，一位特斯拉前招聘人员表示，前司的招聘流程极为严格，通常需要几个月时间来考察面试候选人。

比如面试一位工程师，通常至少包括九次面试，可能需要数月时间。

这是一件文化上的事情，一切都是为了排除掉只想 “打卡上下班” 的员工。

那么，特斯拉到底给员工们开了多少薪酬呢？

这里需要补充一个员工人数数据。在这份文件里，我们可以看到 10 万名员工的薪酬情况，而据 CNBC 报道，截至今年 6 月，特斯拉雇佣了大约 12 万名员工（包括正式员工和临时工）。

下面具体来看。

第一，先从公司内部来看。

首先，Business Insider 分析了大约 13,000 名全职、有薪、美国本土员工的平均基本工资（年薪），这些员工分属特斯拉的各个业务部门（如工程、制造或数据管理），而且排除了无法准确计算平均年薪的小时工。

可以看出，这些员工的基本工资中位数（年薪）大多在 10 万美元和 15 万美元之间。

接下来，Business Insider 进一步将数据细分，并查看特斯拉管理岗（全职、美国本土员工、有薪且手下至少有五名员工）的基本工资情况。

结果显示，包括工程总监和在特斯拉服务中心维修车辆的经理在内，这些人的基本工资中位数（年薪）从大约 35,000 美元到 324,000 美元不等。

而且据 9 位现任和前员工透露，自 2021 年 12 月以来，特斯拉的薪酬结构基本保持不变。

换句话说，虽然上述数据看起来老旧，但特斯拉目前仍在延续这些薪酬方案。

不过，只看内部情况，我们可能无法直观感受特斯拉的 “低底薪”。

别急，Business Insider 还另外使用了来自证券交易委员会的数据，将特斯拉的基本工资与传统汽车制造商以及市值最大的六家科技公司进行了比较。

可以看出，除了亚马逊，特斯拉均处于落后地位。

而且我们知道，像亚马逊和苹果这样的公司，它们还拥有庞大的仓库劳动力和零售劳动力，这些因素也会影响公司的平均工资。

因此，一个基本情况浮出水面：

特斯拉的基本工资通常低于竞争对手

那么，接下来的问题是：员工为什么愿意接受低底薪呢？

最大原因还是在于股票。

9 位现任和前工程师及销售人员表示，特斯拉的股票授予计划使得他们更容易接受较低的底薪。

据悉，过去 5 年，特斯拉的股价飙升超过 1000%；而今年，虽然特斯拉股价经历了显著波动（4 月中旬跌至年初价格的 44%），但在川普成功竞选后，特斯拉收获重大利好，其股价至今累计上涨近 30%。

so，又有多少员工能享受到特斯拉的股票奖励呢？

据内部文件显示，2020 年和 2021 年，有 44 名美国本土员工获得了价值超过 100 万美元的股票。

为了了解哪些员工更有可能获得股票奖励，Business Insider 根据职位类别对股票奖励进行了拆分。

结果显示，大多数工程师收到的股票奖励超过 25,000 美元。（股票的价值基于授予时的股价，但会根据特斯拉的股价变动而变化）

不过需要注意的是，特斯拉将限制性股票单位（RSUs）作为薪酬结构中的主要组成部分，约占薪资发放的 75%。

解释一下，RSUs 指授予时并不立即转化为实际的股票，而是在一定时间锁定期后，以公司股票的形式提供给员工。

换句话说，员工在满足特定条件（如服务年限或公司业绩目标）后才能获得 RSUs 股票。

同时，特斯拉将非合格股票期权（NQSOs） 作为基于业绩的薪酬的一部分，占薪资发放的 21%。

最终，仅有 4% 的员工通过激励股票期权（ISOs） 获得股票，且通常授予高管和其他高级员工。

而对于这一部分，内部文件显示，特斯拉高管中，除一名未列出持股数量的员工外，其余人收到的股票价值在 95 万美元至 2000 万美元之间。

除了股票，另一大原因在于特斯拉的公司形象。

按照招聘公司 Stanton Chase 一位总监的说法：

它包含一个以使命为导向的元素…… 这些人正在努力实现地球的脱碳。

更不必说，还有 CEO 马斯克这位顶流的卖力宣传（doge）：

我们给每个人股票期权，我们让许多只是在工作一线的人——甚至不知道股票是什么的人——变成了百万富翁。

马斯克 560 亿美元天价薪酬案将于年底见分晓

那么，老马本人在特斯拉的薪酬水平如何呢？

事实上，“马斯克 560 亿美元天价薪酬案” 一直引人关注：

2018 年，特斯拉为马斯克制定了一项为期 10 年的激励计划，方案核心是通过股票期权的方式，将马斯克的个人利益与公司的市值和业绩紧密绑定。

简单说，一旦老马能完成 KPI，他将累计获得特斯拉 12% 的股票期权作为奖励，总价值约为 560 亿美元，这一方案也被外媒认为是美国有史以来规模最大的高管薪酬方案。

当然了，当时来看公司定的 KPI 非常难，结果没想到后来特斯拉一路起飞，市值大涨（目前已来到 1.12 万亿美元）。

这下就有股东跳出来，觉得不公平了。

2022 年，特斯拉的部分股东将马斯克告上法庭，称他将大部分精力花在 SpaceX 等其他公司上，同时利用其对公司及董事会的控制敲定了长期薪酬计划，因此希望废除该方案。

紧接着，特拉华州的法官便以 “对股东不公平” 为由，宣布马斯克的长期薪酬方案无效。

面对这一判决，老马一怒之下宣称将特斯拉的注册地从特拉华州迁至得克萨斯州。（后来确实迁了）

并进行了上诉。

而最终结果，将在今年年底前得到裁决。

就在上周四，负责审理此案的特拉华州衡平法院大法官凯瑟琳・麦考密克（Kathaleen McCormick）表示，她将在 2024 年年底前作出最终决定。

不过，尽管之前的法院判决不利于老马，但特斯拉股东在 2024 年 6 月 13 日的年度股东大会上，已经以较大优势批准了这一薪酬方案。

参考链接：

x.com/BusinessIns…

— 完 —

23 年 11 月末，拼多多市值超过了阿里。我想写一篇《百亿补贴为什么用 H5》，没有动笔；24 年新年，我想写一篇《新的一年，H5 会如何发展》，也没有动笔。

眼看着灵感烂在手里，我决定把两篇文章合为一篇，与你分享。提前说明，我并非百亿补贴的开发人员，本文的内容是我的推理。

拳打 H5，脚踢小程序。我是「小霖家的混江龙」，关注我，带你了解更多实用的 H5、小程序武学。

我的证据

在 Android 开发者模式下，开启显示布局边界，你可以看到「百亿补贴」是一个完整大框，这说明「百亿补贴」在 App 内是 H5。拷贝分享链接，在浏览器打开，可以看到资源中有 React，说明「百亿补贴」技术栈是 React。

不只是拼多多，利用同样的方法，你可以发现京东、淘宝的「百亿补贴」技术栈也是 H5。

那么，为什么电商巨头会选择做「百亿补贴」时会选择 H5 呢？

我的推理逻辑

解答问题前，我先说明下推理逻辑。巨头可能选择 H5 的原因千千万万，但最有说服力的原因，肯定具有排他性。

什么是排他性？

举个例子，成功人物为什么成功，如果我回答「成功人士会喝水」，你肯定不满意。如果我回答「成功人士坚持不懈」，你会更满意一些。喝水分明是成功人士成功的原因，不喝水人会渴死，没办法成功。你为什么对这个答案不满意呢？

因为「喝水」不具备排他性，普通人也会喝水；而「坚持不懈」比「喝水」更具排他性，大部分普通人没有这个特质。

按照排他性，我需要说明百亿补贴只有 H5 能干，其他技术栈不能干，这样才有说服力。

百亿补贴为什么用 H5？

现在进入正题。粗略来看，大前端的技术栈分为 Native 和跨平台两大类。前者包括 3 小类，分别是 Android、iOS、纯血鸿蒙；后者也包括 3 小类，分别是基于 Web 的方案、基于系统 UI 框架的方案（比如 React Native）、自己绘制 UI 的方案（比如 Flutter）。

其中，基于 Web 的方案，又可以细分为纯 H5 和 DSL 转 H5（比如 Taro）。

graph TB;

大前端 --> Native;

Native --> Android;

Native --> iOS;

Native --> 纯血鸿蒙;

大前端 --> 跨平台;

跨平台 --> 基于Web的方案;

跨平台 --> 基于系统UI框架的方案;

跨平台 --> 自己绘制UI的方案;

基于Web的方案 --> H5;

基于Web的方案 --> DSL转H5;

我们需要排除 H5 外的其他方案。

原因一：百亿补贴迭代频繁

百亿补贴的业务形式，是一个常住 H5，搭配上多个流动 H5。（「常住」和「流动」是我借鉴「常住人口」和「流动人口」造的词）

• 常住 H5 链接保持不变，方便用户二次访问。


• 流动 H5 链接位于常住 H5 的不同位置，方便分发用户流量。

具体到拼多多，它至少有 3 个流量的分发点，可点击的头图、列表上方的活动模块和侧边栏，3 者可以投放不同链接。下图分别投放了 3.8 女神节链接、新人链接和品牌链接：

可以想到，几乎每到一个节日、每换一个品牌，「百亿补贴」就需要更新一次。

这样频繁的迭代，框架必须满足快速开发、快速部署、一次开发多端复用条件。因此可以排除掉 Native 技术栈，留下动态化技术栈。

原因二：百亿补贴需要投放小程序和其他 App

如图所示，你可以在微信上搜索拼多多，可以看到百亿补贴不仅在 App 上投放，还在微信小程序里投放。

此时我们几乎可以排除掉 React Native 和 Flutter 技术栈。因为社区虽然有方案让 React Native、Flutter 适配小程序，但并不成熟，不适合用到生产项目中。

此外，如果你在抖音、B 站和小红书搜索百亿补贴，你可以看到百亿补贴在这些 App 上都有投放广告。

这点可以完全排除 React Native 和 Flutter 技术栈。据我所知，目前没有主流 App，会愿意让第三方在自己的 App 里运行 React Native 和 Flutter。

原因三：百亿补贴核心流量在 APP

现在只剩下了基于 Web 的 2 种技术方案，也就是 H5 和 DSL 转出来的 H5（比如 Taro）。

百亿补贴的 HTML 结果，更符合原生 H5 的组织结构，而不是 Taro 这种 DSL 转出来的结构。

我对此的解释是，百亿补贴的核心流量在 App。核心流量在 APP 时。投放小程序是锦上添花，把 H5 嵌入到小程序 Webview 就能满足要求，不需要卷性能。

如果百亿补贴的核心流量在小程序，那么大概率就会使用 DSL 框架，转出来小程序代码和 H5 代码。

综上所述，迭代频繁、需要投放小程序和其他 App，核心流量在 App，是百亿补贴选择 H5 的 3 个主要原因。

H5 未来会如何发展

知道百亿补贴选择 H5 的 3 个原因后，我们可以得到结论，如果 3 个前提不变，未来很长一段时间内，H5 依然是电商活动的主流方案。

不过，主流方案并不意味着一成不变，我认为未来 H5 会有 2 个发展趋势：

趋势一：离线包、SSR 比例增加

H5 有诸多优势的同时，也有着先天缺陷，那就是下载成功率低、容易白屏。

解决这个问题，社区主流的两个方案是离线包和 SSR。

离线包可以将网页的静态资源（如 HTML、CSS、JS、图片等）缓存到本地，用户访问 H5 页面时，可以直接读取本地的离线资源，从而提升页面的加载速度。阿里云和腾讯云等云服务商都有自己的离线包方案。

SSR 即服务器端渲染，它可以减少白屏时间，让用户更快看到页面。传统的 CSR（客户端渲染）初始时只渲染空白的 HTML 框架，然后再去获取数据并渲染内容。而在 SSR 中，服务器在接收到客户端请求时，会在服务器端利用数据和模板生成完整的 HTML 页面，再把页面发送给客户端浏览器。

不难想到，业务陷入瓶颈后，企业开始看中性能，大部分前端开发者都会来卷一卷离线包、 SSR，它们的比例会进一步增加。

趋势二：定制化要求苛刻

近年 C 端市场增长缓慢，企业重点从扩张新客，变成留存老客。

这个背景下，定制化要求变得越来越苛刻，目的是让用户区分各种活动。用互联网黑话来说，就是「建立用户心智」。

下面是拼多多、京东、淘宝、12306、中国移动和招商银行的活动 H5，尽管它们结构都差不多，但长得是千奇百怪。

我估计未来，电商活动 H5 的外观将变得极具个性，各位前端同学可以在卷卷 CSS、动效方向。

总结

本文介绍了我认为「百亿补贴」会选用 H5 的 3 大原因：

• 百亿补贴迭代频繁


• 百亿补贴需要投放小程序、其他 App


• 百亿补贴核心流量是自己的 App

以及我 H5 未来发展趋势的 2 个预测：

• 离线包、SSR 比例增加


• 定制化要求苛刻

拳打 H5，脚踢小程序。我是「小霖家的混江龙」，关注我，带你了解更多实用的 H5、小程序武学。

12月今年最后一个月了,相逢的人已走散, Q4的OKR已经定型了, 很平淡无味, 闲的无聊 提前写个年终总结吧。00年, 再过一个月就25岁了，一个人来杭州也已经3年多了 每天有时间写一点 周六了 写到凌晨1点了 看直播/打麻将到凌晨5点才睡。 去年也写了一篇 2023年总结:日渐清醒，得失随意 //TODO DDL 应该是在月中完结吧。

工作

我大概回忆一下 我今年在工作上应该干了这些事情吧

• 自己申请换项目组,日常维护新品App版本迭代 2周一个版本 多个app同时进行


• 完成所有App 苹果服务器接口Storekit2 升级上线


• Google 支付/订阅 SDK 重构原生API调用代码


• RocketMQ优化多数据中心用户数据同步/webhook/推送


• RocketMQ-Exporter 搭建 监控相关性能指标


• SSE+服务器GRPC流式 推送消息


• us机器 内存优化 切换到jemalloc内存分配器


• RocketMQ 单机 升级为Dledger 集群模式 Q4 任务

从22年3月毕业到现在 再度过一个季度 在这家公司呆三年了(3年之约)，整个过程就是升级打怪，看着人来人往 合作的人 离职一个又来一个, 每个季度干着重复的工作,技术框架还是那一套 SpringBoot+GRPC 经过一年熟悉后 就觉得没有新鲜感了, C端产品App 在用户基数不大情况下 基本的重心在客户端的ui/操作体验上 后端嘛就是一个数据存储的地方 存取能有什么难度 大家都会，每个季度任务就是 基本的版本迭代+一些服务器内部的优化，如果你想要拿到高的绩效 那干这点是远远不够的, 基本规则在无告警的版本迭代下 做一些对团队贡献大 有价值的事情 拿A/季度优秀员工，三年期间升了两次小级别 p5-1->p5-2->p5-3 还是一个初级开发 今年估计也悬了 没有两次A的绩效 跨段位升没机会,没有owner过项目, 和旁边人朋友/同学工作/升职对比下 只能说自己像个废物 躺的太平了 每天965的生活 除了偶尔上线 需要加班留下来 大家都不加班 也没有那么多活需要加班来干的活。

• 你说工作上需求迭代的实现难度吧，喂给ChatGPT 技术方案/数据库表都给你生成好了 微改代码就行了，各种数据脚本go/python也是利用AI，主要难点还是在需求评审/需求理解/产品测试开发的沟通上面吧 组内的高级/资深开发 看了下他们的OKR也没有什么特别的 对自己也没有参考价值。CodeReview 去年还是有的 到今年直接提pr和leader讲下 也不会看的直接合进去了 组内其他人也是这样 他们的代码你也可以看 但你看的时候基本都是merged, 还有一个点 组内的信息同步很差 只有你问了xxx 原来xx项目做过。相对于22/23年和客户端那边对接起来很累,身份位置放的很低, 沟通下来都是无效沟通 他不理解你的想法 不想听你的方案，今年换了一个项目组 合作起来比较顺利，你的想法都会被接受 还会给你优化的意见 整体的体验还是不错的。


• 在工作中，除了技术能力，还需要考验为人处事的能力，获取信息和与人打交道的能力, 这点我解决不了 公司没有同龄人 他们基本都有自己的家庭 找个抽烟的人都没有 今年午饭也没有和他们吃过 还是住在旁边小区 公司午休一刻呆不下去,回家坐着都比在公司舒服，我现在基本是只谈工作不谈生活,可能他们都有自己的圈子/群吧, 其实很多时候都不想干了 每天定点上班下班的生活真的很无趣和累，上班成天坐在那里，一句话都憋不出来，是个人都会崩溃的，再看看自己的实力 也很难找到一份比现在965更满意的工作了,💰的话在杭州能活 先🐶着吧 看看base能不能提一下 拿个年终奖。
  
  

  
  

  在Q2/Q3其实是收获最大的 对个人成长的点 (版本迭代真拿不出手)

  
  

  
  
  
  
  • (Q2)RocketMQ业务接入优化 2024 Q2 OKR 完结 RocketMQ优化Webhook处理等业务场景 (已上线)最近需要使用MQ优化相关业务 - 掘金
  
  
  • (Q1/Q2)Apple订阅 storeki2升级 文档阅读/资料收集理解/官方库阅读参与简单的贡献Apple Storekit2 服务器API升级 (Apple开源内购库) (已上线)在今年Q1季度 组内进行服务器新技 - 掘金。
  
  
  • (Q3)内存问题排查 Java服务 堆内-> 堆外-> Glibc内存 异常排查 最佳实践, 形成自己的方法论💥-线上环境临时解决方案: 先重 - 掘金
  
  
  • (Q2)Google支付订阅 跨境支付 Google Pay(购买/订阅) SDK优化重构 原生API-V1/V2代码 (已上线)最近转新品组了,没有 - 掘金
  
  
  
  

生活

去年立的flag 也是一腔鸡血

• 软考 系统架构师 +软著 拿到杭州E类人才


• 健身/减肥


• 骑车 vlog (杭州景点全部骑完 影石360 ace pro)


• 摄影佳能rp/视频剪辑学习


• 日语/英语学习


• leetcode 上Knight


• 考D驾-照 骑防赛


• 日麻线下雀庄体验 参加各种线上日麻比赛


• ClickHouse hangzhou 线下沙龙


• 掘金bolg 更新 技术日常


• 千岛湖


• 抽烟+喝酒


• B站 直播 日麻

软考 系统架构师+软著 拿到杭州E类人才

• 系统架构师 运气挺好的 去年第一次考没过 今年5月份第二次考 压着分数线通过 (52/46/45) E类通过之后 把应届生租房补贴5000/半年 改为2500/月 相当于每个月的租房不要钱了,共有产权房子不考虑 没有在杭州落户的想法, 具体的就不多说 看这篇blog总结都有了 想了解流程可以私聊我解答 (杭州e类人才) 软考-系统架构师 (52/46/45)—浙江树人学院/浙江工业大学2024/05/25 软考-系统架构 - 掘金

骑车 vlog (杭州景点全部骑完 影石360 ace pro)

• 一个人走走停停 骑过很多地方, 最多的还是钱塘江到彭浦大桥->复兴大桥路线 不知道骑了多少遍，西湖/湘湖/九溪这些地方都去过了，车子是青春款只在线上售卖 后期毛病很多 链条蹭盘/刹车无效 自己不知道维修了多少次，最近这两个月很少骑了，放在地下室发霉 后续准备卖掉了这车 还买了那么多骑行装备，买的insta 360 ace pro 3000多降价到2k左右 当时在大疆和insta中选择了好久 最后还是踩坑了 实体店体验了大疆action 画质比insta360好太多了，有必要考虑再买一台大疆action5了, 一个人的骑行之路也该结束了 开始新的玩具 仿赛摩托车 芜湖起飞。

健身/减肥

• 怎么说呢 三天打鱼两天晒网的行动 体脂没什么变化,饮食更不会控制 每天外卖外卖外卖, Q1/Q2两个季度挺积极的 基本工作日晚上有时间就去健身房 周末白天也去, 在健身房的时间也能让自身感受到轻松, 这个小区有个百姓健身房在地下室 24小时 刷脸进去 设备齐全 没什么人 每个季度的话300块RMB, 我主要后面可能没有看到短期效果+活着很累 有一段时间没有去了, 偶尔下楼抽烟去逛逛, 最后得到的只是自己的一个心里安慰，没有合理的计划和坚持下去的心 我现在已经懒连手表都不戴了。

摄影佳能rp/视频剪辑学习

• 怎么说呢 周末放假就是宅 已经吃灰了 除了9月1号 拿到免费的门票 杭州植物园专门去了一趟拍彼岸花，其他时间不出手。视频剪辑也是一坨屎 目前就用剪映弄一些雀魂麻将抽角色的视频，后续还是想学一下专业的剪辑工具 这个也看需求吧。

考D驾-照 骑防赛

• 为什么要去骑摩托车，主要是中秋节回家一趟，隔壁邻居已经买了一辆机车, 当时他让我试试 我没试 后面就一直关注摩托车这个事 抖音一直给我推视频。才有了考D驾-照驾-照,周末练半天,工作日考试半天就好了,4科联考 比C1驾-照周期短 速度快，驾-照到手后面周末直接找附近最近的租车平台试试水，萧山那边的之江路/美女坝路险,本田500 手震麻了 1个小时 干了100公里, 最后一个半小时就还车了 跑了150km，整体的体验感是非常好的，无论是去骑车的路上 还是过程中 都能够忘记生活/工作上的烦心事，最尴尬的是红绿灯起步熄火了，后续周末继续出行租车，找个有缘人一起。

日麻线上比赛/线下雀庄体验

• 每天下班就是点外卖 开始打麻将，水各种日麻群 打友人赛/团队赛，每天晚上达到2 3点 菜就爱多玩 和群友打比赛 对个人的实力也是有了认知 学习别人的打法 从野猪冲击 也慢慢在意铳率了，前一天打完线上比赛, 这个月周日也是马上跟着一个大哥去杭州线下的湖滨牌浪屋体验完线下日麻，今年干的最多的事情就是打麻将，下班除了打麻将还是打麻将。

leetcode 上Knight

• 基本上是原地没动，比赛一场没打，为什么要刷？为了什么？能带给自己什么收益？呆在舒适圈里久了 不想出去，算法也是提不上一点兴趣了 估计只有到时候找工作之前才会接触到了 其实也制定了计划 刷灵神的清单 还是自己懒吧 动不起来，最后一个月 要不开始发力？算了 打麻将吧。

其他

• 今年参加了ClickHouse hangzhou 线下沙龙, 虽然没有使用过clickhouse这款db,去听听别人公司的落地方案,去阿里园区转了转。


• 掘金bolg 更新 技术日常 主要是参加创作者训练营吧 锻炼一点自己的文本输出能力，总结的过程中也能知道问题的本质是什么，解决的过程/方式以及别人是怎么解决的，收获还是有的。


• 和同学五一去了千岛湖一趟 结局不是很好 过程体验不错。


• 在日语/英语学习上面投入的时间 ，无论是日常工作上英语的使用 还是各种文档阅读能力，在逛各种项目/看论文的时候 就能体现出来, 日语兴趣的话 纯粹是打日麻和旁边的日麻群友影响/看番剧而来的 每天用多邻国完成任务,买了4本书《标准日语》+《大家的日语》,在B站上看圆圆姐的视频教程【京大博士带你学日语】新标日初级上册全新课程！必能学会！超详细讲解！轻松搞定日语学习！（课本内容完结！）哔哩哔哩bilibili。


• 抽烟+喝酒已经是家常便饭一样的事情了 上半年是沉迷于喝酒消愁 下半年就抽烟打发时间，每天下班又不知道干什么 找点打发时间的乐趣，天天熬夜看直播 打麻将 2点3点睡觉已经是常态了,每天晚上看陈伯/刘刘江直播 带来的乐趣, 工作日每天基本8点50的闹钟吵醒，拖着尸体去上班，周末基本睡到自然醒中午/下午 除了楼上楼下装修 直接被震醒了。


• 这样一回想2024年还是干了很多无意义的事。

虽然只有15篇文章 文章的阅读数也有3w 其实数据对我来说也是无所谓的，主要还是方便以后回忆吧,分享出去 可能有人和你遇到相同问题,带给解决思路 明年要不要继续写？还是把时间投入在别的地方？都是未知

个人技术学习

• AI 知识点拓展学习


• 部门分享


• 推荐系统&&RAG


• 前端


• 第三方支付订阅


• 分布式论文学习总结


• 《计算机网络-自顶向下方法第七版》


• 《CSAPP 深入理解计算机系统(第3版)》


• 《设计数据密集型应用》


• 技术拓展/深挖(RocketMq源码/go-redis源码/Netty源码/Mycat2源码)

看个锤子 没心思学习 下半年天天打麻将

• AI的话主要是身边环境影响，自己的项目组一直在利用AI做业务，从2023年开始 公司一直对接的是openai 提供的chat 能力，公司内部举行了ai相关的比赛，业务想要搭建自己的知识库和RAG搜索 主要是用AWS上的Redrock封装好的知识库 ，项目组一些APP一直在使用微软的TTS进行语言转音频的操作，部门,组内和项目组 大家一直在内部分享和ai相关的知识点，产品会使用cursor提前将需求写完 自己进部署上线。


• 跟着项目组业务走，最近在支付方面的功能进行了改动，对于web网页上的购买消耗型商品/续费型商品的购买，主要对接的平台是Stripe信用卡visa支付 和paypal支付。appstore 支付的话 最近负责组内storekit2 服务器接口升级重构代码 用的官方开源库 github.com/apple/app-s…。Alipay 支付宝和Wechat 对于中国环境的用户提供的一种支付方式, 代码很粗糙 很久没有相关需求迭代了。Google 支付 来的两年时间接触的业务还是比较少，整个支付逻辑和appstore是一致的，有时间把代码逻辑和官方文档进行学习总结一下。


• 现在只会个后端远远不够了，替代性太强了，除非是中大厂那样细分工作岗位/业务内容，如果你有自己的想法 后续做一些自己的产品/独立开发者 一人一公司 全栈只能是无敌路。我这边对前端也是零零散散的学习 没有整个的大项目使用，github.com/lobehub/lob… 前端React开源项目学习 TSX+TS 认知冲击 原来前端已经进化到这个地步了，没有html+css全部被封装了，我们内部的数据平台还是原生html+django搭建的，每次加新功能ai生成的代码 能跑就行。

在下半年 觉得基础知识很重要 技术跟着业务走 没必要太追求新技术 就往计算机基础知识+算法+基础论文投入时间

• 中间一段也是将《计算机网络-自顶向下方法第七版》 计算机网络-自顶向下方法第七版 · 语雀和《CSAPP 深入理解计算机系统(第3版)》CSAPP 深入理解计算机系统(第3版) · 语雀 细看了一遍 , 书籍买了很多 都是吃灰的 没有去年那个干劲了。


• 看论文 可以学习技术理论的基础 还有重要一点是学英语, 主要是看一个up在学习这方面的知识点 就跟着看了一段时间，谷歌三大剑客 GFS/MapReduce/BigTable 看论文不看分布式论文 就像四大名著不读红楼梦，唐诗不读李杜，吃泡面不加调料包 Raft/Paxos 那一块真的一看就是几天 深陷进去 每次看硬核课堂的文章 Raft -论文导读 与 ETCD源码解读。


• 参与开源项目任务也没有达成 往里面投入的时间太少了，最后下班/上班有时间 也没深入去学习业务上用到的组件源码, 最近的话 负责RocketMQ集群Dledger搭建/MQ优化业务 ,RocketMQ-exporter+herzbeat+prometheus监控指标, 遇到的异常信息太多 每次都是网上找案例解决，上班利用ai 深入在看看RocketMQ源码吧github.com/apache/rock… 边看边总结RocketMQ 源码 5.2.0 - 生产者 Producer

杂学杂记

• 中间又去了解了下机器学习/深度学习相关的内容，又看了大数据开发Spark/Flink等等组件，前端看了React+TS相关知识点/demo/Flutter开源项目, 背单词的时候发现墨墨背单词是node+ts写的,有个软考刷题的app是Flutter写的 作者是独立开发者 最近公司客户端也在用flutter开发新品app 代码我这边也是有权限的, 也去了解了一下技术栈，中间又有一段时间去了解了下亚马逊运营的工作，也看了AIGC/agent/图像/音频/向量数据库milvus等相关的方向 RAG 知识库增强式搜索，在推荐系统领域 推荐 广告 搜索 也花了一段时间去了解/学习 因为我们这边没有算法工程师 推荐功能很粗糙 没有用户画像的概念,有一段时间被cloudwego社区的kitex/hertz吸引 当时想去上海站的线下沙龙 可惜正好那周软考考试, 因为有个麻将牌谱工具是rust写的 github.com/Equim-chan/… 所以又去了解了一下rust，我记得有段时间投入在系统设计/业务场景思考方向(IM/Feed流/本地消息表/分布式限流等等), 都是一点毛皮，Q2服务器服务的内存问题 每天上班想下班想 把互联网的文章都翻烂了 从堆内到堆外到Glibc 询问各种技术大佬场景异常 组内成员给不了你任何帮助 全靠自己，所有的东西没有实质性的收获 也没有在项目中使用到 过了一段时间基本全忘了(不做笔记/总结) 。

现在往回看 在技术学习的时长投入的太少了 对技术没有追求 什么都知道一点 什么都不精通 啥也没学会 离开了Java/Spring 我还能干什么，我能干的 找个会使用AI的人来都能干，天天熬夜 不知道熬的是什么 碌碌无为。最近一年 代码写的很少了 基本靠ai生成 微改/设计一下 写的自己也看不懂了。生活/工作迷茫 现在都是活一天是一天, 想回家。

后续规划 待定

• 英语/日语


• 独立开发者

打麻将去咯 一起玩雀魂的可以加我

今天研究了一下 pnpm 的机制，发现它确实很强大，甚至可以说对 yarn 和 npm 形成了降维打击

我们从包管理工具的发展历史，一起看下到底好在哪里？

npm2

在 npm 3.0 版本之前，项目的 node_modules 会呈现出嵌套结构，也就是说，我安装的依赖、依赖的依赖、依赖的依赖的依赖...，都是递归嵌套的

node_modules

├─ express

│  ├─ index.js

│  ├─ package.json

│  └─ node_modules

│     ├─ accepts

│     │  ├─ index.js

│     │  ├─ package.json

│     │  └─ node_modules

│     │     ├─ mime-types

|     |     |   └─ node_modules

|     |     |      └─ mime-db

|     │     └─ negotiator

│     ├─ array-flatten

│ 		├─ ...

│  		└─ ...

└─ A

   ├─ index.js

   ├─ package.json

   └─ node_modules

      └─ accepts

         ├─ index.js

         ├─ package.json

         └─ node_modules

            ├─ mime-types

            |   └─ node_modules

            |      └─ mime-db

            └─ negotiator

设计缺陷

这种嵌套依赖树的设计确实存在几个严重的问题

当时 npm 还没解决这些问题， 社区便推出了新的解决方案 ，就是 yarn。 它引入了一种新的依赖管理方式——扁平化依赖。

看到 yarn 的成功，npm 在 3.0 版本中也引入了类似的扁平化依赖结构

yarn

yarn 的主要改进之一就是通过扁平化依赖结构来解决嵌套依赖树的问题

具体来说铺平，yarn 尽量将所有依赖包安装在项目的顶层 node_modules 目录下，而不是嵌套在各自的 node_modules 目录中。

这样一来，减少了目录的深度，避免了路径过长的问题 ，也尽可能避免了依赖被多次重复安装的问题

我们可以在 yarn-example 看到整个目录，全部铺平在了顶层 node_modules 目录下，展开下面的包大部分是没有二层 node_modules 的

然而，有些依赖包还是会在自己的目录下有一个 node_modules 文件夹，出现嵌套的情况，例如 yarn-example 下的http-errors 依赖包就有自己的 node_modules，原因是：

当一个项目的多个依赖包需要同一个库的不同版本时，yarn 只能将一个版本的库提升到顶层 node_modules 目录中。 对于需要这个库其他版本的依赖，yarn 仍然需要在这些依赖包的目录下创建一个嵌套的 node_modules 来存放不同版本的包

比如，包 A 依赖于 lodash@4.0.0，而包 B 依赖于 lodash@3.0.0。由于这两个版本的 lodash 不能合并，yarn 会将 lodash@4.0.0 提升到顶层 node_modules，而 lodash@3.0.0 则被嵌套在包 B 的 node_modules 目录下。

幽灵依赖

虽然 yarn 和 npm 都采用了扁平化的方案来解决依赖嵌套的问题，但这种方案本身也有一些缺陷，其中幽灵依赖是一个主要问题。

幽灵依赖，也就是你明明没有在 package.json 文件中声明的依赖项，但在项目代码里却可以 require 进来
这个也很容易理解，因为依赖的依赖被扁平化安装在顶层 node_modules 中，所以我们能访问到依赖的依赖

但是这样是有隐患的，因为没有显式依赖，未来某个时候这些包可能会因为某些原因消失（例如新版本库不再引用这个包了，然后我们更新了库），就会引发代码运行错误

浪费磁盘空间

而且还有一个问题，就是上面提到的依赖包有多个版本的时候，只会提升一个，那其余版本的包不还是复制了很多次么，依然有浪费磁盘空间的问题

那社区有没有解决这俩问题的思路呢？ pnpm 就是其中最成功的一个

pnpm

pnpm 通过全局存储和符号链接机制从根源上解决了依赖重复安装和路径长度问题，同时也避免了扁平化依赖结构带来的幽灵依赖问题
pnpm 的优势概括来说就是“快、准、狠”：

• 快：安装速度快


• 准：安装过的依赖会准确复用缓存，甚至包版本升级带来的变化都只 diff，绝不浪费一点空间


• 狠：直接废掉了幽灵依赖

执行 npm add express，我们可以在 pnpm-example 看到整个目录，由于只安装了 express，那 node_modules 下就只有 express

那么所有的（次级）依赖去哪了呢？ binggo，在node_modules/.pnpm/目录下，.pnpm/ 以平铺的形式储存着所有的包

三层寻址

软硬链接

也就是说，所有的依赖都是从全局 store 硬连接到了 node_modules/.pnpm 下，然后之间通过软链接来相互依赖。

那么，这里的软连接、硬链接到底是什么东西？

硬链接是指向磁盘上原始文件所在的同一位置 （直接指向相同的数据块）

软连接可以理解为新建一个文件，它包含一个指向另一个文件或目录的路径 （指向目标路径）

总结

npm2 的嵌套结构： 每个依赖项都会有自己的 node_modules 目录，导致了依赖被重复安装，严重浪费了磁盘空间💣；在依赖层级比较深的项目中，甚至会超出 windows 系统的文件路径长度💣

npm3+ 和 Yarn 的扁平化策略： 尽量将所有依赖包安装在项目的顶层 node_modules 目录下，解决了 npm2 嵌套依赖的问题。但是该方案有一个重大缺陷就是“幽灵依赖”💣；而且依赖包有多个版本时，只会提升一个，那其余版本依然会被重复安装，还是有浪费磁盘空间的问题💣

pnpm全局存储和符号链接机制： 结合软硬链和三层寻址，解决了依赖被重复安装的问题，更加变态的是，同一盘符下的不同项目都可以共用一个全局 pnpm store。节省了磁盘空间，并且根本不存在“幽灵依赖”，安装速度还贼快💪💪💪

唯有读书和赚钱，才是一个人最好的修行，前者使人不惑，后者使人不屈！

世界上任何一种能力，只要你迫切想学，真心想学，无论身边有没有人教你，你都可以想办法找人，找资源，学会自我学习，自我教育才是最好的教育。

事实上，不管学历怎么样，你一生中绝大部分的东西都是自学的。

一定要聚焦到自己想做的事情上，并且在头脑里想象自己正在做，而且做得越来越好。

当你的思想，注意力，意识集中在某一个领域，某一件事，某一个行业，某些人身上时，与此相关的大量人，事，物全会被你吸引过来。

对于成年人来说，每个人的时间都是有限的，2025，千万不要再给自己树立太多的目标。

百门通不如一门精，一个人终其一生不如专注一件事，做到极致，朝着一个既定的方向不懈努力的人，几乎都成为社会各界的成功人士。

如果你能只深挖一个点，把事情做到极致，只要肯下功夫，在六个月内你能掌握任何一门学问。

但这不是让你去挑战别人的天赋，深思读书4个月能涨粉10万，只要肯下功夫，你也可以。

因为每门学问所包含的信息量大约是五万个信息块，一个人一分半钟可以记一个信息块。那么五万个大约需要一千小时，以每星期学习40小时计算。

要掌握一门学问，大约需要六个月。

反过来，如果不能专注聚焦于一件事，经不住其他事和人的干扰和诱惑，于是什么都做不精，做不透。

知识是无限的，专业能力有无数种细分领域，行业的经验无穷无尽。

每个都了解一点表面信息，一辈子也不会有成就，每一个专业能力，每一个细分领域赛道，每一个行业都有挖不尽的信息、知识、理论、经验，要用专注和时间去钻研一件事，最容易成为专家有结果的人。

很多人忙碌一生，却不明白真正的优先级是什么！

余认为：

家庭的核心是经济，而不是感情。

职场的准则是价值，而不是努力。

社交的关键是利益互换，而不是单纯的友谊。

教育的目的是培养能力，而不是追求分数。

健康的要素是自律，而不是医疗。

爱情的基础是理解，而不是激情。

创业的要点是市场需求，而不是个人喜好。

投资的原则是风险控制，而不是高回报。

人生的追求是幸福，而不是成功。

养老的保障是提前规划，而不是依赖子女。

成长的动力是反思，而不是经历。

学习的意义是应用，而不是积累知识。

旅行的收获是见识，而不是拍照打卡。

婚姻的支撑是责任，而不是浪漫。

生活的智慧是知足，而不是无尽的欲望。 

与君共勉！愿2025活成理想的自己！

前言

周饼伦在街头摊煎饼，摊后人群熙熙攘攘。他忙得不可开交，既要记住面前小哥要加的培根，又要记住身后奶奶要加的生菜，这时又来了个小妹妹，点的煎饼既要培根又要腊肠。他把鸡蛋打进煎饼后，竟突然忘了前面光头大叔要加的料，是火腿还是鸡柳？一时记不清，好像是火腿，对。然而当把煎饼交给大叔，大叔却怒了，说要的是鸡柳。😡

这可咋办？周饼伦赶忙道歉，大叔却语重心长地说：“试试用小程序云开发吧！最近的数据模型新功能好用得很！” 周饼伦亮出祖传手艺，边摊煎饼边开发小程序，把新开发的小程序点餐页面二维码贴在摊前。从此再没出过错，终于能安心摊煎饼啦！

设计思路

客户扫摊子上面贴的二维码后，会进入点餐页面，在选好要加的配料之后，点击确定就可以点餐，随后，即可在云后台上看到食客提交的数据

实现过程

周饼伦就把当前摊位的主食、配菜，以及各自相应的价格贴在了摊位上，也要把食客的点餐内容记在脑里或者用笔写在纸上。

点餐页要实现两个功能：1.展示当前摊位有的主食、配菜、口味 2.提交订单到周饼伦的订单页面。

煎饼摊子主食（staple food）目前只有摊饼、青菜饼，主食下面有的配菜（side dish），有鸡柳、生菜、鸡蛋、火腿、腊肠。

同理，数据库里面也需要呈现相应的结构。

数据表的实现

数据模型现在提供了一种便捷的能力来，可以快速创建一套可用的数据表来记录摊煎饼的相关数据。

在云后台中新增了一个基于 MySQL 的数据模型，数据模型相当于一张纸，可以在上面记录任何想要记录的数据，比如周饼伦摊位的提供的菜品

创建了基于云开发MySQL数据库的主食表，主食表中包含主食名称，主食价格

字段的详细设置如下

现在就实现了记录当前摊子的主食和配菜。还需要一个订单表，来记录用户的点餐数据

配菜的类型是一个数组文本，用来记录配菜的类型，结构如下

接着需要分别设置每个数据模型的权限。在使用小程序查看订单时，也是以用户的身份来读取的，所以，需要配置用户权限，通过页面访问来控制用户能够访问到哪些页面

至此，数据表就已经大功告成！现在完全可以使用三个表来记录当前摊子的菜品、营业情况。

但是，别忘了周饼伦的目的不止于此，为了周饼伦实现早日暴富，当上CEO，所以，还要利用小程序实现一个界面，来给”上帝“们点餐，并且提供各位CEO查看订单

小程序实现过程

一. 初始化 SDK

在云后台的数据管理中的右侧中，可以方便的查询到使用的文档

新建一个基于云开发的小程序，删除不必要的页面，并且按照文档的步骤进行初始化👇

1.按照指引在 miniprogram 目录下初始化 npm 环境并安装 npm 包

请注意，这里需要在 miniprogram 目录下初始化 npm ，不然需要编辑 project.config.json 手动指定 npm 包的位置

在 miniprogram 目录下打开终端

2.初始化当前 npm 并且安装 @cloudbase/wx-cloud-client-sdk npm 包

npm init -y & npm install @cloudbase/wx-cloud-client-sdk --save

3.在小程序中构建 npm

4.在小程序 app.js 中初始化环境

// app.js

App({

  globalData: {

    // 在这里提供全局变量 models 数据模型方法，方便给页面使用

    models: null

  },

  onLaunch: async function () {

    const {

      init

    } = require('@cloudbase/wx-cloud-client-sdk')

    // 指定云开发环境 ID

    wx.cloud.init({

      env: "ju-9g1guvph88886b02",

    });

    const client = init(wx.cloud);

    const models = client.models;

    // 可以取消注释查看效果

    // const { data } = await models.stapleFood.list({

    //   filter: {

    //     where: {}

    //   },

    //   pageSize: 10,

    //   pageNumber: 1,

    //   getCount: true,

    // });

    // console.log('当前的主食数据：');

    // console.log(data.records);

  }

});

二. 下单页面的实现

首先创建一个页面 goods-list 页面作为首页

顾客如果浏览下单页面，那么就需要看到当前可以选择的主食、配菜，还有他们分别的价格。所以首先我们需要把主食、配菜加载进来

// 加载主食

const stapleFood = (await models.stapleFood.list({

  filter: {

    where: {}

  },

  pageSize: 100, // 一次性加载完，

  pageNumber: 1,

  getCount: true,

})).data.records;



// 加载配菜

const sideDish = (await models.sideDish.list({

  filter: {

    where: {}

  },

  pageSize: 100, // 一次性加载完，

  pageNumber: 1,

  getCount: true,

})).data.records;

// pages/goods-list/index.js

Page({

  data: {

    // 总价格

    totalPrize: 0,

    // 选中的主食

    selectedStapleFoodName: '',

    // 选中的配菜

    selectedSideDishName: [],

    // 所有的主食

    stapleFood: [],

    // 所有的配菜

    sideDish: [],

以下是全部的js代码

// pages/goods-list/index.js

Page({

  data: {

    // 总价格

    totalPrize: 0,

    // 选中的主食

    selectedStapleFoodName: '',

    // 选中的配菜

    selectedSideDishName: [],

    // 所有的主食

    stapleFood: [],

    // 所有的配菜

    sideDish: [],

  },



  async onLoad(options) {

    const models = getApp().globalData.models;

    console.log('models', models)



    // 加载主食

    const stapleFood = (await models.stapleFood.list({

      filter: {

        where: {}

      },

      pageSize: 100, // 一次性加载完，

      pageNumber: 1,

      getCount: true,

    })).data.records;



    // 加载配菜

    const sideDish = (await models.sideDish.list({

      filter: {

        where: {}

      },

      pageSize: 100, // 一次性加载完，

      pageNumber: 1,

      getCount: true,

    })).data.records;



    console.log({

      stapleFood,

      sideDish

    });



    this.setData({

      stapleFood: stapleFood,

      sideDish: sideDish

    })

  },



  // 选中主食

  onSelectStapleFood(event) {

    this.setData({

      selectedStapleFoodName: event.currentTarget.dataset.data.name

    });



    this.computeTotalPrize();

  },



  // 选中配菜

  onSelectedSideDish(event) {

    console.log(event);

    // 选中配菜名字

    const sideDishName = event.currentTarget.dataset.data.name;



    // 如果已经选中，则取消选中

    if (this.data.selectedSideDishName.includes(sideDishName)) {

      this.setData({

        selectedSideDishName: this.data.selectedSideDishName.filter((name) => (name !== sideDishName))

      });

    } else {

      // 未选中，则选中

      this.setData({

        selectedSideDishName: this.data.selectedSideDishName.concat(sideDishName)

      });

    }



    this.computeTotalPrize();

  },



  // 重新计算价格

  computeTotalPrize() {

    // 主食价格

    let staplePrize = 0;

    if (this.data.selectedStapleFoodName) {

      staplePrize = this.data.stapleFood.find((staple) => staple.name === this.data.selectedStapleFoodName).prize;

    }



    // 配菜价格

    let sideDish = 0;

    this.data.selectedSideDishName.forEach((sideDishName) => {

      sideDish += this.data.sideDish.find((sideDishItem) => (

        sideDishItem.name === sideDishName

      )).prize;

    });



    // 总价格

    this.setData({

      totalPrize: staplePrize + sideDish

    })

  },



  // 提交

  async onSubmit() {

    // 提示正在加载中

    wx.showLoading({

      title: '正在提交订单',

    });



    const models = getApp().globalData.models;

    const { data } = await models.order.create({

      data: {

          served: false,  // 是否已出餐

          sideDish: this.data.selectedSideDishName,  // 配菜

          stapleFoodName: this.data.selectedStapleFoodName,  // 主食名称

          prize: this.data.totalPrize,  // 订单总价格

        }

    });



    console.log(data);

    wx.hideLoading();

  }

});

接着来实现页面

<!--pages/goods-list/index.wxml-->

<view>

  <view class="title">

    <image src='/asset/pancake.png'></image>

    <text class="title">请选择主食</text>

  </view>



  <!-- 主食展示 -->

  <view class="staple-food">

    <view wx:for="{{stapleFood}}" wx:key="_id">

      <view bindtap="onSelectStapleFood" data-data="{{item}}" class="staple-food-item {{selectedStapleFoodName === item.name ? 'selected' : ''}}">

        <image src="{{item.imageUrl}}"></image>

        <view class="prize">{{item.prize}}￥</view>

      </view>

    </view>

  </view>



  <!-- 选择配菜 -->

  <view class="title">

    <image src='/asset/sideDish.png'></image>

    请选择配菜

  </view>



  <!-- 配菜展示 -->

  <view class="side-dish">

    <view wx:for="{{sideDish}}" wx:key="_id">

      <!-- 使得class动态绑定支持 includes 语法 -->

      <wxs module="tool">

        var includes = function (array, text) {

          return array.indexOf(text) !== -1

        }

        module.exports.includes = includes;

      </wxs>

      <view class="side-dish-item {{tool.includes(selectedSideDishName, item.name) ? 'selected' : ''}}" bindtap="onSelectedSideDish" data-data="{{item}}">

        <image src="{{item.imageUrl}}"></image>

        <view class="prize">{{item.prize}}￥</view>

      </view>

    </view>

  </view>



  <!-- 底部菜单 -->

  <view class="bottom-content">

    <view class='bottom-info'>

      <view wx:if="{{!!selectedStapleFoodName}}">主食：{{selectedStapleFoodName}}</view>

      <view wx:if="{{selectedSideDishName.length !== 0}}">配菜：{{selectedSideDishName}}</view>

    </view>



    <view class="bottom-operate">

      <view class="total-prize">当前价格<text class="prize">{{totalPrize}}￥</text></view>

      <view class="submit-button {{!selectedStapleFoodName ? 'disabled' : ''}}" bind:tap="onSubmit">下单</view>

    </view>

  </view>

</view>

再添加一点点的样式

/* pages/goods-list/index.wxss */

.title {

  display: flex;

  align-items: center;

  gap: 16rpx;

  padding: 0 20rpx;

}



.title image {

  height: 46rpx;

  width: 46rpx;

}



.staple-food {

  display: flex;

  margin-bottom: 60rpx;

  overflow: auto;

}



.staple-food-item {

  margin: 20rpx 10rpx;

  display: flex;

  flex-direction: column;

  border: 1px solid #f3f0ee;

  box-shadow: 6rpx 6rpx 6rpx #dfdfdf, -6rpx -6rpx 6rpx #dfdfdf;

  border-radius: 6rpx;

  padding: 8rpx;

}



.staple-food-item.selected, .side-dish-item.selected {

  box-shadow: 6rpx 6rpx 6rpx #58b566, -6rpx -6rpx 6rpx #58b566, 6rpx -6rpx 6rpx #58b566, -6rpx 6rpx 6rpx #58b566;

}



.staple-food-item image {

  border-radius: 6rpx;

  width: 300rpx;

  height: 300rpx;

}



.prize {

  padding: 6rpx 6rpx 0;

  text-align: right;

  color: orangered

}



.side-dish {

  padding: 20rpx 12rpx;

  display: flex;

  gap: 12rpx;

  overflow: auto;

}



.side-dish image {

  height: 200rpx;

  width: 200rpx;

}



.side-dish-item {

  border-radius: 8px;

  padding: 16rpx;

  box-shadow: 6rpx 6rpx 6rpx #dfdfdf, -6rpx -6rpx 6rpx #dfdfdf;

}



.bottom-content {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

}



.bottom-info {

  padding: 30rpx;

  display: flex;

  flex-direction: column;

  color: grey;

  font-size: 0.5em;

}



.bottom-content .total-prize {

  padding: 0 30rpx;

}



.bottom-operate {

  border-top: 1px solid #dfdfdf;

  display: flex;

  width: 100%;

  justify-content: space-between;

  align-items: center;

  height: 100rpx;

}



.submit-button {

  width: 350rpx;

  color: white;

  background: #22b85c;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}



.submit-button.disabled {

  background: grey;

  /* 注意，这里设置了当按钮置灰的时候，不可点击 */

  pointer-events: none;

}

于是，煎饼摊的小程序就大功告成了！

接着就可以在云后台管理订单了，在将订单完成之后，即可在云后台将订单的状态修改成已完成。

我们还可以做的更多…

是否可以在订单中新增一个点餐号，这样就知道是哪个顾客点的餐？是否可以使用数据模型的关联关系将配菜、主食和订单关联起来？

是否可以在小程序中创建一个管理订单的页面？是否可以添加优惠券数据表，来给客户一些限时优惠？

期待大家的体验反馈！

代码地址：github.com/vancece/qiL…

点击体验：tcb.cloud.tencent.com/cloud-admin…

运维打工人，周末兼职送外卖的一天

在那个不经意的周末，我决定尝试一份新的工作——为美团外卖做兼职配送员。这份工作对于一向规律生活的我来说，既是突破也是挑战。

早晨，城市的喧嚣还未完全苏醒，空气中带着几分凉意和宁静。准备好出发时，线上生产环境出现问题，协助处理。

收拾好后，戴上头盔，骑上踏板车，开始了自己的第一次外卖配送之旅。

刚开始，我的心情既紧张又兴奋。手机里的订单提示声是今日的任务号角。第一份订单来自一公里外的一家外卖便利店。我快速地在地图上规划路线，开启高德导航，发动踏板车，朝着目的地出发。

由于便利店在园区里面，转了两圈没找到，这是就慌张了，这找不到店咋办了，没办法赶紧问下旁边的老手骑手，也就顺利找到了，便利店，进门问老板，美团104号好了嘛？老板手一指，在架子上自己看。核对没问题，点击已达到店，然后在点击已取货。

然后在导航去收获目的地，找到C栋，找到107门牌号，紧接敲门，说您好，美团外卖到了，并顺利的送达，然后点击已送达，第一单顺利完成，4.8元顺利到手。

其中的小插曲，送给一个顾客时，手机导航提示目的地，结果一看，周围都拆了。没办法给顾客打电话，加微信确认位置具体在哪里，送达时，还差三分钟，这单就要超时了。

配送过程中，我遇到了第一个难题：找不到店家在哪里，我的内心不禁生出些许焦虑。但很快，我调整心态，不懂不知道的地方，需要多多问人。

紧接着，第二份、第三份订单接踵而至。每一次出发和到达，每一条街道和巷弄，我开始逐渐熟悉。

日落时分，我结束了一天的工作。虽然身体有些疲惫，但内心充满了前所未有的充实感。这份工作让我体验到了不一样的人生角色，感受到了城市节奏背后的种种辛劳与甘甜。

周末的兼职跑美团外卖，对我来说不仅是一份简单的工作，更是一段特别的人生经历。它教会了我坚持与责任，让我在忙碌中找到了属于自己的节奏，在逆风中学会了更加珍惜每一次到达。

最后实际周六跑了4个小时，周天跑了7个小时，一共跑了71公里，合计收获了137.80，已提现到账。

前言

最近在开发新需求，按照蓝湖的ui图进行开发，但是在开发完部署后发现做出来的页面部分元素的颜色和设计图有出入，有色差！经过一步步的排查最终破案，解决。仅以此篇记录自己踩坑、学习的过程，也希望可以帮助到其他同学。

发现问题

事情是这样的，那是一个愉快的周五的下午，和往常一样我开心的提交了代码后进行打包发版，然后通知负责人查看我的工作成果。

但是，过了不久后，负责人找到了我，说我做出来的效果和ui有点出入，有的颜色有点不一样。我一脸懵逼，心想怎么可能呢，我是根据ui图来的，ui的颜色可是手把手从蓝湖复制到代码中的啊。

随后他就把页面和ui的对比效果图发了出来:

上图中左侧是蓝湖ui图，右侧是页面效果图。我定睛一看，哇趣！！！好像是有点不一样啊。 感觉右侧的比左侧的更亮一些。于是我赶紧本地查看我的页面和ui，果然也是同样问题！ 开发时真的没注意，没发现这个问题！！！

排查问题

于是，我迅速开始进行问题排查，看看到底是什么问题，是值写错了？还是那里的问题。

ui、页面、代码对比

下图中：最上面部分是蓝湖ui图、下面左侧是我的页面、右侧是我的页面代码样式

仔细检查后发现颜色的值没错啊，我的代码中背景颜色、边框颜色的值都和ui的颜色值是一致的！ 但这是什么问题呢？？？ 值都一样为什么渲染到页面会出现色差？

起初，我想到的是屏幕的问题，因为不同分辨率下展示出来的页面效果是会有差距的。但是经过查看发现同事的win10笔记本、我的mac笔记本、外接显示器上都存在颜色有色差这个问题！！！

ui、页面、源文件对比

通过对比ui、页面、颜色值，不同设备展示效果可以初步确认：和显示器关系不大。当我在百思不解的时候，我突然想到了ui设计师！ui提供的ui图是蓝湖上切出来的，那么她的源文件颜色是什么呢？

于是我火急火燎的联系到了公司ui小姐姐，让她发我源文件该元素的颜色值，结果值确实是一样的，但是！！！ 源文件展示出来的效果好像和蓝湖上的不太一样！

然后我进行了对比(左侧蓝湖、右上页面、右下源文件)：

可以看到源文件和我页面的效果基本一致！到这一步基本可以确定我的代码是没问题的！

尝试解决

首先去网上找了半天没有找到想要的答案，于是我灵光一现，想到了蓝湖客服！然后就询问了客服，为什么上传后的ui图内容和源文件有色差？

沟通了很久，期间我又和ui小姐姐在询问她的软件版本、电脑版本、源文件效果、设置等内容就不贴了，最终得到如下解答：

解决方式

下载最新版蓝湖插件，由于我们的ui小姐姐用的 sketch 切图工具，然后操作如下：

1.下载安装最新版蓝湖插件： lanhuapp.com/mac?formHea…

2.安装新版插件后--插件重置

3.后台程序退出 sketch，重新启动再次尝试打开蓝湖插件.

4.插件设置打开高清导出上传（重要！）

5.重新切图上传蓝湖

最终效果

左侧ui源文件、右侧蓝湖ui：

页面效果：

可以看到我的页面元素的border好像比ui粗一些，感觉设置0.5px就可以了，字体效果的话是因为我还没来得及下载ui对应的字体文件。

但是走到这一步发现整体效果已经和ui图到达了95%以上相似了，不至于和开始有那么明显的色差。

总结

至此，问题已经基本是解决。遇到问题不能怕，多想一想，然后有思路后就一步一步排查、尝试解决问题。当解决完问题后会发现心情舒畅！整个人都好起来了，也会增加自信心！

今天就让我们来使用 Vue.js 和高德地图开放平台提供的 API，实现一个关于天气预报的小demo，实时查询当前城市的天气以及未来三天的天气预测，且实现切换城市查询。实现效果如下；

准备工作

既然要使用真实的数据，那么就需要用到高德地图开放平台提供的天气查询 API，先高德地图api注册为开发者。然后点击文档与支持，选择JS API。

然后登录到控制台创建一个应用并且添加一个key，服务平台为Web端（JS API）。

终端npm create vite@latest使用vite创建项目，npm install下载该项目需要用的包，npm run dev运行项目。

将天气预报的功能全部开发在weather.vue里面，再将这个组件import weather from "./components/weather.vue"引入到app.vue中。

js代码概览

具体代码步骤实现

开始weather.vue里面的代码了。

html 部分；

<div>

    // 头部

    <div class="head">

      <div class="city-name">

        <i class="iconfont icon-dingwei"></i>

        {{ state.city }}

      </div>

      <div @click="toggle" class="city-change">

        <i class="iconfont icon-24gf-city3"></i>

        切换城市

      </div>

    </div>

    

    // 中间部分实时温度

    <div class="main">

      <div class="weather-info">

        <p class="temp">{{ state.weather.temperature }}℃</p>

        <div class="info">{{ state.weather.weather }}</div>

        <div class="detail">

          <div class="item">

            <i class="iconfont icon-shuidi"></i>

            <span>湿度</span>

            <span>{{ state.weather.humidity }}</span>

          </div>

          <div class="item">

            <i class="iconfont icon-feng"></i>

            <span>风向</span>

            <span>{{ state.weather.windDirection }}</span>

          </div>

          <div class="item">

            <i class="iconfont icon-fengli"></i>

            <span>风力</span>

            <span>{{ state.weather.windPower }}</span>

          </div>

        </div>

      </div>

      

      // 未来三日的天气预报

      <div class="future">

        <div class="future-title">三日天气预报</div>

        <div class="future-content">

          <div v-for="(item,i) in state.future" class="forecast">

            <p class="week">周{{ chinese[Number(item.week)-1] }}</p>

            <i :class="getWeatherIcon(item.dayWeather)"></i>

            <p><span class="left">{{ item.dayTemp }}℃</span>  <span class="right"> / {{ item.nightTemp }}℃</span></p>

          </div>

        </div>

      </div>

    </div>

    

     // 切换城市input框

    <div v-show="state.isVisible" >

      <input id="newCity" @keydown.enter="handle" type="text" v-model="state.newCity" placeholder="请输入你要查询的城市">

    </div>

  </div>