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