上一扁文章的登录界面中有三个按钮是用来登录测试账号的，因为这是我们开发调试用的东西，所以可以适当做得奔放一些，就是点击它们后直接在本地写入固定的登录信息而不去验证任何东西，下面我们实现第一个按钮“老赵1，管理员”的点击响应事件后去服务器验证并写入登录信息的方法。

我们先给按钮添加点击事件，给标签指定点击事件必须由@符号开始，我们给点击事件函数名起名叫login_lz1，添加完成后，这个按钮标签看起来应该是这个样子：

<button class="button" type="warn" @click="login_lz1">老赵1，管理员</button>

然后在下面的<script>段内的methods里实现这个login_lz1的函数主体，现在这个<script>段的内容就应该是这个样子（this.requestAPI方法是由文章下面的代码实现的）：

<script>	export default {		data() {			return {				sendMsg: "发送验证码",				isCanSendCode: true,				phone: "",				vCode: ""			}		},		methods: {			login_lz1:function(e){//这个e是系统传过来的一些信息				//调用封装好的API请求方法				this.requestAPI({  //这个是自己封装的函数，文章下面有代码						//API的参数						class : "users",						fun	  : "chkLogin",						phoneNum : "13333333333",						vCode : "e10adc3949ba59abbe56e057f20f883e"					},function(res){						//调用成功后的处理函数						var resData = res.data;						if(resData.code == 1){							//身份验证成功了							//写入 老赵1，管理员 的登录信息							//这只是在APP端标记了他登录了，实际产生操作时服务端还会再验证							uni.setStorageSync("login_pid","1"); //用户的id							uni.setStorageSync("login_userPhone","13333333333"); //用户的手机号							uni.setStorageSync("login_vCode","e10adc3949ba59abbe56e057f20f883e"); //123456的md5值 							uni.setStorageSync("login_startDate","2021-08-04 10:09:00"); //登录日间							uni.setStorageSync("login_identity","1"); //权限1为管理员							//这里没有做失败验证，因为我还没发现过这种函数能出错的时候，懒得写了							uni.reLaunch({ //写完登录信息，跳转到APP首页（当然你可以跳到任何页）								url:"../tasks/tasks"							});						}else{							//身份验证失败了							//错误信息打印到控制台							console.log(resData);						}					});			}		}	}</script>

到这，点击按钮后可以去服务器的API验证用户并写入登录信息了，但这个请求不会成功，因为我们还没在服务器端做API和数据呢，所以我们要去“伪造”这个用户的数据（因为我们还没做注册功能，所以要直接去操作数据库）。

要用到钱的地方来了：搭建这套API系统需要一个支持PHP和mysql的主机（虚拟主机也够用）一个有备案的域名，域名要有SSL证书。这个您自己想办法或者联系我都行。如果现在就有，那直接用最好不过了。

按照我前面的文章在您的主机里搭建一套API路由框架，此处不再多说了。

(唉，个人开发者好辛苦，前端后端美工都要自己搞，但好处是可以按自己的套路来，不用考虑别人。）

在mysql里新建一个数据表：wuye_users，它的字段暂时为下图中样子（以后有需要再添加修改，路子就是这么野）

wuye_users数据表字段

伪造一下我们上面那个身份的数据：

老赵1身份信息

下面是实现APP端请求API和服务器端API验证请求

要在APP端发起请求，需要uni.request这个API，因为我们要做一些加解密或者统一API接口之类的，如果每次都写，再改变的时候太麻烦，所以我们要封装一下这个uni.request并集成一下密钥系统，我们按照上一扁文章里写的那样在main.js中写一个全局方法，代码如下：

/** * @param {area,class,fun} data * @param {function} callBackFun * 封装的统一的API请求方法， * 第一个参数是个对象，里面是请求数据，第二个是回调函数 */Vue.prototype.requestAPI = function(sData,callBackFun){	if (!sData.hasOwnProperty("class") || !sData.hasOwnProperty("fun")){		//如果data对象里没有这两个属性，就不是一个合格的调用。		return false;	}		//加密字符串，对数据进行加解密，让别人拦截到也猜不到。	var keyStr = "谁能猜到我这个加密字符串内容呢？哈哈。老赵最帅";	//sKey为加密字符串的md5和API种类名的md5和API功能名的md5和当前日期的md5值连起来的md5值	//因为有当前日期的加入，所以sKey每天的值都会不一样，仅从md5值上看不出任何规律	sData.sKey = md5(md5(keyStr) + md5(sData.class) + md5(sData.fun) + md5(new Date().format("yyyy-MM-dd")));		uni.request({		//API的URL，我这是举了个例子，实际我也是用的这个，哈哈哈^_*		url : ".***.com/***/iLaoZhao/laozhaozuishuai.php",		//uni.request的data参数，我们把上面的apiObj和参数data拼接起来		data: sData,		header:{ //不加这个header，POST请求无法传递数据			'content-type': 'application/x-www-form-urlencoded'		},		method:"POST",		success(res) {			//成功后调用回调函数，把API返回的数据传出去			callBackFun(res);		}	});}

同样的，API端接受到访问后要验证该访问是否是合法访问，PHP函数如下

/** * 我是否能用这个API系统 ？ 这个函数会验证加密字符串是否正确 如果不正确就是非法调用，直接退出行 */function canIUseThisApi(){	$keyStr = "谁能猜到我这个加密字符串内容呢？哈哈。老赵最帅";	$class = POST("class");//要使用的API小分类	$fun = POST("fun");//要使用的API功能	$nowDate = date("Y-m-d"); //当前日期		$sKey = POST("sKey"); //传过来的密钥	if($sKey !== false){		//根据密文和参数及日期计算出正确的密钥		$rightKey = md5(md5($keyStr) . md5($class) . md5($fun) . md5($nowDate));				if($sKey !== $rightKey){			//如果传过来的密钥和算出来的不一样就直接退出。      //die();			//但是我现在为了调试方便			//在这里输出了不应该输出的错误信息。			output2Die("API调用权限验证出错，您无权调用本套API。",-1);		}		//否则密钥正确这个破函数就运行完了，啥也不会发生，后面的PHP代码会继续运行。	}}

这个函数要在API接口文件里第一行运行，这样碰到不合法的访问时，我们就不要去处理它。

如果密钥正确，则会运行到我们的API：users/chkLogin

下面是API:users/chkLogin的代码：

<?php/** * 验证用户身份，如果成功，捎带脚的把该条记录返回去 */$dbArr['phoneNum'] = POST("phoneNum");if($dbArr['phoneNum'] !== false){ //这一步没必要，能验证过上面那个函数，这个参数肯定存在，但我就是写了，就是玩儿	//一定要用PDO的参数绑定功能访问数据库，这种方式能避免SQL注入。切记  //并且不要直接在sql里对比用户名密码，要查出来再用代码对比。	$sql = "select * from wuye_users where users_phoneNum = :phoneNum";	$rec = db_query($sql,$dbArr);	if($rec['count'] > 0){		//找到该手机号对应的用户记录了		//比对vCode是否一致，如果不一致，登录状态是不对的		$vCode = POST("vCode");		if($vCode == $rec['rows'][0]['users_vCode'] && strlen($vCode) == 32){			//vCode是一样的,并且vCode长度是32（MD5值总是32位长度）			output2Die("登录成功。", 1, $rec);		}else{			//登录失败，返回错误信息			//如果要求保密严格，这里可以直接die()，啥也不做。			output2Die("身份验证失败.", -1);		}	}else{		output2Die("找不到该用户。",-2); //要求高的，不要输出错误信息。	}}output2Die("失败",-3); //要求高的，不要输出错误信息。

至此，点击第一个登录按钮时就会去服务器验证身份信息，并且当信息正确时，就会写入登录信息并跳转到我们APP的第一个页面。

我们按照同样的办法把第二个第三个登录按钮做好，我们的调试用的身份就可以用了。

经测试，正常运行。

注意：上面的代码里用了两个JS中原生不存在的函数和方法：md5()和Date.format。

我把这两个方法的实现放到一个单独的文章里（下一篇），为了以后查询用着方便。

我发现我写文章和写代码之间不能很好地转换，不知道该怎么写才能更容易看懂。唉！