1911A:axios登陸前端
阿新 • • 發佈:2020-11-01
1.建立一個Login.vue頁面
1.1 寫頁面views/Login.vue
·在views/components下建立Login.vue頁面
<template> <div> 測試axiso-{{title}} <p> <label>使用者名稱:</label> <input v-model="formdata.name"> </p> <p> <label>密碼:</label> <input v-model="formdata.pwd"> </p> <p> <button @click="requestLogin">登入</button> </p> </div> </template> <script> import {login} from '@/http/apis'; // @符號指的是src路徑 export default { data() { return { title: '測試axios', formdata:{ name:"zhangsan", pwd: "1234", } } }, // vue 生命週期中掛在的函式 mounted() { }, methods: { requestLogin(){ // 獲取小節的內容 let data = this.formdata login(data).then(resp=>{ // resp: django 後端返回的資料 console.log(resp) alert("測試成功") }).catch(error=>{ console.log(error) }) } }, created(){ } } </script> <style> </style>
1.2src/router/index.js中配置vue路由
import Vue from 'vue' import Router from 'vue-router' import Login from '@/components/Login' Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/login', name: 'Login', component: Login }, ] })
2.在Login.vue頁面中使用axios傳送請求
2.1src\http\apis.js中配置後端介面呼叫請求
/* eslint-disable */ import { get, post, put, del } from './index' // 使用者登入 export const login = (params, headers) => post("/books/login/", params, headers)
2.2 測試
http://localhost:8080/#/login
·點選登入按鈕,出發請求,成功登入,並返回django後端資訊