1.創建一個Login.vue頁面

1.1 寫頁面components/Login.vue

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

測試axios-{{title}}

import { login } from '@/http/apis';

export default {

data () {

return {

title:'測試axios'

}

},

methods: {},

created(){}

}

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

import Login from '@/components/Login' //@修飾符指的是 src目錄

export default new Router({

routes: [

{

path: '/login',name: 'Login',component: Login},

]

})

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

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

/* eslint-disable */

// 配置請求django后端的地址

// 接口信息,生成請求方法

// 引入get方法,post方法

import { get,post } from './index'

// 用戶登錄

export const login = (params,headers) => post("/user/login/",params,headers)

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

測試axios-{{title}}

登錄

import { login } from '@/http/apis' // @符號指的是src路徑

export default {

// vue頁面雙向綁定數據

data () {

return {

title:'測試axios',

}

},

// vue生命周期中掛載的函數

mounted(){

},

methods: {

requestLogin(){

// 獲取小節的內容

let data = {name:'zhangsan',pwd:'123123'}

login(data).then((resp) => {

// resp:django后端返回的數據

console.log(resp);

}).catch((err)=>{

console.log(err)

});

},

},

}

2.3 測試

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

總結

以上是生活随笔為你收集整理的axios发送登录请求_使用axios实现登录功能(前后端联调)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。