• 首页
  • 前端
    • HTML
    • CSS
    • Javascript
    • XML
    • AJAX
  • 前端框架
    • BootStrap
    • Jquery
  • PHP
    • 语法
    • 核心
    • 面向对象
    • PHP7
    • Socket
    • Swoole
  • 数据库
    • Mysql
    • Redis
    • Memcache
    • MongoDB
  • 优化
    • 优化方案
    • 页面静态化
    • Nginx
  • 后台框架与实战
    • Smarty
    • 源码Blog
    • TP3.2
    • TP3.2商城
    • TP5.0
    • TP5.0商城
    • Laravel
    • Laravel在线教育平台
    • Yii
    • Yii手机直播
    • CodeIgniter
    • Yaf
  • 移动开发
    • 微信公众号
    • 混合APP
  • 二次开发
    • DedeCMS
  • Linux
    • 基本操作
    • 环境搭建
  • 版本控制
    • GIT
    • SVN
  • Node.js
  • 资料库
没有结果
查看所有结果
  • 首页
  • 前端
    • HTML
    • CSS
    • Javascript
    • XML
    • AJAX
  • 前端框架
    • BootStrap
    • Jquery
  • PHP
    • 语法
    • 核心
    • 面向对象
    • PHP7
    • Socket
    • Swoole
  • 数据库
    • Mysql
    • Redis
    • Memcache
    • MongoDB
  • 优化
    • 优化方案
    • 页面静态化
    • Nginx
  • 后台框架与实战
    • Smarty
    • 源码Blog
    • TP3.2
    • TP3.2商城
    • TP5.0
    • TP5.0商城
    • Laravel
    • Laravel在线教育平台
    • Yii
    • Yii手机直播
    • CodeIgniter
    • Yaf
  • 移动开发
    • 微信公众号
    • 混合APP
  • 二次开发
    • DedeCMS
  • Linux
    • 基本操作
    • 环境搭建
  • 版本控制
    • GIT
    • SVN
  • Node.js
  • 资料库
没有结果
查看所有结果
没有结果
查看所有结果

TP5 商城(五)商城前台首页、首页导航栏、首页分类筛选、首页推荐位、前台会员注册、短信验证、前台会员登录与验证码、前台退出功能、邮箱找回密码

Mr.Lee 由 Mr.Lee
2018年6月16日
在 TP5.0, TP5.0商城, 后台框架
0
TP5 商城(一)环境部署、数据表、后台首页、用户 CURD、Ajax 状态切换、后台登录、后台退出、后台防翻墙、RBAC
0
分享
1
浏览

商城实战第五天

搭建商城前台首页

  1. 把商城前台资源文件复制到/home下面

  1. 在home-indexController-index方法中,输出模板

  1. 复制前台的index.html模板到/home/view/index/目录下,并修改进行静态资源目录

效果:

注:开发前台先把默认访问的模块改为Home,修改config.php配置

url访问模块报错(for Bidden)的解决

如访问 http://域名/模块名/这样会报错。 这是因为直接访问到 /public/home/目录,此目录下面没有默认的访问页index.html,解决办法:把前后台资源目录放在/public/static/下面,并且修改config.php配置文件中的前后台资源目录:

二、实现前台首页相关功能

完成首页的导航栏

因为导航栏的栏目比较多,我们只取出顶级栏目(即pid=0),并且is_show=1,加上limit限制取出的条数即可

代码如下:

1、在home-IndexController-index方法中取出对应导航栏分类数据。

  1. 在home-view-index-index.html模板中遍历数据

效果:

2、完成首页的分类筛选

上面的三级分类的做法和角色分配权限技巧是一样。

  1. 取出所有的分类数据,以主键cat_id作为select返回结果的下标
  2. 根据pid进行分组,把具有相同pid的值归为同一个组,方便模板中循环。

代码如下:

1、按照上面两个技巧进行组装数据,分配到模板中

其中$cats和$children变量数据如下:

  1. 在模板中遍历

效果:

3、首页的推荐位

一共五个推荐位:

上面的五个推荐位商品的都应该在正常的商品列表中(即不在回收站中),且为上架商品。

即字段is_delete = 0 and is_sale = 1。

五个推荐位:

疯狂抢购:按照自己商城一些特点取商品,如可以取出价格最低的几个。

热卖:即is_hot = 1

推荐:即is_best = 1

新品:即is_new = 1

猜你喜欢:随机取出几个商品,利用mysql的 rand()的随机函数,使用模型的方法order( ‘rand()’ )实现

代码如下:

  1. 在home-Goods模型中定义一个获取指定类型商品的getTypeGoods方法

  1. 在admin-indexController-index方法中获取对应类型的数据

  1. 模板中遍历数据

效果:

三、完成前台会员的注册功能

1、相关的会员表分析

其中openid字段,是用于后面实现qq第三方登录用的。

代码实现

  1. 定义member验证器和member模型

