devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序链接数据库并实现登录，特权用户与普通用户的页面跳转（PHP语言）_微信小程序访问本地数据库登录

作者：知新_RL | 2024-07-17 06:59:29

赞

踩

微信小程序访问本地数据库登录

 （开头声明：此篇文章借鉴和使用各位csdn大佬的文章，并糅合了个人的见解，在这里需要非常重要感谢的是《微信小程序+PHP实现登录注册（手把手教程）》这篇文章，可惜之前遇到了点问题私下请教大佬一直没有回复我，最后还是自己慢慢摸索解决了出来）

一：前记：

作为一名在读的大四学生（学校层级不高，北邮下属的一般院校）完成微信小程序的毕设真的抓破头了，（ps：学校根本什么都没教，全靠在csdn里面拜访各位大佬学习知识)为了搭建此次微信小程序，我从csdn大佬那里尝试过3种链接数据库的方法：

1.通过在微信小程序内搭建的node服务器来完成数据库的链接（灰海宽松大佬的文章：微信小程序通过 node 连接 mysql——方法，简要原理，及一些常见问题_微信小程序使用npm支持mysql-CSDN博客）奈何CSDN里面关于node服务端操作数据库的知识太少了，也找不到相应的案例，所以在中途做到一半（当然大佬文章里面的功能我是已经实现了）果断毙掉了。我在这里放出原文，如果有感兴趣的可以可以去原文章看看。

2、通过java的springboot框架来完成数据库的链接（微信小程序-JAVA Springboot项目-后端搭建-项目搭建02_微信小程序怎样和后端-CSDN博客）

这篇文章同样讲的很好，但是奈何本人对java学的知识过浅，且没有进行系统性的学习，（当然如果你对java的springboot框架有过相关理解，这篇文章值得一看）当然做是肯定能做的。最后还是没有选择。

3.通过php语言来完成数据库的链接（我在这里放出原文的启发：微信小程序+PHP实现登录注册（手把手教程）_php微信小程序开发教程-CSDN博客），至于我为什么选择php呢，因为在这里本身也有案例，其中的功能你稍微选择改改就能用了，再一个就是当时寒假期间在三大运营商的电信里面实习过一段时间的网络攻防（web的渗透）其中就是对php语言的使用，所以最后选择了PHP。

二：本次搭建微信小程序需要的软件：

phpstudypro、微信开发者平台、navicat for my sql（不一定非要用这个，只要是自己用得惯的数据库操作工具就行）

三：php运行环境

  • PHP版本号：PHP7（！！！！注意本文基于PHP7环境开发，PHP5与PHP7有很多语法不兼容，如果您的本地环境为PHP5，则需修改PHP代码中不兼容语法部分）
  • MySQL版本号：5.7.26

这是原来博客里面需要的开发环境，我需要再三的强调，必须！必须！必须！是php7.X版本的！！！！不然你很有可能会报错，导致写的php语言用不了。

1.如何修改自己的php语言版本？

楼主这里使用的是php7.34nts，各位可以看着自己改。

四：创建数据库

其实大部分都是按照（微信小程序+PHP实现登录注册（手把手教程）_php微信小程序开发教程-CSDN博客）这篇文章里所用的，首先与数据库进行链接，打开navicat for my sql

然后选择连接，下选第一个mysql，然后设置连接属性（楼主这里跟原贴设置的不一样，大概懂意思就得了）

需要强调的是，phpstudypro也会自带一个数据库，在phpstudypro里需要强调的是要把他关闭掉的，这个数据库与我们电脑的数据库内容是不相通的，但是链接都共用的是一个80端口，如果只想使用phpstudypro的端口，需要关闭80端口，然后打开在phpstudypro里的mysql（这个你下载好了页面的第三个就是，直接启动就行）win+r 敲打cmd，在命令行内输入services.msc,找到mysql 80 然后禁用就可以了。（由于本人做的不是phpstudypro的数据库，所以后面的话也不会再详细讲解，可以为想要开拓这方面的人提供一个思路）

在mysql新建查询的页面中，输入以下建表的代码：（新建查询位置也标一下）

