前端 on Liangweidong's blog

跨语言开源生态：Go / Python / 前端学习路径与工具选型

Thu, 15 Dec 2022 00:00:00 +0800

2022 年的今天，“全栈"已经是一个 5+ 年经验的 Java 工程师的必修课——Go 做云原生、Python 做 AI/脚本、前端做 UI。本文盘点 Go / Python / 前端三大生态的开源项目（200+ 仓库），并给出实战学习路径与选型建议。

本文写于 2022 年 12 月——ChatGPT 已经发布 1 年、Go 1.19 刚发布、Vue 3 稳定半年。

一、Go 语言生态（67+ 仓库）

1.1 脚手架

名称	地址	描述
ixre/go2o	github.com/ixre/go2o	Go 商铺管理 O2O
iotfast	github.com/xiaodingding/iotfast	IoT 物联网开发
hotgo	github.com/bufanyun/hotgo	基于 Vue 和 GoFrame
gin-admin	github.com/LyricTian/gin-admin	权限管理
gfast	github.com/tiger1103/gfast	基于 Vue 和 GoFrame
gin-vue-admin	github.com/flipped-aurora/gin-vue-admin	脚手架
go-admin	github.com/go-admin-team/go-admin	go-admin 后端
go-admin-ui	github.com/go-admin-team/go-admin-ui	go-admin 前端

1.2 项目例子

名称	地址	描述
ocrservice	github.com/onestraw/ocrservice	OCR 服务例子
share	github.com/wangming1993/share	Go + gRPC + Consul
go-micro-build	github.com/guaosi/go-micro-build	微服务
WEHousing	github.com/MineCoinChain/WEHousing	微服务
MTBSystem	github.com/wiatingpub/MTBSystem	微服务

1.3 学习

类别	仓库	说明
Dubbo	github.com/apache/dubbo-go-samples	例子
算法	github.com/emirpasic/gods	数据结构
算法	github.com/geekxh/hello-algorithm	算法图解
力扣	github.com/halfrost/LeetCode-Go	力扣 Go 版
教程	github.com/hantmac/Mastering_Go_ZH_CN	mastering go
入门	github.com/GoesToEleven/GolangTraining	入门教程
爬虫	github.com/chromedp/examples	chromedp
爬虫	github.com/thehappymouse/ccmouse	ccmouse
微服务	github.com/xiaopenggithub/zindle	go-zero 学习
微服务	github.com/zeromicro/zero-examples	go-zero
微服务	github.com/zeromicro/zero-doc	go-zero 文档
标准库	github.com/polaris1119/The-Golang-Standard-Library-by-Example	标准库
高级	github.com/chai2010/advanced-go-programming-book	高级编程
入门	github.com/unknwon/the-way-to-go_ZH_CN	入门指南
实战	github.com/astaxie/build-web-application-with-golang	beego 作者

1.4 框架

名称	描述
golang/go	官方仓库
gogf/gf	goframe 框架
go-grpc-middleware	gRPC 中间件
shirou/gopsutil	系统硬件信息
golang/protobuf	Protobuf
protoc-gen-validate	protoc 插件
go-vgo/robotgoro	自动化
shopspring/decimal	大数
robinson/gos7	西门子 PLC
konimarti/opc	OPC DA
go-resty/resty	HTTP 客户端
gomodule/redigo	Redis 客户端
urfave/cli	命令行
spf13/cobra	命令行程序
dtm-labs/dtm	分布式事务
pkg/errors	错误处理
apache/dubbo-go	Dubbo Go
douyu/jupiter	斗鱼微服务
skip2/go-qrcode	二维码
panjf2000/ants	协程池
etcd-io/etcd	服务发现
hashicorp/consul	服务发现
zeromicro/go-zero	微服务
kataras/iris	Web 框架
istio/istio	Service Mesh
asim/go-micro	微服务
aceld/zinx	并发服务器框架
GoAdminGroup/go-admin	Web 框架
gin-gonic/gin	最流行 HTTP 框架
go-netty/go-netty	Netty Go 版
andeya/erpc	erpc
tinygo-org/tinygo	单片机
liangdas/mqant	游戏服务器框架
name5566/leaf	游戏服务器框架
3zheng/railgun	游戏服务器框架
davyxu/cellnet	游戏服务器框架

1.5 库

