那些年踩过的 Vue 坑(1)

张友士
• 阅读 1550
前言(此部分仅以记录写文章时的心情 2018-10-24)
以前做项目都是在其他人搭好的架子中谢谢业务代码,从未自己从 0 到 1 的完成过一个项目,今天有这样一个机会,也是换了新工作的第一个任务,但没有我想象中的那么顺利,最后还是没能独立。

自己搭项目的过程

这次的任务是完成一个后台管理系统,TL 说对技术选型没有任何要求,于是就选择了 Vue,因为之前实习的时候有参与过类似项目的开发,而且市面上有一个比较好的前端管理后台集成解决方案(vue-element-admin),而且还有使用文档,可以直接修改后使用。
于是,
1、下载了基础模版,刚下完的文件目录结构如下:
那些年踩过的 Vue 坑(1)

2、开始修改配置文件,全局配置请求的域名
那些年踩过的 Vue 坑(1)

3、修改登录模块的请求 API 接口,即修改文件夹 api 下的 login.js 文件,此时请求不能发送成功,然后修改了 request.js 中的这段代码:
那些年踩过的 Vue 坑(1)

4、把 headers 改成了 后端定义的 SESSION_TOKEN,并注释掉了下图中的代码:
那些年踩过的 Vue 坑(1)

5、根据问题一步一步查找,先后修改了 user.js、auth.js
那些年踩过的 Vue 坑(1)

最后项目的各种配置文件被改的坑越来越多,而且看起来很乱。。。

期间出现的问题

1、登录请求发送成功,但是页面没有跳转
2、模板中有获取用户信息的 GetInfo,但是当前项目不需要,改代码的时候忽略了这一点
那些年踩过的 Vue 坑(1)
3、发送的请求未成功
4、token 不对

经排查发现的问题

1、后端定义的请求头 header 里面的 SESSION_TOKEN 字段名不符合规范

导致上述问题的主要原因

1、当前项目不需要获取用户信息,忽略了 permission.js 里面的路由拦截,以下是修改之后的
那些年踩过的 Vue 坑(1)
2、有些请求参数传的不对(如果是 post 请求,参数可选时,需要传递一个空对象,不传会被视为 undefined,从而报错)
3、请求需要带 token,由于之前删改代码,token 存取的方式有点乱,即用了模版代码里状态管理里面的 setToken 方法,又自己存了 localStorage
4、后端定义的请求头 header 里面的 key 不符合规范,应使用 '-' 而不是 '_'
那些年踩过的 Vue 坑(1)

别人是怎么开始搭项目、解决问题的

  1. 同样,下载基础模版;
  2. 修改登录模块请求的接口;
  3. 因为这个集成方案用到了 vuex 状态管理,可以直接使用写好的方法获取或者设置 token,不需要特地存在 localStorage 里面;
  4. 调试发现问题出现的点,当前项目没有用到“获取用户信息(GetInfo)”,在 permission.js 和相关状态管理文件中删除此部分相关代码,解决了登录成功无法跳转页面问题;
  5. 调试发现问题出现的点,发现 SESSION_TOKEN 字段名不符合规范,经后端改为 Session-Token,解决了请求列表接口时返回“未登录”的情况;
  6. 在 request.js 文件中,修改 拦截器 部分代码,全局拦截请求未发送成功的情况并给出相应提示,此处状态码需后台提供;
  7. 正常修改路由,增加新页面;
  8. 一些规范:公共请求写在文件夹 api 下面,其他页面相关的,在相应页面文件夹下创建 xx.service.js 文件

那些年踩过的 Vue 坑(1)

总结

  1. 在用别人东西的时候,不要上来就改,更不要轻易删代码。先整体了解看明白,再考虑那些是需要改的,哪些是自己项目中不需要的
  2. 遇到问题的时候一定要准确的定位出现问题的位置,才能更好的找到出现问题的原因
  3. Think more and then Do it!