这是表的代码（直接复制到新建查询然后点击上面的运行就可以了）：

  1. /*
  2.  Navicat Premium Data Transfer
  4.  Source Server         : phpstudy
  5.  Source Server Type    : MySQL
  6.  Source Server Version : 50726
  7.  Source Host           : localhost:3306
  8.  Source Schema         : tea_work
  10.  Target Server Type    : MySQL
  11.  Target Server Version : 50726
  12.  File Encoding         : 65001
  14.  Date: 07/06/2020 13:19:49
  15. */
  16.  
  17. SET NAMES utf8mb4;
  18. SET FOREIGN_KEY_CHECKS = 0;
  19.  
  20. -- ----------------------------
  21. -- Table structure for tb_user
  22. -- ----------------------------
  23. DROP TABLE IF EXISTS `tb_user`;
  24. CREATE TABLE `tb_user`  (
  25.   `id` int(11) NOT NULL AUTO_INCREMENT,
  26.   `username` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
  27.   `password` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
  28.   `email` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
  29.   `phone` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
  30.   `role` int(2) NULL DEFAULT 0,
  31.   `RFID` int(8) NULL DEFAULT NULL,
  32.   PRIMARY KEY (`id`) USING BTREE
  33. ) ENGINE = MyISAM AUTO_INCREMENT = 36 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;
  34.  
  35. -- ----------------------------
  36. -- Records of tb_user
  37. -- ----------------------------
  38. INSERT INTO `tb_user` VALUES (1, 'bbb', '08f8e0260c64418510cefb2b06eee5cd', 'bbb@163.com', '12222222222', 0, NULL);

当然你也可以自己逐个创建表的id username password email phone role 和RFID只是要注意一下格式，比如id用的int类型，usename用的vachar类型等等。这里照搬的使用原文章代码（因为确实很好用）只是如果我修改一些数据就会出现mysql数据库版本不同，不知道是为什么。

五：微信小程序前端页面：

登录页面：

下面的首页 消息和个人信息是在app.json页面上加入tabbar，这个内容和本次做的微信小程序登录签到无关，有想了解的可以自己在csdn中搜索tabbar或者在b站看黑马程序员（14.全局配置 - tabBar_哔哩哔哩_bilibili）深层次学习一下。

现附上相关代码：

wxml页面

  1.  
  2. <view class="title">微信小程序签到考勤管理系统</view>
  3. <view class="login-container">
  4. 	<form bindsubmit='login'>
  5. 		<view class="login-box">
  6.         <label>用户名</label>
  7. 			<input id="username" placeholder="请输入用户名" placeholder-class="plas" class="inputs" type="text" name="username"></input>
  8.         <label>密码</label>
  9. 			<input id="password" placeholder="请输入密码" placeholder-class="plas" class="inputs" type="password" name="password"></input>
  10. 		<!--按钮-->
  11. 		<view>
  12. 			<button class="login-btn" type="primary" form-type='submit'>登录</button>
  13. 		</view>
  14.           <view class="three-line">------分割线------</view>
  15.           <button class="login-btn" style="background-color:violet" bind:tap="register">注册</button>
  16.           <view class="three-line">------分割线------</view>
  17.           <button class="login-btn" style="background-color:yellow" bind:tap="student">页面测试</button>
  18.     </view>
  19. 	</form>
  20. </view>

其中，可以把页面测试按钮删除，只需把倒数第四行全部删除就行，这里楼主只是在做页面测试完善微信小程序所以临时加的一个按钮。

登录wxss页面代码：

  1. page{
  2.     height: 100%;    /* 使用page的height可以使页面占全屏 */
  3.     background-color: #fafafa;
  4.    }
  5.   .login-container{
  6.     padding: 0 10%;
  7.     height: 100%;
  8.   }
  9.   .title{
  10.     font-size: large;
  11.     text-align: center;
  12.     padding-top: 10%;
  13.     font-weight: bold;
  14.   }
  15.   .login-box{
  16.     margin-top: 10%;
  17.     padding: 10% 5%;
  18.     background-color: white;
  19.     border-radius: 10px;
  20.     box-shadow: 0 4px 4px #888888;
  21.   }
  22.   .login-box>input{
  23.     margin: 5% 0 8% 0;
  24.     border-bottom: 1rpx solid lightgray;
  25.   }
  26.   .login-btn{
  27.     width: 100%!important;
  28.     background-color: #2f6afd;
  29.     color: white;
  30.     font-weight: normal;
  31.   }
  32.    
  33.   .three-line{
  34.     margin: 8% 0;
  35.     text-align: center;
  36.     font-size: 12px;
  37.     color: gray;
  38.   }
  39.   .plas{
  40.     font-size: 30rpx;
  41.     color: #ccc;
  42.   }
  43.   .inputs{
  44.     /* 行高 */
  45.     line-height: 100rpx;
  46.     font-size: 30rpx;
  47.     color: #000;
  48.     margin:auto;
  49.     margin-left: 20rpx;
  50.     width: 100%;
  51.   }

