前年的时候,大概花费了半年的光景,使用Python的django web框架配合着django restframework插件作为后端服务
前端使用vue iviews搭建前端框架
也是在那个时候研究了在服务器上部署django应用
我记得是这篇文章
ubuntu18.04系统上用uwsgi nginx部署Django
后端部署在服务器上,前端项目打包然后上传到服务器的宝塔面板中
这是后端的接口:
但是呢,虽然部署了这么长时间,一直有一个bug困扰着我
就是我这个服务器使用ngxin代理的
我们随意点开一个前端页面
可以看到正常的页面
路由地址也正常
接口访问也一切正常
但是会有一个奇怪的bug:
让我们在目前的页面点击刷新,就会看到神奇的一个现象:
没错404了
之前因为技术有限,一直没把这个bug当回事,但是最近学习vue的时候,遇到了一个知识点 刚刚好解决了我这个bug
首先这个问题的由来是因为路由的问题
在vue2中,路由分为两种模式
- hash
2.history
1. hash支持低版本的浏览器,而history就没有那么友好了
2.(1) hash模式下,它指 # 号之后的所有字符,但是他虽然包含在url中,但是不包含在http请求中。所以改变hash值不会重新加载页面,对传给后端的url没有任何影响,因此不会重新加载页面。它每次改变都会触发hashchange事件,可以通过给window加上hashchange事件进行监听。它是单页面的标配。
(2) history模式,利用了 HTML5 新增的 pushState() 和 replaceState() 方法,在原有的back、forward、go 的基础上,添加对历史记录修改的功能。他虽然改变了url,但是浏览器不会立即向后端发送请求。
3. history模式下有一个问题,就是当页面刷新时,他会实实在在的发送请求,把url给传送过去,因此,如果后端没有做处理的话,就会因找不到资源而报404错误,因此使用history模式时可以跟后端进行配合。
如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。
如果真是这样,那我们还真的需要去我们的路由规则里看一下
第106行,我们可以发现。我确实写的是history
当时写博客系统的时候,完全跟着视频里一笔一划的写 其实也不知道一些具体的含义,现在就全都搞懂了,因为开启的是history模式,没有#号,所以每次刷新的时候请求的,会把整个请求地址发过去这样就会导致找不到资源
从而返回404错误
所以困扰了这么久的问题,没想到在一次学习中就解决了
所以,bug是有限的,但是学习是无尽的
无尽的学习可以修补有限个bug
这时想起来一句 温斯顿丘吉尔的一句话:
we shall never surrender