1.1 寫頁面components/Login.vue
.在scr/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>