标签: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. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。