前言

愉快的期末,终于结束了，我准备把程序中的代码复习，相当于复盘一下，再巩固一下

一、登录以及注册的业务逻辑

登录以及注册是学习编程的第一步嘛
注册：由用户提交form表单数据，经过数据校验（数据校验最好还是放在后端进行）后写入数据库
登录：由用户提交form表单数据，利用其提交数据对数据库进行查询，对两者数据进行比对后，返回结果

二、核心代码

1.register代码

程序效果图：

代码如下（fetch.js）：

module.exports = function(path, data, method) {return new Promise((resolve, reject) => {wx.request({url: 'http://127.0.0.1/tpp/' + path,method: method,data: data,header: {'content-type':'application/x-www-form-urlencoded;charset=utf-8'},success: resolve,fail: function() {reject()wx.showModal({showCancel: false,title: '失败'})}})})
}

我这里习惯将网络请求（也是重复率非常大的代码）单独写在uitl里面，后续的请求中只需要调用其中方法，传递参数即可。这样的好处不仅仅是降低了代码重复率，更重要的是在项目部署在服务器上时，更改请求网址会方便

代码如下（register.js）：

setCode:function(){var code;code = '';var codeLength = 4;//验证码的长度var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');//表示出验证码选取表for (var i = 0; i < codeLength; i++) {var index = Math.floor(Math.random() * 36);//随机数的生成code += random[index];//通过随机数选取相应的字符}this.setData({code: code})},register:function(e){var user_name = this.data.user_namevar user_phone = this.data.user_phonevar pw = this.data.pwvar sex = this.data.user_sexvar code = this.data.user_code//判断手机号是否合法的一个正则表达式var check_phone = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;//判断密码是否符合标准的正则表达式var str=/^(?:(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])).*$/;if(typeof user_name == "undefined"){//判断空值wx.showToast({title: '用户名为空',icon: 'none',duration: 1500})return false;}if(typeof user_phone == "undefined"){wx.showToast({title: '手机号为空',icon: 'none',duration: 1500})return false;}else if(user_phone.length<11){//手机号长度wx.showToast({title: '手机号长度有误',icon: 'none',duration: 1500})this.setData({phone:""})return false;}else if(!check_phone.test(user_phone)){wx.showToast({title: '手机号格式有误',icon: 'none',duration: 1500})this.setData({phone:""})return false;}if(typeof pw == "undefined"){wx.showToast({title: '密码为空',icon: 'none',duration: 1500})return false;}else if(pw.length<8){wx.showToast({title: '密码长度有误',icon: 'none',duration: 1500})this.setData({pw:""})return false;}else if(!str.test(pw)){//通过正则表达式进行判断，test是其方法wx.showToast({title: '密码格式有误',icon: 'none',duration: 1500})this.setData({pw:""})return false;}if(code != this.data.code){wx.showToast({title: '验证码输入错误',icon: 'none',duration: 1500})this.setData({u_code:""})this.setCode();return false;}/* console.log("成功校验所有数据") */var list = {"user_name":user_name,"user_phone":user_phone,"pw":pw,"sex":sex}/* console.log(list) */fetch("controller/user_register.php",list,"POST").then((res) => {/* console.log(res);console.log(res.data.Status + "||" + res.data.because) */var status = res.data.Status;var because = res.data.because;if(status == 0){wx.showToast({title: because,icon: 'none',duration: 1500})this.setData({u_code:""})this.setCode();return false;}if(status == 1){wx.showToast({title:because,icon: 'success',duration: 1500})wx.navigateTo({url: '/pages/login/login'})}})//console.log(this.data.status + "||" + this.data.bec)}

验证码：我这里是在前端随机生成，并进行校验。我认为这里更好应该是在后端随机生成通过session的方式在前端读取出来，在后端进行校验会更加的好
数据校验：我这里是放在了前端（很不稳妥），数据的校验肯定是在后端的，但是本身也只是个作业测评，所以对吧。校验方法相差不大，所以搬到后端吧。
这里的性别采用选择，是因为保持数据一致性，永远不要相信用户的输入
代码如下（register.php）：

<?php
/*** Created by XiaoYi* Date 2021/6/1 22:41*/include_once ("../service/user_info_service.php");$user_name = $_POST["user_name"];//获取到传递过来的数据，是以键对值方式传递的$user_phone = $_POST["user_phone"];$pw = $_POST["pw"];$sex = $_POST["sex"];$user_info_service = new user_info_service();$is_same_name = $user_info_service->checkSamename($user_name);//检查是否有重名$is_same_phone = $user_info_service->checkSamePhone($user_phone);//检查电话是否已经使用$res = null;if($is_same_name){$res = array("Status"=>"0","because"=>"用户名重复");echo json_encode($res);return false;}if($is_same_phone){$res = array("Status"=>"0","because"=>"电话已经使用");echo json_encode($res);return false;}//echo "到这了";这个是我调试程序的时候的代码$isSuccess = $user_info_service->SetUserInfo($user_name,$user_phone,$sex,$pw);$res = array("Status"=>"1","because"=>"注册成功！");echo json_encode($res);

代码如下（user_info_service.php部分）：

 public function checkSamePhone($user_phone){$sqlTxt = "SELECT * FROM user_info WHERE telephone = '" . $user_phone . "'";
//        echo $sqlTxt;$dbManage = new DbManage();$result = $dbManage->executeSqlTxt($sqlTxt);//转换$arrayList = array();//生成一个数组while ($row = mysqli_fetch_array($result)) {//通过循环，把数据集转换成数组。要考虑查询不到的时候，会不会出错$count=count($row);for($i=0;$i<$count;$i++){unset($row[$i]);//删除冗余数据}array_push($arrayList, $row);}$dbManage->closeConnection($result);if(empty($arrayList)){return false;}else {return true;}}public function SetUserInfo($user_name,$user_phone,$sex,$pw){$sqlTxt = "INSERT INTO user_info(user_name,telephone,sex,user_rank,user_exp,user_pwd,user_status)". "VALUES('" . $user_name . "'," . $user_phone . ",'" . $sex . "',". 1 . "," . 0 . ",'" . $pw . "'," . 0 .")";
//        echo $sqlTxt;$dbManage = new DbManage();$result = $dbManage->executeSqlTxt($sqlTxt);return $result;}

2.login代码

效果图：

代码如下（login.js）：

login:function(e){/* console.log(this.data.user_phone + "||" + this.data.user_pw) */var user_phone = this.data.user_phone;var check_phone = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;if(typeof user_phone == "undefined"){wx.showToast({title: '手机号为空',icon: 'none',duration: 1500})return false;}else if(user_phone.length<11){wx.showToast({title: '手机号长度有误',icon: 'none',duration: 1500})this.setData({phone:""})return false;}else if(!check_phone.test(user_phone)){wx.showToast({title: '手机号格式有误',icon: 'none',duration: 1500})this.setData({phone:""})return false;}var user_pw = this.data.user_pw;var list = {"user_phone":user_phone,"pw":user_pw}fetch("controller/checkLogin.php",list,"POST").then((res)=>{console.log(res)var status = res.data.Status;var because = res.data.because;if(status == 0){wx.showToast({title: because,icon: 'none',duration: 1500})this.setData({phone:"",pw:""})return false;}wx.showToast({title: "登录成功",icon: 'success',duration: 1500})app.globalData.user_info = res.data[0]app.globalData.userstatus = 1wx.switchTab({  url: '/pages/mine/mine'  });})}

代码如下（login.php）：

<?php
/*** Created by XiaoYi* Date 2021/6/2 19:48*/include_once ("../service/user_info_service.php");$user_phone = $_POST["user_phone"];$pw = $_POST["pw"];$user_info_service = new user_info_service();$user_info = $user_info_service->getUserInfo($user_phone);$res = null;if (empty($user_info)){$res = array("Status"=>"0","because"=>"该用户不存在！");echo json_encode($res);return false;}elseif ($pw != $user_info[0]["user_pwd"] ){$res = array("Status"=>"0","because"=>"密码错误！");echo json_encode($res);return false;}//删除密码，防止敏感信息传递到前端unset($user_info[0]["user_pwd"]);echo json_encode($user_info);

代码其实与注册类似，相应的注解也标上了

总结

登录与注册作为学习编程的第一个程序，管中窥豹，这里也看出来了，我程序中微信小程序开发的基本，通过json格式数据，让前端与后端进行交互起来。

微信小程序仿淘票票之登录注册讲解相关推荐

微信小程序-仿淘宝(附真机测试图)（持续更新中。。。）
醉前端微信小程序已开始公测, 醉前端的开发热情依然不减... 这是仿手机淘宝做的微信小程序,目的在于享受开发,学习小程序,欢迎大家批评指正. demo资源地址:demo gihub传送门 tip: ...
微信小程序使用face++实现人脸识别登录注册
Face++是一个人工智能开放平台,要使用它我们得先注册并进入控制台创建API Key,这是前提. 平台网址:https://www.faceplusplus.com.cn 整个项目代码我已经上传到 ...
微信小程序—仿淘宝热搜词在搜索框中轮播功能
摘要逛淘宝的时候,发现淘宝搜索框中一直在垂直方向上轮播热搜提示词,觉得这是个不错的设计,除了能让空间更充分使用,也能让页面更有动感,最重要的是能够增加搜索框的使用频率.就在小程序中试着实现实现. 效 ...
在线电子书阅读微信小程序毕业设计（5）用户登录注册
wxml代码 <form ><view class='denlgu'><text class='shuoming'>请输入您的会员账号</text>&l ...
微信小程序毕设——使用云开发实现登录注册
1 wxml <view class="container"><view class="login-icon"><image cl ...
基于微信小程序的电影订票系统设计与实现（代码+数据库+论文）
项目简介本系统是基于微信小程序的电影订票系统的设计与实现.基于B/S架构模式进行设计,使用了JavaScript.CSS.java语言等,后台数据库设计使用Mysql.本电影订票系统主要分为前端小程 ...
微信小程序仿京东淘宝商品排序
微信小程序仿京东淘宝商品排序效果图如下所示仿京东微信小程序视频请加QQ:1010753897 下载地址:https://download.csdn.net/download/qq_43764578 ...
微信小程序 java电影院订票选座系统
电影院订票系统是基于微信小程序端和网页后端,系统采用java编程语言,mysql数据库,idea开发工具,ssm框架开发,本系统分为用户和管理员两个角色,用户微信小程序端主要功能是可以登陆注册系统,查 ...
微信小程序仿微信SlideView组件slide-view
微信小程序仿微信SlideView组件. 使用 1.安装 slide-view 从小程序基础库版本 2.2.1 或以上.及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装 ...

微信小程序仿淘票票之登录注册讲解

微信小程序仿淘票票之登录注册讲解（这也是我学习的第一步嘛）

前言

一、登录以及注册的业务逻辑

二、核心代码

1.register代码

2.login代码

总结

微信小程序仿淘票票之登录注册讲解相关推荐

最新文章

热门文章