axios登录前端

1.创建一个Login.vue页面

1.1 写页面views/Login.vue

• 在views/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 Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login'

Vue.use(Router)

export default new Router({
  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("/login/", params, headers)

2.2 在Login.vue页面中导入模块并测试与django联通

<template>
  <div>
    测试axios-{{title}}{{formdata}}
    <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';  // @符号指的是src路径
export default {
  // vue页面中双向绑定数据
  data() {
    return {
      title: '测试axios',
      formdata:{
        name:'zhangsan',
        pwd:'1234'
      }
    }
  },
  // vue生命周期中挂在的函数
  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后端信息