Vue 后台管理 03 封装axsios

VUE

---

---

1.vue的事件修饰符

在vue中，为html5原生标签绑定事件的方式：

<form v-on:submit="submit"></form>
<form @submit=""></form>
submit(e){
	e.preventDefault()
	e.stopPropagation()
}

在为标签绑定事件，处理事件时，经常需要：阻止浏览器的默认事件处理、阻止事件冒泡等功能。而vue认为，事件处理函数应该更多的聚焦在业务上，而不是这些DOM操作上，所以vue提供了很多的事件修饰符，来帮助简化这些代码：：

<button @click.stop=""></button>   // 绑定点击事件，并且阻止事件冒泡
<a @click.stop.prevent="doThat"></a> // 事件修饰符串联执行
<button @click.once=""></button>   // 绑定点击事件，仅执行一次

<input @keyup.enter="submit">  // 敲回车时执行
<input @keyup.page-down="onPageDown">  // 敲 pagedown 按键时执行

.native 事件修饰符
form标签属于html5原生标签，vue中若为原生标签绑定事件，则默认会认为是html的原生事件。而el-form则是vue的自定义组件，若为自定义组件绑定的事件，vue会认为是该组件的自定义事件，该自定义事件并不会当做是html原生事件来进行处理，应该交由组件内部处理。
若为该事件添加 .native 事件修饰符，那么vue就会将该事件当做html原生事件绑定在form标签上，表单提交时自动触发。

<form @submit.prevent></form>
<el-form @submit.native.prevent></el-form>

<button @click=""></button>
<el-button @click.native=""></el-button>

---

2.封装Axios

原生axios发请求时的API设计弊端：
① 每次发送请求都需要写url的前缀，通常测试环境前缀是localhost本地服务器，和生产环境前缀不同，切换时很麻烦；
② 如果项目中有很多地方需要发送相同类型的请求（如：查询列表），每次发送查询时，都需要使用相应的url接口地址，每次都要去接口文档复制粘贴，如果接口地址修改了，所有使用该地址的地方都需要改一遍；

封装axios为了解决请求资源路径难以维护的问题；
① 解决每次发请求都需要写请求地址的问题；
在http目录下新建index.js，导出httpApi对象，提供发各种业务请求的方法即可。

② 按模块拆分httpApi对象，将相应的Api接口放入单独的Api模块文件中

③ 将所有actor相关的接口进行实现，重构代码。并针对业务API子模块，封装请求路径的前缀，使得方便的更换项目中每个接口使用的服务端地址前缀。

---

3.电影管理模块

apis/BaseUrl.js封装请求路径的前缀
apis/index.js封装常用API请求业务，整合所有的API子模块，方便调用
main.js中引入全局变量，方便组件调用模块API，在组件中可以使用this.$http访问接口API模块
项目文件格式：

导演模块示例：

---

总结

注意复习：vue的事件修饰符，封装Axios：封装请求路径的前缀；导出httpApi对象、提供发各种业务请求的方法；按模块拆分httpApi对象、将相应的Api接口放入单独的Api模块文件，电影管理模块文件关联关系