vue基础第五天

xiaos

**axios 是一个专门用于发送ajax请求的库，一种前端异步请求后端的技术 **

特点

• 支持客户端发送Ajax请求

• 支持服务端Node.js发送请求

• 支持Promise相关用法

• 支持请求和响应的拦截器功能

• 自动转换JSON数据

axios 底层还是原生js实现, 内部通过Promise封装的

基本用法

import axios from 'axios'
export default {
  methods: {
    getBooks() {
      // axios 发请求只需要带上一个配置对象
      axios({
        // url 地址
        url: 'http://123.57.109.30:3006/api/getbooks',
        // method 请求方法
        method: 'get'
      }).then(res=>{
        // 这个库有个特点, 会将你发请求的配置放在返回中一起交给你, 最终的数据, 其实是放在 res.data
        console.log(res.data);
      })
    }
  }
}

get请求带参数

      // 发送axios请求
      axios({
        url: "http://123.57.109.30:3006/api/getbooks",
        method: "get",
      // get 请求的传输只能用参数方式
      // query 查询字符串的传参方式 => 这个参数会在 url 后面用 ?a=1 的形式拼接
        params: {
          // appkey:"gugu123",
          bookname: this.bookName,
        },
      }).then((res) => {
        console.log(res);
      });

post请求带参数

      axios({
        method: "post",
        url: "http://123.57.109.30:3006/api/addbook",
        // post 请求一般用这个方式带参数, 实际的作用是将数据放入到请求载荷(请求体)中
        data: {
          appkey: "7250d3eb-18e1-41bc-8bb2-11483665535a",
          //...展开运算符  
          ...this.bookData,
        },
      })
        .then((res) => {
          console.log(res.data);
        })
        .catch((err) => {
          console.log(err);
        });

其实 params 和 data 的传参方式一个用在 get 一个用在 post 这种说法只是一般约定, 但是技术上其实可以有例外, 比较确定的区别是, params 会将数据待在 url? 后面查询字符串, data 将数据放在请求载荷(请求体)

• axios函数调用返回结果是一个Promise对象

.then() --ajax请求成功的结果

.catch() --ajax请求失败的结果

拓展--延展运算符

// ... 展开运算符/延展运算符
// ...[1,2,3] => 1,2,3
// ...{name: 'tom', age: 13} => name: 'tom', age: 13
// const arr = [1,2,3]
// const arr2 = arr
// arr2[1] = 666
// const arr2 = [...arr]
// console.log(...[1,2,3]) => console.log(1,2,3);
// console.log(...{name: 'tom', age: 13}) => console.log(name: 'tom', age: 13)

封装全局axios

封装axios基地址

配置基础地址, 统一管理/维护

// /src/utils/request.js
// 改造 axios 添加基地址后重新导出
import axios from 'axios'
axios.defaults.baseURL = 'http://123.57.109.30:3006/api'

export default axios

封装axios请求函数

-----在/src/api/book.js文件封装-----

// /src/api/book.js
// 这里是统一管理关于书籍的请求接口函数
// 获取书籍的a
import request from '@/utils/request'pi
export function getBooks(params) {
  return request({
    // url 地址
    url: '/getbooks',
    // method 请求方法
    method: 'get',
    params: params,
    data: {
      a:666
    }
  })
}

-----app.vue使用------

// App.vue 最终使用
//引入axios请求文件
import {getBooks} from '@/api/book'
const params = {
  bookname: this.bookName
}
getBooks(params).then(res=>{
  console.log('成功');
  console.log(res.data);
}).catch(err=>{
  console.log(err);
})

$refs和$nextTick使用

$refs使用

$refs--获取DOM

利用 ref 和 $refs 可以用于获取 dom 元素

<template>
  <div>
    <!-- vue 获取元素的方法 1.设置一个 ref 属性 -->
    <div id="myBox" ref="myBoxRef">盒子</div>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log("id",document.getElementById('myBox'));
    // vue 当中获取元素方法第二部 this.$refs.名字
    console.log("refs",this.$refs.myBoxRef);
  },
};
</script>

vue中用id属性或者ref属性都可以获取原生DOM标签

$refs--获取组件对象

获取组件对象, 调用组件里方法

例：

子组件MyBoxs.vue

<template>
  <div>我的盒子 {{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: "大漂亮",
    };
  },
  methods: {
    dajiao() {
        alert('这儿是组件')
    },
  },
};
</script>

父组件app.vue

<template>
  <div>
    <!-- <div id="myBox" ref="myBoxRef">盒子</div> -->
    <MyBoxs id="zjBox" ref="zjBoxRef" />
  </div>
</template>

<script>
import MyBoxs from "./components/MyBoxs.vue";
export default {
  components: {
    MyBoxs,
  },
  mounted() {
    console.log("id", document.getElementById("zjBox"));
    console.log("refs", this.$refs.zjBoxRef);
    setTimeout(() => {
      this.$refs.zjBoxRef.msg = "大聪明";
      this.$refs.zjBoxRef.dajiao();
    }, 1000);
  },
};
</script>

总结: ref定义值, 通过$refs.值 来获取组件对象, 就能继续调用组件内的变量

$nextTick使用

等DOM更新后, 触发此方法里函数体执行

语法: this.$nextTick(函数体)

例：

<template>
  <div>
    <button @click="toggleShow">切换</button>
    <div v-if="isShow" class="box" ref="myBox"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
    };
  },
  methods: {
    toggleShow() {
      this.isShow = !this.isShow;
      // 每次显示的时候都将这个dom打印出来
      // console.log(this.$refs.myBox);
      // this.$refs.myBox(回调函数) 作用是等待页面更新完毕执行回调函数
      this.$nextTick(() => {
        console.log(this.$refs.myBox);
      });
    },
  },
};
</script>

$nextTick-案例--显示输入框后自动聚焦

<template>
  <div>
    <input v-if="isShowSearch" type="text" ref="search" />
    <button v-else @click="showSearch">开始搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowSearch: false,
    };
  },
  methods: {
    showSearch() {
      this.isShowSearch = !this.isShowSearch;
      // 这里我们想要聚焦输入框，只要获取输入框dom 执行其中的focus函数即可
      // this.$refs.search.focus()
      //设置显示取反没有马上渲染
      //如果想要等待渲染完毕有了input再执行，使用 this.$nextTick
      this.$nextTick(() => {
        this.$refs.search.focus();
      });
    },
  },
};
</script>

补充知识点

props两种定义方式

props: [] -- 只声明变量和接收数据，不能对数据做类型校验

props: {} -- 即声明变量和接收数据，也对数据做校验类型--校验不对则报错

导出/导入的两种方式

匿名导出/导入

单组件文件或单配置文件导出及导入，导入时可根据语义自定义名字

具名导出/导入

配置文件内有多个函数 / 方法 ， 导出时要设定函数名 / 方法名

导入时要通过{}解构该配置文件内的方法以供使用，名字也要与导出文件相对应。