Vue---网络

1.具体的网络请求的工具的用法见node阶段视频

 

 注意: egg后端的缓存,要求前端的网络请求运行携带缓存cookie数据,axios网络请求携带参数下面两种方式:

①axios.defaults.withCredentials=true;//让ajax携带cookie

②axios.post(url,{pwd:123},{ withCredentials: true },(res)=>{})

 axios.get(url,{params:{pwd:123},{ withCredentials: true },(res)=>{})

后端egg中配置:

//设置允许哪些源可以跨域访问当前服务器

 // credentials: true 跨域服务的页面去做cookie缓存

 config.cors = {

​ origin: ' http://192.168.3.113:8080',

​ credentials: true//后端会给去前端返回缓存数据包 告诉浏览器 去做缓存

 }

 

 

配置baseURL====>

main.js文件

import Vue from 'vue'

import App from './App.vue'

import axios from "axios"

axios.defaults.baseURL='http://localhost:8080/api1';  ====>要和地址栏中的访问index.html文件的路径一样

Vue.prototype.$axios=axios

new Vue({

  render: h => h(App),

}).$mount('#app')

 

vue.config.js文件

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

  transpileDependencies: true,

  lintOnSave:false,//关闭eslint的严格模式检测

  devServer:{

    port:"8080",

        host:"localhost",

        proxy:{

            "/api1":{

                target:"http://192.168.0.101:7001",

                changeOrigin:true,

                pathRewrite:{"^/api1":""}

            }

        }

   

  }

})

 

使用：

     mounted(){

    this.$axios("/info").then((res)=>{

        console.log(res)

    })

       

    }

 

 

 

2.网络请求工具的二次封装:

2.1 原理: 把用到的axios等网络请求工具封装成自己的工具

 在项目中使用,防止axios出问题时,快速的更换工具 不会影响项目代码

2.2.设计:

xx.prototype.myaxios=axios

xx.myaxios.post=axios.post

xx.myaxios.get=axios.get

xx.myaxios.put=axios.put

 

举例：

main.js文件

import axios from "axios"

Vue.prototype.$axios=axios

 

tbox.vue文件

     mounted(){

    this.$axios("/api1/info").then((res)=>{

        console.log(res)

    })

 

vue.config.js文件

 

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

  transpileDependencies: true,

  lintOnSave:false,//关闭eslint的严格模式检测

  devServer:{

    port:"8080",

    host:"localhost",

    proxy:{

      "/api1":{

        target:"http://192.168.0.103:7001",

        changeOrigin:true,

        pathRewrite:{"^/api1":""}

      }

    }

 

  }

})

 

3.代理

tbox.vue文件

<template>

    <div></div>

</template>

<script>

import axios from "axios"

export default {

    data() {

        return {

        }

    },

    methods: {

       

    },

     mounted(){

     axios("/api1/info").then((res)=>{

        console.log(res.data)

     })

       

    }

}

</script>

vue.config.js文件

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

  transpileDependencies: true,

  lintOnSave:false,//关闭eslint的严格模式检测

  devServer:{

    port:"8080",

    host:"localhost",

    proxy:{

      "/api1":{

        target:"http://192.168.0.103:7001",

        changeOrigin:true,

        pathRewrite:{"^/api1":""}

      }

    }

 

  }

})