Loading...
墨滴

李泽涛。

2021/04/18  阅读:57  主题:雁栖湖

使用vue.js爬坑二

Part1新手使用vue.js开发过程遇到的坑二

1遇到的问题

  1. 怎么调用另外一个vue文件的方法
  2. 封装axios的时候,说回调函数不存在
  3. 登录成功后,想把template标签隐藏掉,结果发现隐藏不了

2述说过程

1.怎么调用另外一个vue文件的方法

  • 原因:我现在做的是一个登录注册,这个登录成功,要把一些信息存到cookie里面去,考虑到cookie的存取方法是可以复用的,所以我就想写到另外一个单独的vue文件中去,当作公共方法
  • 如图,刚开始,我在export default里面找到了一个methods,这个命名看着就是应该在里面写方法的,于是我这么做了
  • 很显然不行,Console里面直接报错说,这不是一个方法,我懵了,心想在前一个vue文件我还用的好好的,咋跨个界面调用,就说不是一个方法呢
  • 后来我找了查了好多资料,东西是通过exports 暴露出去了,但是我不知道怎么调用呀
  • 后来我只能用死办法了,我在外面定义了一个方法,然后把方法名暴露出去,就可以了
  • 外面直接先引入cookiesUtil 然后给它写个名字 直接名字.方法名调用就行了。
  • 至于为啥写在methods里,但是不能远程调用的问题,我现在还没不知道怎么做,等我继续找找资料,当然有人如果懂,给我解解惑也是感激不尽!!!

2.封装axios的时候,说回调函数不存在

  • 问题描述
    • 就是我想把axios异步请求封装一下,封装成一个公用的js工具类,这样每次我只要调用request.get/set方法,就可以发起请求,减少了代码的开发量

先说说axios每个方法的用途

  • .post(url) 代表用post请求url
  • .get(url) 代表用get请求url
  • .then(response=>hdCall(response))
    • .then代表请求成功后执行的方法
    • response代表服务器返回来的数据,可能是json对象可能是html字符串
    • => 这个是箭头函数 上面那一行转换成普通的js函数 如下图
    function(response){
      return hdCall(response);
    }
    • hdCall(response) 回调函数 就是成功之后把调用这个function方法
  • .catch(error=>errorCall(error))
    • .catch 方法 是请求错误后执行的方法
    • errorCall(error) 回调函数 是出错之后调用这个function方法
  • .finally() 代表不管请求失败还是请求成功都会执行的方法,一般用于前端把加载的特效隐藏或关闭
  • 调用过程
    • 我直接request.post(params,hdcall)调用,出现一个异常 说errorCall没有定义
  • 解决办法
    • 我直接做了一个判断,如果你没有传回调函数,在里面自己默认建一个回调函数

3.登录成功后,想把template标签隐藏掉,结果发现隐藏不了

  • 问题描述,就是登录成功之后,我想把template这个模板给隐藏掉,我查询了资料,用了v-if这个指令,结果就是没反应
  • 具体原因 好像是vue不支持隐藏template
  • 解决办法
    • 把v-if写在template下方的div上一样可以隐藏掉这个页面
    • 在图下方,data里面写条件初始值 控制显示隐藏
    • 可以使用 this.login_type = 'sublogin' 更改里面的值

这就是我学了第二天的vue,学完写了一个页面,想把公司的erp管理系统,从前后端不分离,改成前后端分离的模式,感觉路途慢慢呀!!!

觉得还行的话,关注下我的公众号 楼梯间的男孩 我们一起进步,或者看我进步!!!

李泽涛。

2021/04/18  阅读:57  主题:雁栖湖

作者介绍

李泽涛。