AXIOS登录前端

最新推荐文章于 2024-07-21 22:25:44 发布

www_b

最新推荐文章于 2024-07-21 22:25:44 发布

阅读量290

点赞数

本文链接：https://blog.csdn.net/www_b/article/details/109360945

版权

这篇博客介绍了如何在Vue项目中创建Login.vue页面，并通过配置vue路由进行页面设置。接着，详细讲解了如何利用axios在Login.vue页面中发送请求，包括在apis.js中配置后端接口和在页面中导入模块进行测试，最后进行了功能测试，确保与Django后台的联通。

摘要由CSDN通过智能技术生成

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>