前言

有天老板找我到办公室跟我说要做一个商城，商城卖出去东西就有佣金可以拿。我听着就头大。老板打开电脑给我看了网站：你看一下这个网站，照着它的流程就可以拥有一个商城了。我靠过去一看，大概了解一下：原来是利用第三方工具就可以构建一个导购网站，只要消费者在网站领取优惠券就会自动跳转到某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 （github比较卡）

遗留问题

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

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

python 读取 excel 生成 html 页面

前言

想法

行动

效果

遗留问题