常香玉 | 前端开发工程师 | 6 年+

基本信息

• 手机：17111124608
• 邮箱：changxiangyu@changxiangyu.cn
• GitHub 主页：https://github.com/changxiangyu666
• 作品组织：https://github.com/jinyumantangcjx，https://github.com/xinhuizhineng
• 毕业院校及专业：黑河学院 | 20届 | 计算机科学与技术专业（本科）
• 我的博客: https://changxiangyu.cn

核心技能

• 编程语言： JavaScript (ES6+), TypeScript, Dart, Python, Java, HTML5, CSS3
• 前端框架： Vue.js (Avue), Angular, qiankun (微前端), Ionic, amis
• 移动/小程序： uni-app, Flutter, 微信小程序/公众号, 企业微信/支付宝对接
• 后端技术： Node.js, Flask, MVC 架构
• 数据库： MySQL, Redis, MongoDB, SQL
• 可视化/GIS： ECharts, OpenLayers, 高德地图 API, Photoshop (切图/处理)
• 工具/运维： Git/GitHub/GitLab, Nginx, IIS, npm/yarn
• 相关知识: HTTP协议、浏览器工作原理。
• 能够独立从0到1搭建前端项目。

工作经历

旭烁科技有限公司 | 研发部-前端工程师

2026.01 - 至今

核心项目：体育数据平台（多站点矩阵）

项目仓库：https://github.com/z2864610310/Brg365-app-web 覆盖站点：jogosdehoje.eu.com / futebolmax.org / kadario.com / wescores.net / brg365

技术栈

• 框架：Next.js 19 (App Router) + React 19 + TypeScript
• UI：TailwindCSS + Radix UI + 自研三栏布局体系
• 状态/数据：Zustand + next-intl (11 种语言：ko/id/pt_BR/pt/th/vi/zh/zh_TW/ja/en/ph)
• 实时通信：WebSocket（比赛比分、时间线实时更新）
• 后端集成：Next.js Server Actions / Route Handlers / BFF 转发层
• 测试/部署：Playwright E2E + Nginx + PM2 + Git 部署脚本

项目概述

独立负责一个多站点体育数据平台的前端架构与开发，覆盖足球/篮球两大运动线的赛事详情、联赛、球队、球员、预测、社区、投注工具、新闻等全功能模块。支持 11 种国际化语言，采用 SSR + ISR + 客户端缓存的多层渲染策略，对接 Google 登录与支付系统。

核心工作内容

一、服务端渲染改造与性能优化（核心主线）

• 强制 SSR 策略：对球员/球队/联赛/比赛详情页核心模块（描述、结构化数据、积分榜、统计）采用服务端组件直出，全站 HTML 渲染量减半
• 首页性能重构：Tab 切换改为同步 setMatchType → history.replaceState → 骨架屏流程，全程同步无异步等待；比分和侧栏下沉到 Suspense 子边界，避免顶层等待
• 联赛列表虚拟滚动：采用可视区按需渲染 + 哨兵滚动追加（每批 24 条），消除一次性挂载大量节点导致的卡顿和重排
• 缓存策略体系：建立 6 档 Cache-Control 策略（live/fresh/balanced/stable/long/immutable），公开详情接口 60s/15s 服务端缓存，实测球队页 630-930ms → 缓存命中
• 请求合并与去重：in-flight 请求合并 + 30-60s 局部缓存（关注列表、联赛目录、赔率、推荐），跨路由缓存对高复用 POST 身份/赛季数据收益最大
• 加载条与骨架屏：全局加载条受控进度 + 180-300ms 延迟骨架避免闪烁，慢响应 12s 兜底只停加载条不清空目标，避免回跳
• 认证水合竞争修复：首击保留意图 + 水合后执行，解决"添加预测单"首次点击无响应问题

二、功能模块开发

• 三栏布局统一：足篮球首页、详情页、联赛/球队/球员页统一三栏布局，兼容移动端单列
• 比赛详情体系：H2H、分析、赔率、时间线、趋势、伤停信息、历史赛事、近 5 场、阵容、统计等十余个模块独立渲染
• 预测/投注工具：Bet Builder 列表（虚拟滚动分页）、Picks 预测单、预测师排行（11 语言服务端按 locale 缓存）
• 社区功能：发帖抽屉、关注赛事、我的动态（最多 5 条）、社区 OG 图真实帖子卡
• 用户系统：注册登录（MD5 加密）、Google OAuth 授权登录、个人主页、关注/粉丝、收藏、订阅、权限支付墙
• 赛事实时数据：足球详情头部卡片与时间线接入 WebSocket，比分状态等高频数据实时更新
• 趋势分析模块：足篮球详情加比赛趋势、一图流展示
• 新闻模块：首页最新新闻 + 详情页 + 列表，全 SSR 渲染
• 联赛模块：概览整合、淘汰赛、积分榜（主客场筛选 + 空闲预取）、顶级球员/球队、历史荣誉、赛季进度、周最佳球员

三、国际化与多语言