名称	描述
robfig/cron	定时任务
chromedp/chromedp	爬虫
golang/net	网络
PuerkitoBio/goquery	jQuery 式 HTML 解析
gocolly/colly	爬虫库
zhshch2002/gospider	爬虫
anaskhan96/soup	爬虫
go-gota/gota	数据处理
gonum/gonum	数值计算
op/go-logging	日志
uber-go/zap	结构化日志
sirupsen/logrus	日志
cihub/seelog	日志
go-sql-driver/mysql	MySQL 驱动
go-redis/redis	Redis 客户端
gorilla/websocket	WebSocket
eclipse/paho.mqtt.golang	MQTT
funny/link	TCP 服务
panjf2000/gnet	高性能网络库

1.6 工具

名称	描述
go-package-plantuml	自动生成 UML 类图
jfeliu007/goplantuml	生成类图
distribution/distribution	Docker 镜像仓库
josephspurrier/goversioninfo	打包版本信息
akavel/rsrc	打包资源
schollz/croc	跨网络文件传输
voidint/g	g：Go 多版本管理
flike/kingshard	MySQL 代理
kevwan/go-stash	日志采集
andeya/pholcus	爬虫
mattn/go-sqlite3	SQLite
adnanh/webhook	Webhook
docker/compose	Docker Compose
influxdata/influxdb	时序数据库
pyroscope-io/pyroscope	性能分析
casbin/casbin	权限认证
monkeyWie/gopeed-core	下载工具
davyxu/tabtoy	导表工具
Done-0/fuck-u-code	代码质量检查

1.7 Go 学习路径推荐

graph LR
 A[入门] --> B[基础语法]
 B --> C[Go Module]
 C --> D[协程+Channel]
 D --> E[Web 框架 Gin]
 E --> F[数据库 sqlx/gorm]
 F --> G[微服务 go-zero/istio]
 G --> H[云原生 k8s Operator]

推荐时长：3-6 个月从入门到能上手生产项目。

二、Python 生态（精简）

2.1 框架

名称	地址	描述
kivy	github.com/kivy/kivy	多点触控（移动端 + 桌面）

2.2 Python 工具

注：原 opensource/python.md 工具章节为空，本节为补全。

类别	推荐	描述
Web 框架	Django	全功能 ORM + Admin + 模板
Web 框架	FastAPI	高性能 + 类型注解 + 自动 OpenAPI
Web 框架	Flask	轻量级，适合 API
ORM	SQLAlchemy	工业级 ORM
异步	asyncio + aiohttp	异步 IO
爬虫	Scrapy	工业级爬虫
爬虫	requests + BeautifulSoup	简单爬虫
AI	PyTorch	深度学习
AI	TensorFlow	深度学习
AI	scikit-learn	传统机器学习
数据	Pandas	数据分析
数据	NumPy	数值计算
部署	uvicorn/gunicorn	ASGI/WSGI 服务器
任务	Celery	分布式任务队列
任务	APScheduler	定时任务

2.3 Python 学习路径

graph LR
 A[入门] --> B[基础语法 + 虚拟环境]
 B --> C[常用库 requests/numpy]
 C --> D[Web Flask/Django]
 D --> E[异步 asyncio]
 E --> F[AI PyTorch / 数据分析 Pandas]

三、前端生态（30+ 仓库）

3.1 库

原 opensource/frontend.md 库章节为占位空表

3.2 组件

名称	地址	描述
DataV	github.com/DataV-Team/DataV	前端大屏

3.3 Vue 生态

名称	描述
sass/node-sass	SASS
pagekit/vue-resource	HTTP 客户端
PanJiaChen/vue-admin-template	Vue 模板
logaretm/vee-validate	表单验证
lin-xin/vue-manage-system	后台管理
PanJiaChen/vue-element-admin	最流行后台模板
bailicangdu/vue2-elm	饿了么 App
lzxb/vue-demo	Demo
ElemeFE/v-charts	基于 ECharts 的 Vue 图表
apache/echarts	最流行图表库
ecomfe/vue-echarts	ECharts 的 Vue 组件

3.4 大屏

名称	描述
yyhsong/iDataV	大屏例子
HongqingCao/GitDataV	大屏例子
ddiu8081/ChartFun	大屏例子
lizhensheng/vue-data-view	大屏例子
daoke0818/pro_bigScreenCharts	大屏例子
veaba/ncov	新冠疫情大屏

3.5 其它

