vue中前后端数据交互

每次发送请求或者请求相应的时候 都会经过拦截器 才会进入到我们的程序（就是对我们的请求和相应进行发送前或者获取前的一个拦截 ）

请求拦截

发送请求的时候会经过请求拦截 我们就可以在请求拦截上携带每次都要给后台的数据（用户的登录状态）

响应拦截

每次相应数据的时候都会经过相应拦截 （我们就可以在相应拦截的时候对我们的错误或者成功做出反应）

编写拦截器

1.在src下新建一个util文件夹（工具文件夹 用来放置一些项目中辅佐工具库）在创建对应的文件用来容纳拦截器

// 引用axios
import axios from "axios"
let service=axios.create()
// 添加请求拦截器
service.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
service.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

//   暴露
export default service

数据请求的封装

1.在src下新建一个api的文件夹（就是容纳数据请求的）新建一个文件容纳封装的请求

// 1.引用拦截器
import service from "@/utils/service.js"
// 2.开始使用promise进行封装
let getlink=(url,method='get')=>{
    // resolve成功
    // reject失败
   return new Promise((resolve,reject)=>{
        // 就可以执行你所要封装的操纵
        service.request({
            url,
            method
        }).then((ok)=>{
            resolve(ok)
        }).catch((err)=>{
            reject(err)
        })
    })
}

// 3.暴露
export default getlink

使用封装的请求

1.在你想用的地方先引用 在使用

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>
<script>
// 1.引用
import getlink from "@/api/getapi.js";
export default {
  created(){
    getlink("/api/data/cityinfo/101320101.html").then((ok)=>{
      console.log(ok)
    }).catch((err)=>{
      console.log(err)
    })
  }
};
</script>

跨域

devServer代理跨域

devServer就是vue脚手架中那个内置的微型开发小服务器

1.在项目的根路径下 创建一个vue.config.js

2.写入如下内容

module.exports={
    devServer: {
        proxy: {  //配置跨域
          '/api': {
            target: 'http://www.weather.com.cn/',  //需要解决跨域的地址
            pathRewrite: {
              '^/api': '' 
            }
          },
        }
      },
}

3.修改请求路径

<template>
  <div>
        <button @click="fun()">点我请求数据</button>
  </div>
</template>

<script>
import $http from "axios"
export default {
    methods:{
        fun(){
           $http({
            //    修改名字
               url:"/api/data/cityinfo/101320101.html",
               method:"get",//没有s
           }).then((ok)=>{
               console.log(ok)
           }).catch((err)=>{
               console.log(err)
           })
        }
    }
}
</script>

4.千万不要忘了重启