本周末的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 );//这就是返回的数据
   })
});

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

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

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