名称	描述
varHarrie/varharrie.github.io	个人博客
ColorlibHQ/AdminLTE	后台模板
jquery-validation/jquery-validation	jQuery 验证
hiwanz/wgs2mars.js	坐标系转换（WGS-84 → 火星坐标）

3.6 小程序

名称	描述
EastWorld/wechat-app-mall	微信小程序商城
Tencent/wepy	小程序组件化框架
ecomfe/echarts-for-weixin	ECharts 微信版

四、跨语言项目举例（精华）

4.1 工业级 SaaS 案例

业务领域	Java 方案	Go 方案	Python 方案
后台管理	jeecg-boot	go-admin	Django Admin
电商	yudao-cloud	go-shop	Saleor
物联网	WVP-GB28181-pro	iotfast	Home Assistant
视频	WVP-GB28181-pro	livego	nginx-rtmp
大数据	-	dtm/fabric	Airflow
AI - NLU	-	-	spaCy + Transformers
AI - 视觉	-	-	YOLOv8 + OpenCV

4.2 性能对比（生产实测）

场景	Java (Spring Boot)	Go (Gin)	Python (FastAPI)
HTTP QPS (单核)	1.5-3 万	3-6 万	3000-5000
内存占用（启动）	200-500 MB	10-30 MB	50-100 MB
启动时间	5-15 s	< 100 ms	1-3 s
WebSocket 并发	5-10 万	20-50 万	1-3 万
机器学习	X (JVM)	X (CGO)	✓ (最佳)

五、跨语言学习路径推荐

5.1 Java 工程师学 Go（3 个月）

graph LR
 A[第 1 月] --> B[基础语法/Go Module]
 B --> C[第 2 月]
 C --> D[Gin Web + GORM]
 D --> E[第 3 月]
 E --> F[go-zero 微服务 + Docker]

5.2 Java 工程师学 Python（2 个月）

graph LR
 A[第 1 月] --> B[语法 + 虚拟环境 + pip]
 B --> C[第 2 月]
 C --> D[FastAPI + Pandas]

5.3 Java 工程师学 Vue 3（2 个月）

graph LR
 A[第 1 月] --> B[Vue 3 基础 + Vite]
 B --> C[第 2 月]
 C --> D[Element Plus + Pinia + Router]

六、写在最后

跨语言是 2020+ 工程师的必备技能——Java 写后端、Go 写云原生、Python 写 AI/脚本、前端写 UI。但要警惕"贪多嚼不烂”——

个人建议：

Java 工程师：Go 是必学（云原生趋势）+ Python 选学（AI 趋势）

学 Go 切入点：用 gfast / go-zero 跑通一个微服务 demo

学 Python 切入点：用 FastAPI 写一个内部工具 API

学前端切入点：用 Vue 3 + Element Plus 写一个后台模板

参考资料

PC 前端技术选型：antd + unocss + react-router + redux toolkit

Thu, 15 Jul 2021 00:00:00 +0800

选型原则

PC 后台管理类项目（ERP / CRM / 数据可视化）的核心需求：

组件库丰富：表格、表单、图表、上传
CSS 工程化：原子化、tree-shake
路由层级清晰：嵌套、权限、懒加载
状态管理可控：服务器状态、客户端状态分离
请求层统一：缓存、轮询、乐观更新

依赖选型

类别	选型	备选
UI 库	antd + @ant-design/pro-components	Element Plus / Arco Design
图表	@ant-design/charts	ECharts / Recharts
路由	react-router v6	tanstack/router
状态	@reduxjs/toolkit + react-redux	zustand / jotai
请求	rtk query	swr / tanstack-query
CSS	unocss	tailwindcss / styled-components
图标	@ant-design/icons	react-icons

一、Ant Design 5.x

Ant Design 是阿里 2015 年起的 React UI 库，国内 PC 端事实标准。pro-components 是中后台高级组件：

ProTable：内置搜索、分页、列控制
ProForm：表单 + 校验 + 联动
ProLayout：完整后台布局

1
2


pnpm add antd @ant-design/icons
pnpm add @ant-design/pro-components

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


