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