10登录注册

---

一、登录页布局

二、登录表单验证

v-model 获取数据到 data
并在data中 设置验证的规格

三、输入手机号页面

四、验证码倒计时

codenum–
每一秒被重新赋予更新倒计时

setTimeout
倒计时触发事件

验证码正确后进入首页
gonextIndex

五、登录注册数据接口

六、储存用户信息

index.js
用户登陆成功后，用户数据

	//查询用户名或者手机号存在不存在
	 connection.query( user.queryUserName( params ) , function (error, results, fields) {
		if( results.length > 0 ){
			 connection.query( user.queryUserPwd( params ) , function (err, result) {
				 if(  result.length > 0 ){
					 res.send({
					 	data:{
					 		success:true,
					 		msg:"登录成功",
							data:result[0]
					 	}
					 })
				 }else{
					 res.send({
						data:{
							success:false,
							msg:"密码不正确"
						}
					 })
				 }
			 })
		}else{
			res.send({
				data:{
					success:false,
					msg:"用户名或手机号不存在"
				}
			})
		}
	 })
});

login.vue
接收后端返回的用户信息，保存

//点击登录
			submit(){
				if(  !this.validate('userName')  ) return;
				if(  !this.validate("userPwd") )   return;
				
				uni.showLoading({
					title:"登录中..."
				})
				
				$http.request({
					url:"/login",
					method:"POST",
					data:{
						userName:this.userName,
						userPwd:this.userPwd
					}
				}).then((res)=>{
					
					//保存用户信息
					this.login(res.data);
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
					uni.hideLoading();
					uni.navigateBack({
						delta:1
					})
					
				}).catch(()=>{
					uni.showToast({
						title:'请求失败',
						icon:'none'
					})
				})
				
			},

my.vue

templ ate

<view class='header-logo' @tap='goLogin'>
					<image class='logo-img' :src=" loginStatus ? userInfo.imgUrl : '../../static/img/Children.jpg' " mode=""></image>
					<view class='logo-name'>
						{{  loginStatus ? userInfo.nickName : "用户名称"   }}
					</view>
				</view>

script

computed:{
			...mapState({
				loginStatus:state=>state.user.loginStatus,
				userInfo:state=>state.user.userInfo
			})
		},

七、用户信息持久储存

store/modules/user.js

export default{
	state:{
		//登录状态
		loginStatus:false,
		//token
		token:null,
		//用户信息(昵称/头像)
		userInfo:{}
	},
	getters:{},
	mutations:{
		//一旦进入了app,就需要执行这个方法,把用户信息读出来
		initUser(state){
			let userInfo = uni.getStorageSync('userInfo');
			if( userInfo ){
				userInfo = JSON.parse( userInfo );
				state.userInfo = userInfo;
				state.loginStatus = true;
				state.token = userInfo.token;
			}
		},
		//登录后保存用户信息
		login(state,userInfo){
			state.userInfo = userInfo;
			state.loginStatus = true;
			state.token = userInfo.token;
			//持久化存储 ===>把对象转换成字符串
			uni.setStorageSync('userInfo',JSON.stringify(userInfo));
		}
	},
	actions:{}
}

八、退出登录

登录成功的状态，将其修改

users.js

//退出登录
		loginOut(state){
			state.loginStatus = false;
			state.userInfo = {};
			state.token = null;
			//删除本地存储的信息
			uni.removeStorageSync('userInfo');
		}

my-config.vue

<view class='my-exit' @tap='outLogin'>退出登录</view>
		
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			...mapMutations(['loginOut']),
			goPathList(){
				uni.navigateTo({
					url:'../my-path-list/my-path-list'
				})
			},
			outLogin(){
				
				uni.showToast({
					title:"退出成功",
					icon:"none"
				})
				this.loginOut();
				uni.switchTab({
					url:"../index/index"
				})
			}
		}
	}
</script>