登录页面的js代码（画重点！！！！！）：

其中const util这一串代码是重中之重！！！！用来链接数据库的代码！！这串代码的主要功能就是utils里面引用util.basePath，可以为我们调用php代码省很多的时间！！

  1. const app = getApp();
  2. const util = require('../../utils/util');
  3. Page({
  4.  
  5.   /**
  6.    * 页面的初始数据
  7.    */
  8.   data: {
  9.  
  10.   },
  11.  
  12. loginApp:function(){
  13.     wx.navigateTo({
  14.         url:'../personinfo/personinfo'
  15.     })
  16. },
  17.  
  18. student:function(){
  19.     wx.navigateTo({
  20.         url:'../student/student'
  21.     })
  22. },
  23. teacher:function(){
  24.     wx.navigateTo({
  25.         url:"../teacher/teacher"
  26.     })
  27. },
  28. register:function(){
  29.     wx.navigateTo({
  30.         url:"../register/register"
  31.     })
  32. },
  33.  
  34. 	// 点击登录按钮后，触发此login方法
  35.   login: function (e) {
  36.     var that = this;
  37.     // 获取前台form表单传递过来的信息，
  38.     // e.detail.value.xxx：xxx为name属性的值 
  39.     var formObject = e.detail.value;
  40.     console.log(e.detail);
  41.     var username = formObject.username;
  42.     var password = formObject.password;
  43.     console.log("username..." + username);
  44.     console.log("password....." + password);
  45.     wx.setStorage({
  46.         key:'username',
  47.         data:username,
  48.         success(res){
  49.             console.log("remove key 成功");
  50.         },
  51.         fail(res){
  52.             console.log("remove key 失败")
  53.         }
  54.     })
  55.     //发起网络请求
  56.     wx.request({
  57.       url: util.basePath + '/login.php', 
  58.       // 声明请求方式为 POST 请求
  59.       method: 'POST',
  60.       // 向后台传递的数据：用户名、密码（通过e.detail.value.xxx获取input输入框输入的值）
  61.       data: {
  62.         'username': e.detail.value.username,
  63.         'password': e.detail.value.password
  64.       },
  65.       // POST请求，则header声明为如下：
  66.       // 若为 GET请求，则header内声明为'content-type': 'application/json'
  67.       header: {
  68.         'content-type': 'application/x-www-form-urlencoded'
  69.       },
  70.       // 接口请求成功的返回数据
  71.       success(res) {
  72.         console.log(res.data);
  73.         // 如果后台返回的数据为 "普通用户登录成功"，则跳转到用户首页
  74.         if ("学生用户登录成功" == res.data) {
  75.           wx.navigateTo({
  76.             url: '../student/student'
  77.           })
  78.         } else if ("老师用户登录成功" == res.data) {
  79.         // 如果后台返回的数据为 "普通用户登录成功"，则跳转到管理员首页
  80.           wx.navigateTo({
  81.             url: '../teacher/teacher'
  82.           })
  83.         } else if ("用户名或密码错误" == res.data) {
  84.         // 如果后台返回的数据为 "用户名或密码错误"，则模态弹框，然后跳转到登录界面
  85.           wx.showModal({
  86.             title: '提示',
  87.             content: '用户名或密码错误',
  88.             success: function (res) {
  89.               if (res.confirm) {
  90.                 console.log('用户点击确定');
  91.                 wx.redirectTo({
  92.                   url: '../loginpage/loginpage'
  93.                 })
  94.               }
  95.             }
  96.           })
  97.         }
  98.  
  99.       }
  100.     })
  101.   },
  102.  
  103.  
  104.   /**
  105.    * 生命周期函数--监听页面加载
  106.    */
  107.   onLoad: function (options) {
  108.  
  109.   },
  110.  
  111.   /**
  112.    * 生命周期函数--监听页面初次渲染完成
  113.    */
  114.   onReady: function () {
  115.  
  116.   },
  117.  
  118.   /**
  119.    * 生命周期函数--监听页面显示
  120.    */
  121.   onShow: function () {
  122.  
  123.   },
  124.  
  125.   /**
  126.    * 生命周期函数--监听页面隐藏
  127.    */
  128.   onHide: function () {
  129.  
  130.   },
  131.  
  132.   /**
  133.    * 生命周期函数--监听页面卸载
  134.    */
  135.   onUnload: function () {
  136.  
  137.   },
  138.  
  139.   /**
  140.    * 页面相关事件处理函数--监听用户下拉动作
  141.    */
  142.   onPullDownRefresh: function () {
  143.  
  144.   },
  145.  
  146.   /**
  147.    * 页面上拉触底事件的处理函数
  148.    */
  149.   onReachBottom: function () {
  150.  
  151.   },
  152.  
  153.   /**
  154.    * 用户点击右上角分享
  155.    */
  156.   onShareAppMessage: function () {
  157.  
  158.   }
  159. })

