Axios、Vue跨域问题、swiper的安装使用

数据请求

搭建后台服务器

使用JS编写ajax

局部提交，请求回来的是josn数据,而且在js当中，数据渲染问题很复杂

const xhr = new XMLHTTPRequest()
xhr.open("请求方式","地址")
xhr.send("")
xhr.onreadystatechange = function(){
    if(xhr.status === 200 && xhr.readyState === 4){
        console.log(xhr.responseXML)
        console.log(xhr.responseText)
    }
}

jq对ajax进行了封装

$.ajax({
    url: ""
    type: "",
    data: "",
    success: function(res){
    
    },
    error: function(err){
    
    }
})

Axios

axios是一个三方的基于XMLHttprequest技术封装的http库

axios底层是es6底层的promise

axios也受到了同源策略的影响

安装

发送请求

url: http://127.0.0.1:3000/api/getbanner

get

方法一：

var url = "http://127.0.0.1:3000/api/getbanner"
axios(url,{
    method: "GET",
    params: {},
    headers: {}
}).then(
    res=>{
        console.log(res)
        this.img_list = res.data.list
    }
).catch(
    error=>{
        console.log(error)
    }
)
}

方法二：

axios.get(url,{params:{},headers:{}}).then().catch()
简写
var url = "http://127.0.0.1:3000/api/getbanner"
axios.get(url).then(
    res=>{
        this.img_list = res.data.list
    }
)

post

方式一

var url = "http://127.0.0.1:3000/api/getbanner"
axios(url,{
    method: "POST", //请求方式
    data: {}, //携带参数
    headers: {}
}).then(
    res=>{
        console.log(res)
        this.img_list = res.data.list
    }
).catch(
    error=>{
        console.log(error)
    }
)
}

方式二

axios.post(url,data,headers).then().catch() //post请求，data和headers和url是并列参数
简写
var url = "http://127.0.0.1:3000/api/getbanner"
axios.post(url).then(
    res=>{
        this.img_list = res.data.list
    }
)

axios全局配置

在同一个项目上，对同一个接口服务器上的数据有多次请求。有很多共性的内容在代码当中重复。

import axios from "axios";

axios.defaults.baseURL = "http://127.0.0.1:3000/api"
//这里设置的是axios的默认请求头
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; //token
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 
//请求的数据类型 application/json  text/html  jpg/image

export default axios

版本升级

axios拦截器

请求拦截器

对axios每次请求进行拦截,可以用来对错误的请求进行校验，比如age=1000

axios.interceptors.request.use(
    function(request){
        request.headers['hhh'] = 'xxx'
        return request
    },
    function(error){
        console.log(error)
    }
)
//axios.interceptors.request.eject(request_interceptors); 移除拦截器

响应拦截器

const reponse_interceptors = axios.interceptors.response.use(
    function(response){
        console.log(response)
        return response.data
    },
    function(error){
        console.log(error)
    }
)
//axios.interceptors.response.eject(reponse_interceptors);移除拦截器

跨域问题

为了web安全，对不同域名，同域名不同协议，同域名，同协议不同端口的地址认为不同源，这样的访问是跨域访问，跨域访问通常被禁止。

跨域问题解决方案

1、服务端允许跨域

1、设置响应头

1、Access-Control-Allow-Origin *

2、Access-Control-Allow-Method *

2、中间件

封装了第一种方法

2、代理服务器跨域（proxy）

vpn代理服务器，使用当前的业务服务器作为代理服务器进行跨域。

Vue-cli设置代理

配置参考 | Vue CLIhttps://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

跨域请求

axios特殊用法

create

在一个页面当中，需要统一数据,在单页面上，为了保证请求的一致性采用的轻量级方法。

import axios from 'axios'

export default {
    created(){
        var axios_instance = axios.create({
            baseURL: "http://127.0.0.1:3000/api",
            headers: {}
        })
        this.get_banner(axios_instance)
        this.get_list(axios_instance)
    },
    methods: {
        get_list(instance){
            console.log("hello world")
            console.log(instance)
        },
        get_banner(instance){
            var url = "/getbanner"
            instance.get(url).then(
                res=>{
                    console.log(res)
                }
            )
        }
    },

all

xios继承了promise的异步特征，所以在all并发请求，需要借助async和await

import axios from 'axios'
export default {
  created(){
    axios.all([this.get_nav(),this.get_obj()]).then(
      res=>{
        const [nav,obj] = res
        console.log(nav,'+++++++++++++++++++++++nav++++++++++++++++++++++')
        console.log(obj,'+++++++++++++++++++++++obj++++++++++++++++++++++')
      }
    )
  },
  methods:{
    async get_nav(){
      const res = await axios.get("/api/getbanner")
      return res
    },
    async get_obj(){
      const res = await axios.get("/api/getbanner")
      return res
    }
  }
}

swiper

安装

npm i swiper@3.4.2

导入

<template>
  <div id="index_id">
      <h1>首页</h1>
      <div class="swiper-container">
          <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="image in img_list" :key="image.id">
                  <img :src="'http://127.0.0.1:3000'+image.img">
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'

export default {
    data(){
        return {
            img_list: []
        }
    },
    mounted(){
        new Swiper('.swiper-container',{
                loop: true,
                autoplay: {
                    delay: 500
                },
                effec: 'cute'
            }
        )
    },
    created(){
        this.get_banner()
    },
    methods:{
        get_banner(){
            this.$http.get('/api/getbanner').then(
                res=>{
                    this.img_list = res.list
                    console.log(res)
                }
            )
        }
    }
}
</script>
<style>
#index_id h1{
    text-align: center;
}
#index_id img{
    width: 696px;
    height: 300px;
}
</style>