• 接入 next-intl，支持 11 种语言（ko/id/pt_BR/pt/th/vi/zh/zh_TW/ja/en/ph）
• 按模块拆分语言包（社区、工具、首页、支付等），侧栏专用语言包懒加载不增加全站负载
• 修复大量 MISSING_MESSAGE，URL 默认语言去掉 /br 简化访问链路
• 文案统一通过 t() 函数引用，禁止硬编码

四、交互体验与 UI

• Tab 状态 URL 化：所有 Tab 切换状态体现在 URL 上（联赛、赛季、类型、日期、运动）
• 快速跳转锚点：球员/球队/联赛/比赛详情加吸顶、回顶、胶囊快速跳转
• 全站 URL 英文 slug：优先使用接口返回的 name_en/home_name_en 等字段，避免占位 URL
• 深夜模式：全站深色主题适配
• 移动端兼容：联赛筛选横滑、工具入口横滑、详情独立头部、筛选抽屉
• 图集体系：引入统一 SportImage 包装、扩充可信图域名、外部图片 loader 处理

五、SEO 优化

• 全站补全 canonical、title、description、OG/Twitter
• 结构化数据（JSON-LD）覆盖比赛详情、联赛赛程、球员/球队统计
• 联赛页 metadata/canonical 跟随当前 Tab 切换而变化
• OG 图使用真实首场比赛卡 / 帖子卡 / 频道信息卡
• 赛季链接截断 + canonical 策略定调，历史页抓取收敛

六、工程规范与稳定性

• 站点壳持久化：Header/Footer/移动导航/加载条不再随页面卸载，StativoPageShell 收缩为内容容器
• Playwright E2E：13/13 用例通过，覆盖首页、社区、预测、工具、联赛、球员、比赛、球队、转会、个人主页、收藏及预测二级页
• 错误处理统一：502/timeout/Abort 统一识别，核心失败整页错误态，次要模块隐藏，两个以上超时显示聚合刷新提示
• 时区策略：全局 TimeZoneProvider 按 token 拉取一次，写入本地偏好/Cookie/缓存，比赛详情改用原始时间戳
• 路由 loading 改造：立即可见的内容 skeleton，局部数据刷新保留旧内容 + 300ms 延迟
• Turbopack 兼容：修复 env(safe-area-*)、data-[state=…] 动画、bg-[var(...)] 等解析问题

成果

• 从 0 到 1 搭建多站点体育数据平台前端架构，覆盖足球/篮球两大运动线全功能模块
• 系统性 SSR 改造使全站 HTML 渲染量减半，核心页面缓存命中后响应从 600-930ms 降至缓存命中
• 完成 11 种语言国际化接入，覆盖东南亚/欧洲/南美主要市场
• 建立 6 档缓存策略 + 虚拟滚动 + in-flight 合并的性能优化体系
• 落地 Playwright E2E 测试体系，13/13 用例通过保障核心路由稳定性

达实集团 / 达实物联网 | 研发部-前端工程师

2021.03 - 2026.01

改单类项目

• 技术栈：HTML5、CSS3、JavaScript、gulp 构建工具、uniapp（跨平台框架）、Vue、Angular、Axios（接口请求）、ES6、Promise 异步处理、WebSocket
• 功能模块：
  • 支付系统：微信 H5、小程序、支付宝、银行卡支付
  • 考勤系统：基于高德地图定位签到
  • 访客与梯控：访客预约、梯控权限管理
  • 人脸识别门禁：支持用户通过移动端上传/拍摄人脸照片 → 后端提取人脸特征并存储 → 门禁设备调用人脸识别算法实时比对 → 验证通过后自动开门
  • 数据大屏：自适应布局，实时展示数据
  • C3v8 访客机：硬件设备数据交互与界面展示
• 性能优化：
  • 接口统一封装，支持异常处理与重试
  • 上传人脸照片时进行图片压缩与格式校验，控制文件大小 ≤ 500KB，减少网络延迟
  • 识别算法调用优化，准确率提升至 98%+，平均响应时间 < 1.5 秒
  • 资源文件按需加载，减少首屏时间
  • 前端缓存策略减少重复请求
• 部署与适配：
  • 适配 iOS / Android ，微信小程序，微信公众号，企业微信，h5 嵌入 app 应用等多终端
  • 配置微信/企业微信平台接口权限
  • 部署至 Nginx 与 IIS，确保多终端运行稳定
• 成果：
  • 负责整个改单的建立、开发、h5的改单使用nginx部署项目，小程序的需审核发布，企业微信的项目使用测试企业微信部署测试，以及后期的维护
  • 独立完成页面开发与数据接口对接
  • 项目跨终端正常运行，支付与考勤模块稳定性提升
  • 系统部署效率提升

PC 端内部管理平台

