Skip to content

Hello


我是一名热爱前端开发并拥有丰富经验的工程师,喜欢探索新技术并应用于实际项目中。

我始终保持对新技术的热情,并将我的知识与经验分享在我的博客中。我期待在这里与你分享我的见解、经验和最新技术动态。


🌟 Languages and Tools

BabelViteDockerElectronExpressFlutterGitHTML5IllustratorJavaScriptJenkinsLinuxNginxNode.jsNuxt.jsVS CodePythonReactSQLiteSvelteTailwind CSSTensorFlowVue.jsWebpack

💼 Projects

数据大屏 vue3 + threeJs + webGL + vite + d3 + svga

  • 使用vite中的vue3模板作为开发框架引入了tailwindcss+Daisyui作为UI框架
  • 主要做了threejs的性能优化,可以在7代i5上进行4k的渲染,稳定30帧。
  • 深入了解了threejs的渲染流程,以及threejs的动画系统。对光,模型,纹理,动画,粒子系统等都有深刻的了解。
  • 多次尝试了不同地图解决方案,包括leaflet,高德,百度,腾讯。搭配AntV的L7使用,发现阿里的文档以及性能都挺拉胯的。可能这就是未来的技术吧
  • 没想到的是视频播放的时候,webm 居然无法使用gpu视频解码器。而svga也是用gpu进行渲染。最后mp4的播放性能反而是最好的。

储能项目PC端(vite+vue3+TDesignUI)

  • 负责项目的架构设计。
  • 采用cz-git与husky约束代码提交规范
  • 使用eslint和prettier进行代码质量管理
  • 使用vite+windicss让开发进度更快
  • 完成前端逆向工程(sm解密部分+CA授权部分)
  • 优化编译的方法与sftp CiCd

电力交易平台(微信小程序版本)

  • 使用微信小程序原生开发,
  • 使用echarts,作为数据展示(方便移植pc端的图表。并且可以按需加载。优化加载速度)的方案
  • 使用TDesign作为项目UI框架。(因为是腾讯官方的组件库。且迭代速度比较快。)
  • 利用小程序横屏接口。适配更适合移动端的操作布局。
  • 适配两种用户身份的数据处理工具。封装了解密工具

储能项目(微信小程序版本)

  • 搭建代码运行框架,定义代码规范。git提交规范。
  • 连接后台MQTT服务器。
  • 使用TDesign作为项目UI框架。
  • 使用SM2,SM4解密工具
  • 使用echarts进行数据展示

数据抓取平台(NodeJs)

  • 使用nodeJs开发。使用bat脚本。提供快速执行服务。
  • 引入 log4j ,为项目提供更好的日志分析。
  • 主要通过定时抓取数据,为小程序提供可持续的数据输出
  • 后期已经迭代为docker包,使用koa做接口的封装。使用jest进行自动化测试

嘉达MES系统(vue2+element)

  • 负责基于RBAC3权限模型的用户管理系统开发
  • 负责小程序端以及PC端的设计与开发
  • 对全局使用的下拉框参数进行封装,优化项目
  • 负责项目静态页面的开发。
  • 使用装饰器模式,原型模式。进行项目的优化

江苏电力GIS平台(vue2+element)

  • 完成前端系统从0-1的完整开发以及一次重构
  • 基于Echarts的混合图表,K线图,折线图,柱状图。的开发。
  • 基于Socket.io的WebSocket应用开发
  • 基于Crypto-js登录模块设计与开发
  • 基于sm-crypto的sm2与sm3的数据加密解密封装。
  • 使用dayjs,vuejs,vuex,router,axios,eslint,sass,webpack,elementUI进行辅助开发。
  • 结合柯里化,策略模式,类实体化,对项目进行优化。

博物馆项目(vue3)

  • 基于G6的知识图谱开发
  • 使用tinymce 进行富文本编辑器开发
  • 使用pinia进行状态管理
  • 使用prettier+eslint 进行代码规范约束
  • 使用sass+windicss 按照设计图进行开发
  • 项目特点:使用css 实现对图片的放大缩小以及旋转等功能
  • 使用原生js进行索引条的开发,实现索引条与页面双向控制。不冲突。
  • 通过原生Canvas实现对图片的标注。
  • 使用 Vite + vue2.7 +elementUI +vue+router作为项目的技术架构

