十九、添加完整商品数据

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

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

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

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

添加商品（选择分类、选择品牌、上传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值。

PHP-电商项目-4相关推荐

mysql 电商项目（一）
mysql 电商项目 - MySQL数据库开发规范 1.数据库基本设计规范 2.索引设计规范 3.数据库字段设计规范 4.数据库SQL开发规范 5.数据库操作行为规范转载于:https://w ...
Java项目:网上电商项目(前后端分离+java+vue+Springboot+ssm+mysql+maven+redis)
源码获取:博客首页 "资源" 里下载! 一.项目简述本系统功能包括: 一款基于Springboot+Vue的电商项目,前后端分离项目,前台后台都有,前台商品展示购买,购物车分类, ...
推荐几个9月爆火的 GitHub 电商项目赶紧收藏
原文链接:https://mp.weixin.qq.com/s/pBZR6n8gxl19LAIBsH6XPg 逛逛GitHub. 每天推荐一个好玩的 GitHub 开源项目. 01. 新蜂电商第一个 ...
python电商项目源码_Python Django(WEB电商项目构建)
(坚持每一天,就是成功) Python Django Web框架,Django是一个开放源代码的Web应用框架,由Python写成.采用了MTV的框架模式,即模型M,模板T和视图V组成. 安装Pyth ...
从头开始启动开源电商项目jShop
从头开始启动开源电商项目jShop 1. 引言干了三年C#, 有了转Java 的念想,所以尝试学习一下java web,java语法本身和C#没有太多的差别,所以打算看看开源的java项目,开源的 ...
大型电商项目3.0实战+支付宝、微信支付项目实战
须知:视频来源网络,侵权请联系删除! 大型电商项目3.0实战获取方式扫描下面二维码回复:A110 支付宝.微信支付项目实战获取方式扫描下面二维码回复:A106
大数据互联网架构阶段电商项目简介
电商项目简介零.目录电商项目特点电商项目技术难点电商项目简介开发工具电商项目架构开发环境一.电商项目特点分布式数十台服务器,甚至百台.千台.万台,包括:Nigix负载均衡集群.To ...
项目是采用目前比较流行的 SpringBoot/SpringCloudAlibaba构建新零售微服务电商项目
简介: 技术架构项目是采用目前比较流行的 SpringBoot/SpringCloudAlibaba构建新零售微服务电商项目,从项目中台架构技术选型.模块设计.基础设施的构建.分布式解决方案.互联 ...
[Vue.js]实战 -- 电商项目(一)
项目目录项目概述项目初始化登录/退出功能主页布局用户管理模块权限管理模块分类管理模块参数管理模块商品管理模块订单管理模块数据统计模块项目概述电商项目基本业务概述电商后台管理 ...
第5章--电商项目-mysql实战--数据库主从配置
第5章–电商项目-mysql实战问题1:如何解决单点问题??? 解决方法-–MYSQL主从复制架构步骤:配参数在master服务器上建立复制账号初始化Slave数据启动基于日志点的复制链路 ...

PHP-电商项目-4