使用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.2src/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后端信息