poven
poven
[koa2-connect-history-api-fallback](https://github.com/ishen7/koa2-connect-history-api-fallback)
shop路由后退food路由 没有缓存,大佬有解决方案吗
Failed to load http://192.168.1.6:3000/v1/banner: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. 看到作者有设置 res.header("Access-Control-Allow-Origin", "*"); 但是跑起来还是报错
项目总结(下)
## 前言 全新重构升级的项目[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的函数工具库 -...