点赞
收藏
评论区
推荐文章
海军 海军
4年前
Vue权限路由[菜单权限/按钮权限控制]
前言&nbsp;&nbsp;&nbsp;年前完工了做了半年的铁路后台管理系统,系统整体业务比较复杂,这也是我到公司从0到1的一个完整系统实践,做这个系统过程中踩了不少坑,也学到了很多。</br&nbsp;做完这个系统没多久,紧接着又一个系统来了,没及时总结,惭愧哈!其实我们在做的后台管理系统大多数基础框架都一样,后台管理系统主要的是
Jacquelyn38 Jacquelyn38
4年前
我熬夜开发了一款简约实用、支持多平台的Markdown在线编辑器(开源)
前言之前,一直想开发一款属于自己的Markdown编辑器,主要是自己平常写文章可以更加灵活操作,另外扩宽自己的视野也是非常不错的选择啊!所以在周末就决定玩耍一番。首先我调研了很多线上热门的md编辑器,都很优秀。不为超过他们,主要自己用着舒服点。这篇文章主要是记录下我是如何从0到1是完成一款还算拿得出手的Markdown编辑器。完成项目一览调研Markdown
Jacquelyn38 Jacquelyn38
4年前
【Parcel 2 + Vue 3】从0到1搭建一款极快,零配置的Vue3项目构建工具
前言一周时间,没见了,大家有没有想我啊!哈哈!我知道肯定会有的。言归正传,我们切入正题。上一篇文章中我主要介绍了使用Vite2Vue3Ts如何更快的入手项目。那么,今天我将会带领大家认识一个新的Vue3项目构建工具——parcelvuecli。这是什么?怎么以前没有听说过。有这样的疑问其实并不奇怪,因为这个构建工具是我自己开发的。你可能会这样问:“你自己
Wesley13 Wesley13
3年前
Vtiger CRM 几处SQL注入漏洞分析,测试工程师可借鉴
本文由云社区发表0x00前言干白盒审计有小半年了,大部分是业务上的代码,逻辑的复杂度和功能模块结构都比较简单,干久了收获也就一般,有机会接触一个成熟的产品(vtigerCRM)进行白盒审计,从审计的技术难度上来说,都比公司内的那些业务复杂得多,而真正要提高自己技术水平,更应该看的也是这些代码。vtigerCRM是一个客
Easter79 Easter79
3年前
SpringBoot整合升级Spring Security 报错 【The request was rejected because the URL was not normalized】
前言最近LZ给项目框架升级,从Spring1.x升级到Spring2.x,在这里就不多赘述两个版本之间的区别以及升级的原因。关于升级过程中踩的坑,在其他博文中会做比较详细的记录,以便给读者参考,不要掉进同样的坑里。这里我们讨论一个关于URL中包含双斜杠被拦截的问题。发现问题升级框架之后,测试一个功能时,发现报错Htt
Stella981 Stella981
3年前
IDEA手动创建JFinal项目(404问题处理)
!jfinal(https://oscimg.oschina.net/oscnet/4362c0d7bf744772cce1b9ad0b762c579e0.jpg)公司项目使用jfinal有一段时间了,也有自己手动搭建过项目,但是没有使用demo中jetty方式启动过项目。这几天决定参考jfinal文档更好的学习下jfinal框架,其实挺简单,但
Stella981 Stella981
3年前
Docker + Django 一周踩坑记
    鉴于是公司的项目,项目源码不好公开,就专门讲踩坑的经历好了,我以前没有接触过docker,一直以为它是个轻量化的虚拟机,但在看了《docker从入门到实践》(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.gitbook.com%2Fbook%2Fyeasy%2Fd
Stella981 Stella981
3年前
Noark入门之异步事件
引入异步事件主要是为了各模块的解耦,每当完成一个动作时,向系统发布一个事件,由关心的模块自己监听处理,可选择同步处理,异步处理,延迟处理。何时发布事件,当其他模块关心此动作时<br比如获得道具时,任务系统模块要判定完成进度,BI模块需要上报等等都可以监听此事件,已达模块解耦0x00事件源一个实现xyz.noark.core.event
Stella981 Stella981
3年前
Kinect结合Unity3D引擎开发体感游戏(一)
最近公司项目需要做科技馆的体感游戏,以前也没接触过游戏,虽然以前自己也是想做游戏,我想大部分都是学编程出来来做游戏,哈哈(请允许我淫笑一下,终于可以做这方面)。虽然以前没接触过体感游戏,看到的体验也是大部分看到的视频,幸好现在网络还是比较发达,上网大概了体感游戏开发,目前比较好的是Unity3D和Kinect结合交互进行开发。现在心里的感觉用句
你想要的【微前端】都在这里了! | 京东云技术团队
某次遇到一个从0到1的大型项目,该项目涉及两个端,除了鉴权和部分业务逻辑不同外,页面UI和其余逻辑几乎一致,遇到这种项目,该如何架构?既能保证项目顺利开发完成,又能保证后期的迭代、维护、可扩展?
linbojue linbojue
1年前
超完整的Electron打包签名更新指南,这真是太酷啦!
大家好,我是多喝热水。在踩了数不清的坑之后,终于从0到1完成了一个桌面端应用,但万万没想到,最最痛苦的还不是开发过程,而是开发完成后的打包签名阶段,这真是踩坑踩麻了!!!超完整的Electron打包签名更新指南,这真是太酷啦!ok,踩坑归踩坑,收获也是不小