小程序的页面搭建其实和html搭建都有异曲同工之妙，同样都是html（页面布局）、css（页面样式）和js（页面跳转功能设置）三步走战略。

（js的login功能里详细的把一般用户和普通用户分别区分开来，并根据程序跳转到不同的页面）

这里引用原文对wxml前端页面进行介绍：

form 标签的 bindsubmit='login' 表示提交此表单后触发 login 方法。
input 的 name="xxx" 属性要与 js 中的 e.detail.value.xxx 相对应。
一定要有一个 <button form-type='submit'> 按钮，点击此按钮后会提交表单，触发 login 方法。
所有标签的 class 属性均是为了调节样式使用，如不追求页面美观，可不添加 class="xxx"。

六.util.js的相关配置：

  1.  
  2.  
  3. function formatTime(date) {
  4.   var year = date.getFullYear()
  5.   var month = date.getMonth() + 1
  6.   var day = date.getDate()
  7.  
  8.   var hour = date.getHours()
  9.   var minute = date.getMinutes()
  10.   var second = date.getSeconds()
  11.  
  12.  
  13.   return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
  14. }
  15.  
  16. function formatNumber(n) {
  17.   n = n.toString()
  18.   return n[1] ? n : '0' + n
  19. }
  20.  
  21. /**
  22.  * 封封微信的的request
  23.  */
  24. function request(url, data = {}, method = "POST", header = "application/x-www-form-urlencoded") {
  25.   wx.showLoading({
  26.     title: '加载中...',
  27.   });
  28.   return new Promise(function (resolve, reject) {
  29.     wx.request({
  30.       url: url,
  31.       data: data,
  32.       method: method,
  33.       header: {
  34.         'Content-Type': header,
  35.         'X-Nideshop-Token': wx.getStorageSync('token'),
  36.       },
  37.       success: function (res) {
  38.         wx.hideLoading();
  39.         if (res.statusCode == 200) {
  40.  
  41.           if (res.data.errno == 401) {
  42.             wx.navigateTo({
  43.               url: '/pages/auth/btnAuth/btnAuth',
  44.             })
  45.           } else {
  46.             resolve(res.data);
  47.           }
  48.         } else {
  49.           reject(res.errMsg);
  50.         }
  51.  
  52.       },
  53.       fail: function (err) {
  54.         reject(err)
  55.       }
  56.     })
  57.   });
  58. }
  59.  
  60.  
  61. // 时间戳转换成刚刚、几分钟前、几小时前、几天前
  62.  
  63. //刚刚
  64. var just = new Date().getTime();
  65.  
  66. //几分钟前
  67. var afewminutesago = new Date("Nov 29, 2016 00:50:00").getTime();
  68.  
  69. //几周前
  70. var afewweekago = new Date("Nov 29, 2016 00:50:00").getTime();
  71.  
  72. //几年前
  73. var someday = new Date("Nov 21, 2012 01:15:00").getTime();
  74.  
  75. var helloData = {
  76.   time: afewweekago
  77. }
  78.  
  79. function getDateDiff(date) {
  80.   date = date.substring(0, 19);
  81.   date = date.replace(/-/g, '/');
  82.   var dateTimeStamp = new Date(date).getTime();
  83.  
  84.   var result;
  85.   var minute = 1000 * 60;
  86.   var hour = minute * 60;
  87.   var day = hour * 24;
  88.   var halfamonth = day * 15;
  89.   var month = day * 30;
  90.   var now = new Date().getTime();
  91.   var diffValue = now - dateTimeStamp;
  92.   if (diffValue < 0) {
  93.     return;
  94.   }
  95.   var monthC = diffValue / month;
  96.   var weekC = diffValue / (7 * day);
  97.   var dayC = diffValue / day;
  98.   var hourC = diffValue / hour;
  99.   var minC = diffValue / minute;
  100.   if (monthC >= 1) {
  101.     if (monthC <= 12)
  102.       result = "" + parseInt(monthC) + "月前";
  103.     else {
  104.       result = "" + parseInt(monthC / 12) + "年前";
  105.     }
  106.   }
  107.   else if (weekC >= 1) {
  108.     result = "" + parseInt(weekC) + "周前";
  109.   }
  110.   else if (dayC >= 1) {
  111.     result = "" + parseInt(dayC) + "天前";
  112.   }
  113.   else if (hourC >= 1) {
  114.     result = "" + parseInt(hourC) + "小时前";
  115.   }
  116.   else if (minC >= 1) {
  117.     result = "" + parseInt(minC) + "分钟前";
  118.   } else {
  119.     result = "刚刚";
  120.   }
  121.  
  122.   return result;
  123. };
  124.  
  125. module.exports = {
  126.   formatTime,
  127.   basePath,
  128.   getDateDiff
  129. }

