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

最新推荐文章于 2024-08-03 20:55:40 发布

晓小亦

最新推荐文章于 2024-08-03 20:55:40 发布

阅读量1k

点赞数 2

分类专栏：前端实践文章标签： php html5 小程序

本文链接：https://blog.csdn.net/weixin_45496777/article/details/117971258

版权

前端实践专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

前言
一、登录以及注册的业务逻辑
二、核心代码
- 1.register代码
- 2.login代码
总结

前言

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

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

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

二、核心代码

1.register代码

程序效果图：
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_name
    var user_phone = this.data.user_phone
    var pw = this.data.pw
    var sex = this.data.user_sex
    var 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 = 1
      wx.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格式数据，让前端与后端进行交互起来。

晓小亦

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
微信小程序仿淘票票之登录注册讲解

文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下（示例）：import numpy as npimport
复制链接

扫一扫

专栏目录