vue——axios请求案例

1.获取所有图书信息

功能: 点击调用后台接口, 拿到所有数据 – 打印到控制台

1.组件UseAxios.vue引入、注册及使用（省略）

2.下载：yarn add axios

3.引入：import axios from "axios"

4.发起axios的请求：

methods: {
    getAllFn() {
      axios({
        url: "http://123.57.109.30:3006/api/getbooks",
        method: "GET", // 默认就是GET方式请求, 可以省略不写
      }).then((res) => {
        console.log(res);
      });
      // axios()-原地得到Promise对象
    },
}

---

2.查询图书信息

功能: 点击调用后台接口, 查询用户想要的书籍信息 – 打印到控制台

<p>2. 查询某本书籍信息</p>
    <input type="text" placeholder="请输入要查询 的书名" v-model="bName" />
    <button @click="findFn">查询</button>

data() {
    return {
      bName: "",
}},
methods: {
findFn() {
      axios({
        url: "/api/getbooks",
        method: "GET",
        params: { // 都会axios最终拼接到url?后面
            bookname: this.bName
        }
      }).then(res => {
          console.log(res);
      })
},
}

---

3. 新增图书信息

功能: 点击新增按钮, 把用户输入的书籍信息, 传递给后台 – 把结果打印在控制台

<p>3. 新增图书信息</p>
    <div>
        <input type="text" placeholder="书名" v-model="bookObj.bookname">
    </div>
    <div>
        <input type="text" placeholder="作者" v-model="bookObj.author">
    </div>
    <div>
        <input type="text" placeholder="出版社" v-model="bookObj.publisher">
    </div>
    <button @click="sendFn">发布</button>

 data() {
    return {
      bName: "",
      bookObj: { // 参数名提前和后台的参数名对上-发送请求就不用再次对接了
          bookname: "",
          author: "",
          publisher: ""
      }
    };
  },
methods: {
sendFn(){
       axios({
           url: "/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
           }
       }) 
    }
}

---

4.axios全局配置 

// 4. 全局配置
axios.defaults.baseURL = "http://123.57.109.30:3006"