这串代码里少了一个最重要的代码也就是const basePath = 'xxx';这里我拎出来单独讲解，之后把它加到util.js的最前面即可，剩下的代码是用来做点缀的（愿意加就加，反正最主要就是调用const basePath，楼主是加了的）后面我会细讲，现在先把注册页面解决再说。

七：注册页面的页面展示

（这里细节我也懒得再处理了，原文挺好用的，直接copy大法）

register前端wxml代码：

  1. <form bindsubmit="regist">
  2. 	<view>
  3. 		<view class="first">
  4. 			<input id="username" placeholder="请输入用户名" placeholder-class="plas" class="inputs" type="text" bindinput="usernameInput" name="username"></input>
  5. 		</view>
  6. 		<view class="second">
  7. 			<input id="password" placeholder="请输入密码" placeholder-class="plas" class="inputs" type="password" bindinput="passwordInput" name="password"></input>
  8. 		</view>
  9. 		<view class="second">
  10. 			<input id="passwordAck" placeholder="请再次输入密码" placeholder-class="plas" class="inputs" type="password" bindinput="passwordInputAck"></input>
  11. 		</view>
  12. 		<view class="second">
  13. 			<input id="email" placeholder="请输入邮箱" placeholder-class="plas" class="inputs" type="email" bindinput="emailInput" name="email"></input>
  14. 		</view>
  15. 		<view class="second">
  16. 			<input id="phoneNumber" placeholder="请输入手机号" placeholder-class="plas" class="inputs" type="number" bindinput="phoneNumberInput" name="phone"></input>
  17. 		</view>
  18. 		<view class="second">
  19. 			<input id="role" placeholder="角色" placeholder-class="plas" class="inputs" type="number" bindinput="roleInput" name="role"></input>
  20. 		</view>
  21. 		<!-- <view id="btn" class="click" bindtap="regist"><input type="submit">注册</input></view> -->
  22. 		<view>
  23. 			<button class="click" type="primary" form-type='submit'>注册</button>
  24. 		</view>
  25. 		<view class="cha" bindtap="signin"><text class="no">已有账号，点我登录</text></view>
  26. 	</view>
  27. </form>

