专栏首页web前端教室本周末的QQ群视频--还是电商网站的事

本周末的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),作者:老尚

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 看太多简单易懂的教程,对你没有好处

    太难的教程看不懂,那只能看一些简单的了。简单的教程,它也是教程啊,那为什么看了许多简单的教程,却依然没什么进步? 其实原因很简单,因为简单的教程之所以简单,是因...

    web前端教室
  • 没有哪个教程,是一点难度不带的,要以递归的方式来学习教程。

    今天文章的标题的是在和一个新同学聊天沟通的时候,偶然提到的, ? 我觉得ta的心态特别好,对于学习的心态也特别的端正。很清楚的明白,目前还有许多不懂的地方,而这...

    web前端教室
  • 如何缓解WEB前端学习焦虑症?

    在许多新入者的眼中,前端难,难于xxx,努力学的少时,会的也;多学吧,发现学会的东西并未增加多少,但不会的东西却不断出现。在这种情况下,内心如火一般,真坐立不安...

    web前端教室
  • 如何将Flink应用的日志发送到kafka

    产线环境上的Flink应用是长时运行的应用,日志量较大,通过flink web页面查看任务日志会导致浏览器卡死,通过日志排查问题非常不便。因此,需要将flink...

    Eights
  • Linux电源管理-概述

    在如今嵌入式可移动设备大热的时期,功耗是检测此设备一项重要的指标。如何能做到手机待机时间长久,而且用户还能玩的尽兴,这时候就必须对设备进行省电管理。那用什么省电...

    DragonKingZhu
  • 特写李飞飞:她激励了人工智能的发展,更要给人工智能赋予人的价值

    AI 科技评论按:李飞飞无疑是人工智能界最响亮的名字之一。她既对机器学习领域的发展做出了杰出的贡献,也是普通大众眼中温和的人工智能技术宣扬者,还是谷歌这一科技...

    AI科技评论
  • Python学算法入门大全

    这个repo有近23个大牛一起维护的,领头的是一个印度工程师!印度我好几年前出差还是去过,当时去的是号称是印度的“硅谷”班加罗尔,确实软件行业非常发达。来看一下...

    Sam Gor
  • 使用JS异步回调解决pjax加载问题

    使用pjax会导致部分js插件无法加载,最后我选择异步加载解决问题。 你可能会问异步就够了为什么还有个callback是干啥的,不急你先看看代码。

    乔千
  • 关于CodeReview

    CodeReview的目的是提升代码质量,尽早发现潜在缺陷与BUG,降低修复成本,同时促进团队内部知识共享,帮助更多人更好地理解系统。

    三哥
  • 如何使用java代码通过JDBC访问Sentry环境下的Hive

    温馨提示:要看高清无码套图,请使用手机打开并单击图片放大查看。 Fayson的github:https://github.com/fayson/cdhproje...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券