day3(使用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 {
        name: "Login",
      data(){
          return{
            title:'测试axios',
          }
      },
      mounted(){

      },
      methods:{
          
          },
      }
    }
</script>

<style scoped>

</style>
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';
    export default {
        name: "Login",
      data(){
          return{
            title:'测试axios',
          }
      },
      mounted(){

      },
      methods:{
          requetLogin(){
            let data={name:'zhansan',pwd:'123456'}
            login(data).then((resp) =>{
              console.log(resp);
            }).catch((err)=>{
              console.log(err);
            });
          },
      }
    }
</script>

<style scoped>

</style>
1.3测试

• 点击登录按钮，出发请求，成功登录，并返回django后端信息