import { Button, Table, ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import { ProTable } from '@ant-design/pro-components';

<ConfigProvider locale={zhCN} theme={{ token: { colorPrimary: '#1890ff' } }}>
 <ProTable
 columns={columns}
 request={async (params) => fetchList(params)}
 rowKey="id"
 search={{ labelWidth: 'auto' }}
 />
</ConfigProvider>

二、@ant-design/charts

封装 G2Plot 的 React 组件：

1

pnpm add @ant-design/charts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


import { Line, Column, Pie } from '@ant-design/charts';

<Line
 data={salesData}
 xField="month"
 yField="value"
 point={{ size: 5, shape: 'diamond' }}
 smooth
/>

<Pie data={pieData} angleField="value" colorField="type" radius={0.8} innerRadius={0.5} />

三、react-router v6

react-router v6（2019 重写）API 收敛明显：

1

pnpm add react-router-dom

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


// src/main.tsx
import { createBrowserRouter, RouterProvider, Outlet } from 'react-router-dom';

const router = createBrowserRouter([
 {
 path: '/',
 element: <Layout />,
 children: [
 { index: true, element: <Home /> },
 { path: 'users', element: <UserList /> },
 { path: 'users/:id', element: <UserDetail /> },
 {
 path: 'admin',
 element: <RequireAuth roles={['admin']}><Admin /></RequireAuth>,
 },
 ],
 },
 { path: '/login', element: <Login /> },
 { path: '*', element: <NotFound /> },
]);

<RouterProvider router={router} />

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// src/Layout.tsx
import { Link, Outlet, useNavigate } from 'react-router-dom';

export const Layout = () => (
 <div>
 <nav>
 <Link to="/">首页</Link>
 <Link to="/users">用户</Link>
 </nav>
 <Outlet />
 </div>
);

四、Redux Toolkit + RTK Query

Redux Toolkit（RTK）是 Redux 官方推荐的现代写法，消除了 boilerplate：

1

pnpm add @reduxjs/toolkit react-redux

Store

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


// src/store/index.ts
import { configureStore } from '@reduxjs/toolkit';
import { userApi } from './api/user';
import counterReducer from './slices/counter';

export const store = configureStore({
 reducer: {
 counter: counterReducer,
 [userApi.reducerPath]: userApi.reducer,
 },
 middleware: (getDefault) => getDefault().concat(userApi.middleware),
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Slice

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


// src/store/slices/counter.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

const counterSlice = createSlice({
 name: 'counter',
 initialState: { value: 0 },
 reducers: {
 increment: (state) => { state.value += 1; },
 decrement: (state) => { state.value -= 1; },
 incrementBy: (state, action: PayloadAction<number>) => {
 state.value += action.payload;
 },
 },
});

export const { increment, decrement, incrementBy } = counterSlice.actions;
export default counterSlice.reducer;

RTK Query（推荐）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


// src/store/api/user.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const userApi = createApi({
 reducerPath: 'userApi',
 baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
 tagTypes: ['User'],
 endpoints: (builder) => ({
 getUsers: builder.query<User[], void>({
 query: () => 'users',
 providesTags: ['User'],
 }),
 getUser: builder.query<User, number>({
 query: (id) => `users/${id}`,
 }),
 createUser: builder.mutation<User, Partial<User>>({
 query: (body) => ({
 url: 'users',
 method: 'POST',
 body,
 }),
 invalidatesTags: ['User'],
 }),
 }),
});

export const { useGetUsersQuery, useGetUserQuery, useCreateUserMutation } = userApi;

1
2
3


// 使用
const { data: users, isLoading, refetch } = useGetUsersQuery();
const [createUser] = useCreateUserMutation();

RTK Query 自带能力：

自动缓存
轮询（pollingInterval: 5000）
乐观更新（onQueryStarted）
自动重试
预取（initiate）

五、UnoCSS 原子化 CSS

UnoCSS 是 2022 年起的新一代原子化 CSS 引擎，比 Tailwind 更快、配置更灵活：

1
2
3


pnpm add -D unocss
pnpm add @unocss/reset
pnpm add @unocss/preset-wind3

uno.config.ts：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


import { defineConfig, presetWind3 } from 'unocss';

export default defineConfig({
 presets: [presetWind3()],
 theme: {
 colors: {
 primary: '#1890ff',
 },
 },
});

1
2
3
4


<div className="flex items-center gap-4 p-4 bg-white">
 <h1 className="text-2xl font-bold text-primary">标题</h1>
 <Button className="ml-auto">操作</Button>
</div>

六、完整工程目录

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


src/
├── api/ # 业务 API 抽象
│ ├── user.ts
│ └── order.ts
├── pages/ # 页面
│ ├── Home/
│ ├── UserList/
│ └── UserDetail/
├── components/ # 业务组件
├── layouts/ # 布局
├── hooks/ # 自定义 hooks
├── utils/ # 工具函数
├── store/ # Redux
│ ├── index.ts
│ ├── slices/
│ └── api/
├── routes/ # 路由配置
├── types/ # TS 类型
├── App.tsx
└── main.tsx

七、权限管理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


// src/components/RequireAuth.tsx
import { Navigate, useLocation } from 'react-router-dom';
import { useSelector } from 'react-redux';

export const RequireAuth = ({ roles, children }) => {
 const user = useSelector((s) => s.user);
 const location = useLocation();

 if (!user) {
 return <Navigate to="/login" state={{ from: location }} replace />;
 }

 if (roles && !roles.includes(user.role)) {
 return <Navigate to="/403" replace />;
 }

 return children;
};

八、构建与优化

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
 plugins: [react(), unocss()],
 build: {
 target: 'es2020',
 rollupOptions: {
 output: {
 manualChunks: {
 react: ['react', 'react-dom', 'react-router-dom'],
 antd: ['antd', '@ant-design/icons'],
 charts: ['@ant-design/charts'],
 },
 },
 },
 },
});

