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