vue

2024-07-14 07:19| 来源: 网络整理| 查看: 265

vue-bytedanceJob

一个用Vue全家桶技术栈重构的字节跳动官方招聘网站

本项目所有数据均同步于官方网站，本人开发此项目主要是为了学习。

为了使自己提高手写代码，实现复杂业务逻辑的能力，本项目除了表单类的组件是使用第三方的组件库，其他功能组件均是自己手动封装的，向弹窗类的API组件和选择器类的模板调用组件等等都是综合基础功能和自身的业务逻辑相结合后实现的。通过封装这些组件，自己手写代码，封装逻辑的能力也是有了很大的提高，不仅如此，对于使用一些优秀的类库也是有了进一步的理解和使用。总之开发此项目收货满满。此外还有一些项目升级的需求和优化我也会持续更新，会持续的维护此项目。欢迎收藏和关注，谢谢！

线上预览

http://123.57.204.48:3000

Clone project git clone [email protected]:konglingwen94/vue-bytedanceJob.git Project setup npm install Compiles and hot-reloads for development npm run dev

默认启动 http://localhost:8080

Start server API npm run server 默认监听`http://localhost:3000`

默认不需要启动，如果需要调试服务器端代码，请配置根目录下的vue.config.js文件，修改代理地址如下

module.exports = { devServer: { proxy: "http://localhost:3000", }, }; Compiles and minifies for production npm run build 主要功能

首页

公司信息介绍

职位关键字搜索

城市职位检索

职位分类检索

职位列表分页展示

职位详情

产品与服务

员工故事

校园招聘(外链)

邮箱登录（需要官方网站注册邮箱账号）手机号登录

退出

简历投递

简历

我的简历简历上传编辑简历保存简历技术栈

vue vue-router

vue-cli less

axios lodash es6~7

express node-fetch http-proxy-middleware

数据接口爬取

为了使本项目的数据和原网站保持同步，我决定亲自在浏览器的开发者工具爬取数据接口，虽然找接口的那段时间花费了不少精力和时间。当项目开发完成后，还是觉得所有的付出都是有收获的。在这我简单谈一下在找API接口过程中的采坑过程，希望对正在关注本项目的你有所启发。

在找一些包含大量数据类型的接口时并没有遇到很多困难，就按照平常我们开发项目时调式接口的基本操作，在多一点耐心，多调试几次就能找到。可是找接口的路还远远没有结束。后来项目开发到登录和注册的逻辑的时候，各种爬取接口的坑接踵而来。

其主要复杂的接口都在这个文件里。比起之前数据类的接口这个文件里的接口在发送请求的时候需要携带一些验证身份信息的字段。而且中间又牵扯一系列的跨域问题。为了解决这些问题我也算是绞尽了脑汁，最后在使用postman不断的调试之后，终于成功解决了所有存在的问题。

项目结构

组件 src/components

components ├── Bytedance-Button.vue //主题按钮，可定制尺寸 ├── Checkbox-Transfer.vue // 复选框穿梭选择器，用来选择搜索职位 ├── File-Icon.vue 文件上传后可显示指定的图标 ├── Input-Search.vue 搜索输入框 ├── Loading 数据加载组件（支持API调用和指令调用） │ ├── Loading.vue │ └── main.js ├── Message 消息弹窗组件（使用API调用） │ ├── main.vue │ └── index.js ├── PopupProgress 弹窗进度条组件（支持API调用） │ ├── main.vue │ └── index.js ├── Logo.vue 主题颜色可变的logo组件 ├── Pagination.vue 分页器组件 ├── footer.vue └── header.vue

页面 src/views

views ├── Home.vue 首页 ├── JobDetail.vue 职位详情 ├── Jobs.vue 职位列表浏览 ├── Products.vue 产品展示 ├── Resume.vue 简历预览 ├── ResumeEditor.vue 编辑简历 ├── StaffStory.vue 员工故事 └── User.vue 用户

辅助工具 src/helper/

src/helper ├── notification.plugin.js 项目全局消息通知插件，只在开发环境使用，辅助开发 ├── registerElementComponents.js 按需引入第三方组件库 ├── registerGlobalComponents.js 全局注册手动开发的组件 ├── request.js 不带有`token`的`axios`请求示例 ├── requestWithToken.js 带有`token`的`axios`请求示例,主要包含简历相关的接口 └── utilities.js 其他工具函数

静态资源文件/src/assets

src/assets └── style 样式 ├── global.css 自定义全局样式 ├── mixin.less 定义的混入样式 ├── reset.css 重置浏览器默认样式 └── variable.less 项目全局变量

服务端 /server/

server ├── app.js 项目启动入口 ├── controller 代理请求回调函数目录 │ ├── jobs.js 职位 │ ├── productAndStandard.js 产品和字节范 │ ├── request.js 代理请求示例 │ └── staff-stories.js 员工故事 ├── data.json 页面静态数据存放文件 ├── package.json └── router.js 代理接口路由

源代码其他文件

├── src │ ├── App.vue 入口组件 │ ├── main.js 应用入口 │ ├── router 路由 │ │ └── index.js │ ├── store 全局共享状态 │ │ └── index.js

根目录

vue-bytedanceJob ├── docs/ 服务端接口文档 ├── public/ 项目公共文件 ├── server/ 服务端目录 ├── src/ 代码源目录 ├── test/ ├── README.md 项目介绍文档 ├── babel.config.js 按需引入第三方库在这里配置 ├── package.json 项目包介绍 └── vue.config.js 项目配置项目截图

vue-bytedanceJob home job