# ineterview-wx-pay **Repository Path**: AlanLee97/ineterview-wx-pay ## Basic Information - **Project Name**: ineterview-wx-pay - **Description**: 腾讯微信支付面试项目 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-04-25 - **Last Updated**: 2021-10-04 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 要求： 用7天时间，根据视觉还原一个“境外营销发券首页”的项目 ## 背景： “境外营销发券首页”承担出境游客的流量分发、页面配置等能力。作为开发者，首先保证项目可运行，还原出设计稿。 页面打开后交互顺序：步骤1 -> 步骤5 ## 加分项（根据兴趣可选择其中的点实现）： - [x] 境外弱网络环境下给游客更快更好的用户体验 - [x] 考虑页面内容是可配置的，所有券和页面logo name都是可配置可运营的 - [x] 游客访问进入页面自动领取特殊券，并且弹窗提示，要求弹窗之间是互斥的 - [x] 灰度发布，可以指定openid灰度到新特性 - [x] 异常监控，可以及时发现页面白屏和页面报错的异常 - [x] 单元测试和集成测试，保证页面每次变更的质量可控 - [x] 方便本地开发，可mock服务端数据 - [ ] 如有其它优化项，可以自由发挥 实现方式：不限前端框架，vue、react、小程序都可以，服务端请求可以通过mock的方式实现。 ## 我做的工作 > 2021.04.26 ~2021.05.02 ### 工作 1. 完成页面设计、封装组件、PC端下浏览进入移动端浏览模式 2. 优化页面性能，使用缓存，使用webfont字体，动画优化`requestAnimationFrame` 3. 灰度名单，实现分享功能和赠送功能的灰度名单 4. 错误监控 5. mock数据 6. 组件单元测试 7. 完成简易后端服务 8. 完成控制台页面，功能有：优惠券配置、灰度名单、错误监控 9. 完成mock与dev环境之间的切换 10. 实现CI/CD功能，使用gitee代码仓库 + 阿里云云效平台的流水线功能完成项目打包，并把打包的文件发送到服务器，服务中使用docker运行nginx，把打包的项目解压到nginx的html目录中，完成项目部署。 11. 项目已部署到自己的服务器： - 境外营销发券首页：http://47.103.204.62:9999/#/ - 控制台：http://47.103.204.62:9999/#/dashboard ### 技术选型 **前端：** - vue.js - vue-router - vue-cli - axios - element-ui **后端：** - node.js - express - sequlize - mysql2 - mysql ### 难点 ##### 1. 实现优惠券效果 优惠券的圆角效果不太好实现，最初的思路是通过绝对定位的方式，画4个圆到矩形的四个角，并显示圆两边的边框圆角，但是加上阴影就会暴露出圆的形状了。 也试过svg的方式来画圆，但是，加上阴影之后也会暴露出圆的位置。最后找到一种比较好的实现方式是使用径向渐变radial-gradient最为背景来实现优惠券内凹圆角效果。 ##### 2. 实现数字滚动效果 数字滚动效果可以使用css动画+js实现，css负责动画，通过@keyframe定义动画，并通过改变translateY改变元素的相对高度，通过js控制动画的停止位置。动画使用`requestAnimationFrame`进行优化。 ##### 3. 字体优化 字体文件体积过大，字体优化尝试过有字库的webfont，但是也会出现加载过久的问题，而且免费次数有限，需要充钱。。。最后使用字蛛plus（font-spider-plus）实现将字体压缩。字蛛也有缺点，对于vue单页面应用，它找不到webfont，所以我只能手动把页面的字体复制出来到一个新建的html页面中，压缩后把字体文件复制到项目中。 ##### 4. 灰度发布 灰度发布，我以前没接触过，这个项目的实现也是简单的添加名单判断商户在灰度名单中可以使用哪些功能特性，然后控制页面中功能的显示/隐藏。 ##### 5. 错误监控 错误监控也是第一次接触，查阅了网上的相关文章之后，自己动手实现了一个简单的错误监控，只是把捕获到的错误发送给服务端存到数据库，然后前端请求显示出来。 ### 项目运行 **前端** 安装依赖 ```shell npm i ``` 运行项目 ```shell npm run serve ``` 打包项目 ```shell npm run build ``` **服务端** 安装依赖 ```shell npm i ``` 运行项目 ```shell npm start ``` **说明** - 因为前端中通过js获取主机和端口，在mock环境下获取不到主机和端口，所以不能在本地直接打开打包好的项目进行访问，需要通过`npm run server`的命令运行，或者把打包好的项目放到服务器中运行 - 项目中实现了 2 套环境的切换（mock环境，dev环境） - mock环境会请求本地服务器的主机和端口进行请求json数据。 - dev环境需要配合服务端使用，需要先运行服务端项目，再运行前端项目，dev环境的数据会去数据库中获取。 - 切换环境的方法：在`src/config`下的`AppConfig.js`文佳下修改env属性即可切换环境。env的取值有`"mock"` 和 `"dev"`。 - 灰度功能体验，需要通过输入访问，获取页面路径以获取哪个商户的页面，例如输入 - http://localhost:8080/#/index/1 访问商户id为1的页面 - http://localhost:8080/#/index/2 访问商户id为2的页面 - 通过灰度名单判断哪些商户可使用哪些特性功能，这里暂时模拟了”分享“和”赠送“的按钮。 ### 页面截图 **步骤1** ![步骤1](https://gitee.com/AlanLee97/public-asset/raw/master/note_images/步骤1.png) **步骤2** ![步骤2](https://gitee.com/AlanLee97/public-asset/raw/master/note_images/步骤2.png) **步骤3** ![步骤3](https://gitee.com/AlanLee97/public-asset/raw/master/note_images/步骤3.png) **步骤4** ![步骤4](https://gitee.com/AlanLee97/public-asset/raw/master/note_images/步骤4.png) **步骤5（半屏）** ![步骤5（半屏）.png](https://gitee.com/AlanLee97/public-asset/raw/master/note_images/步骤5（半屏）.png.png) **步骤5（全屏）** ![步骤5（全屏）](https://gitee.com/AlanLee97/public-asset/raw/master/note_images/步骤5（全屏）.png) **PC端访问-显示移动端样式** ![PC端访问-显示移动端样式](https://gitee.com/AlanLee97/public-asset/raw/master/note_images/PC端访问-显示移动端样式.png) **控制台-优惠券配置** ![控制台-优惠券配置](https://gitee.com/AlanLee97/public-asset/raw/master/note_images/控制台-优惠券配置.png) **控制台-优惠券配置-弹窗** ![控制台-优惠券配置-弹窗](https://gitee.com/AlanLee97/public-asset/raw/master/note_images/控制台-优惠券配置-弹窗.png) **控制台-灰度发布** ![控制台-灰度发布](https://gitee.com/AlanLee97/public-asset/raw/master/note_images/控制台-灰度发布.png) **控制台-错误监控** ![控制台-错误监控](https://gitee.com/AlanLee97/public-asset/raw/master/note_images/控制台-错误监控.png) **控制台-错误监控-2** ![控制台-错误监控-2](https://gitee.com/AlanLee97/public-asset/raw/master/note_images/控制台-错误监控-2.png) ## 后记 因为目前还在实习，做这个项目是利用下班的空闲时间完成的，还有些内容还不是很完善，但是由于时间关系，这个项目就暂时只能做到这个程度。 通过做这个小项目，也收获了很多知识，比如实现优惠券效果、动画优化、字体优化、前端页面错误监控、灰度发布等，这些内容我自己做项目的时候没有去实现过这些功能，实习工作中也没有接触到。所以通过这次项目，收获还是很大的。