目錄
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'
}
},
methods: {},
created(){}
}
</script>
<style scoped>
</style>
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聯通
<template>
<div>
測試axios-{{title}}
<button @click="requestLogin">登錄</button>
</div>
</template>
<script>
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)
});
},
},
}
</script>
<style scoped>
</style>
2.3 測試
- 點擊登錄按鈕，發出請求，成功登錄，並返回django后端信息
