Vue前端挂载对象时一些思考
最近,在Vue前端调试http请求,无论如何如何也是拦截不了某些http请求。场景是这样的:Java后端组装好Vue对象,然后送到前端,前端通过id来挂载该Vue对象,而该对象中有上传文件或者图片的控件,正是对这些控件的http请求是无法拦截的,所以导致没发设置请求头信息。后来经过对这一场景的梳理,有了一些心得,现记录如下。
在Vue前端开发时,可以通过id来挂载Vue对象,从而展示界面;要是这种对象都是在前端生成的话,那么处理起来很方便;要是该对象是从后端通过Java组装生成的并传输过来的话,那么有些地方或者是细节方面就需要注意了;现列举如下,以供后续参考,下面所说的Vue对象都来自后端组装生成而来。
(1)在该Vue对象中所有的http请求都不要直接采用axios对象,而是采用this.$http的方式,注意了$http是主工程中Vue的一个全局属性,可以在主工程中这样添加:Vue.property.$http = axios;在被挂载的Vue对象为啥要用全局方式this.$http呢?这样做的好处是方便被主工程的拦截器拦截,同时也可以继承主工程的请求头信息;若是直接采用axios对象的话,那么在主工程中是无法拦截的,更没发继承主工程的请求头信息了。
(2)在该Vue对象中若是需要一些额外的数据,可以通过全局属性获取,也可以通过Vue对象的属性来绑定,最好是通过一个对象的方式来绑定属性。
(3)在该Vue对象中若是用到element的upload组件的话,那么该http请求是不会被主工程拦截器所拦截的,并且也不会继承主工程中的请求头信息;所以当需要相关的请求头信息时要买通过全局属性来获取,要么通过数据绑定来获取;建议还是通过数据绑定来处理比较合适,比如说需要请求头信息,可以在被挂载的Vue对象中建立一个headers属性,类型为Object,默认值为{},这样在挂载主工程某个节点时可以通过数据绑定headers属性来传给被挂载的Vue对象,以后需要添加请求头信息,只要在主工程中添加然后绑定给headers属性就可以了,而被挂载的Vue对象根本就不用感知有哪些请求头信息,它只负责填充和传输。
此外,在Vue中添加对http的拦截器,可以参考下面示例:
import axios from 'axios'
axios.interceptors.request.user(function(config)) {
// 这里可以进行请求之前的处理
}
axios.interceptors.response.user(function(config)) {
// 这里可以进行响应之后的处理
}
------20191225闪
Vue前端挂载对象时一些思考的更多相关文章
- Vue之挂载点、变量、事件、js对象、文本指令、过滤器、事件指令和属性指令
1.vue导入-挂载点 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&qu ...
- vue中,对象数组多层嵌套时,更新数据更新页面
vue中的对象和数组的元素直接赋值修改时,是不能响应到view中去的 1.对象更新 this.a={title:'列表1’}; this.a.title='列表2’; <h1>{{a.ti ...
- vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象合并到总的对象,再提交
vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象 ...
- vue 前端框架 (三)
VUE 生命周期 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- vue前端框架面试问题汇总
1.active-class是哪个组件的属性?嵌套路由怎么定义?答:vue-router模块的router-link组件. 2.怎么定义vue-router的动态路由?怎么获取传过来的动态参数? 答: ...
- Vue前端框架面试问题
1.active-class是哪个组件的属性?嵌套路由怎么定义? 答:vue-router模块的router-link组件. 2.怎么定义vue-router的动态路由?怎么获取传过来的动态参数? 答 ...
- Vue前端框架基础+Element的使用
前置内容: AJAX基础+Axios快速入门+JSON使用 目录 1.VUE 1.1 概述 1.2 快速入门 1.3 Vue指令 1.3.1 v-bind & v-model 指令 1.3.2 ...
- Vue路由开启keep-alive时的注意点
Vue路由开启keep-alive时的注意点 这个不是业务的要求,但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM,觉得作为一个前端工程师有必要优化下的加载逻辑,正好vue提供了 ke ...
- Vue的实例对象(三)
一.创建一个 Vue 实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 当创建一个 Vue 实例时,你可以传入 ...
随机推荐
- C++泛化单链表
泛型单链表 单链表将每个数据分为节点,每个节点存储数据和指向下一个节点的指针.这样数据就不用在内存中使用连续的存储空间,有更大的灵活性. 这里将单链表分为节点类(Node)和链表类(singleLin ...
- 史上最全的Java高级技术点,全是Java高级进阶技术,几乎包含了Java后端的所有知识点
史上最全的Java高级技术点,全是Java高级进阶技术,几乎包含了Java后端的所有知识点 1
- PMP--3. 项目启动过程组
####################################################### 从第三章开始,我正式进入项目过程,启动.规划.执行.监控.收尾五大过程组的具体在之后依次 ...
- 1级搭建类104-Oracle 12cR2 单实例 FS(阿里云)公开
项目文档引子系列是根据项目原型,制作的测试实验文档,目的是为了提升项目过程中的实际动手能力,打造精品文档AskScuti. 项目文档引子系列目前不对外发布,仅作为博客记录.如学员在实际工作过程中需提前 ...
- day 8 函数编程_byets
定义 bytes类型是指一堆字节的集合,在python中以b开头的字符串都是bytes类型 b'\xe5\xb0\x8f\xe7\x8c\xbf\xe5\x9c\x88' #b开头的都代表是bytes ...
- Mysql基础04-查询
关联查询 1.内连接:实现A∩B select 字段列表 from A表 inner join B表 on 关联条件 where 等其他子句; 2.左外连接 #实现查询结果是A select 字段列表 ...
- windows 2008r2+php5.6.28搭建详细过程
安装IIS7 1.打开服务器管理器(开始-计算机-右键-管理-也可以打开),添加角色 直接下一步 勾选Web服务器(IIS),下一步,有个注意事项继续下一步(这里我就不截图了) 勾选ASP.NET会弹 ...
- JDK13.0.1安装与环境变量的配置(Win10平台为例)
一.下载与安装 Oracle官网下载:https://www.oracle.com/technetwork/java/javase/downloads/index.html,点击右侧下载 接受并下载对 ...
- API接口幂等性设计
目录 幂等性场景 解决方案 幂等性场景 网络延迟导致多次重复提交. 表单重复提交. 解决方案 每次提交都使用一个Token,Token保证临时且唯一即可 token生成规则(单机应用):token+U ...
- MyBatis的基本注解
MyBatis的基本注解: 增删改查 @Select("select * from teacher") public List<Teacher> selAll(); / ...