• 首页
  • 前端
    • 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商城(八)购物车商品列表展示、Ajax删除、清空、更新购物车商品、展示订单结算页面、订单详情页商品展示

Mr.Lee 由 Mr.Lee
2018年6月20日
在 TP5.0, TP5.0商城, 后台框架
0
TP5商城(八)购物车商品列表展示、Ajax删除、清空、更新购物车商品、展示订单结算页面、订单详情页商品展示
0
分享
9
浏览

商城第八天

联表的三步:

  1. 需要关联表的表
  2. 表关联的字段
  3. 通过where筛选条件进行过滤

原生的sql语句: select * from table_name join 、where、group、having、order、limit

一、购物车商品列表展示

1、分析

上面的购物车数据从哪里来?

  1. 先是从购物车表sh_cart

通过上面一张表的数据,购物车数据是获取不到的,需要查询另外三张表:商品表、属性表、商品属性表

499元:(商品的单价(goods_price)+所有单选属性价格总和)* goods_number

2、代码

1、在home-CartController-cartList,展示购物车模板页面

模板如下:

效果:

  1. 把购物车数据取出来,组装成如下的数据结构,方便后面查询

[

[

goods_id => 1

goods_attr_ids => 1,5

goods_number => 10

]

……

]

代码如下:

  1. 在把上面的组装好的数组cartData变量,给其每个数组元素加下标goodsInfo和attrInfo,分别存储商品信息和商品属性信息。

类似结构如下:

[

[

goods_id => 1

goods_attr_ids => 1,5

goods_number => 10,

goodsInfo => [goods_name,goods_price,goods_img,……]

attrInfo =>[attr_name,attr_value,attr_price,……]

]

……

]

代码如下:

最终组装好的$cartData数组结构如下:

  1. 在cartList.html模板文件中,进行遍历购物车相关数据

效果:

ajax删除购物车商品

  1. 给删除链接地址绑定单击事件,并阻止默认行为,还要获取商品goods_id和商品属性goods_attr_ids。

  1. 给class=’delCartGoods’绑定单击事件

注:要引入layer弹出层插件。

  1. 在CartController控制器的ajaxDelGoods方法中,完成删除购物车商品

同时完善删除购物车商品的方法:

ajax清空购物车商品

  1. 在购物车页面加一个清空购物车的功能链接

  1. 给上面的按钮绑定单击事件

  1. 在CartController控制器的cartCart方法中调用购物车对象,清空购物车

注:上面的方法名字取得不合理,建议改为clearCart

  1. 在购物车类中定义清空购物车的方法

四、ajax更新购物车商品数量

说明:当我们点击+-号的时候,价格已经自动给我们算好了,但是未更新到数据库。

这其实一个另外一个js文件做好了cart1.js:

ajax加更新数量

  1. 给当前+符号(class=add_num)的父元素,设置两个属性,记录商品的id和商品的属性id

2、需要修改增加数量的业务逻辑

  1. 在CartController控制器建立一个changeCartNum的方法,调用购物车对象更新数量

  1. 在购物车类中完善更新商品的数量方法

setField(字段名,值): 把字段名设置为指定的值

ajax减更新数量

只需修改cart1.js文件,发送ajax进行更新

ajax失焦更新数量

(1)bug修复

当用户在输入框输入的数量不是纯数字的,失去焦点的时候,数量应该恢复之前的值。

为了可以恢复之前数量,我们可以在输入框获得焦点的时候,设置一个自定义属性记录之前的数量。

效果:

(3)代码

也只需修改cart1.js文件即可:

代码:

代码优化部分

由于增加、减少、失焦,都要触发ajax请求,更新商品的购买数量,我们把发送ajax的逻辑封装在一个函数中,同时设置一个回调函数callback处理对应业务逻辑;

如增加数量调用上面的方法:

展示订单结算页面

1、输出订单详情页模板

当在购物车点击结算按钮,跳转到页面订单详情页,主要输入用户的收货地址,还有确认购买的订单商品。