member验证器:

member模型:

  1. 设置注册模板register.html的表单name字段名称

3、在home-publicController-register方法中完成注册的实现

四、使用短信验证完成注册

1、短信验证技术介绍

应用场景:

主要用于用户注册、身份确认、重要资料修改的短信认证以及生成订单成功短信的通知等。

如百度利用手机号登录:

如新浪手机邮箱注册验证

https://mail.sina.com.cn/register/regmail.php

2、发送短信的实现

网站应用中的短信发送一般要借助第三方提供商提供的API接口来发送短信。而且大部分是要收费的,内容方面的规范检验也越来越严格,常常都需要按照事先审核过的短信模板来发送内容,否则无法发送成功。

目前国内有很多这方面的短信提供商,只不过收费标准和稳定性都不一样。所以我们优先选择能免费体验的平台 ,比如容联云通讯(官方网址是:http://www.yuntongxun.com/)。

还有接口网:http://www.106jiekou.com/ ,

如下是容联云通讯(http://www.yuntongxun.com/ )的界面

3、容联运通讯的使用

(1)注册账号

地址:http://www.yuntongxun.com/user/reg/init

2、注册成功登录后进入控制中心

3、设置发送短信的测试手机号

注意:只有填写测试的手机号才可以发送短信,通过身份证认证之后无限制。

(2)查看开发文档和下载demo代码

1、开发文档:

2、进入demo示例,查看使如何使用

下载后的DEMO文件:

注:发送短信要开启PHP的curl模块,在php配置文件php.ini中开启

(3)短信发送案例

参考以下示例:

使用短信验证完成注册

  1. 上面演示代码放在虚拟主机中测试如果可以正常发送短信则把对应的文件夹sendSMS复制到我们[项目目录]/extend/目录下面:

只需要上面一个文件即可发送短信。

  1. 封装一个发送短信的方法,封装在common.php

测试下是否可以发送短信:

成功和失败返回如下数据:

  1. 在register.html注册的页面,设置发送短信的html布局

  1. 给id=sendSms绑定单击事件,发送ajax请求,进行短信的发送

  1. 在home-publicController-sendSms定义发送短信的方法

先在config.php中加入一个短信盐:用于加密

进行发送短信:

同时定义一个验证:

6、发送短信的倒计时特效:

countDown倒计时方法代码如下:

效果:

  1. 同时点击注册按钮的时候,需要判断手机号短信验证码是否输入正确

六、完成前台会员的登录和验证码功能

1、先在member验证器中定义一个login的验证场景

  1. 在Member模型中定义一个checkUser方法,判断用户名和密码是否正确

  1. 在登录模板login.html设置表单的name名称

同时单击换一张更换验证码:

注:上面生成验证码的时候,带了参数为2,在验证器验证的时候,记得带上对应的标识2.

效果:

4、在home-publicController-login方法中完成登录模板的展示和登录的逻辑实现

七、退出功能,显示用户是否登录

判断用户是否登录思想:

当用户登录,显示退出的按钮

当用户未登录,显示登录和注册的按钮

做法:可以通过session进行判断

修改home-view-index-index.html模板内容:

效果:

同时在home-publicController-logout方法中完成退出功能的实现

八、邮件技术实现密码找回

1、邮件发送概述

(1)邮件发送的原理

 

解释:

POP3:全名为“Post Office Protocol – Version 3”,即“邮局协议版本3”。是TCP/IP协议族中的一员,由RFC1939 定义。本协议主要用于支持使用客户端远程管理在服务器上的电子邮件,提供了SSL加密。

简单一句话,POP服务器是用来收信的。

(2)SMTP协议(Simple Mail Transfer Protocol)

SMTP(Simple Mail Transfer Protocol):

即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。

SMTP协议属于TCP/IP协议族,它帮助每台计算机在发送或中转信件时找到下一个目的地。

通过SMTP协议所指定的服务器,就可以把E-mail寄到收信人的服务器上了,整个过程只要几分钟。SMTP服务器则是遵循SMTP协议的发送邮件服务器,用来发送或中转发出的电子邮件。

简单的说: SMTP则是负责邮件服务器与邮件服务器之间的寄信的通讯协定(类似于http协议)

2、如何实现邮件的发送

(1)需要有邮件发送的第三方程序包,比如可以使用开源免费的PHPMailer

(2)需要邮件服务器

利用互联网上的第三方免费邮件服务器,例如 163, qq等,有些大公司会自己搭建邮件服务器。

(3)需要在免费的邮件服务器里面(可以去注册163的),注册一个邮箱,进入邮箱后,要开通smtp服务。

以163为例,先注册一个邮箱账号。

注册成功然后登录进入用户设置

开通smtp服务

设置客户端授权密码

(4) php.ini配置文件中需要启用sockets扩展。

记得重启apache服务器

3、邮件发送案例

参考以下示例:

集成到项目中实现忘记密码功能

  1. 把上面测试通过的发送邮件的sendEmail复制到[应用目录]/extend目录中

注:测试的时候,记得修改demo.php中的基本配置。

  1. 在common.php文件中封装一个发送邮件的方法sendEmail

  1. 记得测试一下是否ok

实现登录的忘记密码功能

找回密码的基本流程图解:

  1. 修改登录页面的忘记密码的链接地址

  1. 在home-publicController-findpassword方法,展示一个输入注册时候的邮箱的模板显示。

注:模板可以直接复制登录的login.html模板即可,稍做修改

效果:

  1. 给上面的按钮绑定单击事件,进行发送ajax,触发发送邮件。

  1. 在home模块的PublicController控制器中的findPassword方法中判断是否是ajax请求,接收重置的邮箱,进行一些发送邮件前的判断

  1. 当输入的邮箱在系统中存在的时候,就进行发送邮件。

明天讲!!

6、验证邮件地址的合法性

 

标签: 前台会员注册前台会员登录与验证码前台退出功能商城前台首页短信验证邮箱找回密码首页分类筛选首页导航栏首页推荐位
上一篇文章

TP5 商城(六)邮件找回密码、QQ 互联、QQ 登录、分类列表页的面包屑导航、分类列表页左侧分类菜单

下一篇文章

TP5 商城(四)商品属性、商品添加、图片上传、商品列表、ajax+layer 展示商品详情

下一篇文章
TP5 商城(一)环境部署、数据表、后台首页、用户 CURD、Ajax 状态切换、后台登录、后台退出、后台防翻墙、RBAC

TP5 商城(四)商品属性、商品添加、图片上传、商品列表、ajax+layer 展示商品详情

发表回复 取消回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Search

没有结果
查看所有结果

About Me

个人随笔

Winston Lee

Programmer

Hello & welcome to my blog! My name is Winston Lee and am a programmer and am keen on sharing.

Winston Lee

About Me

Hello & welcome to my blog! My name is Winston Lee and am a programmer and am keen on sharing.

Categories

  • AJAX
  • BootStrap
  • CodeIgniter
  • CSS
  • DedeCMS
  • GIT
  • HTML
  • Javascript
  • Jquery
  • Laravel
  • Laravel在线教育平台
  • Linux
  • Memcache
  • MongoDB
  • MVC
  • Mysql
  • Nginx
  • Node
  • PDO
  • PHP
  • PHP7
  • PHP基本语法
  • PHP核心编程
  • Redis
  • Smarty
  • Socket
  • SVN
  • Swoole
  • TP3.2
  • TP3.2商城
  • TP5.0
  • TP5.0商城
  • XML
  • Yaf
  • Yii
  • Yii手机直播
  • 二次开发
  • 优化方案
  • 前端技术
  • 前端框架
  • 后台框架
  • 基本操作
  • 微信公众号
  • 数据库
  • 未分类
  • 混合APP
  • 源码Blog项目
  • 版本控制
  • 环境搭建
  • 移动端开发
  • 网站优化
  • 资料
  • 面向对象
  • 面向对象编程
  • 页面静态化

Tags

DOM Json RBAC 事件 传参 函数 分页 判断语句 匿名函数 变量 图片上传 存储过程 安装 对象 封装 属性 接口 控制器 数据库操作 数据类型 数据表 数组 文件上传 无刷新分页 权限 标签 模型 正则 流程控制 目录结构 算法 类 索引 继承 缩略图 表关系 视图 路由 运算符 选择器 递归 配置 错误处理 页面静态化 验证码
  • 首页
  • 前端
  • 前端框架
  • PHP
  • 数据库
  • 优化
  • 后台框架与实战
  • 移动开发
  • 二次开发
  • Linux
  • 版本控制
  • Node.js
  • 资料库

沪公网安备31011502400873 | 沪ICP备2024050435号-3

没有结果
查看所有结果
  • 首页
  • 前端
    • HTML
    • CSS
    • Javascript
    • XML
    • AJAX
  • 前端框架
    • BootStrap
    • Jquery
  • PHP
    • 语法
    • 核心
    • 面向对象
    • PHP7
    • Socket
    • Swoole
  • 数据库
    • Mysql
    • Redis
    • Memcache
    • MongoDB
  • 优化
    • 优化方案
    • 页面静态化
    • Nginx
  • 后台框架与实战
    • Smarty
    • 源码Blog
    • TP3.2
    • TP3.2商城
    • TP5.0
    • TP5.0商城
    • Laravel
    • Laravel在线教育平台
    • Yii
    • Yii手机直播
    • CodeIgniter
    • Yaf
  • 移动开发
    • 微信公众号
    • 混合APP
  • 二次开发
    • DedeCMS
  • Linux
    • 基本操作
    • 环境搭建
  • 版本控制
    • GIT
    • SVN
  • Node.js
  • 资料库

沪公网安备31011502400873 | 沪ICP备2024050435号-3