使用axios實現登錄功能

1.創建一個Login.vue頁面

1.1 寫頁面 components/Login.vue

在 src/components 下創建 Login.vue 頁面

<template> 
    <div> 
        測試axios-{{title}} 
    </div> 
</template> 
<script> 
    import { login } from '@/http/apis'; 
    export default { 
        data() { 
            return { 
                title: '測試axios',
            } 
        },
        mounted() { 
            
        },
        methods: { 
            
        } 
    } 
</script>
<style scoped> 
</style>

1.2 src/router/index.js 中配置vue路由

import Login from '@/components/Login' 
export default new Router({ 
    routes: [ 
        { path: '/login', name: 'Login', component: Login }, 
    ] 
})

2.在Login.vue頁面中使用axios發送請求

2.1 src\http\apis.js 中配置后端接口調用請求

/* eslint-disable */ 
// 接口信息, 生成請求方法
// 引入 get方法, post方法 
import { get, post } from './index' 
// 用戶登錄 
export const login = (params, headers) => post("/user/login/", params, headers)

2.2 在 Login.vue 頁面中導入模塊並測試與django聯通

<template> 
    <div> 
        測試axios-{{title}} 
        <button @click="requetLogin">登錄</button> 
    </div> 
</template> 
<script> 
    import { login } from '@/http/apis'; // @符號指的是src路徑 
    export default { 
        // vue頁面中雙向綁定數據 
        data() { 
            return { 
                title: '測試axios', 
            } 
        },
        // vue生命周期中掛在的函數 
        mounted() { 
            
        },
        methods: { 
            requetLogin() { 
                // 獲取小節的內容 
                let data = { name: 'zhangsan', pwd: '123456' } 
                login(data).then((resp) => { 
                    // resp: django后端返回的數據 
                    console.log(resp); 
                }).catch((err) => { 
                    console.log(err); 
                }); 
            }, 
        } 
    } 
</script> 
<style scoped> 
</style>

1.3 測試

點擊登錄按鈕，出發請求，成功登錄，並返回django后端信息