我的uni框架APP（共享充电投放）独立开发日记 第三天
我的uni框架APP（共享充电投放）独立开发日记
- APP开发第三天（通过短信接口，MySQL，服务器中间件。实现短信验证码注册登录）
- 搭建MySQL
- ※注意点，最新的MySQL一定注意了。
- 我常用的MySQL语句
- 设计数据库的表单
- user表的设计
- phonecode表的设计
- 链接MySQL，测试
- 书写中间件的代码
- （额外的）RC4加密
- 发送手机验证码
- Epa的MySQL重点
- 注册接口的书写
- 在uni中添加请求，最后的测试开始了。
- uni的请求方法
- uni发送验证码
- uni注册账号
APP开发第三天（通过短信接口，MySQL，服务器中间件。实现短信验证码注册登录）
现在APP都需要短信验证对吧，虽然我这个是个人练习APP，但是这样显得整个APP高端大气上档次，完全与别家的个人APP拉开了层次，仿佛企业级别。那我们现在要实现这几点（这是我在制作时候的流程）：
- 在服务器搭建MySQL。
- 做好需要的MySQL的names。
- 搭建中间件的运行环境。
- 测试中间件与MySQL的链接是否成功。
- 测试APP与中间件是否能够发送接受请求。
- 找到合适的短信验证码平台，实现接口调用。
- 书写中间件与APP的代码，实现短信验证码注册
那既然要实现短信码注册登录，那必须要接口对吧，那接口哪来呢，好问题，我打开了百度，别问为啥不是程序员标配的谷歌，我找不到梯子了。
搭建MySQL
先去 https://www.mysql.com/ MySQL的官方网站下载最新的使用版本，安装之后打开它的控制台，输入在注册是设定的密码，发现进入了MySQL。
※注意点，最新的MySQL一定注意了。
但是这边要注意一点，在最新的版本中，因为修改了加密方式，除了Navicat软件和MySQL的控制台，其他的软件连接之后都会出现错误代码为1251的错误。
解决方法如下
- 控制台登录MySQL。
ALTER USER 'root'@'localhost' IDENTIFIED BY 'password' PASSWORD EXPIRE NEVER;
这行代码用来修改加密方式，但是得注意’root’@‘localhost’中@后面的localhost，有些情况下他不为localhost而是%，那这时候我们只能写’root’@’%’，如下
ALTER USER 'root'@'%' IDENTIFIED BY 'password' PASSWORD EXPIRE NEVER;
这时候，我们就可以更改密码了
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '你要的密码';
这里的’root’@'localhost’同理。如果你不会查看这个值，那无非就是这三个值
- 127.0.0.1
- localhost
- %
如果你真的找不到，那就一个一个带入试试吧。
这个问题解决完了，我们就可以开始把数据库生成一下了。
我常用的MySQL语句
//展示所有数据库
show databases;
//选择数据库
use 库名;
//查询所有的数据
select * from 表名 ;
//删除记录
delete from 表名 where 条件
//添加数据
insert into 表名 (字段1,字段2) values(字段1的值,字段2的值)
//更新数据
update 表名 set 列名=列值 where 条件;
//删除记录
delete from 表名 where 列名=值;删除数据可以找回
truncata table 表名; 删除整个表，在重新建立一个一样结构的表，数据不能找回
//查询指定数据
select 列名 from 表名;
//条件查询数据
select * from 表名 where 条件；
//分页
select * from 表名 limit(开始,结束)
//多表联查
内连接法:select * from 表一 jion 表2 on 条件;
设计数据库的表单
我个人喜欢用可视化的MySQL数据库编辑工具，我用的是Navicat，先在数据库里面添加一个名为 ‘guaishou‘ 的数据库，我们就可以在里面添加表了。
那我们短信验证的登陆注册需要哪些表呢？
- user（用户信息的数据表）
- phonecode（短信验证码回调的数据库）
那我们是不是就只需要这两个就够了呀，肯定是呀。下面我们来看看表单的设计。
user表的设计
新建一个表名为user，我们登陆的用户就是在这里进行判断。那需要哪些元素呢？
- 用户名
- 用户密码
- 用户手机号
- 用户支付宝收款码链接（可以参考我之前的文档说明）
- 上级UID
- 我的UID（UID才是用户的唯一标识，用于判断登陆，推广等等）
- 机器数量（就是充电宝的数量）
- 当前收益（通过投放的充电宝产生的收益）
- 当前佣金（通过拉人获取的佣金，包括提成）
- 已提现金额
那这样，我们要的元素是不是就差不多了。那我们写到数据库即可。
phonecode表的设计
我们需要在这里面存储当前的验证码，存一个创建时候的时间戳，防止用户反复提交，发送无用的验证码。一条0.035呢
！也是钱啊。那这样，我们需要的表元素就出来了。
- 手机号
- 验证码
- 最后发送时间
链接MySQL，测试
我这边的中间件采用的WebEpa，启用WebEpa的服务后，在他的WWW目录下，放置php或易语言编译的WebEpa可调用的Epa文件。下图便是WebEpa。
这是WebEpa的WWW根目录。
我们这里的代码要引入WebEpa的模块，严格按照WebEpa的规范语句，其中的MySQL调用也是在WebEpa的模块中操作，接下来我们编译一下，我这边采用的易语言写的Epa，启动代码如下
这边得注意一个事情，我们在易语言里写MySQL语句时，得设定names的编码格式，否则在执行MySQL语句，会出现条件不成立的情况，代码如下：
.版本 2
mysql句柄 ＝ Mysql_连接Mysql (“MySQL地址”, “MySQL用户名”, “MySQL密码”, “要进入的数据库名称”, 3306)
Mysql_执行SQL语句 (mysql句柄, “use guaishou”)’选中当前要使用的数据库，虽然上面链接时就选择了，我们以防万一
Mysql_执行SQL语句 (mysql句柄, “SET names GBK”)’设置names的编码格式为GBK
这样之后就可以测试链接了。
书写中间件的代码
我们在WebEpa的代码例子中，可以看到有两个公开接口。一个是Post一个是Get。就是说，这个WebEpa中间件能够接收到POST和Get的请求。我这边使用的Get请求，你们也可以用Post请求。
（额外的）RC4加密
我在易语言和我的注册中都加入了这段RC4加密，可以参考，密码无实际效果。
JS代码如下：
function rc4(data, key) {
var seq = Array(256); //int
var das = Array(data.length); //code of data
for (var i = 0; i < 256; i++) {
seq[i] = i;
var j = (j + seq[i] + key.charCodeAt(i % key.length)) % 256;
var temp = seq[i];
seq[i] = seq[j];
seq[j] = temp;
}
for (var i = 0; i < data.length; i++) {
das[i] = data.charCodeAt(i)
}
for (var x = 0; x < das.length; x++) {
var i = (i + 1) % 256;
var j = (j + seq[i]) % 256;
var temp = seq[i];
seq[i] = seq[j];
seq[j] = temp;
var k = (seq[i] + (seq[j] % 256)) % 256;
das[x] = String.fromCharCode(das[x] ^ seq[k]);
}
return das.join('');
}
在易语言中引用:
//---------------------------------------------我是分割---------------------------------------------
//创建一个常量，值为上面的JS代码
.版本 2
.常量 RC4, "<文本长度: 707>"
//---------------------------------------------我是分割---------------------------------------------
//---------------------------------------------我是分割---------------------------------------------
//创建一个全局变量，调用了 精易模块 的 类_脚本组件
.版本 2
.全局变量 RC4, 类_脚本组件
//---------------------------------------------我是分割---------------------------------------------
//---------------------------------------------我是分割---------------------------------------------
//下面是在DLLmain函数就是易语言的 _启动子程序 中添加
.版本 2
.子程序 _启动子程序, 整数型, , 请在本子程序中放置动态链接库初始化代码
RC4.执行 (#RC4)
返回 (0) ' 返回值被忽略。
//---------------------------------------------我是分割---------------------------------------------
//---------------------------------------------我是分割---------------------------------------------
//下面是创建一个RC4的可执行函数。
.版本 2
.子程序 RC4, 文本型
.参数 明文, 文本型
.参数 密码, 文本型
返回 (RC4.计算表达式 (“rc4('” ＋ 明文 ＋ “','” ＋ 密码 ＋ “')”))
//---------------------------------------------我是分割---------------------------------------------
发送手机验证码
我这里的短信接口用的是 赛博·云通信 的接口 官方网站: https://www.mysubmail.com/ 。
在参考完文档之后,我们购买测试下接口，我们用的 精易模块 的 网页_访问 命令:
网页_访问 (“https://api.mysubmail.com/message/send”, 1, “appid=你的接口的APPID&to=” ＋ 手机号 ＋ “&content=” ＋ 编码_URL编码 (“【怪兽充电】您的验证码为：” ＋ 验证码 ＋ “，该码在5分钟内有效。”, 真, 真) ＋ “&signature=你的接口的Tooken”)
// 所有的提交的文本消息，一定要转换成URL格式
在测试成功之后，我们就可以开始书写整个命令了，再说下JSON，我们肯定要返回JSON文件，那我们又用到了精易模块
代码如下：
json.加成员 (“200”, “code”, 假)
json.加成员 (“验证码发送成功，请注意查收”, “msg”, 假)
这个就对应了Json中的：
{
code:[200],
msg:["验证码发送成功，请注意查收"]
}
这样的话可就一切准备就绪了，开始书写整个请求的代码吧。
.版本 2
.子程序 发送验证码, 文本型
.参数 手机号, 文本型
.局部变量 验证码, 文本型
.局部变量 记录集, 整数型
.局部变量 v_code, 文本型
.局部变量 i, 整数型
.局部变量 json, 类_json
.局部变量 时间戳, 文本型
.局部变量 lasttime, 整数型
' 删除过期验证码
时间戳 ＝ 到文本 (到数值 (时间_取现行时间戳 ()) － 5 × 60 × 1000)
Mysql_执行SQL语句 (mysql句柄, “delete from phonecode where lasttime<=” ＋ 时间戳)
Mysql_执行SQL语句 (mysql句柄, “select * from phonecode where phone='” ＋ 手机号 ＋ “'”)
记录集 ＝ Mysql_取记录集 (mysql句柄)
.如果 (Mysql_取记录集行数 (记录集) ＝ 0)
验证码 ＝ 到文本 (文本_取随机范围数字 (111111, 999999))
Mysql_执行SQL语句 (mysql句柄, “insert into phonecode (phone,v_code,lasttime) values('” ＋ 手机号 ＋ “','” ＋ 验证码 ＋ “','” ＋ 时间_取现行时间戳 () ＋ “');”)
网页_访问 (“https://api.mysubmail.com/message/send”, 1, “appid=你的接口的APPID&to=” ＋ 手机号 ＋ “&content=” ＋ 编码_URL编码 (“【怪兽充电】您的验证码为：” ＋ 验证码 ＋ “，该码在5分钟内有效。”, 真, 真) ＋ “&signature=你的接口的Tooken”)
json.加成员 (“200”, “code”, 假)
json.加成员 (“验证码发送成功，请注意查收”, “msg”, 假)
.否则
json.加成员 (“-1”, “code”, 假)
json.加成员 (“您上次的验证码尚未过期，请勿重复点击”, “err”, 假)
.如果结束
Mysql_释放记录集 (记录集)
返回 (json.取数据文本 ())
之后我们在GET请求中加入
.版本 2
.子程序 GET, 整数型, 公开, 请勿GET接口函数，函数名称和参数类型请勿修改！
.参数 连接池指针, 整数型, , 已弃用
.参数 IP, 文本型, , 客户端IP地址和端口格式如：127.0.0.1:818
.参数 请求文件, 文本型, , 客户端提交到服务器的请求地址
.参数 协议头, 文本型, , HTTP协议头数据
.局部变量 返回值, 整数型
.局部变量 返回内容, 文本型
.局部变量 json, 类_json
//解码URL路径
请求文件 ＝ 编码_URL解码 (请求文件, 真)
//RC4解密请求的函数，如果是sendphone，执行时间判断，如果请求的时间戳距服务器的现行时间戳小于5秒，那么执行刚刚的发送验证码，否则返回超时。
.如果真 (RC4 (WEB_取提交参数 (请求文件, “function”), “094dbcaa”) ＝ “sendphone”)
.如果 (到数值 (时间_取现行时间戳 ()) － 到数值 (取文本右边 (WEB_取提交参数 (请求文件, “data”), 13)) ≤ 5000)
返回内容 ＝ 发送验证码 (RC4 (取文本左边 (WEB_取提交参数 (请求文件, “data”), 11), “094dbcaa”))
.否则
json.加成员 (“-1”, “code”, 假)
json.加成员 (“您上次的验证码尚未过期，请勿重复点击”, “err”, 假)
返回内容 ＝ json.取数据文本 ()
.如果结束
.如果真结束
//返回JSON数据给请求
数据 (连接池指针, WEB_ansi到utf8 (返回内容), “json”, , , )
//---↓↓↓↓↓↓-----※重点※---------转场到Epa的MySQL重点
Mysql_断开Mysql (mysql句柄)
//---↑↑↑↑↑↑-----※重点※---------转场到Epa的MySQL重点
返回 (返回值)
Epa的MySQL重点
由于WebEpa的特性，是线程池，我们的DLLMain在每次被发起请求就会被调用一次，所以，我们这样的反复链接MySQL，会导致连接数达到最高限制，所以我们必须在执行命令结束之后，立刻断开MySQL的链接。
代码如下:
Mysql_断开Mysql (mysql句柄)
mysql句柄在上面创建链接时可以获取。
注册接口的书写
有了上面的例子，那就很方便了，我们注册接口需要如下的参数
- 账号（※必填）
- 密码（※必填）
- 推荐人（可以不填写）
- 手机号（※必填）
- 验证码（※必填）
我们这里通过提交的参数，通过手机号查找 phonecode 表单中的 phone 然后判断他的验证码是否与提交的相同，且。该验证码的创建时间在5分钟内。
那么我们先测试下SQL语句:
select * from phonecode where phone= '手机号';//SQL选择出手机号
可以输出，那么我们写到易语言命令中，逻辑如下
- 我们先把创建时间超过5分钟的验证码全部删除掉。
- 执行MySQL语句查询匹配phone，得到记录集
- 遍历记录集的v_code，比较验证码，如果有，为找到
- 遍历结束释放记录集，返回结果
那这样子，我们的判断验证码是否有效就完成了
易语言代码如下：
.版本 2
.子程序 _判断验证码, 逻辑型
.参数 手机号, 文本型
.参数 验证码, 文本型
.局部变量 记录集, 整数型
.局部变量 i, 整数型
.局部变量 lasttime, 文本型
.局部变量 v_code, 文本型
.局部变量 json, 类_json
.局部变量 相符, 逻辑型
Mysql_执行SQL语句 (mysql句柄, “delete from phonecode where lasttime<=” ＋ 到文本 (到数值 (时间_取现行时间戳 ()) － 5 × 60 × 1000))
相符 ＝ 假
Mysql_执行SQL语句 (mysql句柄, “select * from phonecode where phone='” ＋ 手机号 ＋ “';”)
记录集 ＝ Mysql_取记录集 (mysql句柄)
.如果真 (Mysql_取记录集行数 (记录集) ＝ 0)
Mysql_释放记录集 (记录集)
返回 (假)
.如果真结束
.计次循环首 (Mysql_取记录集行数 (记录集), i)
Mysql_读字段文本 (记录集, “lasttime”, lasttime)
Mysql_读字段文本 (记录集, “v_code”, v_code)
.如果真 (验证码 ＝ v_code)
相符 ＝ 真
跳出循环 ()
.如果真结束
Mysql_到下一行 (记录集)
.计次循环尾 ()
Mysql_释放记录集 (记录集)
返回 (相符)
同样的，添加到Get请求中，这样我们就有发送验证码和注册两个接口了。
易语言的 WebEpa 的 Get 接口代码如下：
.版本 2
.子程序 GET, 整数型, 公开, 请勿GET接口函数，函数名称和参数类型请勿修改！
.参数 连接池指针, 整数型, , 已弃用
.参数 IP, 文本型, , 客户端IP地址和端口格式如：127.0.0.1:818
.参数 请求文件, 文本型, , 客户端提交到服务器的请求地址
.参数 协议头, 文本型, , HTTP协议头数据
.局部变量 返回值, 整数型
.局部变量 返回内容, 文本型
.局部变量 json, 类_json
请求文件 ＝ 编码_URL解码 (请求文件, 真)
.如果真 (RC4 (WEB_取提交参数 (请求文件, “function”), “094dbcaa”) ＝ “sendphone”)
.如果 (到数值 (时间_取现行时间戳 ()) － 到数值 (取文本右边 (WEB_取提交参数 (请求文件, “data”), 13)) ≤ 5000)
返回内容 ＝ 发送验证码 (RC4 (取文本左边 (WEB_取提交参数 (请求文件, “data”), 11), “094dbcaa”))
.否则
json.加成员 (“-1”, “code”, 假)
json.加成员 (“您上次的验证码尚未过期，请勿重复点击”, “err”, 假)
返回内容 ＝ json.取数据文本 ()
.如果结束
.如果真结束
//signup是注册接口，通用的RC4解码函数请求名称
.如果真 (RC4 (WEB_取提交参数 (请求文件, “function”), “094dbcaa”) ＝ “signup”)
返回内容 ＝ 注册账号 (WEB_取提交参数 (请求文件, “username”), WEB_取提交参数 (请求文件, “password”), WEB_取提交参数 (请求文件, “tuijianren”), WEB_取提交参数 (请求文件, “phone”), WEB_取提交参数 (请求文件, “v_code”))
.如果真结束
返回值 ＝ 应答_发送数据 (连接池指针, WEB_ansi到utf8 (返回内容), “json”, , , )
Mysql_断开Mysql (mysql句柄)
返回 (返回值)
signup是注册接口，通用的RC4解码函数请求名称。
到这里，我们的中间件代码书写就完成了。
在uni中添加请求，最后的测试开始了。
uni的请求方法
接下来就是在uni中调用接口了，我们使用网络请求的语法是：
uni.request({
url: "请求的URL地址",
data: {
//这里面是请求的参数
参数1:参数1的值
参数2:参数2的值
},
header: {
//头文件的类型，这里表明为json
'Content-Type': 'application/json'
},
success: (res) => {
//res.data便是返回的内容
}
});
uni发送验证码
我们添加代码到methods中
SendMessage: function() {
//获取13位的现行时间戳
var timestamp = new Date().getTime();
//判断手机号是否长度正确
if (this.phonenumber.length != 11) {
uni.showModal({
title: '错误',
content: '请输入正确的手机号码',
showCancel: false
})
return
}
//合成提交的参数
var msg = this.rc4(this.phonenumber, "094dbcaa") + timestamp
uni.request({
url: this.sever_adr + '/ys.epa',
data: {
function: "twzrhrspE",
data: msg,
},
header: {
'Content-Type': 'application/json'
},
success: (res) => {
if (res.data.code[0] == -1) {
uni.showModal({
title: '错误',
content: res.data.err[0],
showCancel: false
})
} else {
this.yanzhengma = true;
uni.showModal({
title: '成功',
content: res.data.msg[0],
showCancel: false
})
}
}
});
}
我们看下手机上的效果
看到成功的获取到了接口的返回json内容，我们等待短信的到来。
哦豁，牛逼哦~
下面就是注册了。
uni注册账号
一样的，我们发送注册的请求
signup: function() {
//一样的，我们判断必填信息是否为空。
if (this.username == "" || this.password == "" || this.phonenumber == "" || this.v_code == "") {
uni.showModal({
title: '错误',
content: '请您正确的填写注册信息，只有推荐人可不填',
showCancel: false
})
return
}
uni.request({
url: this.sever_adr + '/ys.epa',
data: {
function: "wei~gd",
username: this.username,
password: this.password,
tuijianren: this.tuijianren,
phone: this.phonenumber,
v_code: this.v_code
},
header: {
'Content-Type': 'application/json'
},
success: (res) => {
if (res.data.code[0] == -1) {
uni.showModal({
title: '错误',
content: res.data.err[0],
showCancel: false
})
} else {
uni.showModal({
title: '成功',
content: res.data.msg[0],
showCancel: false
});
uni.redirectTo({
url: "../signin/sign"
})
}
}
});
}
我们测试一下的注册吧
完美了，那我们的注册登陆大工告成！接下来是页面的交互感。期待哦~