前端学习之路——在uniapp中结合小白接口实现用户注册、登录、以及增加用户元数据

注册/登录操作

用户注册与登录分别用到了小白接口的用户注册与登录接口，小白接口可以方便前端人员在没有后端开发人员或未到位时或者前端人员做一些小项目。

注册核心代码

			register() {

				var md5password = md5(this.password);
				uni.request({
					url: 'http://hd215.api.okayapi.com/?s=App.User.Register&',
					method: 'GET',
					data: {
						username: this.username,
						password: md5password,
						app_key: ...//小白接口的appkey
					},
			
					success: (res) => {
						console.log(res.data);
						uni.showToast({
							title: '注册成功!',
							mask: true,
							duration: 1500
						});
						uni.reLaunch({
							url: "../center/center"
						});
					}
				});
			}

登录核心代码

			loginsub() {
				var md5password = md5(this.password);
				uni.request({
					url: 'http://hd215.api.okayapi.com/?s=App.User.Login&',
					method: 'GET',
					data: {
						username: this.username,
						password: md5password,
						app_key: ...//小白接口的appkey
						sign: ...//动态生成的接口签名
					},

					success: (res) => {
						
						uni.setStorage({
							key: 'userlogin',//将用户信息储存到本地缓存中，重要的uuid及token
							data: res.data.data,
							success: function() {
								console.log('success');
							}
						});
						uni.reLaunch({
							url: '/pages/center/center'
						});
						uni.showToast({
							title: '登录成功!',
							mask: true,
							duration: 1500
						});
					}
				});
			}

增加用户元数据

用户登录后进行一些操作，需要用到增加用户元数据。实现思路为先判断用户是否登录，判断机制为读取缓存中是否存在user info，如果存在则从缓存中的userinfo提取出uuid和token，用于下一步元数据的接口参数。核心代码如下：

onLoad : function() {
			var loginRes = this.checkLogin('../login/login', '2');
			if(!loginRes){
				return false;
				uni.showModal({
				    title: '未登录',
				    content: '您未登录，需要登录后才能继续',
				    /**
				     * 如果需要强制登录，不显示取消按钮
				     */
				    showCancel: false,
				    success: (res) => {
				        if (res.confirm) {
							/**
							 * 如果需要强制登录，使用reLaunch方式
							 */
				            if (this.forcedLogin) {
				                uni.reLaunch({
				                    url: '../login/login'
				                });
				            }
				        }
				    }
				});
			}else{
				console.log(loginRes);
				
				this.userInfo = uni.getStorageSync('userlogin');
				console.log(this.userInfo);
				
			}
				
		},
		methods: {
			contentSub() {
				//this.userInfo包含数据：uuid username
				//this.loginRes 包含数据：uuid token
				//增加用户元数据所需其他数据
				//key 元数据名称
				//data 创建时的初始化数据，需要json编码
				//visiable 可见性，取值为private为私有的，protected为受保护的，public为开放的
				//app_key  sign
			
				
				
				var dataValue = {"content":this.context};
				var jsondata = JSON.stringify(dataValue);//json化用户的数据
				
				uni.request({
					url: 'http://hd215.api.okayapi.com/?s=App.User_Meta.Create&',
					method: 'GET',
					data: {
						uuid: this.userInfo.uuid,
						token: this.userInfo.token,
						key: "test2",
						data: jsondata,
						app_key: //小白接口的appkey
						
						
					},
					success: (res) => {
						console.log(res.data);
						
						uni.showToast({
							title: '发布成功!',
							mask: true,
							duration: 1500
						});
					},
					fail(ret) {
						console(ret.data);
						uni.shoutoast({
							title: '未知错误',
							mask: true,
							duration: 1500
						})
					}
				});
			}
		}

检查登录状态的函数（封装在main.js中）

Vue.prototype.checkLogin = function(backpage, backtype){
	var USER  = uni.getStorageSync('userlogin');
	if(USER == ''){
		uni.redirectTo({url:'../login/login?backpage='+backpage+'&backtype='+backtype});
		return false;
	}
	return USER;
}