加粗内容已存于Git仓库。
| 名称 | 类型 | Github 存档 | 技术点与经验 | Status |
|---|---|---|---|---|
| web_common_learning | 原生HTML、CSS、JS | 1.imageDemo：响应式的图片画廊 2.toolKitsDemo：web工具集合（下载、上传、QRCode、随机颜色等） 3.VideoDemo：响应式的视频画廊 4.TODO：PopDemo：一些原生弹窗案例（网络、cookies） |
1. 自定义样式库（待整合）、响应式布局（flex、媒体查询）、CSS动画 2. 事件处理：HTML DOM、DOM2、懒加载 |
★★☆ Details |
| canvas_learning | 图形 | 1. canvas_demo：包含canvas的基本使用案例，以及一个绘画板App 2. space arcade 太空街机游戏 Demo |
1. canvas工具类、碰撞检测、拖拽； 2. 片头动画、资源加载机制、粒子特效、JS的面向对象开发 |
★★ Details |
| react_learning （React框架） |
前端框架 | 1. movie_lib_react_demo：一个基于开源电影API的react-web电影库 Demo 2. 见衍生Git项目 |
1. SPA：react-router 2. Redux 3. React生命周期 4. React Hooks：useEffect、useState、useCallback、useContext 5. React组件（传子组件{{children}}、传参props） |
★★ |
| vue_learning （Vue框架） |
前端框架 | 1. weather_app_vue_demo：一个基于天气API的vue-web应用 Demo 2.spa_vue_comp_web：一个使用 vite、vue-router、svg的 spa demo项目，将整合不同web组件库的应用。 |
1. SPA：vue-router 2. Ref、Reactive Vuex 3. Vue生命周期 4. Vue Hooks 5. Vue语法糖 6. Vue组件 |
★★ |
| react_native_learning | 移动端 | 略 | 1. expo搭建 | ★☆ |
| miniprogram_learning |
移动端（小程序） | 1. 基于uni实现的留言墙：图片、文本上传与删除、api请求、导航栏 2.原生wx小程序demo 3.更多完整项目见mini_program_all |
1. 云函数使用、云数据库 2. 微信小程序基本路由与tabbar |
★☆ Details |
| engineering_learning | 工具 | 略 | 1. webpack（env：原生） 2. vite（env：Vue） 3. gulp 4. Eslint、Babel（env：Vue） |
★★☆ |
| Antd、Material、Element Plus | 组件库 | 1. TODO：适配不同版本下的组件库，如e-vue2、e-vue3 2.TODO：封装个人组件库 |
1. react Antd 2. react Material 3. Vue3 elementPlus 4.组件使用与二次开发 |
★☆ |
| d3_learning | 图形库 | 1. d3_demo，一些使用d3实现的条形图、散点图。 | 1. Exp：原生 |
★☆ |
| dataV | 图形库 | 略 | 1. Exp：Vue2 2. 图表可视化 |
★☆ |
| 名称 | 类型 | Github 存档 | 技术点与经验 | Status |
|---|---|---|---|---|
| threejs_learning （webGL） |
3D 图形 | 1.threejs_demo：包含threejs的基本使用案例 2.picTo3d：将一张图片转为3d效果 3.threejs_tool：待整理 |
1. 原生环境的three.js 基本使用 |
★☆ |
| editor_learning |
编辑器 | 1.codepen_demo_ori：一个使用原生的仿codepen项目（fontawesome+） 2.codepen_clone_react：一个使用react的仿codepen项目 |
1. 原生环境、React环境的静态资源加载与渲染 2. codeMirror、Ace使用经验 |
★ |
| realchat_learning （webRTC+webSocket） |
实时通讯｜流媒体 | 1. webrtc_chatapp_react：一个基于react+node+webrtc的双人视频对话项目 2.websocket_chatapp：一个基于websocket的双人对话项目 |
1. WebRTC：socket.io➕socket.io-client 2. WebSocket：ws |
★★☆ |
| chrome_extention | 插件 | 略 | 1. Chrome 简易插件开发 | ★☆ |
| portfolio | 个人页 | 1. portfolio_react：一个使用react+tailwind CSS+Google map的portfoli项目 Demo | 略 | |
| 支付系统 | 待办 | |||
| 名称 | 类型 | Github 存档 | 技术点与经验 | Status |
|---|---|---|---|---|
| node_learning | 服务端环境 | 略 | 1. Web+跨域：Express、http、Cors 2. 文件：multer、path、fs 3. 通信：socket.io、ws |
★☆ |
| lightserver_learning | 服务 | 1. http_server_node：一个http server 2. socket_server_node：一个socket server 3. socket_server_python：一些基于socket模拟http等server 4.file_server_node：一个file upload server |
1. Python、Node基础 2. 轻量级基础server搭建 |
★☆ |
| git_learning | 工具 | 略 | 1. git push、pull及常见问题 2. git actions + gh pages持续部署 |
★★☆ Details |
| docker_learning | 工具 | 略 | 1. docker 镜像迁移、部署 | ★ |
| nginx_learning | 工具 | 略 | 1. 项目部署、反向代理 | ★ |
| linux_learning | 工具 | 略 | 1. Linux 基本指令 2. 脚本语言：shell 3. 工具：vim、tmux、docker、ssh等 |
★★ |
| 名称 | 类型 | Github 存档 | 技术点与经验 | Status |
|---|---|---|---|---|
| kob | Git项目 | 1. kob：一个基于Vue3+springboot的多人联机游戏项目 | 1. springboot：web开发 2. springcloud：security权限、匹配服务、测评服务 |
★★☆ Details |
| 其他经验 | 其他 | 1. wemeet：基于融云SDK开发的Android Java项目； 2. bs-end-GA：基于遗传算法的路径匹配系统 3. 数据大屏：一个基于 Vue2+DataV 的数据大屏项目 4. 边缘网关项目：一个基于 React+TS+Antd的边缘网关项目 |
1. Android Java开发 2. 路径匹配算法 3. 数据大屏-Vue-DataV实战 4. 物联网SPA-React-Antd实战 |
★☆ |