register中wxss代码展示：

  1. page{
  2.     left:10rpx;
  3.     right:10rpx;
  4.     background-color: white;
  5.   }
  6.   .first{
  7.     width: 90%;
  8.     height: 100rpx;
  9.     margin-top: 80rpx;
  10.     margin-left: 5%;
  11.     margin-right: 5%;
  12.     /* 排列方式 */
  13.     display: flex;
  14.     /* 纵向排列 */
  15.     flex-direction: row;
  16.     align-items: center;
  17.     background-color: #f2f2f2;
  18.     border-radius: 8rpx;
  19.   }
  20.   .plas{
  21.     font-size: 30rpx;
  22.     color: #ccc;
  23.   }
  24.   .inputs{
  25.     /* 行高 */
  26.     line-height: 100rpx;
  27.     font-size: 30rpx;
  28.     color: #000;
  29.     margin:auto;
  30.     margin-left: 20rpx;
  31.     width: 100%;
  32.   }
  33.   .second{
  34.     width: 90%;
  35.     height: 100rpx;
  36.     margin-top: 30rpx;
  37.     margin-left: 5%;
  38.     margin-right: 5%;
  39.     /* 排列方式 */
  40.     display: flex;
  41.     /* 纵向排列 */
  42.     flex-direction: row;
  43.     align-items: center;
  44.     background-color: #f2f2f2;
  45.     border-radius: 8rpx;
  46.   }
  47.   .click{
  48.     width: 90%;
  49.     height: 100rpx;
  50.     line-height: 75rpx;
  51.     margin:auto;
  52.     margin-top: 80rpx;
  53.     background-color: #43CD80;
  54.     border-radius: 8rpx;
  55.     text-align: center;
  56.     color: white;
  57.     font-size: 33rpx;
  58.   }
  59.   .cha{
  60.     width: 90%;
  61.     height: 50rpx;
  62.     margin: auto;
  63.     margin-top: 30rpx;
  64.     margin-left: 5%;
  65.     margin-right: 5%;
  66.   }
  67.   .no{
  68.     color: black;
  69.     font-size: 28rpx;
  70.     margin-left: 15rpx;
  71.     font-family: PingFangSC-regular;
  72.   }

