本教程为入门教程，如有错误，请各位前端大佬指出。
1.axiox 简介
jquery 时代，我们使用 ajax 向后台提交数据请求，Vue 时代，Axios 提供了前端对后台数据请求的各种方式。
而在 vue 中很多都是使用 axios。
优缺点：
2.axios 的跨域
由于前后端的端口号不同，那么会又跨域的问题。而解决跨域有很多总方法，比如使用后台配置或者 nginx，以下是我做过的 demo。
1.nginx 配置跨域
#user nobody;worker_processes 1;
#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;
#pid logs/nginx.pid;daemon off;events { worker_connections 65535; multi_accept on;}
http { include mime.types; default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main; sendfile on; tcp_nopush on; tcp_nodelay on;
#keepalive_timeout 0; keepalive_timeout 65;
server { listen 8080; server_name localhost; ## = /表示精确匹配路径为/的url，真实访问为http://localhost:8088 location = / { proxy_pass http://localhost:8088; } ## /no 表示以/no开头的url，包括/no1,no/son，或者no/son/grandson ## 真实访问为http://localhost:5500/no开头的url ## 若 proxy_pass最后为/ 如http://localhost:3000/;匹配/no/son，则真实匹配为http://localhost:3000/son location /no { proxy_pass http://localhost:8088; } ## /ok/表示精确匹配以ok开头的url，/ok2是匹配不到的，/ok/son则可以 location /Demo/testDemoTranNew { proxy_pass http://localhost:8088; } }}
复制代码
2.axios 配置跨域
同时在 axios 中也可以配置跨域，方式如下：
1.修改 config/index.js 文件
//增加跨域 proxyTable: { "/api": { //目标地址 target: "http://localhost:8088", changeOrigin: true, pathRewrite: { '^/api': '' } } },
复制代码
2.main.js 中增加变量
//跨域处理 相当于把index中的api地址拿过来Vue.prototype.HOST = '/api'
复制代码
直接调用就可以了，完全避免了跨域！
3.axios 的 get 请求
在使用时main.js需要导入 axios 组件。具体方式请参考下文。
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'import axios from "axios"
Vue.config.productionTip = false
Vue.prototype.$axios = axios
/* eslint-disable no-new */new Vue({ el: '#app', router, components: { App }, template: '<App/>'})
复制代码
vue 中的 get 请求.有两种写发，以下附上两种写法的格式。
<template><div> {{data}}</div></template>
<script>export default {name: 'HelloWorld',data () { return { content:"组件1", data:{} }},methods:{
},created() { //第一种 // this.$axios.get("https://api.apiopen.top/searchMusic",{ // params:{ // name:"雅俗共赏" // } // } // ) // .then(res => { // console.log(res) // this.data = res.data // }) // .catch(error => { // console.log(error) // })
// 第二种 this.$axios({ method: 'get', url: 'https://api.apiopen.top/searchMusic', params: { name:"雅俗共赏" } }) .then(res => { console.log(res) this.data = res.data }) .catch(error => { console.log(error) }) ;}}</script>
复制代码
4.axios 的 post 请求
在调用中也有两种写法，需要注意的是，需要使用 qs 去格式化参数，因为需要把对象转换成 json 格式。
<template><div> {{data}}</div></template>
<script>import qs from "qs"
export default {name: 'HelloWorld',data () { return { content:"组件1", data:{} }},methods:{
},created() { //axios的post请求接收的参数是 form-data格式 ---- name = xiaobao 需要使用qs // this.$axios.post("https://api.it120.cc/common/mobile-segment/next",qs.stringify( // { // segment: 0 // } // ) // ) // .then(res => { // console.log(res) // this.data = res.data // }) // .catch(error => { // console.log(error) // })
//这种写法需要transformRequest来转换格式 否则会报错 因为接受的是string类型参数 //但是不加stringify会直接变成对象传过去 // 发送 POST 请求 this.$axios({ method: 'post', url: 'https://api.it120.cc/common/mobile-segment/next', data: { segment: 0 }, transformRequest: [function (data) { // 对 data 进行任意转换处理 return qs.stringify(data); }] }) .then(res => { console.log(res) this.data = res.data }) .catch(error => { console.log(error) });}}</script>
复制代码
5.url 的全局配置
因为如果调用的 api 前缀相同，那么可以使用全局配置，将 url 配成全局，避免多次书写。
这里需要时对main.js配置，以下附上代码。
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'import axios from "axios"
Vue.config.productionTip = false
Vue.prototype.$axios = axios
axios.defaults.baseURL = 'https://api.example.com';axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
/* eslint-disable no-new */new Vue({ el: '#app', router, components: { App }, template: '<App/>'})
复制代码
调用时，url 就可以省略 baseURL 中配置的
6.拦截器
在 axios 发送前和接受前，先执行拦截器(类似 java 拦截器)，这里需要在main.js中加入配置。
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'import axios from "axios"import qs from 'qs'
Vue.config.productionTip = false
Vue.prototype.$axios = axios
axios.defaults.baseURL = 'https://api.it120.cc';//axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;//axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 添加请求拦截器axios.interceptors.request.use(function(config) { // 在发送请求之前做些什么 console.log(config) if (config.method === "post") { config.data = qs.stringify(config.data); } return config;}, function(error) { // 对请求错误做些什么 return Promise.reject(error);});
// 添加响应拦截器axios.interceptors.response.use(function(response) { console.log(response) if (response.status !== 200) { return; } // 对响应数据做点什么 return response;}, function(error) { // 对响应错误做点什么 return Promise.reject(error);});
/* eslint-disable no-new */new Vue({ el: '#app', router, components: { App }, template: '<App/>'})
复制代码
这样的话，在接下来的使用中我们拦截了 qs 方法，在之后的使用中就不必每一个请求都调用 qs 方法了。
<template><div> {{data}}</div></template>
<script>import qs from "qs"
export default {name: 'HelloWorld',data () { return { content:"组件1", data:{} }},methods:{
},created() { // 发送 POST 请求 this.$axios({ method: 'post', url: '/common/mobile-segment/next', data: { segment: 0 } }) .then(res => { console.log(res) this.data = res.data }) .catch(error => { console.log(error) });}}</script>
复制代码
7.前端测试方法
在测试前端时有几种获取数据方法
注意！操作 dom 节点时，避免操作原生 dom 如：
<template>
<div>
{{data}}
<p ref = "myp">aaa</p>
</div>
</template>
<script>
import $ from "jquery"
export default {
name: 'HelloWorld',
data () {
return {
content:"组件1",
data:{}
}
},
methods:{
},
mounted() {
//使用原生操作dom
console.log(this.$refs.myp.innerHTML = "BBB")
//console.log(this.$refs.myp.style.color = "red")
var myo2 = this.$refs.myp
myo2.addEventListener("click",function(){
console.log("666")
})
//使用jquery操作dom
$(myo2).css("color","YELLOW");
}
}
</script>
评论