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