register的js代码展示： 

  1. const app = getApp();
  2. const util = require('../../utils/util');
  3. Page({
  4.  
  5.     /**
  6.      * 页面的初始数据
  7.      */
  8.     data: {
  9.       // 定义变量用来存储input输入的值
  10.       username:"",
  11.       password:"",
  12.       passwordAck:"",
  13.       email:"",
  14.       phoneNumber:"",
  15.       role:""
  16.     },
  17.     signin:function(e){
  18.       //关闭当前页面，返回上一页面或多级页面。
  19.       wx.navigateBack({
  20.         // 返回上 1 页
  21.         delta: 1
  22.       })
  23.     },
  24.     // 注册
  25.     regist:function(e){
  26.       var that = this;
  27.       if(that.data.username == ''){
  28.         wx.showModal({
  29.           title: '提示',
  30.           content: '请输入用户名',
  31.           showCancel:false,
  32.           success (res) {
  33.           }
  34.         })
  35.       }else if(that.data.password == ''){
  36.         wx.showModal({
  37.           title: '提示',
  38.           content: '请输入密码',
  39.           showCancel:false,
  40.           success (res) {
  41.           }
  42.         })
  43.       }else if(that.data.passwordAck == ''){
  44.         wx.showModal({
  45.           title: '提示',
  46.           content: '请再次输入密码',
  47.           showCancel:false,
  48.           success (res) {
  49.           }
  50.         })
  51.       }else if(that.data.passwordAck != that.data.password){
  52.         wx.showModal({
  53.           title: '提示',
  54.           content: '两次密码输入不一致',
  55.           showCancel:false,
  56.           success (res) {
  57.           }
  58.         })
  59.       }else if(that.data.email == ''){
  60.         wx.showModal({
  61.           title: '提示',
  62.           content: '请输入邮箱',
  63.           showCancel:false,
  64.           success (res) {
  65.           }
  66.         })
  67.       }else if(that.data.phoneNumber == ''){
  68.         wx.showModal({
  69.           title: '提示',
  70.           content: '请输入手机号',
  71.           showCancel:false,
  72.           success (res) {
  73.           }
  74.         })
  75.       }else if(that.data.phoneNumber.length != 11){
  76.         wx.showModal({
  77.           title: '提示',
  78.           content: '手机号位数不正确，请重新输入',
  79.           showCancel:false,
  80.           success (res) {
  81.           }
  82.         })
  83.       }else if(that.data.phoneNumber.length != 11){
  84.         wx.showModal({
  85.           title: '提示',
  86.           content: '手机号不合法',
  87.           showCancel:false,
  88.           success (res) {
  89.           }
  90.         })
  91.       }else if(that.data.role == ''){
  92.         wx.showModal({
  93.           title: '提示',
  94.           content: '请输入角色',
  95.           showCancel:false,
  96.           success (res) {
  97.           }
  98.         })
  99.       }else{
  100.         wx.request({
  101.           url: util.basePath + '/register.php', 
  102.           method:"POST",
  103.           data: {
  104.             'username':e.detail.value.username,
  105.             'password':e.detail.value.password,
  106.             'email':e.detail.value.email,
  107.             'phone':e.detail.value.phone,
  108.             'role':e.detail.value.role,
  109.           },
  110.           header: {
  111.             'content-type': 'application/x-www-form-urlencoded'  
  112.           },
  113.           success (res) {
  114.             wx.showModal({
  115.                 title: '提示',
  116.                 content: '注册成功',
  117.                 showCancel:false,
  118.             })
  119.             console.log(res.data);
  120.             wx.navigateBack({
  121.                 delta: 1
  122.             }
  123.             )
  124.           },
  125.           fail(res){
  126.               console.log(res)
  127.           }
  128.         })
  129.       }
  130.     },
  131.     // 每当 input 发生改变，触发这个方法
  132.     usernameInput:function(e){
  133.       // 获取 input 输入框的值
  134.       this.data.username = e.detail.value;
  135.     },
  136.     passwordInput:function(e){
  137.       // 获取 input 输入框的值
  138.       this.data.password = e.detail.value;
  139.     },
  140.     passwordInputAck:function(e){
  141.       // 获取 input 输入框的值
  142.       this.data.passwordAck = e.detail.value;
  143.     },
  144.     emailInput:function(e){
  145.       // 获取 input 输入框的值
  146.       this.data.email = e.detail.value;
  147.     },
  148.     phoneNumberInput:function(e){
  149.       // 获取 input 输入框的值
  150.       this.data.phoneNumber = e.detail.value;
  151.     },
  152.     roleInput:function(e){
  153.       // 获取 input 输入框的值
  154.       this.data.role = e.detail.value;
  155.     },
  156.     /**
  157.      * 生命周期函数--监听页面加载
  158.      */
  159.     onLoad: function (options) {
  160.   
  161.     },
  162.   
  163.     /**
  164.      * 生命周期函数--监听页面初次渲染完成
  165.      */
  166.     onReady: function () {
  167.   
  168.     },
  169.   
  170.     /**
  171.      * 生命周期函数--监听页面显示
  172.      */
  173.     onShow: function () {
  174.   
  175.     },
  176.   
  177.     /**
  178.      * 生命周期函数--监听页面隐藏
  179.      */
  180.     onHide: function () {
  181.   
  182.     },
  183.   
  184.     /**
  185.      * 生命周期函数--监听页面卸载
  186.      */
  187.     onUnload: function () {
  188.   
  189.     },
  190.   
  191.     /**
  192.      * 页面相关事件处理函数--监听用户下拉动作
  193.      */
  194.     onPullDownRefresh: function () {
  195.   
  196.     },
  197.   
  198.     /**
  199.      * 页面上拉触底事件的处理函数
  200.      */
  201.     onReachBottom: function () {
  202.   
  203.     },
  204.   
  205.     /**
  206.      * 用户点击右上角分享
  207.      */
  208.     onShareAppMessage: function () {
  209.   
  210.     }
  211.   })

八：const basePath=‘xxx’的填写（这串代码是要加到util.js文件里面的！！！再三强调上面的util.js代码直接拿来用是不行的！！！）