位置宝项目(uniapp)

  • 基于百度地图定位SDK的开发
  • 使用UniApp 进行开发,通过定时器,通过第三方SDK实现后台保留。
  • 负责项目的签名生成,安装包打包。API对接。页面设计与开发。
  • 主要功能:位置记录。路线动画。用户登录。会员支付。等功能

比赛经历

2022 腾讯公益编程挑战赛 队长 -第12名

  • 项目《视宝宝》未上线
  • 自研颜色识别算法,亮度识别算法。响应控制在100ms内
  • 调用百度物体识别算法。
  • 调用腾讯语音合成Api
  • 使用无障碍开启检测。进行无障碍适配

2021腾讯公益黑客马拉松 队长 - 第2名

  • 项目《父母宝》未上线
  • 自创大字模式,通过语音速度匹配。同步滚动字幕。
  • 谣言鉴定模块。调用腾讯谣言鉴定平台。通过语音转文字。一句话查谣言。
  • 疫情信息模块。通过朋友的接口。调用百度疫情信息。
  • OCR模式。使用腾讯OCR接口。将拍到的文字转换成语音。
  • 剪切板访问模块。检测剪切板是否有内容。如果有内容则开启模块。并提示用户。点击即可调用腾讯同声传译tts模块。进行语音合成

2020 腾讯小程序开发大赛 第二届 未入围

  • 项目《小记易》已上线
  • 云说明书。通过富文本组件。实现扫码关联说明书。
  • 小日记。可以插入天气。位置。音频。视频。图片。
  • 课堂记易模块,快速拍照记录笔记。支持录音。且支持录音转文字。图片储存。图片转文字。
  • 手动实现罗永浩的大爆炸。(后续微信已更新相似功能)

2019 思否杭州GSH黑客马拉松 队员-未得奖

  • 项目《摇个菜》
  • 使用类似今日头条的推荐算法,假如A喜欢米饭和鱼肉。同时喜欢鸭肉。那么如果B喜欢米饭和鱼肉。那么喜欢鸭肉的概率要很高。所以就会推荐B吃鸭肉。
  • 根据百度地图POI。智能选择适合你的饭店。
  • 使用集群效应。来实现多个集群的价值分析。然后提供更好的食品建议。

2019 腾讯nextIdea博物馆比赛 前50名

  • 项目《馆物博》已上线
  • 通过调用百度语音合成接口,实现虚拟向导
  • 实现摇一摇。摇到文物。点击可以实现文物介绍
  • 实现拍照。匹配最适合的宝物。( 通过调用百度AI人脸分析接口,匹配文物has值。)
  • 页面包含博物馆相关介绍。

2018 西交利物浦黑客马拉松 未得奖

  • 项目《小非斯》
  • 使用AI分析脸部信息。
  • 智能推荐适合的商品。
  • 实现了一个最简单的商城系统

2018 腾讯小程序WeGeek 开发大赛 第一届 未入围

  • 项目《OA轻办公》已上线(后续改版)
  • 实现离线传输数据。保存数据。删除数据。
  • 使用区块链技术。实现公共信息储存。(使用rsa非对称加密。)
  • 调用微信分享接口。传输数据。(后发现如果用户太少,会出现问题。)

联系我

javascript
const Mine = class {
  constructor() {
    this.name = decodeURIComponent('%E8%82%AF%E4%BA%86%E4%B8%AA%E5%BE%B7');
    this.age = (new Date().getTime() - parseInt('mje83c00', 32)) / parseInt('tbr2b00', 32);
    this.email = atob('bGVlZGFpc2VuQGhvdG1haWwuY29t');
    this.weChatId = '²Âò¾Øæ'
      .split('')
      .map((c) => String.fromCharCode(c.charCodeAt(0) >> 1))
      .join('');
    this.print();
  }
  print() {
    Object.keys(this)
      .filter((key) => typeof this[key] !== 'function')
      .forEach((key) => {
        console.log(`${key}: ${this[key]}`);
      });
  }
};
new Mine();

上次更新: