ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

8.使用axios实现登录功能

2020-10-08 08:35:21  阅读:161  来源: 互联网

标签:src 功能 axios 登录 vue Login login 页面


目录

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 {
    data(){
      return {
        title:"测试axios"
      }
    },
    mounted(){
    },
    methods: {
  }
</script>

<style scoped>

</style>

1.2 src/router/index.js中配置vue路由
import Login from '@/components/Login'
export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
  ]
})

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 {
    //vue页面中双向数据绑定
    data(){
      return {
        title:"测试axios"
      }
    },
    //vue生命周期中挂在的函数
    mounted(){
    },
    methods: {
      requetLogin(){
        //获取小节内容
        // debugger
        let data = {name:'zhangjin',pwd:'123456'}
        login(data).then((resp) => {
          //resp: django后端返回的数据
          console.log(resp);
        }).catch((err) => {
          console.log(err);
        });
      },
    }
  }
</script>
<style scoped>
</style>

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

标签:src,功能,axios,登录,vue,Login,login,页面
来源: https://www.cnblogs.com/mbitions/p/13780192.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有