03.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后端信息