下一步

想把同一套代码同时跑 PC / Mobile / Desktop，看 2020-04-15《FSS 全栈脚手架》
想把 redux 替换成 zustand（更轻量），看 Zustand 官方文档
想要 SSR / SSG（Next.js / Remix），看 Next.js 官方

参考资料

Ant Design：https://ant.design/
Pro Components：https://procomponents.ant.design/
@ant-design/charts：https://charts.ant.design/
react-router：https://reactrouter.com/
Redux Toolkit：https://redux-toolkit.js.org/
UnoCSS：https://unocss.dev/

面试软技能 + 智力题：技术之外的硬通货

Sun, 15 Dec 2019 00:00:00 +0800

本文写于 2019 年 12 月——经济下行期，面试软技能 + 智力题权重上升。

一、面试软技能清单

1.1 沟通能力

STAR 法则：Situation（情境）/ Task（任务）/ Action（行动）/ Result（结果）
用数据说话：不说"做了高并发系统"，说"支持 10 万 QPS、可用性 99.99%"
结论先行：先说结论，再说过程
听不懂就问：面试官也欣赏"敢问"的人

1.2 抗压能力

接受挑战：不回避难题
承认边界：不会就说不会，但说明学习路径
情绪稳定：不与面试官争论

1.3 学习能力

学习路径：展示如何学一项新技术
举一反三：用类比说明理解深度
总结输出：博客 / GitHub / 技术分享

1.4 团队协作

冲突处理：如何处理技术分歧
代码评审：如何给别人 review
知识传递：如何给团队培训

二、智力题分类

2.1 推理题

经典题：

蓝眼岛：岛上有蓝眼/棕眼两种人，每天傍晚有人离岛。岛主说"你们中间有蓝眼的人"，第二天所有蓝眼都离岛了，为什么？
- 解法：n=1 时自己会走（如果自己是棕眼，岛主的话无意义），所以当 n 个人时，递归 n-1 后第 n 步自己走
疯狗：村里有 50 条狗，其中若干是疯狗（不表现出任何症状），每天傍晚杀掉所有疯狗。村民不知道自己是疯狗。第几天杀完？
- 解法：第 49 天（如果有 1 条疯狗，当天就杀光；以此类推）
耳光：100 个逻辑学家围成一圈，每人头上一个数（红/蓝），能看见其他人看不见自己。每晚有人按规则打耳光。三天后耳光声响了，怎么推理？
- 解法：递归 + 公共知识

2.2 二进制问题

经典题：

毒酒问题：1000 桶酒，1 桶有毒，10 只小白鼠，24 小时找出毒酒。
- 解法：每桶编号二进制，每只老鼠喝对应位为 1 的酒。24h 后看哪几只死，二进制转十进制就是毒酒编号
砝码问题：1-100 找最重 / 最轻的多少次？
- 解法：天平分组（3 进制）
  - 找最重：1 次分 3 组
  - 找最重 + 最轻：⌈n/3⌉ 次

2.3 先手必胜

经典题：