1、修改上面结算按钮的链接地址

  1. 在home模块的OrderController的控制器的orderInfo的方法,输出订单信息的页面。

  1. 把课件中的flow22.html调整好的模板复制到home/view/order/目录下面。并改名为orderinfo.html

最终效果如下:

订单详情页商品显示

  1. 把之前获取购物车商品的信息封装在前台home的goods模型中的方法中

注:需要在上面的Goods模型引入Db类。

  1. 在orderInfo的方法中,调用上面的方法,获取购物车商品的数据,并分配到模板中

  1. 在orderinfo.html模板中进行遍历输出

注:上面遍历的代码可以直接复制购物车列表模板cartlist.html的代码。续做修改就行。

效果:

六、完成订单数据入库

订单数据入库的顺序

订单商品入库的顺序:

第一步:先把订单基本数据入库到订单表sh_order

第二步:订单表数据入库成功之后才能把订单商品入库到订单商品表中sh_order_goods中

如果保证上面两步执行过程中都没有问题呢,这里需要借助到mysql的事务,可以保持数据的一致性。当发生异常的时候,会自动回滚。

注意:只有表的引擎是innodb引擎才支持事务操作。

TP5中有关事务操作的相关方法:

启动事务:Db::startTrans()

提交事务:Db::commit()

事务回滚:Db::rollback()

手册示例:

订单表和订单商品表的数据入库

七、支付技术介绍

1、早起网站支付

早期的电商都是送货上门,邮政汇款,这样的话,商家会承担很大的风险。

后面的时候有部分网站和银行进行签约,使用网银、手机银行等。

再往后,就是支付宝、微信。

早期的公司如果想申请网银需要直接去找银行申请相关的支付接口,而且现在银行这么多公司不可能去每家银行申请支付接口,这样未免也太麻烦了。

如果有的网站的资金流动比较少的话,有的银行都不会和这些小公司进行合作,因为从中赚不到什么利润。所以就有了第三方支付平台(微信、支付宝、京东钱包、qq财付通、百度钱包)来解决这些问题。

2、现在的网站支付

为了解决早期网站支付的问题,避免了商家繁琐的去每家银行获取支付接口。现在有些公司专门集合了所有银行的支付接口,这些公司进而在提供支付接口给我们企业或开发者使用,这些公司就是第三方支付平台。

常见的第三方支付平台:微信、支付宝、京东钱包、qq财付通、百度钱包等

有了这些第三方支付平台,我们企业或开发者就不需要独自跑去银行去申请支付接口了,直接利用第三方支付平台,在参考他们的支付接口文档即可完成我们的支付了!

八、支付宝支付

注意一点:现在的支付宝支付需要企业或个体工商户可申请才,个人是没法申请的。

企业或个体工商户申请的条件如下:

1. 提供真实有效的营业执照,且支付宝账户名称需与营业执照主体一致;

2. 网站能正常访问且页面信息有完整商品内容;

3. 网站必须通过ICP备案,个体户备案需与账户主体一致。

(团购类网站不支持个体工商户签约)

不过好处的个人开发者我们可以使用支付宝提供的沙箱环境进行模拟支付。

那么什么是沙箱环境?

答:就是支付宝提供给我们开发者一个虚拟的支付环境。其中的操作和真实支付环境是完全一样的。买家账号和卖家账号沙箱环境都给我们提供好了。

后面的沙箱环境支付,支付宝会提供一个商家账户和个人买家账户给我们,我们在配合支付接口文档即可完成支付。

企业或个体工商户申请支付

申请的网址:https://b.alipay.com/ (b: business企业)

点击下面的电脑网站支付的接入按钮:

这里支付宝提供了5种支付方式给我们使用,网站就要使用电脑网站支付。

早期支付宝只有两种支付方式:

即时到帐:我们上面看到的5个支付方式都是这个衍生出来的 ,一旦付款,立马到账。

