Skip to main content

项目介绍

凤凰时间线以时间正/倒序展示不同类型的事件流，单个节点支持文本、图片、视频、链接形式，可配置事件里程碑（如反转、实锤）、水印、互动类型，实现了发现页、时间线、爆料页等页面，开发了上传爆料、弹幕评论、时间线展示等功能。

项目指责​

  1. 项目基于 React Hooks 技术栈的 Hybrid App 移动端应用，使用  Unstate-Next 进行轻量级状态管理。
  2. 由于 Hybrid App 混合开发模式，封装 Link 路由组件适配不同平台路由跳转。
  3. 根据产品需求，开发 Message 组件和弹幕评论组件，基于 PhotoSwipe 封装九宫格图片组件，实现预览图片并且可以放大缩小，封装音视频播放器，基于 Html2canvas 封装海报分享组件等。
  4. 封装  Axios 和 Jsonp 进⾏后端数据联调，编写 MockJS 脚本数据，使用 Postman 进行数据调试。
  5. 分别使用 CORS / JSONP / Nginx 进行跨域测试处理，编写 nginx.conf 对 nginx 进行反向代理，使用 URL Rewrite 文件定向。
  6. 通过 Charles 进行数据抓包内审，统一处理数据埋点。
  7. 基于原生 / KOA2 框架两种模式搭建 Node Server 层，处理接口数据。
  8. 通过 Docker 进行编写 Dockerfile 分别对前端项目和 Node 应用进行容器化部署，通过多层构建 Dockerfile.multi 优化镜像体积，发布 Docker Hub 镜像平台，编写 Docker Component 启动多容器。
  9. 负责页面中 UI 交互动效制作。

技术点​

React / Hooks / Axios / Unstated-Next / Webpack / Nginx / KOA2 / Docker

预览地址​

  1. 通过 Docker Hub 平台，拉取 Docker 远程镜像。 docker pull xinjn/timeline-node-mysql:latestdocker pull xinjn/timeline-react-nginx-node:latest
  2. 通过 Docker-Compose.yml（下载）启动多容器服务，访问 location:9999 进行启动预览。