1.建立一個Login.vue頁面

1.1 寫頁面 views/Login.vue　

　　在 views/components 下建立 Login.vue 頁面

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

import Login from '@/views/Login'


{
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },

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

2.1 src\http\apis.js 中配置後端介面呼叫請求

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


// 使用者登入 
export const login = (params, headers) => post("/login/", params, headers)

2.2 在 Login.vue 頁面中匯入模組並測試與django聯通

<template>  
    <div>   
        測試axios-{{title}}  
        <p>
            <label>使用者名稱：</label>
            <input v-model="
 
formdata.name">
        </p>
        <p>
            <label>密碼：</label>
            <input v-model="formdata.pwd">
        </p>
        <p>
            <button @click="requetLogin">登入</button>
        </p>
    </div> 
</template>
<script>
import
 
 {login} from '@/http/apis';


export default {
    data(){
        return{
            title:"測試axios",
            formdata:{
                name:"zhangsan",
                pwd:"1234"
            }
        }
    },
    mounted(){
    },
    methods:{
        requetLogin(){
            let data=this.formdata
            login(data).then(resp=>{
                //resp :django 後端返回的資料
                console.log(resp);
            }).catch(err=>{
                console.log(err)
            })
        }
    },
}
</script>
<style scoped>
</style>

1.3 測試

http://localhost:8080/#/login

　　點選登入按鈕，出發請求，成功登入，並返回django後端資訊