• 技术栈：Vue、Angular、qiankun 微前端框架、Node.js、Element UI
• 功能模块：
  • DAS-MP 内部管理平台（高级管理：标签定义、分类定义、词汇定义、基本产品、产品包分类管理、序列管理、短信渠道、默认关闭管理、数据导出、前端资源传输到环境，一级菜单：模块功能点、菜单管理、URL定义、接口返回定义、前端资源、设备类型定义、数据选项管理、参数定义、数据实体、数据模版、消息定义，租户及授权：销售产品包管理、授权基本项定义、租户管理、C3-Plus授权、融合C3-Plus和AIoT授权），登录、修改密码、用户管理、角色管理、环境配置管理、个人设置）
  • C3-Plus OM 运管平台（模块功能点、菜单管理、URL功能点、APICodeMsg、服务管理、产品数据更新、使用许可证、功能关闭与黑白名单管理，登录），
  • C3-Plus SaaS 系统维护（租户管理、租户数据库升级、用户管理、设备列表、解析器配置，登录）
  • C3-Plus 运管平台（消费、考勤、门禁监控、设备服务（设备列表、解析器配置、设备权限下载查询、FTP下载任务查询、设备权限差异汇总、设备权限差异详情、派梯楼层查询、设备运行日志、服务集群、设备接入，系统配置）、主应用等子系统）
• 性能优化：
  • 微前端架构优化，支持多系统无缝集成
  • 图表数据懒加载，减少渲染压力
• 部署与适配：
  • 跨浏览器兼容（Chrome、IE11）
  • 模块按需加载，降低首屏压力
• 成果：
  • 构建DAS-MP 内部管理平台，C3-Plus OM 运管平台和C3-Plus SaaS 系统维护，负责主要开发和维护
  • C3-Plus 运管平台参与消费、考勤、门禁监控、设备服务、主应用等子系统开发
  • 提升多系统协作效率
  • 前端性能提升

移动端 C3-Plus 应用

• 技术栈：uniapp、uView UI 框架、Vuex、Axios、ES6、Promise
• 功能模块：
  • 登录/注册（微信授权登录、Token 鉴权）
  • 主页（信息总览、快捷入口）
  • 我的（个人信息管理、消息通知）
• 性能优化：
  • 使用 Vuex 管理全局状态，减少数据冗余
  • 图片资源按需加载，首页加载速度提升
  • 接口请求统一封装，支持错误处理与重试机制
• 部署与适配：
  • 适配 iOS / Android 与微信小程序
  • 按需引入组件，减少包体积
  • Flex 布局与媒体查询实现多屏幕适配
• 成果：
  • 提升移动端用户操作流畅度
  • 统一 UI 风格，降低维护成本

中联智科高新技术有限公司 | 研发部-前端开发

2020.03 - 2021.03

智慧鱼池

• 技术栈：Angular、Ionic（移动端）、Vue、Avue、Element UI、OpenLayers 地图
• 功能模块：实时监控鱼池环境，日志管理与多租户支持，养鱼设备管理与消息通知，ERP 系统集成
• 性能优化：地图数据分层加载，表格分页与虚拟滚动优化
• 部署与适配：移动端与 PC 端双平台适配，组件按需加载，减少资源占用
• 成果：建立移动端模型和PC端的构建，移动端与 PC 端功能稳定运行，数据可视化响应速度提升

智慧畜牧

• 技术栈：Angular、Ionic（移动端）、Vue、Avue、Element UI、OpenLayers 地图
• 功能模块：牲畜实时监控，颈圈佩戴与电子围栏管理，地图定位与轨迹回放，牛脸识别与日志管理，消息管理，入栏数数和设备管理。
• 性能优化：实时定位数据压缩传输，图片识别接口并发优化
• 部署与适配：移动端与 PC 双平台支持
• 成果：实现散养与圈养模式切换，数据传输稳定性提升，实现摄像头，颈圈的安装，拆卸，转换，查看。牲畜管理，牲畜跨越电子围栏实时定位牲畜位置。

析研科技有限公司（实习） | 开发部-前端开发工程师

2019.10 - 2020.01

香港补习教育系统

• 技术栈：Vue、Spring Boot、Element UI、WebSocket
• 项目描述：该项目属于线上补习教育类，基于多语言处理的前后端分离开发，支持Web端和手机端线上服务。有学生端和教师端。上堂以实时直播的形式实现，根据个人信息级、筛选条件和课程安排选择配对。
• 功能模块：时间表管理、课程配对、我的，笔记管理与上堂等。
• 性能优化：WebSocket 保持低延迟实时通信，界面组件按需加载
• 部署与适配：跨浏览器兼容
• 成果：完成核心交互逻辑与数据渲染，提升直播课程稳定性。对接数据接口，封装函数处理数据库中的json数据，展示到页面。根据UI 设计的项目设计稿，使用Element中的组件，编写代码实现页面展示。测试前端功能和前端与后端数据接口的实现。

项目经验（毕业设计）

图片分享网站 | 独立开发

• 类似 Instagram，支持注册登录、上传图片、评论、点赞
• 七牛云图片存储与处理，腾讯云服务器，百度云数据库
• 图片懒加载、MD5+Salt 密码加密、响应式图片缩放
• 项目地址：https://github.com/changxiangyu666/PycharmProjects

荣誉奖项

• 优秀学生二等奖学金
• 优秀学生三等奖学金