12-pyg-07前台模板整合QQ登陆

qq_39727133

已于 2023-02-26 11:43:01 修改

阅读量90

点赞数

分类专栏： # 13-pyg商城文章标签： php html java

于 2023-02-23 12:51:38 首次发布

本文链接：https://blog.csdn.net/qq_39727133/article/details/129179293

版权

13-pyg商城专栏收录该内容

11 篇文章 1 订阅

订阅专栏

品优购商城-07

一、前台模板整合

以home模块作为前台网站模块。

设置默认模块：application/config.php

// 默认模块名
'default_module'         => 'home',

模板整合思路：

①确定页面的访问路径（模块、控制器、方法）

②新建对应的控制器方法，在方法中调用模板

③将模板页面移动到对应的视图目录下（创建子目录）

④将静态资源文件移动到public/static/home目录下

⑤修改模板文件中静态资源路径

页面分布：

首页 Index控制器index方法 JD-index.html -> index.html

商品列表 Goods控制器index方法 list.html -> index.html

商品详情 Goods控制器detail方法 item.html ->detail.html

登录页 Login控制器login方法 login.html

注册页 Login控制器register方法 register.html

成功加入购物车 Cart控制器addcart方法 success-cart.html -> addcart.html

购物车列表 Cart控制器index方法 cart.html -> index.html

结算页 Order控制器create方法 getOrderInfo.html -> create.html

1、前台首页

①确定页面的访问路径（模块、控制器、方法）

home模块 Index控制器 index方法

②新建对应的控制器方法，在方法中调用模板

home模块新建index控制器，index方法，并调用模板

在这里插入图片描述

③将模板页面移动到对应的视图目录下

将JD-index.html移动到application/home/view/index目录下改名为index.html

在这里插入图片描述

④将静态资源文件移动到public/static/home目录下

在这里插入图片描述

⑤修改模板文件中静态资源路径，修改application/home/view/index/index.html

注：TP框架中，模板中的静态资源路径，不能使用相对路径./ ，必须使用以/开头的路径。

在这里插入图片描述

2、其他页面

重复步骤①②③⑤

3、全局布局

（见手册–模板–模板布局）

使用模板布局，就是把许多模板页面都有的公共代码给抽取出来，放到一个公共位置开发维护，这样做的好处是：相同的代码只维护一份，减少代码工作量

①使用全局布局

修改配置文件application/home/config.php,加入以下设置

'template'  =>  [
    'layout_on'     =>  true,//开启布局
    'layout_name'   =>  'layout',//布局文件名称
]

在这里插入图片描述

在home模块view目录下创建layout.html文件，将前台页面公共的头部、底部html代码提取到layout.html中，在中间位置放一个特殊字符串“{_CONTENT_}”,

表示此位置，替换为原始要访问的页面内容。

在这里插入图片描述

layout.html中 css和js文件只放 all.css 和 all.js

在这里插入图片描述

原始模板页面保留主体部分代码和页面独有的css、js引入代码即可：

首页 view/index/index.html中，保留首页需要的js和css

在这里插入图片描述

注：绝对不能把所有的js、css文件全部放到layout.html中，这样容易互相影响。

4、临时关闭模板布局

全局布局设置，对所有页面全部生效。

特殊页面（不需要使用布局的页面），可以在控制器方法中，临时关闭模板布局。

$this->view->engine->layout(false);

比如登录页面，不需要使用布局

创建控制器

php think make:controller home/Login --plain

在这里插入图片描述

模板整合过程同首页。

在这里插入图片描述

注意：如果页面显示效果不对，可以考虑先删除缓存 runtime目录

二、手机号注册

1、简单注册

步骤：

整合模板

完善表单

提交表单添加用户

页面跳转

实现：

创建用户User模型

php think make:model common/User

在这里插入图片描述

整合模板（home模块Login控制器register方法）（具体步骤略）

在这里插入图片描述

完善表单

在这里插入图片描述

js提交表单

在这里插入图片描述

提交表单（home模块Login控制器phone方法）

在这里插入图片描述

2、短信接口

场景：通常在使用手机号注册时需要发送短信验证码，在修改密码等敏感操作时也需要验证手机号发送短信验证码。

