十九、添加完整商品数据

使用后台管理系统，添加完整商品数据。用于测试及前台页面展示。

添加三级商品分类（一般有现成的测试数据）

添加品牌（在一个三级分类下添加至少一个品牌）

添加商品类型（商品模型）（至少两个规格，每个规格至少两个规格值。至少两个属性）

添加商品（选择分类、选择品牌、上传logo图片、上传相册图片、选择商品类型、每种规格至少选择两个规格值）

一、前台模板整合

以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目录

3、SDK的下载和配置

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

在页面找到网站接入 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, 展示商品分类数据

展示二级、三级分类

2、商品列表展示

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

php think make:model common/Goods 

商品列表，展示某个分类下的商品。比如分类id为187的 “手机” 分类

页面整合（略）：Home模块Goods控制器index方法 list.html -> index.html

创建Goods控制器，需要继承Base控制器

php think make:controller home/Goods --plain

①在Goods控制器index方法，查询分类下的商品数据以及分类名称

②在view/goods/index.html，展示分类下的商品

遍历展示商品列表：


展示分页栏：

③当前分类名称展示

3、商品详情页

整合页面（略）： Home模块 Goods控制器 detail方法，item.html ->detail.html

1）分析商品详情页需要的数据。

①商品基本信息，查询商品表pyg_goods表，以goods_id为条件 主键id

②商品相册图片，查询商品相册表pyg_goods_images表，以goods_id为条件

③规格商品SKU，查询规格商品表pyg_spec_goods表，根据goods_id条件

④根据规格商品信息，查询对应规格名称规格值信息

2）如果尚未创建模型，则创建GoodsImages、SpecGoods、Spec、SpecValue模型

3）商品信息展示：

①基本信息展示：

Goods控制器detail方法，查询商品基本信息

home/view/goods/detail.html，展示商品基本信息
商品名称、商品价格

商品属性、商品详情

②商品相册信息展示

home/view/goods/detail.html 展示商品相册图片

③商品SKU（规格商品）展示

Goods控制器detail方法，查询商品SKU、查询对应规格名称规格值

转化数组结构： 取出所有相关的规格值ids

查询规格值规格名称信息，组装数组结构



home/view/goods/detail.html展示商品SKU

4、商品详情页-规格值选中效果

view/goods/detail.html中，规格值选中效果

Goods控制器detail方法中，组装数组，描述 规格值组合对应的规格商品SKU的id 的映射关系

将映射关系数组 转化为json字符串


view/goods/detail.html 中 给规格值a标签，添加自定义属性spec_value_id 保存规格值id， 用于js中获取

在规格值的点击事件中，根据选中的规格值的组合，在页面显示对应的价格。



页面默认显示 商品的第一个SKU的价格

view/goods/detail.html 中 给“加入购物车” 加id属性，禁用href属性

加入购物车，绑定点击事件，获取选中的规格商品id值。