在vue框架中使用axios對接介面訪問資料的四種情況

橙小甜發表於2020-10-08
Vue框架iOS

將vue，axios，qs的js檔案引入到程式碼中
寫好介面按鈕資訊以及按鈕繫結事件

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.js"></script>
    <title>axios</title>
</head>

<body>
    <div id="app">
        <!-- <div>{{response}}</div> -->
        <button @click="findAllCustomers">查詢所有顧客資訊</button>
        <button @click="findCustomerById">根據ID獲取顧客資訊</button>
        <button @click="login">登入</button>
        <button @click="queryCustomers">分頁查詢顧客資訊</button>
    </div>
</body>

查詢所有顧客資訊屬於get請求無引數情況
根據ID獲取顧客資訊屬於get請求有引數情況
登入屬於post請求無引數情況
分頁查詢顧客資訊屬於post請求有引數情況

一.get方式沒有引數

url獲取路徑，method獲取請求方式

findAllCustomers() {
                axios({
                    url: "http://120.26.177.210:5588/customer/findAll",
                    method: "get",
                    params: {}
                }).then((res) => {
                    console.log(res.data.data)
                    this.response = res.data.data
                })
            },

在這裡插入圖片描述

二.get方式攜帶引數

params獲取請求引數，沒有引數就為空

findCustomerById() {
                let baseURL = "http://120.26.177.210"
                axios({
                    method: 'get',
                    url: baseURL + "/customer/findCustomerById",
                    params: { id: 134 }
                }).then((res) => {
                    console.log(res.data.data)
                    this.response = res.data.data
                })
            },

引數放在params裡面

三.post傳遞JSON字串

傳遞的資料放到obj物件中

	login() {
                let obj = {
                    password: 123321,
                    type: "customer",
                    username: "susan"
                }
                axios({
                    method: 'post',
                    url: "http://120.26.177.210/user/login",
                    data: obj
                }).then((res) => {
                    console.log(res.data.data)
                })
            },

四.post傳遞qs型別資料

qs.stringify()將json物件轉換成查詢字串

queryCustomers() {
                let obj = {
                    page: 0,
                    pageSize: 10
                }
                axios({
                    method: 'post',
                    url: "http://120.26.177.210/customer/query",
                    data: Qs.stringify(obj)
                }).then((res) => {
                    console.log(res.data.data.list)
                })
            }

所有情況的簡寫為

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.js"></script>
    <title>axios</title>
</head>
<body>
    <div id="app">
        <!-- <div>{{data}}</div> -->
        <button @click="findAllUser">查詢所有使用者</button>
        <button @click="findUserById">根據id查使用者</button>
        <button @click="login">登入</button>
        <button @click="queryUser">分頁查詢使用者</button>
    </div>
</body>

<script>
    new Vue({
        el:"#app",
        data() {
            return {
                data:[]
            }
        },
        methods: {
            // get無參
            // 查詢所有使用者資訊
            findAllUser() {
            // 簡寫         		
            axios.get("http://39.96.21.48:5588/customer/findAll").then(res=>{
                    console.log(res.data.data)
                })
            },
            

            // get有參
            // 根據id查詢使用者資訊
            findUserById() {
                // 簡寫
                axios.get("http://39.96.21.48:5588/customer/findCustomerById",{params:{id:134}}).then((res) => {
                    this.data = res.data.data
                    console.log(res.data.data)
                })
            },

            // post-json字串
            // 登入
            login() {
                let obj = {
                    password:123321,
                    type:"customer",
                    username:"susan"
                }               axios.post("http://39.96.21.48:5588/user/login",obj).then((res) => {
                    console.log(res.data.data)
                })
            },

            // post-查詢字串
            // 分頁查詢使用者資訊
            queryUser() {
                let obj = {
                    page:0,
                    pageSize:10
                }
                // 簡寫
                axios.post("http://39.96.21.48:5588/customer/query",Qs.stringify(obj)).then(res=>{
                    console.log(res.data.data.list)
                })
            }
        }
    })
</script>
</html>

相關文章