使用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后端信息