uniapp 登录功能实现

//template
<template>
	<view class="content">
		<view style="justify-content: left; flex-flow: row;display: flex;
		margin: 100px 0px 0px 20px; ">
			<text>手机号：</text>
			<input focus placeholder="请输入手机号" maxlength="11"  v-model="telephone"
			style="border: 1px solid black;"/>
		</view>
		<view style="justify-content: left; flex-flow: row;display: flex;
		margin: 20px 0px 0px 20px;">
			<text>密&nbsp;&nbsp;&nbsp;码：</text>
			<input class="uni-input" password type="text" placeholder="请输入密码"  v-model="password"
			style="border: 1px solid black;"/>
		</view>
		<view style="margin-top: 50px;">
			<uni-section title="提示消息" type="line">
				<button size="mini" style="margin-top: 20px;
				background-color: #1296db;color: white;"
				@click="dengLu">登录</button>
			</uni-section>
			<button type="text" size='mini' style="margin-left: 20px;
			background-color: #1296db;color: white"
			@click="register('/pages/user/adduser')">立即注册</button>
		</view>
	</view>
	
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

//js
<script>
	export default {
		data() {
			return {
				telephone:'',
				password:'',
			}
		},
		onLoad() {

		},
		methods: {
			register(url) {
				uni.navigateTo({
					url:url
				})
			},
			dengLu() {	
				if(this.telephone==''||this.password==''){
					uni.showToast({
						title:'账号/密码不能为空',
						duration:2000,
						icon:'error'
					})
					return;
				}
				console.log("要开始登陆了"+this.telephone+"999"+this.password);
				uni.request({
					url: 'http://localhost:8088/v1.0/userInfo/doLogin',
					method:"POST",
					data:{
							telephone: this.telephone,
							password:this.password,
						},
					header:{
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						//获取相应状态码
						if(res.data.code==200){
							console.log("请求成功");
							uni.showToast({
								title: "登录成功",
								icon:"success",
								duration: 2000
							});
							//登录成功 跳转到首页
							uni.switchTab({
								url:'/pages/tabbar/home'
							});
						}else{   //登入失败
							uni.showToast({
								title: "登录失败",
								icon:"error",
								duration: 2000
							});
						}
					}
				})	
			}
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64