担保支付: 7天担保,早期淘宝网,买家买东西的钱先到了淘宝的帐号呆够7天,商家才收到款,担保支付支付宝已经取消了。

企业或个体户点击上面电脑网站支付,需要以下申请条件:

上面的申请条件,以后去企业上班,公司都会帮我们申请好的。

上面是企业或个体工商户申请的基本步骤,我们个人没法申请,所以这里我们只能使用沙箱环境进行支付测试。

申请沙箱应用

首页,登陆支付宝开放平台,进入到如下的开发者中心

https://openhome.alipay.com/platform/developerIndex.htm

点击开发者中心->研发服务,进入如下的沙箱环境:

去创建沙箱应用,如下是已经创建的沙箱环境:

沙箱中的提供两个测试账户:商家账户 和 买家账户,其账户余额都是虚拟的

成功付款的时候,钱会从买家账户打到商家账户

商家账号:

买家账号:

特别注意一点:

3、下载支付宝支付的开发包SDK&Demo

下载地址:https://docs.open.alipay.com/270/106291

下载回来的压缩包如下:

解压下来如下所示:

aop:包含支付宝核心的支付文件。

lotusphp_runtime: 这是一个国外的PHP框架,这里是支付宝默认使用的。

pagepay:具体的实现支付接口的代码文件

config.php:配置文件,填写应用配置APPID、应用密钥、支付宝、支付网关的文件

notify_url.php:支付成功以后支付宝post方式异步跳转的地址,获取支付结果的地址

return_url.php:支付成功以后支付宝get方式同步跳转的地址,获取支付结果的地址

注:支付宝接口对我们的PHP版本有要求,必须在PHP5.5以上,可以使用phpStudy集成环境进行切换。且需要开启对应php版本的php.ini配置文件中的openssl扩展,去掉前面的分号,并重启apache服务器:

集成支付宝到项目中

1、引入支付宝到项目中

2、支付前的相关参数配置

几个重要的配置参数:

  • APPID:可以从支付宝的沙箱应用中获取到
  • 支付宝支付网关

沙箱环境:https://openapi.alipaydev.com/gateway.do

正式环境:https://openapi.alipay.com/gateway.do

提示:以后去公司做支付宝支付时,上线要使用正式环境的支付网关

  • 应用私钥
  • 应用公钥

其中应用私钥和公钥可通过支付宝提供的相关工具生成。

  • 支付宝公钥

我们直接运行RSA签名验签工具

签名:说白了就是加密

验签:说白了判断加密是否正确,

例如:

我们注册会员的时候,会给会员密码加密,你可以理解,我们给会员的密码进行签名,

会员会在网站登录,我们直接从数据库找出密码的加密串 和 会员注册时的密码加密后进行判断,这个动作可以理解为验签

我们使用RSA签名验签工具生成应用的私钥和公钥:

商户的私钥:复制到config.php中。

商户的公钥:复制到支付宝网站中,再获取支付宝的公钥复制到config.php中

应用私钥和应用公钥,支付宝公钥说明:

config.php配置文件如下:

分析如何唤起支付宝支付页面

实现商城订单的支付

十、查看个人订单列表

十一、后台订单管理

 

标签: Ajax删除展示订单结算页面更新购物车商品清空订单详情页商品展示购物车商品列表展示
上一篇文章

TP5 商城(九)订单入库、支付宝支付、支付宝引入项目、支付页面唤起、订单支付、支付成功订单状态修改、订单入库验证、查看个人订单、订单付款、后台订单管理、无刷新分页

下一篇文章

TP5商城(七)商品详情页、商品基本数据、面包屑导航、商品图片画廊展示、商品详情页属性、浏览历史、购物车、ajax添加商品至购物车

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

TP5商城(七)商品详情页、商品基本数据、面包屑导航、商品图片画廊展示、商品详情页属性、浏览历史、购物车、ajax添加商品至购物车

发表回复 取消回复

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

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