vue-bytedanceJob
vue-bytedanceJob copied to clipboard
konglingwen94
Vue仿写字节跳动招聘网站的单页面应用，仅作为学习使用。
项目总结（下）
## 前言 全新重构升级的项目[vue-bytedanceJob 2.0](https://github.com/konglingwen94/vue-bytedanceJob)终于完成了，特此写一篇文章总结一下，就当是对上一篇文章[Vue全栈技术重构字节跳动招聘网站 ](https://juejin.im/post/6844904199289831432)的一个补充。本篇文章会重点介绍网站新版本添加的主要功能，并会对有意思的地方详细分析，还有就是对于整个项目的重新概括（技术栈）以及项目中一些典型业务逻辑的实现剖析。同时，`2.0`版本的项目还增加了几个`API`类型的自定义组件，比如，`进度条弹窗`，`消息通知`，`数据加载loading`等组件，这些组件的功能特点和开发过程我也会进行解析。所以下面的介绍是干货满满，看完了别忘记点赞留言额！ ## 新增加的需求 已实现 - [x] [用户通过邮箱登录账号](http://123.56.124.33:3000/user) - [x] [选择本地简历文件上传](http://123.56.124.33:3000/resume/edit) - [x] [解析本地上传的简历文件](http://123.56.124.33:3000/resume/edit) - [x] [保存新编写的简历](http://123.56.124.33:3000/resume/edit) - [x] [预览最新的简历](http://123.56.124.33:3000/resume) - [x] [简历文件下载到本地](http://123.56.124.33:3000/resume) - [x] 各个页面数据加载`loading`提示 -...
## 初衷 现如今社区上基于`Vue`的项目已经多如牛毛了，为了提升自己对`vue`的进一步理解，一直想找一个界面好看，功能完成的项目练练手。本人在逛各大招聘网站的时候发现了`字节跳动`的官方招聘网站很适合自己练手。当我发现这个网站是由`react`实现的，想了一下那我能不能用`Vue`的技术栈完整的重构出来呢? >预览点[这里](http://123.56.124.33:3000) ## 数据从哪来？ 一个完成的上线项目离不开完整的数据，那么我要做的这个项目真实数据要怎么才能拿到呢?于是自己又默默的打开了原版网站的开发者工具，在`Network`面板里发现了浏览器请求到的官方`API`接口。找到了`API`接口就省心读了，问题是像字节跳动这样的公司对服务端API请求肯定会做跨域访问权限的限制，就算某一个接口能成功的请求到数据，对于一个想要长期作为自己项目访问的接口使用来说也是不稳定的。于是我又想到了接口代理的实现方案，大概的实现思路是使用`express`搭建一个自己的服务器，包括项目上线后静态资源的托管都会用到。 ## 服务端接口代理的小技巧 对于在浏览器端抓到的`API`数据接口，纯粹的分析其地址和各种各样的参数无疑是很麻烦的一件事情，有没有一种办法可以一键复用它呢?答案是肯定的!由于node端没有原生的`fetch`请求方法，这里需要借助一个第三方的node模块`node-fetch`，这个是可以直接用npm安装的类似于浏览器端原生的`fetch`请求模块。有了它我们在使用浏览器`Network`面板里面的接口一键复制功能，具体操作请看下面的演示，详细的API代码案例请点击[这里](https://github.com/konglingwen94/vue-bytedanceJob/blob/master/server/controller/jobs.js)  ```! 此功能只有高版本的chrome 浏览器有此功能，如果您的浏览器没有此复制选项，请您升级到最新的浏览器后在使用 ``` ## 项目技术架构 为了进一步的提高自己的技术水平和更好的加深对Vue的理解，我选择了零代码开发所有的页面功能（没有使用任何第三方UI库）。 - 项目前端技术栈 - Vue 主框架 - vue-router 路由跳转的官方插件 - lodash 一个javascript的函数工具库 -...
Bumps [lodash](https://github.com/lodash/lodash) from 4.17.15 to 4.17.19. Release notes Sourced from lodash's releases. 4.17.16 Commits d7fbc52 Bump to v4.17.19 2e1c0f2 Add npm-package 1b6c282 Bump to v4.17.18 a370ac8 Bump to v4.17.17 1144918...
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot] avatar"){kind=avatar}
Bumps [lodash](https://github.com/lodash/lodash) from 4.17.15 to 4.17.19. Release notes Sourced from lodash's releases. 4.17.16 Commits d7fbc52 Bump to v4.17.19 2e1c0f2 Add npm-package 1b6c282 Bump to v4.17.18 a370ac8 Bump to v4.17.17 1144918...
Bumps [websocket-extensions](https://github.com/faye/websocket-extensions-node) from 0.1.3 to 0.1.4. Changelog Sourced from websocket-extensions's changelog. 0.1.4 / 2020-06-02 Remove a ReDoS vulnerability in the header parser (CVE-2020-7662, reported by Robert McLaughlin) Change license from...
Bumps [elliptic](https://github.com/indutny/elliptic) from 6.5.2 to 6.5.3. Commits 8647803 6.5.3 856fe4d signature: prevent malleability and overflows See full diff in compare view [](https://help.github.com/articles/configuring-automated-security-fixes) Dependabot will resolve any conflicts with...