uniapp使用封装好的接口与登录界面进行交互

1.新建Login.vue文件或根据自己需要创建.vue文件，这里只是演示，建好以后复制以下代码。

2.代码如下：

<template>
	<view>
		<view class="item1"><text>登录</text></view>
		<form>
			<view class="item">
				<view class="label">账号：</view>
				<input v-model="userName" type="text" placeholder="请输入账号" />
			</view>
			<view class="item">
				<view class="label">密码：</view>
				<input v-model="userPwd" type="password" placeholder="请输入密码" />
			</view>
			<view class="item2">
				<button @click="submit()" type="primary">登录</button>
			</view>
		</form>

	</view>
</template>

<script>
	//引用刚才创建的.js接口封装文件，这里是我的文件目录，根据你的进行引用。
import $http from '@/common/api/request.js'      
	export default {
		data() {
			return {
				//用户输入的内容
				userName: "",
				userPwd: ""
			}
		},
		methods: {
			//登录验证
			submit() {
				uni.showLoading({
					title: "登录中..."
				});
				$http.request({
					url: "/login",  //此处根据自己实际情况进行更改。
					method: "POST",
					sslVerify: false,
					data: {
						username: this.userName,
						pwd: this.userPwd
					}
					
				}).then((res) => {
					console.log(res);
					if(res.length > 0)
					{
						
						//保存用户信息
						uni.setStorageSync('userInfo',res);
						uni.switchTab({
							url: "../Home/Home"
						
						})
					}
					else{
						uni.showToast({
							title: '账号或密码不正确！',
							icon: 'none'
						})
					}
					

				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style>
	.item {
		height: 50px;
		display: flex;
		align-items: center;
		fiex-direction: row;
		padding: 0 10px;
		border-top: 2px solid #efefef;
	}

	.item1 {
		text-align: center;
		padding-top: 150px;
		padding-bottom: 50px;
		font-size: 25px;
		font-weight: 900;
	}

	.item .label {
		width: 100px;

	}

	.item2 {
		padding-top: 50px;
		height: 50px;

		/*display: flex;*/
		align-items: center;
		/*fiex-direction:row;*/

	}
</style>