1911A：axios登陆前端

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.2 src/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.1 src\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后端信息