要完成const basePath=‘xxx’，首先是在phpstudypro里创建一个网站，像这样

这里我配置了一个127.0.0.1的网站，（众所周知127.0.0.1指向的是计算机本地）其中相关配置如图所示：

然后打开相应页面网站：

接下来就会进入到一个这样的页面,(其中const basePath=‘xxx’,网址指向，就是这里的http://127.0.0.1:3000）,

这里我们不管它，在页面搜索栏中敲入以下代码（我这里标注了红圈）：

如果发现什么都没有，那么恭喜你，你的php运行成功了（页面如下）

这里附上3串主要的php代码 1.connect.php 2.register.php  3.login.php

需要注意的是都必须放在根目录下（放下原文）

这里的php文件可以先把后缀名改成txt文件，然后复制粘贴到文本中再把后缀名改成php文件即可。

1.connect.php

  1. <?php
  2. $server = "localhost";//主机
  3. $db_username = "root";// MySQL 数据库用户名
  4. $db_password = "123456";// MySQL 数据库密码
  5. $db_name = "weixin_qiandao";//你的数据库名字
  6.  
  7. $con = new mysqli($server, $db_username, $db_password,$db_name);//链接数据库
  8.  
  9. // 检测连接
  10. if (!$con) {
  11.     die("Connection failed: " . mysqli_connect_error());
  12. }
  13. //echo "连接成功";
  14. ?>

这里数据库名字，数据库密码应该不用我多说了吧 你自己设置的是什么改成什么就可以了 。

2.login.php

  1. <?php
  2.  
  3. header("Content-Type: text/html; charset=utf8");
  4.  
  5. $name=$_POST['username'];//post获取表单里的name
  6. $password=md5($_POST['password']);//post获取表单里的password
  7.  
  8.  
  9. include('connect.php');//链接数据库
  10. $q="select * from `tb_user` where `username` = '$name' and `password` = '$password'";//向数据库查询表单传来的值的sql
  11. $con->query('SET NAMES UTF8');
  12. $result = $con->query($q);// 执行 sql
  13.  
  14. // 获取执行 sql 后的返回对象
  15. $obj=$result->fetch_assoc();
  16.  
  17. if (mysqli_num_rows($result) > 0){
  18.  
  19.     // 管理员
  20.     if($obj["role"] == '99'){
  21.         echo"老师用户登录成功";
  22.     }else{
  23.         echo"学生用户登录成功";
  24.     }
  25.  
  26. }else{
  27.     echo "用户名或密码错误";
  28. }
  29. $con->close();//关闭数据库
  30.  
  31. ?>

3.register.php

  1. <?php
  2.  
  3. header("Content-Type: text/html; charset=utf8");
  4.  
  5. $username=$_POST['username'];//post获取表单里的name
  6. $password=md5($_POST['password']);//post获取表单里的password
  7. $email=$_POST['email'];//post获取表单里的email
  8. $phone=$_POST['phone'];//post获取表单里的phone
  9. $role=$_POST['role'] ;//post获取表单里的role
  10.  
  11. include('connect.php');//链接数据库
  12. $q="insert into tb_user(id,username,password,email,phone,role) values (null,'$username','$password','$email','$phone','$role')";//向数据库插入表单传来的值的sql
  13. $reslut=$con->query($q);//执行sql
  14.  
  15. echo $q;
  16. if (!$reslut){
  17.     echo "注册失败";
  18. }else{
  19.     echo "注册成功";
  20. }
  21. $con->close()//关闭数据库
  22. ?>

文章大体到这也就结束了，还有需要强调的是页面的跳转，本文用了许多navigateto实现页面跳转，如果你直接复制的话也是用不了的，需要navigateto到你自己有的页面，这里楼主是用了我自己有的，一定一定一定要记得改！！！！ 

 然后最后注意的是在使用微信小程序时，由于我们是本地使用，所以需要在详情里

在本地设置里把不校验合法域名勾选上，不然会报错，如图所示

（补充：新手小白可以多加一点理解的成分在里面，想真正理解的在评论区或者私信我哈，不保证都能解决......不是什么非常重要的问题就不要加我了哈 加我请附上xxx（csdn），再一次感谢CSDN各位大佬的文章！！！）

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/838647
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号