本周末的QQ群视频--还是电商网站的事

主要讲了如何开发“点击某商品,进入商品详情页”。

产品列表页,就是这个电商网站的首页,也是一般多数电商网站的首页,在首页上尽量多的把商品展示出来。

一般来讲,它的构成方式也是最简单的。

就是按设计图,制作HTML静态页面,然后放在运行环境中,在xx.xx.xxx.x/xxx/xx/xx/index.html,能够访问,

然后调用同域中的商品列表接口,

获取返回的JSON数据,

然后根据JSON,for循环生成DOM节点,添加到body中去。

这样就把所有可以显示的商品,展示在首页商品列表中了。

按操作流程,打开网站首页之后,要浏览商品,,

遇到 适合的商品之后,当你点击某个商品的时候,应该是进入具体的商品详情页。

这个没有疑问,几乎所有的电商类网站,都是这样的。

那么它在开发中,是如何 操作的呢?这里只说思路,不说具体的开发编码。

首先,打开首页的时候,请求的是首页的产品列表接口,获得所有的商品数据,然后for循环json,动态生成DOM,将之添加 到产品列表容器。

在添加到容器之后,要给每一个产品列表项,添加一个click事件,

它的点击操作,就是将此商品的ID做为参数,传给商品详情接口,获得此商品的详细信息json,然后通过for循环,将所有的商品详情的信息,放置到生成的DOM节点中,添加到页面上。

这样就完成了商品详情页的开发。

如果你,不知道怎么用JS操作JSON动态生成DOM,添加到BODY中,看下面的伪代码:

var _html= '';
   for( var i=0; i<data.length;i++ ){
        _html += '<p goodsId = "' + data[i].gooids + '">' + data[i].name + '</p>'
   }
$("<div/>",{}).html( _html ).on('click','p',function(){
    getData('..api', $(this).attr( goodsId ),function(d){
        console.log( d );//这就是返回的数据
   })
});

//如果你告诉我,你伪代码也看不懂,那你就百度多查查伪代码的意思

//------------------

下周我们继续讲商品详情页的一些交互操作,以及它的实现思路。

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2016-05-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏码字搬砖

sqoop --split-by详解

假设有一张表test,sqoop命令中–split-by ‘id’,-m 10,会发生怎样奇特的事情。首先呢,sqoop会去查表的元数据等等,重点说一下s...

2494
来自专栏web前端教室

[一对一讲什么] 之 切图之后做啥?要加入项目和测试接口

昨天咱们谈过了什么是切图,那今天接着往下说说,切图之后做什么。 一般来讲,切图的工作成本是HTML静态页面。在有些公司,是美工或是UI设计他们给切了。但这么多年...

2395
来自专栏Golang语言社区

系统架构之三(业务运营支撑系统)

本人从事过3年的移动业务运营支撑系统开发,行业术语叫做boss系统,后又转入游戏行业进行游戏开发。 现设计一个业务运营支撑系统的架构如下: ? 详细解释各模块如...

39610
来自专栏coder修行路

python爬虫从入门到放弃(九)之 实例爬取上海高级人民法院网开庭公告数据

通过前面的文章已经学习了基本的爬虫知识,通过这个例子进行一下练习,毕竟前面文章的知识点只是一个 一个单独的散知识点,需要通过实际的例子进行融合 分析网站 其实爬...

2207
来自专栏小文博客

OCE – Online Code Editor

1561
来自专栏知晓程序

小程序如何提交审核,并发布?| 小程序问答 #36

今天,知晓程序(微信号 zxcx0101)就来教你,如何在公众平台提交审核、发布小程序。

1803
来自专栏互联网数据官iCDO

Google代码管理工具101 部分5-表单

主编前言: 很多朋友都听说过Tag Management(监测代码管理),但其强大的功能和实现方式,了解的朋友不多。本系列以Google Tag Manager...

3905
来自专栏编程

python高效之爬了B站再爬微博

全文简介 本文是用Python爬取微博移动端的数据。可以看一下Robots协议。另外尽量不要爬取太快。如果你毫无节制的去爬取别人数据,别人网站当然会反爬越来越严...

2448
来自专栏帘卷西风的专栏

关于Excel到lua的转表工具

       关于游戏项目的配置文件,有很多的方案,有些项目有专业的工具,有些则是直接使用json、xml、csv之类的配置文件,使用lua做配置文件的项目也不...

1462
来自专栏张善友的专栏

社区网站系统 jsGen

jsGen是用纯JavaScript编写的新一代开源社区网站系统,主要用于搭建SNS类型的专业社区,对客户端AngularJS应用稍作修改也可变成多用户博客系统...

2515

扫码关注云+社区

领取腾讯云代金券