axios发送登录请求_使用axios实现登录功能(前后端联调)

1.创建一个Login.vue页面

1.1 写页面components/Login.vue

在 src/components 下创建 Login.vue 页面

测试axios-{{title}}

import { login } from '@/http/apis';

export default {

data () {

return {

title:'测试axios'

}

methods: {},

created(){}

}

1.2 src/router/index.js 中配置vue路由

import Login from '@/components/Login' //@修饰符指的是 src目录

export default new Router({

routes: [

{

path: '/login',name: 'Login',component: Login},

]

})

2.在Login.vue页面中使用axios发送请求

2.1 src\http\apis.js 中配置后端接口调用请求

/* eslint-disable */

// 配置请求django后端的地址

// 接口信息,生成请求方法

// 引入get方法,post方法

import { get,post } from './index'

// 用户登录

export const login = (params,headers) => post("/user/login/",params,headers)

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

测试axios-{{title}}

import { login } from '@/http/apis' // @符号指的是src路径

export default {

// vue页面双向绑定数据

data () {

return {

title:'测试axios',

}

// vue生命周期中挂载的函数

mounted(){

methods: {

requestLogin(){

// 获取小节的内容

let data = {name:'zhangsan',pwd:'123123'}

// resp:django后端返回的数据

console.log(resp);

}).catch((err)=>{

console.log(err)

});

}

2.3 测试

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

axios发送登录请求_使用axios实现登录功能(前后端联调)相关推荐

使用 axios 发送 http 请求
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. 使用 axios 发送 http 请求实战前言一.axios 简介与安装及 ...
Vue之axios发送Ajax请求
2.10 axios发送ajax请求 axios github 2.10.1 准备工程创建一个django工程,例如 login.创建完成之后,再创建一个子应用,例如users.最后再设置一下模板文 ...
axios发送网络请求
网络模块封装选择什么网络模块传统的Ajax 缺点:配置和调用方式等非常混乱 jQuery-Ajax 缺点:在Vue整个开发中都是不需要使用jQuery的 axios axios 功能特点: 在浏览 ...
使用rest_framework写api接口的一些注意事项(axios发送ajax请求)
1. 类继承GenericAPIView,定义queryset 印象深刻的事: 由于原来对于继承关系不太清楚,写接口 APIView/泛指GenericAPIView不太关注queryset 没有设置 ...
axios 发送 AJAX请求
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
promise的应用和在VUE中使用axios发送AJAX请求服务器
promise 用promise对函数封装: 原来的代码: <!DOCTYPE html> <html> <head><title>vue demo&l ...
ios php 表单提交图片上传,axios发送post请求提交图片表单步骤详解
这次给大家带来axios发送post请求提交图片表单步骤详解,axios发送post请求提交图片表单的注意事项有哪些,下面就是实战案例,一起来看一下. DOME 接口const userUploadA ...
axios发送post请求返回400状态码
axios发送post请求返回400状态码今天在用 axios 发送一个跨域的post请求时,遇到了一个坑:Uncaught (in promise) Error: Request failed w ...
get请求400错误 vue_解决axios发送post请求返回400状态码的问题
今天在用发送一个跨域的post请求时,遇到了一个坑:uncaught (in promise) error: request failed with status code 400. 前台代码如下: ...

axios发送登录请求_使用axios实现登录功能(前后端联调)

axios发送登录请求_使用axios实现登录功能(前后端联调)相关推荐

最新文章

热门文章