该项目是一个面向教育行业，财经管理垂直领域的网站平台。 使用了vue是2.0的版本，axios vue-router vuex等，未使用UI组件库。 为了打造品牌形象，公司重新设计了一套UI规范。 我负责封装了一系列UI组件，包括弹层、菜单和按钮、搜索导航栏等。 主要实现了课程介绍页、播放页和支付页，以及VIP宣传和开通页等。
在开发中，我遇到了一些技术挑战： 在客服聊天功能中，使用 EventSource 实现了服务端实时推送的逐字打印效果。这是一个建立链接，接受数据，关闭链接的过程。 当提交的数据内容过多时，采用分段提交，转换为多个Promise处理。
课程还支持以海报的方式宣传，系统需要根据课程信息和用户信息生成多张海报。这些海报通过轮播图的方式展示，支持下载到本地。 如果一开始合成全部海报后，再排列成轮播图，需要花费10秒以上的时间。 后面采用懒加载的方式提高了加载速度。先以空白图片占位生成轮播图。然后合成需要首屏展示的海报，切换轮播图再合成下一张。 首屏加载速度降低到1.2s左右。期间又出现了一个新的问题。当轮播图切换至首尾的位置时，会出现空白图片。 原因是在图片还未合成时，就已经复制了前后的图片。 通过重新执行swiper的渲染解决了问题。
状态模式应用： 项目中存在近20种课程状态，通过使用设计模式中的状态模式，将课程的行为与其内部状态分离，使得代码更加易于理解和调试。 根据不同的购买方式（普通购买、按时长购买、拼团购买、赠礼领取），定义了不同的状态，并在状态变化时执行相应的行为。 例如，在普通购买方式下，课程状态包括已售罄、立即报名、VIP会员价报名、VIP免费听、未开课、开始学习等，根据不同状态显示不同的信息和操作。
公司需要提高网站的搜索引擎排名，吸引更多的用户访问课程详情页。 运用技术：vue3.0 nuxt.js 用户打开浏览器，输入网址请求到Node.js中。部署在Node.js的应用Nuxt.js接收浏览器请求，并请求服务端获取数据。 Nuxt.js获取到数据后进行服务端渲染。Nuxt.js将html网页响应给浏览器。
以上就是我遇到的一些挑战和解决方式。