短信验证码的目的：验证用户的身份是否本人

在项目代码中发送短信，通常要调用第三方短信商的短信发送接口。

提供短信接口的平台：百度Apistore数据平台、聚合数据平台、京东万象等等

一般情况下，短信接口需要企业认证用户才能申请、一般都是收费的。

以京东万象为例：个人可以购买使用

在这里插入图片描述

进入短信API页面

在这里插入图片描述

选择一个短信接口

在这里插入图片描述

接口介绍：（请求地址、请求方式、请求参数、返回参数等）

在这里插入图片描述

接口的购买使用注意事项：

在这里插入图片描述

短信接口一般都有一个模板报备的概念，需要把发送的短信内容的格式先报备给短信商，

后续发短信的过程，只有满足报备格式的短信才能发送成功。

京东万象的短信接口需要APP KEY, 可以使用京东的帐号进行登录，登录之后可以查看到APPKEY

3、封装发送短信功能

发送短信功能：

将接口地址和appkey放在配置文件application/config.php

在这里插入图片描述

封装使用curl发送请求的函数curl_request函数 application/common.php

在这里插入图片描述

封装一个函数sendmsg用于发送短信application/common.php

在这里插入图片描述

4、手机号注册-发送短信验证码

功能点：发送短信验证码、基本的注册效果、倒计时效果

需要创建User模型

php think make:model common/User

①修改view/login/register.html，在手机号注册时，点击“发送验证码”，

发送ajax请求

在这里插入图片描述

②login控制器sendcode方法，用于ajax请求发送短信验证码

在这里插入图片描述

③浏览器上测试时，在调试工具栏Network查看验证码

在这里插入图片描述

5、手机号注册-校验短信验证码

sendcode方法发送验证码时，将验证码保存到缓存（手机号–验证码）

在这里插入图片描述

Login控制器phone方法，处理表单提交（验证码校验）

在这里插入图片描述

6、短信发送限制

①前端限制发送频率-倒计时效果

思路：

给“发送验证码”标签绑定的点击事件中

设置一个定时器，每隔1s执行一次代码（setInterval）

执行的代码中，需要修改标签的内容并禁用button的点击效果（表单元素disabled属性）

当倒计时结束，将标签的内容还原，设置button可以继续点击

在这里插入图片描述

②后端限制发送频率（同一个手机号，一分钟只能发一次）

原理：

每次发送成功，记录发送时间。

每次发送之前，进行频率检测。（当前时间 - 上次发送时间 < 60 发送太频繁）

实现：

每次发送成功，记录发送时间

在这里插入图片描述

每次发送之前，检测发送频率

在这里插入图片描述

③设置验证码有效期（记录验证码时，在缓存中设置有效期）

在这里插入图片描述

④设置验证码验证成功一次后，失效

在注册的表单提交后，验证码验证成功，将其从缓存中删除

在这里插入图片描述

更多验证：

限制ip（同一个ip一天只能发送多少次）框架中请求对象request的ip方法获取ip地址

限制手机号（同一个手机号一天只能发送多少次）

三、账号密码登录

1、前台用户登录

①整合模板：访问路径 Login控制器login方法login.html

②确认表单完整性 name属性值提交地址

给“登录”a标签绑定事件，使用js提交表单

在这里插入图片描述

③Login控制器dologin方法，处理表单提交

在这里插入图片描述

第一种写法：根据用户名和密码一起查询用户表

混合查询（where 条件中包含or条件，使用闭包函数方式）

在这里插入图片描述

第二种写法：根据用户名查询用户表，比对密码

在这里插入图片描述

2、前台用户退出

退出时，清空所有的session, 跳转到登录页或者首页。

在这里插入图片描述

3、优化前台首页头部显示

根据登录状态，页面头部显示的信息需要对应变化：

封装一个对手机号加密的函数 application/common.php

在这里插入图片描述

注册时，将加密手机号设置为默认昵称

在这里插入图片描述

修改view/layout.html, 根据登录状态显示

在这里插入图片描述

四、QQ互联接口

1、介绍

现在很多网站都集成了第三方帐号登录的功能，比如QQ登录、微信登录、微博登录。

使用第三方帐号登录目的，简化用户注册的流程，实现快速的注册登录。

