脚手架和VUE基础

VUE基础4-axios以及$nextTick和$refs知识

axios

• 支持客户端发送Ajax请求
• 支持服务端Node.js发送请求
• 支持Promise相关用法
• 支持请求和响应的拦截器功能
• 自动转换JSON数据
• axios 底层还是原生js实现, 内部通过Promise封装的

axios基本使用：

axios({
  method: '请求方式', // get post
  url: '请求地址',
  data: {    // 拼接到请求体的参数,  post请求的参数
    xxx: xxx,
  },
  params: {  // 拼接到请求行的参数, get请求的参数
   	xxx: xxx 
  }
}).then(res => {
  console.log(res.data) // 后台返回的结果
}).catch(err => {
  console.log(err) // 后台报错返回
})

axios使用GET获取数据

1.下载axios：运行npm i axios

2.导入axios：import axios from ‘axios’

例如：

<template>
  <div>
      <h1>1.查询所有图书信息</h1>
      <button @click="getAllFn">查询-看控制台</button>
      <h1>2.输入书名查询图书信息</h1>
      <input type="text" v-model="bName">
      <button @click="findFn">点击查询</button>
  </div>
</template>

<script>
// 1.下载axios
// 2.导入axios
import axios from 'axios'
export default {
    data() {
        return {
            bName: "",
        };
    },
    methods: {
        getAllFn() {
            axios({
                url:"http://123.57.109.30:3006/api/getbooks",
                method: "GET"
            }).then(res => {
                console.log(res);
            })
        },
        findFn() {
            axios({
                url:"http://123.57.109.30:3006/api/getbooks",
                method: "GET",
                params: { //get请求的参数，自动拼接到url上
                    bookname: this.bName
                }
            }).then(res => {
                console.log(res);
            })
        }
    }
}
</script>

<style>

</style>

axios使用POST发送数据

<template>
  <div>
      <h1>1.查询所有图书信息</h1>
      <button @click="getAllFn">查询-看控制台</button>
      <h1>2.发布图书</h1>
      <input type="text" placeholder="书名" v-model="bookObj.bookname">
      <input type="text" placeholder="作者" v-model="bookObj.author">
      <input type="text" placeholder="出版社" v-model="bookObj.publisher">
      <button @click="sendFn">发布</button>
  </div>
</template>

<script>
// 1.下载axios
// 2.导入axios
import axios from 'axios'
export default {
    data() {
        return {
            bookObj: { // 参数名提前和后台的参数名对上-发送请求就不用再次对接了
                bookname: "",
                author: "",
                publisher: ""
            }
        };
    },
    methods: {
        getAllFn() {
            axios({
                url:"http://123.57.109.30:3006/api/getbooks",
                method: "GET"
            }).then(res => {
                console.log(res);
            })
        },
        sendFn() {
            axios({
                url: "http://123.57.109.30:3006/api/addbook",
                method: "POST",
                data: {
                    appkey: "7250d3eb-18e1-41bc-8bb2-11483665535a",
                    ...this.bookObj
                    // 等同于下面
                    // bookname: this.bookObj.bookname,
                    // author: this.bookObj.author,
                    // publisher: this.bookObj.publisher
                }
            })
        }
    }
}
</script>

<style>

</style>

axios全局配置

目标: 避免前缀基地址, 暴露在逻辑页面里, 统一设置

语法：axios.defaults.baseURL = “基地址”

例如

<template>
  <div>
      <h1>1.查询所有图书信息</h1>
      <button @click="getAllFn">查询-看控制台</button>
  </div>
</template>

<script>
// 1.下载axios
// 2.导入axios
// 3.发起axios请求
import axios from 'axios'
// 4.axios全局配置
axios.defaults.baseURL = "http://123.57.109.30:3006"
export default {
    methods: {
        getAllFn() {
            axios({
                url:"/api/getbooks",
                method: "GET"
            }).then(res => {
                console.log(res);
            })
        }
    }
}
</script>

<style>

</style>

$nextTick和$refs知识

$refs

作用：利用 ref 和 $refs 可以用于获取 dom 元素，获取组件对象 - 调用组件方法

<template>
  <div>
    <h1>1.使用$refs获取DOM元素</h1>
    <p id="p" ref="refP">这是一个p标签</p>
    <h1>2.使用$refs获取组件-并使用组件内的属性和方法</h1>
    <!-- 给Demo组件添加ref -->
    <Demo ref="de">
    </Demo>
  </div>
</template>

<script>
import Demo from './components/Demo'
export default {
  components: {
    Demo
  },
  mounted() {
    console.log(document.getElementById("p"))
    // 获取DOM元素
    console.log(this.$refs.refP)
    // 获取组件，并使用其内部方法
    this.$refs.de.fn()
  }
}
</script>

<style>

</style>

Demo组件为：

<template>
  <div>
      <p>这是一个demo组件</p>
  </div>
</template>

<script>
export default {
    methods: {
        fn() {
            console.log("fn方法被调用了")
        }
    }
}
</script>

<style>

</style>

$nextTick

作用：因为DOM更新是异步的，DOM中数据更新后，无法拿到新值，$nextTick可以解决这个问题

例如：

 this.$nextTick(() => {
                console.log(this.$refs.refP.innerHTML); // 1
            })