Vue全栈技术重构字节跳动招聘网站总结（上）
.pagination-list{display:flex;}.pagination-item{margin-right:4px;游标：指针；填充：8px；&:hover{颜色：@main-color;}&.current{颜色：@main-颜色；}}初衷现在社区里基于Vue的项目非常多。为了提高自己对Vue的进一步了解，一直在寻找界面好看，功能齐全的。项目练手。我在逛各大招聘网站的时候，发现字节跳动的官方招聘网站非常适合练习。当我发现这个网站是用react实现的时候，我就想，能不能用vue的技术栈来完全重构呢？数据从哪里来？一个完整的线上项目离不开完整的数据，那么如何才能得到自己要做的项目的真实数据呢？于是默默打开原网站的开发者工具，在网络面板找到了浏览器请求的官方API接口。一旦找到API接口，就可以放心阅读了。问题是像字节跳动这样的公司肯定会限制跨域访问服务端API请求。即使某个接口可以成功请求数据，长期作为自己项目访问的接口使用也是不稳定的。于是想到了接口代理的实现方案。实现的大体思路是使用express自己搭建一个服务器，包括项目上线后静态资源的托管。服务端接口代理小技巧对于在浏览器端抓取的API数据接口，单纯分析其地址和各种参数无疑是非常麻烦的。有没有办法一键复用？怎么样？答案是肯定的！由于节点端没有原生的fetch请求方法，所以这里需要一个第三方节点模块node-fetch。这是一个浏览器端原生的fetchrequest模块，可以直接用npm安装。有了它，我们就可以在浏览器的网络面板中使用界面一键复制功能了。具体操作请看下面的demo。详细API代码案例，请点击这里。此功能仅在高版本的chrome浏览器中可用。如果你的浏览器没有这个复制选项。请升级到最新的浏览器并使用项目技术架构。为了进一步提高自己的技术水平，更好的加深对Vue的理解，我选择零代码开发所有页面功能（没有使用任何3rd方UI库）。项目前端技术栈vue主框架vue-router路由跳转的官方插件lodash一个javascript函数工具库axios负责HTTP请求的插件服务端技术栈express构建web服务器的nod??ejs框架node-fetch类似在浏览器端获取请求polyfillconnect-history-api-fallback解决了单页应用以history方式访问服务器时出现404的问题。中间件项目开发工具vue-cli快速搭建Vue项目官方脚手架Lesscss预处理器vscode轻量级代码编辑器postmanAPI接口测试调试工具vue-devtoolsVue项目官方调试工具chrome应用运行/调试环境git开源版本控制系统部署环境阿里云服务器在线地址http://123.57.204.48:3000git远程仓库地址git@github。com:konglingwen94/vue-bytedanceJob.gitgithub代码托管仓库https://github.com/konglingwen94/vue-bytedanceJob项目源码目录项目重要功能分析pager组件components/pagination.vue查看源码点这里我正在开发这个页面在组件之前，我也提到了多个网站的分页功能。各种分页功能各不相同。经过挑选，我终于确定了我认可的那个。该组件实现的功能如下图所示。从上图中我们可以看出这是一个功能完整的pager组件。基本代码这里就不介绍了。具体实现请点击这里。下面主要分析一下开发过程中遇到的困难！当鼠标点击分页的数字键时，整个分页条会随之动态切换。当总页数超过一定值，或页面切换到一定范围时，会出现相应的省略号，而不是隐藏页码显示。这个功能逻辑应该如何实现？好的想法是编写优雅代码的第一步。我把分页的可能状态分为四种情况。当最小页数后面出现省略号时，分页器的总页数小于默认显示的页数（分页栏中没有省略号）。根据上面列出的情况，可以使用代码来实现。这里我使用Vue的一个计算属性visiblePagers动态显示出现的所有页码。该组件的完整代码如下<{{item}}>
</template>
.pagination-list{display:flex;}.pagination-item{margin-right:4px;游标：指针；填充：8px；&:hover{颜色：@main-color;}&.current{颜色：@main-颜色；}}查看穿梭框组件components/checkbox-transfer.vue源码地址效果图实现过程对于这个组件功能的开发，我真的很辛苦，一言难尽首先，市场上没有相同功能需求的用例可供参考，其次，在开发过程中，组件的各种逻辑实现也在摸索实现。花了一定的时间还是没有更好的主意，我默默打开github这个全球最大的程序员同性交友平台，搜索了一下，终于在开源项目的基于Vue的transfer组件中找到了组件库element-ui。可参考的逻辑实现方法实现。重点总分析template部分代码{{title}}
{{item[props.label]}}{{item[props.label]}} 为对于这样一个复杂的交互复选框，定义它的基本初始化数据状态是第一步，在调用这个组件的时候，模板会传入一个名为data的属性（这里是一个数组），props选项作为该组件的数据源组件，关注的焦点转移到组件内部数据交互的各种实现上，我先在组件状态数据中定义了一个名为targets的数组类型的变量，用来存储默认展开的复选框列表项的键值，然后根据data和targets这两个基本数据状态，可以导出两个计算属性sourceData和targetData分别渲染展开和隐藏的checkbox选择项，至此组件基本静态模板渲染的逻辑就构思好了。相关部分代码如下组件脚本部分exportdefault{name:"checkbox-transfer",props:{value:{type:Array,default:()=>[]}},计算：{checked(){returnthis.targets.map(key=>this.value.includes(key));},},方法：{check(item,e){if(!e.target.checked){constdelIndex=this.value.indexOf(item[this.props.key]);如果(delIndex>-1){this.value.splice(delIndex,1);}}else{if(!this.value.includes(item[this.props.key])){this.value.push(item[this.props.key]);}}this.$emit("check",e.target.checked,item[this.props.key]);this.$emit("输入",this.value);}}}首页页眉导航栏交互展示功能查看源码点这里介绍一下效果和功能。顶部导航栏具有页面向下滚动时吸顶的功能。横幅视频部分滚动出页面可见区域。导航栏更改主题色后，导航栏会根据页面滚动方向隐藏和显示。实现思路导航栏的前两个功能实现起来比较简单，这里就不做介绍了。下面主要分析函数中的第三点。如何根据页面的滚动方向判断导航栏的显示状态？简单的切换显示状态对于熟练使用Vue的同学来说很容易。这里的坑是在滚动过程中如何判断页面的滚动方向呢？说到这里，肯定有人想到可以使用浏览器的原生API来监听元素滚动事件，在事件滚动的回调函数中进一步处理逻辑判断。想到这对我们的最终目标来说是向前迈进了一大步，所以浏览器HTML元素的滚动事件可以为我们提供有限的回调参数，也就是说这个事件对象并没有直接提供这个滚动功能。方向信息。所以这个问题需要我们手动解决。手动封装监听元素滚动的功能为了判断元素的滚动事件相对于上一次滚动的方向，我们需要记录并存储上一次的滚动事件信息，然后通过比较坐标值来判断两个滚动事件本次页面滚动的方向（这里只判断是向下滚动还是向上滚动）。为了让这个判断元素滚动方向的逻辑更加可复用，我把它分离成一个实用函数，当我们需要用到这个逻辑的时候可以直接复用。具体实现代码helper/untilities.jsexportconstwatchScrollDirection=function(scrollElement,callback){constscrollPos={x:0,y:0};constscrollDirection={directionX:1,directionY:1,};函数onScroll(e){constscrollTop=scrollElement.scrollTop||scrollElement.pageYOffset;常量scrollLeft=scrollElement.scrollLeft||滚动元素.pageXOffset;if(scrollPos.y>scrollTop){scrollDirection.directionY=-1;(scrollPos.x>scrollLeft){scrollDirection.directionX=-1;}else{scrollDirection.directionX=1;}callback.call(scrollElement,scrollDirection,scrollPos);scrollPos.x=scrollLeft;scrollPos.y=scrollTop;}scrollElement.addEventListener("滚动",onScroll);returnfunction(){scrollElement.removeEventListener("scroll",onScroll);};};页代码实现如下views/home.vue组件脚本部分import{watchScrollDirection}from"@/helper/utilities.js";exportdefault{mounted(){constrootVm=this.$root;rootVm.$emit(“home-scrolling”,{directionX:1,directionY:-1},{x:document.body.scrollLeft,y:document.body.scrollTop});this.unwatch=watchScrollDirection(window,function(...args){rootVm.$emit("home-scrolling",...args);});},destroyed(){this.unwatch();}}应用截图首页招聘职位产品与服务职位详情员工故事支持阅读本文后，如果对您有所帮助，请点赞，谢谢！如果您想讨论项目相关问题或参与共建，欢迎留言！如果您对本项目有更好的建议或者发现bug，请提交issue申请在线地址：http://123.57.204.48:3000/项目仓库地址：https://github.com/konglingwen94/vue-bytedanceJob，欢迎Star并关注，谢谢！本文为个人原创，转载请注明出处，谢谢！