取石子：100 个石子，每次取 1-3 个，先取必胜？
- 解法：必胜点为 4 的倍数（先手凑到 4 的倍数必胜）
翻硬币：N 枚硬币排成一行，每次翻一枚 + 邻接一枚，所有正面朝上为赢。
- 解法：分奇偶讨论

2.4 水桶问题

经典题：

3 升和 5 升：如何量出 4 升？
- 解法：3L 倒满 5L → 5L 倒掉 → 3L 倒进 5L → 再取 3L 倒满 → 5L 已有 3L 只能再装 2L → 3L 剩 1L → 5L 倒空 → 1L 倒入 5L → 再取 3L → 4L 搞定
8 升和 5 升：量出任意整数升

2.5 赛马问题

经典题：25 匹马，每次只能 5 匹比赛，最少几次找出最快的 3 匹？

解法：

6 次（无计时器）/ 5 次（有计时器）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


第 1-5 轮：5 组比赛，每组 5 匹（共 25 匹）
 → 找出每组最快的 1 匹（A1, B1, C1, D1, E1）

第 6 轮：A1, B1, C1, D1, E1 比赛
 → 排序：A1 > B1 > C1 > D1 > E1

最快的 3 匹：A1 + A2 + A3 或 B1 或 B2

- A1：确定最快
- A2：A 组第二
- A3 / B1 / B2：竞争第二、第三

A3 比 B1：需要第 6 轮 A1, B1, C1 + A2, A3, B1 比赛
 → 答案 6 次

2.6 过河/过桥

经典题：4 人过桥，1/2/5/10 分钟，最少几分钟？

解法：

1+2 过，1 回 → 3 分钟
5+10 过，2 回 → 12 分钟
1+2 过 → 2 分钟
总计 17 分钟

2.7 灯泡开关

经典题：3 个开关控制 3 个灯泡（楼下看不见楼上），只能上楼 1 次，怎么确定对应关系？

解法：

开 1 号 5 分钟 → 关 1 号 → 开 2 号 → 上楼
亮的是 2 号控制
灭但热的是 1 号控制
灭且冷的是 3 号控制

2.8 最优解问题

经典题：

撕书问题：N 页书（双面），最少多少次撕出 100 张单页？
- 解法：50 张 = 1 次（N/2 张）
煎饼排序：每次翻转前缀，最少几次排好序？

三、Java 集合类

3.1 Java 基础合集

类	作用	关键
ArrayList	动态数组	扩容 1.5x
LinkedList	双向链表	增删快，查找慢
HashMap	哈希表	JDK 8 红黑树化
ConcurrentHashMap	线程安全哈希表	CAS + synchronized
TreeMap	红黑树	有序
HashSet	基于 HashMap	O(1) 查找

3.2 经典面试追问

Q1：HashMap 为什么用红黑树而不是 AVL？

AVL 严格平衡，查询快 O(log n)
红黑树近似平衡，插入删除快（旋转少）
哈希冲突链表 > 8 时转红黑树，避免 hash 攻击退化为 O(n)

Q2：ConcurrentHashMap 1.7 vs 1.8？

1.7：Segment（16 个）+ ReentrantLock
1.8：Node + CAS + synchronized（锁粒度更细）

Q3：ArrayList vs LinkedList？

维度	ArrayList	LinkedList
随机访问	O(1)	O(n)
头部插入	O(n)	O(1)
内存占用	少	多（每个节点 2 个指针）
缓存友好	友好	不友好

四、Java IO 模型

4.1 BIO / NIO / AIO

模型	全称	适用
BIO	Blocking I/O	传统阻塞（连接数少）
NIO	Non-blocking I/O	高并发（Netty 底层）
AIO	Asynchronous I/O	异步回调（Linux 5+）

4.2 NIO 三大组件

组件	作用
Channel（通道）	双向数据通道（FileChannel / SocketChannel）
Buffer（缓冲区）	数据容器（ByteBuffer / CharBuffer）
Selector（选择器）	多路复用（一个线程管理多个 Channel）

五、MyBatis 实战

5.1 一级缓存 vs 二级缓存

维度	一级缓存	二级缓存
范围	SqlSession	Mapper（namespace）
默认开启	✓	✗（需配置）
失效	增删改 / commit / close	同 namespace 增删改

5.2 #{} vs $

#{}：预编译，? 占位符（防 SQL 注入）
${}：字符串拼接（有注入风险）

