Vue全新重构升级字节跳动招聘网站2.0总结（下）

项目仓库地址：https://github.com/konglingwe...项目在线预览：http://123.57.204.48:3000前言New重构升级项目vue-bytedanceJob2.0终于完成。特此写一篇文章总结一下。续684490....本文将重点介绍新版网站新增的主要功能，并对有趣的地方进行详细分析，同时重新总结整个项目（技术栈）和一??些典型的业务逻辑在项目实施分析中。同时，2.0版本的项目还增加了几个API类型的自定义组件，比如进度条弹窗、消息通知、数据加载等组件。我还将对这些组件的功能特点和开发过程进行分析。所以下面的介绍干货满满。看完别忘了点赞和评论哦！新增需求已实现[x]用户通过邮箱登录账号[x]选择本地简历文件上传[x]解析本地上传的简历文件[x]保存新写的简历[x]预览最新简历[x]下载简历文件到本地[x]每页数据加载提示[x]职位搜索框动态吸顶[x]保存简历并取消操作栏目动态吸底[x]添加一些切换页面时的动画效果[x]项目整体未实现优化[]邮箱账号注册[]手机号登录[]恢复投递[]项目进一步优化部分截图恢复预览页面除需求外以上所列，简历编辑页面已经全部实现，同时对一些功能也进行了很多重构。包括几个可以通过API调用的组件，也是通过自己手动开发打包实现的，替代了之前的组件。版本中使用第三方组件库引入的组件。经过项目最终展示效果的实际测试，业务的整体整合和组件基础功能的定制都有了很大的提升。神宇的代码不仅变少了，而且更符合业务逻辑。有很多改进和不足之处。与第三方成熟类库相比，测试用例不够全面，有些地方需要进一步测试完善。其次，如果你需要在自己的项目中引入这些组件，需要进行二次开发，因为这些是业务组件而不是通用组件。如果您在使用过程中有任何问题或者好的建议，欢迎提交issues！新增的三个API组件下面的组件都支持API调用，本项目各组件的调用方法挂载到Vue实例的原型对象中，根据具体用例，也可以导入到具体文件中进行调用使用。每个组件的详细信息如下。以交货方式交付。图中的加载有两种调用状态，一种是本地调用（通过指令的方式），一种是方法调用。下面是一个简化版的代码来做演示。统一解释：在代码演示中，这个是在Vue实例API模式下使用的/*@params`position`是全屏`loading`的具体定位信息，默认为`0`，其位置可以是根据需要调整*/constloading=this.$loading({position:{top:0,left:0,right:0,bottom:0}});//以正确的方式关闭loading.close()调用指令的绑定值可以替换为组件状态变量，以便灵活控制加载状态。这里简化代码代替scrollFixed是一个支持transfer的指令修饰符，它的作用是当绑定loading的DOM元素滚动出页面视口时，loading图标会一直显示在中间，朋友们不要不用担心元素的滚动，会导致loading一起滚动消失在viewport中。想想是不是酸了！在此处查看组件代码。进度条弹窗组件popup-progresspopup-progress组件可以看做是一个弹窗进度条组件。由于暂时想不出更好的名字，就暂且这样命名吧。用过一些类库组件的同学很容易认为它是结合弹窗提醒和进度条进度设计的。由于是全屏组件，这里引入了众多js设计模式中的单例模式的概念。这个模式也用在了这个组件的设计上，和大多数弹窗组件一样是比较经典的实现方式。那么它和其他模态框组件有什么区别呢？由于弹出框中的滚动条处于不断变化的状态，所以调用该组件不同于其他返回Promise的组件，比如alert、confirm、prompt等组件，这些组件之所以能够返回一个promise是组件挂载后需要等待用户操作的状态。组件本身的状态是固定的，不需要用户手动操作，这和js中的promise很像。因此，组件调用返回承诺也就不足为奇了。但是这篇文章中的popup-progress是不一样的。为了满足业务需求，组件挂载后，进度条的进度是一个需要改变的值。显然，给组件传递一个固定的状态值属性是行不通的，所以在创建组件后返回实例本身更合适。这样的处理在调用组件的上下文环境中返回组件实例本身，而不是在组件初始化时传递函数等复杂的数据类型参数，在组件内部进行处理。这种设计方式方便了组件注册和监听自定义事件。API不仅可以链式调用，而且我个人认为这比将监听函数的参数传递给组件更优雅。说了这么多，只有代码演示更直观。//创建一个进度条弹窗constpopPro=this.$popupProgress();//在具体用例中更新`popPro`的进度值，这里使用`setInterval`来模拟演示consttimer=setInterval(()=>{//这里控制进度条进度的值是`value`，该值需要是`1-100`之间的数字popPro.value+=10;},300);//监听上传终止事件（点击`Cancel`按钮后触发）popPro.$on("abort",()=>{//上传终止后的操作，关闭弹窗进度条popPro.close()});//当进度条进度为`100%`状态时触发`success`事件popPro.$on("success",()=>{clearInterval(timer);//关闭弹窗进度条popPro.close()});上面注册事件的代码可以简写为this.$popupProgress().$on("abort",()=>{}).$on("success",()=>{});至此，popup-progress组件的所有解析就到这里了，如果有好的建议或者问题欢迎提交issue查看代码点https://github.com/konglingwe...消息通知组件messageIntroduction消息组件在日常业务开发中应用广泛，可能追求快速开发同学们直接介绍了通用类库（我之前就是这样做的）。通用类库的组件有一个特点。之所以通用，是因为在功能设计上考虑了很多业务场景和用例，自然包含的功能也很丰富。但是对于需要长期维护更新的项目，就会出现很多问题。首先，通用组件的UI风格与自身业务需求不完全匹配。第二，代码量会冗余。这些都是无法回避的问题。因此，当我们遇到类似的业务需求时，自己去实现往往是更好的选择。这样不仅可以使项目的整体代码更加聚合，也可以大大提高我们自身的技术水平。基本介绍消息组件有成功、失败、警告三种消息状态，对于一般复杂度的项目应该够用了。麻雀虽小，五脏俱全。该组件具有消息通知组件应有的所有功能，尽管它不像可以通过轮子传递的参数那样多样化。只说本项目的用例就够了，有兴趣的同学可以以此为基础进行二次开发。欢迎提PR和issue。组件API的使用也保持了通用的设计。具体演示如下//这里以成功消息状态为例，其他两个相同。message.success('success')//支持传递消息关闭的时间参数，默认为`3000ms`this.$message({message:"success",duration:2000})消息组件和popup-progress组件与上面介绍的相比，API底层的设计模式是工厂模式。所有创建的组件实例在被销毁之前都存储在队列中。在代码中每次调用创建组件的方法都会向视图添加一条新消息。显示效果依次排列如图所示。所以在使用过程中可以多次调用。查看代码点https://github.com/konglingwe...递归思想在业务中的应用看到这两个典型用例的演示，好像和题目说的递归没什么关系。其实这里面有个函数实现的方法就是用递归的思想。回到图中的函数本身，在滚动过程中动态吸取页面某部分的底部或者天花板，其实并不复杂。这里要说的是其中一个细节的实现。我们知道DOM元素的一个属性值offsetTop。它表示相对于最近定位的父元素顶部的距离偏移，那么这里打印了另一个属性offsetParent，它表示元素的最近父定位元素。有了这两个属性，我们就可以很方便的得到元素在各个方向上相对于父元素的偏移距离。那么如果我们想要获取元素到页面顶部的距离，应该怎么获取呢？如果元素的offsetParent属性是根元素html，直接获取元素的offsetTop属性即可。如果有多个父级定位元素，我们需要手动一步步找到该元素的offsetParent元素的offsetTop进行累加计算。这样，最终就可以正确的得到结果了。问题是这种方法在页面布局复杂的场景下效果不佳。如果要计算的元素层次嵌套很深，父级定位元素很多，计算量会非常大，容易出错。我把逐层查找父元素的offsetTop值看作是一个手动递归的过程。既然可以用程序来解决的问题，那么最终还是要用程序来解决。直接把代码放出来functiongetOffsetTop(node,targetOffsetParentNode,offsetTopSum=0){offsetTopSum+=node.offsetTop;如果(node.offsetParent!==targetOffsetParentNode){returngetOffsetTop(node.offsetParent,targetOffsetParentNode,offsetTopSum);}return;}//用例：获取元素`$0`与根元素`offsetTop`的顶部的距离constoffsetTop=getOffsetTop($0,document.documentElement)与顶部的距离有什么关系实现图中的根元素和效果？？通过将该值与滚动容器的滚动坐标进行比较，可以实现滚动和切换定位元素的功能，这里不具体分析。功能实现源码求职栏滚动吸顶这里恢复编辑操作栏动态吸底https://github.com/konglingwe...查看本项目更多工具功能点击这里抓取服务器界面关于服务器如何界面是Crawled的，这里我也简单说一下项目整个后台界面代理的整个过程。一开始就在浏览器开发者工具提供的Network面板中一一搜索，然后使用Postman实际一一调试。说到这里，想说说自己爬数据接口的经历。用工具调试界面和用代码模拟调试真的是两个不同的东西。由于运行环境的不一致，经常会出现一些意想不到的问题。这里我以一个接口请求为例，登录类强依赖接口状态。这类接口由于需要鉴权，需要在请求头中携带大量私有字段发送给服务器。一些请求头域是浏览器默认不允许携带的。是的，比如referer，origin等字段，所以需要携带这些信息来发送请求的接口在浏览器中是无法实现的，所以我们往往需要一个代理服务器来转发这些接口。其实这个项目也是这样做的，proxyforwardingrequest的方法是通过第三方中间件实现的。有兴趣的同学可以点这里查看具体的实现方法。除了上面这些，让我深挖的是token验证类型的请求接口，而这个项目是通过验证token来实现的。有兴趣查看具体实现过程的同学会在这里继续集成，一个完整的在线项目离不开持续集成这一步。该项目使用简化的持续集成配置。第一台在线服务器是从电子商务公司购买的。项目本身使用的持续部署插件借鉴了知名开源项目Vue的使用方法yorkie。package.json文件的配置是{"gitHooks":{"pre-push":"shdeploy.sh"}}前提是你需要写一个部署脚本deploy.sh，每次都会执行项目提交到远程仓库触发gitHooks配置的脚本命令，然后静静等待程序自动部署就ok了。脚本部署文件的内容可以配置如下，如果需要增加更多的步骤，可以直接写。!/usr/npmrunbuild#需要构建到`server`目录scp-rserveruser@192.168.1.1:/var/www/projectname项目构建发布后，需要登录云服务器启动服务。本项目使用pm2，在终端运行如下命令启动服务cd/var/www/projectnamepm2startapp.js对Vue的理解和认识更上一层楼，对于项目重构升级要做的一系列工作又重新掌握了。从最初的API接口分析和爬取，到需求的整理和分析，到最后的代码编写，再到反复测试和持续集成。从而对项目的开发步骤有了更好的理解和把握。同时，自己也有很多不足需要不断的补充和学习。另外，也希望对在学习中看过这篇文章的你有所帮助。让我们互相鼓励，一起努力吧！支持如果看完文章感觉不错，请点个赞，谢谢！如果你有好的想法和建议，欢迎在评论区留言！文章有错误请指出，谢谢！查看项目仓库地址：https://github.com/konglingwe...项目在线预览：http://123.57.204.48:3000文章作者：孔令文。