前言

有天老板找我到办公室跟我说要做一个商城，商城卖出去东西就有佣金可以拿。我听着就头大。老板打开电脑给我看了网站：你看一下这个网站，照着它的流程就可以拥有一个商城了。我靠过去一看，大概了解一下：原来是利用第三方工具就可以构建一个导购网站，只要消费者在网站领取优惠券就会自动跳转到某bao的购买页面，购买成功后就可以有佣金了。我看了一下觉得可以，只要不让我敲代码一切好说。于是我照着流程构建了一个网站，然后勾选了很多零食进行推广，然后我就发现了一个问题：我只勾选了一些零食啊，商城怎么还有其它类型的商品?我思索了一下就明白了，这网站还是挺流氓的，还掺杂着其他人的推广链接，我一想这样不行，转化率肯定低啊。果不其然，试用了一天就只有5个单子，因为公司的网站还是挺有流量的，所以这转化率不可能这么低。老板看了一下，觉得没什么用让我把商城入口给关了，我只好照做，但是我心里对这流氓网站不服啊，于是我打算自己做一个导购网站。（最后还是要敲代码(。・_・)/~~~）

想法

在推广平台上下载一个商品清单的excel文档，文档的内容包含：商品的名称、商品的主图链接、商品分类、商品价格、商品推广链接.....。
利用python读取excel，获得分类、商品信息的json文件。
创建一个html页面读取json文件，把分类和商品显示出来，利用html中的锚点定位，点击就会滚动到对应的分类商品，就可以选择心仪的商品下单，从而达到推广商品的作用了。

行动

1. 安装xlrd

cmd窗口： pip install  xlrd

2.创建index.py，导入模块

import xlrd

3.打开Excel文件读取数据

wb= xlrd.open_workbook('文件路径')

4.获取表格

sheet1 = wb.sheet_by_index(0)  #这里的excel文档内只有一个表格，0代表第一个

5.获取表格的行数

rows = sheet1.nrows

6.获取表格中的类目

商品一级类目
住宅家具
影音电器
影音电器
美容护肤
厨房电器
运动服/休闲服装
餐饮具

category0 = sheet1.col_values(4)  #获取列内容(类目)，这里excel文档的第四列是类目
del category0[0]  #删除列表中的 "商品一级类目"
category = sorted(set(category0),key=category0.index) #类目列表->去除重复

7.整理数据

[   
    [
          分类名，
          [商品信息]
    ],
    [
          分类名，
          [商品信息]
    ]
]

data = []
for i,v in enumerate(category):
    data.append([v,[]])
for i,v in enumerate(data):
    for x in range(rows):
        if v[0] == sheet1.cell(x,4).value:
            data[i][1].append(sheet1.row_values(x))

8.导出json文件

jsonData = json.dumps(data, ensure_ascii=False)
with open('results.json', 'w',encoding="utf-8") as f:
    f.write(jsonData)

9.运行index.py,获得json文件

cmd窗口：python index.py

10.创建html页面，并引用json文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script>//引用jquery
    $(function(){

function color16(){//十六进制颜色随机
            var r = Math.floor(Math.random()*256);
            var g = Math.floor(Math.random()*256);
            var b = Math.floor(Math.random()*256);
            var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
            return color;
        }


var navo = '';//类目导航
var info = '';//商品内容
$.get('./results.json', function(data) {//请求json文件
            
            $.each(data, function(index, val) {

                 navo+="<a href='#"+val[0]+"''>"+val[0]+"</a>　"
            });//把json文件中的类目数组遍历出来,并用锚定位
            $.each(data, function(index, val) {

                 var div_title = "<div id='"+val[0]+"' style='float:left;'>";
                 var div_content = "";
                 $.each(val[1], function(index, val) {
                     div_content+="<div style='background:"+color16()+"' onclick=\"location.href=\'"+val[21]+"\'\" class='pro_img'>"+val[1]+"<span class='money'>¥"+val[6]+"</span><\/div>"
                 });
                 var div_footer ="</div><br>";
                 info+=div_title+div_content+div_footer
            });
$('#nav').html(navo);//把导航显示出来
$('#content').html(info);//把商品显示出来
        },'json');


    })
        
    </script>
    <style>

        #content{
            margin-top: 10px
        }
        .money{
            position: absolute;
            left: 0;
            bottom: 0;
            height: 30px;
            line-height: 30px;
            color: #e22a40;
            font-weight: 700

        }
        .pro_img{
            position: relative;
            float: left;
            width: 220px;
            height: 220px;
            line-height: 220px;
            text-align: center;
            border: 1px solid #eee;
            cursor: pointer;
            font-size: 30px;
            white-space:normal; 
            overflow:hidden;  /*超过部分不显示*/
  　　　　　text-overflow:ellipsis;  /*超过部分用点点表示*/
  　　　　　white-space:nowrap;*//*不换行

        }
    </style>
</head>
<body>
<div id="nav"></div>
<div id="content"></div>

</body>
</html>

效果

https://fjxasdf.github.io/daogou/

遗留问题

导购页面没有样式，不够美观。
没有显示商品图片，由于excel文档中有1万条商品信息，把一万张图片显示出来太卡了。

python 读取 excel 生成 html 页面