六、设计模式高频题

6.1 单例模式 8 种实现

方式	线程安全	性能	推荐
饿汉	✓	高	★★★
懒汉（同步方法）	✓	低	✗
懒汉（DCL）	✓	中	★★★★
静态内部类	✓	高	★★★★★
枚举	✓	高	★★★★★
容器式	取决于实现	-	单例池
ThreadLocal	单线程	高	线程内单例
CAS	✓	高	✗（代码复杂）

6.2 工厂模式 vs 抽象工厂

维度	工厂方法	抽象工厂
复杂度	单一产品	产品族
扩展	新增产品加新工厂	新增产品族加新工厂

6.3 代理模式

静态代理：手动写代理类
JDK 动态代理：基于接口（Proxy + InvocationHandler）
CGLIB 动态代理：基于继承（Enhancer + MethodInterceptor）

七、Netty 面试

7.1 Netty 三大特点

异步 NIO：基于 Java NIO
事件驱动：ChannelPipeline + ChannelHandler
高性能：零拷贝、内存池、无锁设计

7.2 经典面试题

Q1：Netty 的线程模型？

Reactor 单线程：所有 I/O + 业务在单线程（NIO）
Reactor 多线程：I/O 单线程 + 业务线程池
主从 Reactor 多线程：Main Reactor + Sub Reactor + 业务线程池（Netty 推荐）

Q2：Netty 的零拷贝？

堆外内存（DirectByteBuffer）
CompositeByteBuf（合并多个 buffer）
FileChannel.transferTo（sendfile 系统调用）
ByteBuf 池化（减少 GC）

Q3：Netty 的心跳机制？

IdleStateHandler：读 / 写 / 读写空闲检测
服务端定期发送 Ping + 客户端响应 Pong
超时未响应则关闭连接

八、写在最后

面试软技能要点：

STAR 法则：讲故事用情境-任务-行动-结果

数据量化：用具体数字说明成就

诚实谦逊：不懂就说不懂，承认边界

反向提问：准备 2-3 个有深度的问题

前端 on Liangweidong's blog

跨语言开源生态：Go / Python / 前端 学习路径与工具选型

一、Go 语言生态（67+ 仓库）

1.1 脚手架

1.2 项目例子

1.3 学习

1.4 框架

1.5 库

1.6 工具

1.7 Go 学习路径推荐

二、Python 生态（精简）

2.1 框架

2.2 Python 工具

2.3 Python 学习路径

三、前端生态（30+ 仓库）

3.1 库

3.2 组件

3.3 Vue 生态

3.4 大屏

3.5 其它

3.6 小程序

四、跨语言项目举例（精华）

4.1 工业级 SaaS 案例

4.2 性能对比（生产实测）

五、跨语言学习路径推荐

5.1 Java 工程师学 Go（3 个月）

5.2 Java 工程师学 Python（2 个月）

5.3 Java 工程师学 Vue 3（2 个月）

六、写在最后

参考资料

PC 前端技术选型：antd + unocss + react-router + redux toolkit

选型原则

依赖选型

一、Ant Design 5.x

二、@ant-design/charts

三、react-router v6

四、Redux Toolkit + RTK Query

Store

Slice

RTK Query（推荐）

五、UnoCSS 原子化 CSS

六、完整工程目录

七、权限管理

八、构建与优化

下一步

参考资料

面试软技能 + 智力题：技术之外的硬通货

一、面试软技能清单

1.1 沟通能力

1.2 抗压能力

1.3 学习能力

1.4 团队协作

二、智力题分类

2.1 推理题

2.2 二进制问题

2.3 先手必胜

2.4 水桶问题

2.5 赛马问题

2.6 过河/过桥

2.7 灯泡开关

2.8 最优解问题

三、Java 集合类

3.1 Java 基础合集

3.2 经典面试追问

四、Java IO 模型

4.1 BIO / NIO / AIO

4.2 NIO 三大组件

五、MyBatis 实战

5.1 一级缓存 vs 二级缓存

5.2 #{} vs $

六、设计模式高频题

6.1 单例模式 8 种实现

6.2 工厂模式 vs 抽象工厂

6.3 代理模式

七、Netty 面试

7.1 Netty 三大特点

7.2 经典面试题

八、写在最后

参考资料

跨语言开源生态：Go / Python / 前端学习路径与工具选型