第三方登录基本流程：①跳转到第三方认证页面 ②回调地址中的处理

在这里插入图片描述

2、签约

QQ登录接口，使用也需要申请。

腾讯开放平台：https://open.tencent.com/

腾讯开放平台注册：http://open.qq.com/reg

QQ互联平台网站：https://connect.qq.com/

在这里插入图片描述

点击应用管理，会要求登录

登录之后，点击应用管理，第一次登录此平台会要求注册成为开发者

分为公司接入和个人接入。

公司接入需要营业执照信息。这里我们平时使用可以选择个人接入

在这里插入图片描述

注册成功之后等待审核，通过之后进入应用管理

在这里插入图片描述

审核通过之后可以创建应用了。

选择创建网站应用

在这里插入图片描述

进入资料填写页面，填写完成提交

在这里插入图片描述

提交成功之后，需要继续完善相关信息

在这里插入图片描述

创建成功，进入应用管理页面，可以看到刚创建的应用处于审核中状态

在这里插入图片描述

审核成功和审核失败状态下，操作栏都有一个查看按钮，可以点击查看应用详情

在这里插入图片描述

参考：

APP ID ：101542020

APP Key ：539cd4f7784f107fa74ad58d87b5c916

回调地址：http://www.tpshop.com/index.php/home/login/qqcallback

说明：不管审核成功还是审核失败，qq登录的接口都可以使用，区别是，审核成功后所有人的qq都可以登录，审核失败只有申请人的qq可以正常登录。

为了测试qq登录，重新配置一个域名 www.tpshop.com 指向 pyg/public目录

站点域名管理

在这里插入图片描述

域名解析

127.0.0.1       www.tpshop.com

3、SDK的下载和配置

在QQ互联平台网站，点击 “文档资料”

在这里插入图片描述

进入SDK下载页面：

在这里插入图片描述

在页面找到网站接入 sdk php版本

在这里插入图片描述

SDK配置：

①将解压后的目录，移动到public/plugins/目录下，改名为qq

在这里插入图片描述

②在浏览器直接访问：域名/plugins/qq/index.php

在这里插入图片描述

③点击“设置配置项”,进入配置页面

按照要求填写相关的信息，点击“配置”

在这里插入图片描述

③点击“查看example”，打开测试页面。

点击“用QQ帐号登录”，可以打开qq登录的小窗口。

在这里插入图片描述

④按照回调域，在Home模块Login控制器新增qqcallback方法

在这里插入图片描述

⑤重新测试，使用qq帐号登录，小窗口会发生跳转，访问qqcallback方法。

在这里插入图片描述

4、QQ互联接口的集成

①分析SDK中的example页面index.html中的代码

参考：public/plugins/qq/example/index.html文件

在这里插入图片描述

②参考example中的做法，修改view/login/login.html

预期效果：点击登录页面“QQ登录”，当前页面跳转到qq登录页面。

在这里插入图片描述

③修改Login控制器qqcallback方法，获取用户信息

在这里插入图片描述

获取用户信息

在这里插入图片描述

用户数据如下：

在这里插入图片描述

④修改Login控制器qqcallback方法，实现第三方用户登录后自动注册登录

在这里插入图片描述

⑤预期效果：登录成功，跳转到首页。

在这里插入图片描述

五、商品相关页面显示

1、商品分类展示

两个概念：

商品类型(商品模型)：用于后台，管理商品规格属性的，只有一级。

商品分类：用于前台，展示商品的，有多级（三级）。

如果尚未创建Category商品分类模型，则执行以下命令创建Category模型

php think make:model common/Category

商品分类在前台展示：（商品分类属于公共头部代码）

1）无限极分类树结构：（最终读取数据时，遍历次数少）

查询到所有分类数据后，先将数组转化为分类树结构，方便页面展示

树结构示例：

在这里插入图片描述

需要用到封装的处理函数application/common.php中的get_tree_list函数

2）功能实现

①在前台模块创建Base控制器，在其构造方法，查询商品分类数据并转化为树结构

php think make:controller home/Base --plain

②所有其他控制器（Login控制器除外），继承Base控制器

比如 Index控制器，继承Base

③修改view/layout.html, 展示商品分类数据

qq_39727133

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录