淘宝客net 利用淘宝客数据开发一个导购的H5的webapp网站-热门品牌大全-挑选好牌子就在十大品牌排行榜浚梓晟网络科技工作室

利用淘宝客数据开发一个导购的H5的webapp网站

现在有很多的导购网站，如果我们想自己开发一个可以适应于手机的的webapp，应该如何开发？那么我们今天选择使用mui来开发一个移动导购页面。上一节我们说到如何将淘宝客选品库的数据导入到MYSQL里面去，如果不是很了解的话，可以观看之前的视频

将淘宝客选品库的数据导入到mysql数据库中

首先，我们可以登录到mui的官网，到GitHub下载它需要的CSS和JS文件。官网地址

http://dev.dcloud.net.cn/mui/getting-started/

https://github.com/dcloudio/mui

由于我这里开发的是使用HBuilder，和MUI同一个公司旗下的作品。下载地址

http://dcloud.io/

注意，由于我这里是使用PHP开发的，所以我们还需要按照PHP解析服务器。这个大家根据自己的电脑平台进行安装，我就不做详细的介绍了。

大家安装好开发环境后，现在就可以直接开发我们的程序了。

一、数据库设计

这里我们根据在淘宝客网站后台导出的excel文件的字段进行设计数据库的属性，对于如何将里面的数据导入到mysql里面去，大家可以观看我之前录制的一个视频

将淘宝客选品库的数据导入到mysql数据库中

Navicat MySQL Data Transfer

Source Server : ming

Source Server Version : 50549

Source Host : www.yeehot.com

Source Database : yeehotdb

Target Server Version : 50549

File Encoding : utf-8

Date: 03/07/2017 10:09:36 AM

SET NAMES utf8;

SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------

-- Table structure for `yeehot_taokaoke_shop_copy`

-- ----------------------------

DROP TABLE IF EXISTS `yeehot_taokaoke_shop_copy`;

CREATE TABLE `yeehot_taokaoke_shop_copy` (

`id` varchar(255) NOT NULL,

`name` varchar(255) CHARACTER SET utf8 NOT NULL,

`img` varchar(255) NOT NULL,

`detail` varchar(255) NOT NULL,

`shopname` varchar(255) NOT NULL,

`price` varchar(255) NOT NULL,

`count` varchar(255) NOT NULL,

`rate` varchar(255) NOT NULL,

`earn` varchar(255) NOT NULL,

`wangwang` varchar(255) NOT NULL,

`shortlink` varchar(255) NOT NULL,

`longlink` varchar(255) NOT NULL,

`kouling` varchar(255) NOT NULL,

`youhuiquancount` int(11) NOT NULL,

`youhuiquanlimit` int(11) NOT NULL,

`youhuiquanminae` varchar(255) NOT NULL,

`youhuiquanbegin` varchar(255) NOT NULL DEFAULT 'CURRENT_TIMESTAMP',

`youhuiquanend` varchar(255) NOT NULL DEFAULT '0000-00-00 00:00:00',

`youhuiquanlink` varchar(255) NOT NULL,

`youhuiquantaokou` varchar(255) NOT NULL,

`youhuiquanshortlink` varchar(255) NOT NULL,

`sid` int(10) unsigned NOT NULL AUTO_INCREMENT,

PRIMARY KEY (`sid`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

SET FOREIGN_KEY_CHECKS = 1;

二、创建项目

打开HBuilder,创建一个web项目，输入项目名称，我这里以Dagou为例子。

三、添加相应的MUI的css和js文件

我们刚刚提到可以在GitHub下载MUI的源码，里面有相应的CSS和js文件，我们把它复制到我们的项目中去。如下图

四、创建数据库连接

新建一个PHP文件，命名为conn.php,我们在里面输入连接数据库的代码

<?php

/*****************************

*数据库连接

*****************************/

$conn = mysql_connect("www.yeehot.com","root","yeehot.com");

if (!$conn){

die("连接数据库失败：". mysql_error());

}

mysql_query("set names utf8;");

mysql_select_db("yeehotdb", $conn);

五、创建导购页面

我这里以index.php测试，新建一个index.php文件，然后输入

<?php

//连接数据库

include ('conn.php');

<!DOCTYPE html>

<html>

<head>

/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/

margin-top: -1px;

}</style>

(function($) {

$('body').on('tap', '.clicked', function(event) {

var url = this.getAttribute('href');

var blank = this.getAttribute('target');

if(blank == '_blank') {

window.open(url);

} else {

window.location.href = url;

}

});

})(mui);

})</script>

</head>

<body>

<?php

$type = $_GET['type'];

$page = $_GET['page'];

$pagesize = 20;

if ($page <= 1) {

$page = 1;

}

$offset = $pagesize * ($page - 1);

$res1 = mysql_query("select * from yeehot_taokaoke_shop order by id asc limit $offset,$pagesize");

while ($row1 = mysql_fetch_array($res1)) {

$img = $row1['img'];

$link = $row1['shortlink'];

echo " <li class='mipe831165521d341fb mui-table-view-cell mui-media'>";

echo "<a href='$link'> ";

echo "<img class='mip165521d341fb66e2 mui-media-object imginfo mui-pull-left' src='$img'>";

echo "<div class='mip21d341fb66e222d9 mui-media-body'>";

echo " <p class='mip41fb66e222d9824c mui-ellipsis-2'>" . $row1['name'] . "</p>";

echo " <p class='mip66e222d9824c9ba4 mui-ellipsis'>" . $row1['shopname'] . "</p>";

echo " <p class='mip22d9824c9ba4f60e price'>";

echo " <span class='mip824c9ba4f60ecdaf beforeprice'>月售" . $row1['count'] . "</span>";

echo "<span class='mip9ba4f60ecdaf87ab afterprice mui-pull-right' >" . $row1['price'] . "元</span>";

echo "</p>";

$isquan = $row1['youhuiquanminae'];

$begin = $row1['youhuiquanbegin'];

$end = $row1['youhuiquanend'];

if( strlen($begin)>0&&strlen($end)>0&&$isquan!='无')

{

$_nowtime=date("Y-m-d",time());

$beginDate=date("Y-m-d",strtotime($begin));

$endDate=date("Y-m-d",strtotime($end));

$nowtime=time();

if($nowtime>=strtotime($begin)&&$nowtime<strtotime($end))

{

echo "<button type=\"button\" data-loading-icon-position=\"right\" class=\"mui-btn mui-btn-danger mui-pull-right btinfo mui-btn-outlined\">$isquan >去领券</button>";

}

echo "</div>";

echo " </a>";

echo " </li>";

}

</ul>

</body>

</html>

此外，app.css的文件内容如下

.mui-plusheader.mui-bar{

display:none;

}

.mui-plus.mui-bar-nav~.mui-content{

padding:0;

}

/*hm开头的表示仅为 Hello MUI示例定义*/

.hm-description{

margin:.5em0;

}

.hm-description>li{

font-size:14px;

color:#8f8f94;

}

.index.imginfo{

line-height:5em;

min-width:7em;

height:7em;

}

.index.btinfo{

margin-top:1em;

}

.itemName{

color: black;

font-size:0.9em;

}

.price{

margin-top:10px;

font-size:1em;

}

.afterprice{

color:#CF2D28;

margin-left:10px;

}

.beforeprice{

color: black;

font-size:14px;

/*//text-decoration: line-through;*/

}

最终效果如下

欢迎继续关注我的头条号：一点热,如果有什么问题，欢迎留言咨询，我看到之后会第一时间回复大家的。也欢迎收藏与转发，如果需要转载到其他网站，请与我联系，yeehot.com

做淘宝必备工具

第三发工具推荐店侦探知卖创客工具箱

数据分析（官方）

江湖策流量管理 //liuliang.taobao.com/（已经下线）

生意参谋 //sycm.taobao.com/login.htm

淘宝指数 //shu.taobao.com（已经下线）

数据魔方 //data.taobao.com

卖家网Wish数据 //www.maijia.com/software/service/1012144

旺店数据 //http://www.maijia.com/software/sw/12651

聚数据 http://www.maijia.com/software/sw/20335

生e经（常用，非官方）

搜索诊断助手 //notice.taobao.com

天猫商家成长（不包含淘宝网的数据）//zhaoshang.mall.taobao.com/sellergrow/show_exam_report.htm?source=5

淘宝情报 //i.data.taobao.com

淘宝排行榜 //top.taobao.com

量子排行榜 //top.lz.taobao.com

数据市场 //home.shuju.taobao.com

偏好地图（估计是定向的数据来源：标签丶类目丶店铺丶品牌）//360.taobao.com

数据分析（非官方）

超级数据 //shu001.com

数据雷达 //ibbd.net

情报通 //qbtchina.com

运营一点通（类似生e经）

店铺透视（酷宝数据）

胜算 //www.shengsuan.net/

数据分析（其他）

阿里指数 //index.1688.com/alizs/home.htm

阿里巴巴采购排行 //top.1688.com/toalibaba/topalibabahome/show.htm

百度指数 //index.baidu.com/

百度搜索风云榜 //top.baidu.com/

新浪微博风云榜 //data.weibo.com/top

查询软件（查排名等）

淘诊断 //www.taozhenduan.com/

淘宝店铺销售数据查询(来查查;商派的工具) //www.shopex.cn/laichacha

升业绩查询工具 //shengyeji.com/gong/

胜算 //www.shengsuan.net/

淘搜 //www.tao-so.com/

淘大客（查询黑号）//www.taodake.com/

淘六六（淘宝干货珍藏）//bbs.tao66.com

直通车

直通车 //subway.simba.taobao.com/

直通车流量解析丶行业解析

TOP20W 关键词 //vdisk.weibo.com/u/1868116570

关键词词典（全词来袭丶未来上升次丶TOP20W词表丶店铺推广词表丶站外热门词）

//www.taobao.com/go/act/sale/keyword-dictionary.php?spm=0.0.0.0.PQbjzT

直通车外投词表

//bbs.taobao.com/catalog/thread/244117-258918740.htm?spm=0.0.0.114.AdMzUg

直通车魔镜 //s.taosem.com/

在线关键词组合 //www.semcmd.com/zuhe/

直通车官方信息发布平台

//www.taobao.com/go/act/ztc/inforplan.php?spm&ali_trackid=12_b9287c39380c2f9aa080abcab2cf8e2#itm1

钻展

钻石展位 //zuanshi.taobao.com/

新浪微博 @亮钻先生（创意丶数据；官方）//weibo.com/3022123622

钻展透视（唯一一款钻展监控软件；酷宝数据）

网址工具

淘店铺（淘宝官方权威店铺导航，含店铺风格分类）//dianpu.tao123.com/

淘宝客

淘宝客佣金查询

//www.alimama.com/union/spread/selfservice/taokeSearch.htm?spm=0.0.0.93.JSYlvm

淘宝客链接转换工具

//www.alimama.com/union/spread/activities/linksTrans.htm?spm=0.0.0.22.tTsir4

淘客招募网站：A5

进销存

淘算盘（分析利润和库存）

库存宝（分析利润和库存）

网店伴侣（分析利润和库存，支持多店铺）

ERP

e店宝（纯电商ERP）http://www.maijia.com/software/sw/1012667

网店伴侣（纯电商ERP）

管易（适合中小型商家丶纯电商ERP）

打单

电商宝（多店订单批量打印、自动生成会计记账）http://www.maijia.com/software/sw/13526

淘宝助理

淘打

我打 http://www.maijia.com/software/sw/10959

天天打单 http://www.maijia.com/software/sw/1012292

打折促销

限时折扣（官方）

欢乐逛（促销活动丶海量模板丶会员关怀丶数据分析丶批量工具）http://www.maijia.com/software/sw/921

促销工具火车_促销打折_满就送（就是以前的超级满就送）

客服绩效管理

赤兔名品客服绩效管理专业版（推荐）http://www.maijia.com/software/sw/12055

绩效雷达 http://www.maijia.com/software/sw/10905

客道精灵 http://www.maijia.com/software/sw/10865

会员管理丶CRM

数据赢家 http://www.maijia.com/software/service/1011626

客道

维客CRM 短信关怀（主要是短信邮件群发）

综合类

超级店长 http://www.maijia.com/software/sw/12057

淘问卷（买家调研丶客户回访；可绑定店铺优惠券）

聚透视（全方位精准检测聚划算效果）

有些已经下线，这里只是之前记录的一部分

互联网营销有哪些学习用的网站?

谢邀综合类学习网站网易云课堂链接:http://study.163.com/网易云课堂上面的课程非常多,各种领域都有,上传视频的老师很多,界面也很优化。网易公开课链...

什么样的域名是好域名?

几方面做下陈述,符合以下几方面的,就是好域名:1.含义为王。域名结构含义要一目了然,让人一眼看到,就记忆深刻,便于域名和网站运营普及,提高转化率。例如t...例...

networking什么意思-ZOL问答

v.交流(network的ing形式);联络Ifexecutivesfailtoexploittheopportunitiesofnetworkingtheyriskbein...

刘雯代言的淘宝店铺?

NET-A5月4日,全球时尚奢品平台NET-A-PORTER正式发布“颇特”作为平台中文昵称,同时官宣国际超模刘雯担任中国区代言人,共同在5月10日开启NET-A-PORTER天猫...

什么是Network-ZOL问答

network英[ˈnetwɜ:k]美[ˈnetwɜ:rk]n.网;(电视与计算机)网络;网状物;广播网;vt.将…连接成网络;建立工作关系;vt.把(地方节目)编排到广播网...

听说.com域名比较好，怎么申请？哪里有啊？

淘宝网购物为什么不能和卖家联系

[回答]当然可以联系看看淘宝购物技巧吧http://soubaoke.cn/article.php?article_id=63可能是卖家不在线,正常在线是可以联系的哦,或你没有安装阿里旺旺,...

cc后缀的域名是什么含义，有投资价值吗-汇财吧专业问答

[回答]现在后缀名很普遍,没有什么投资价值了多传统后缀都已经饱和,建议投资新后缀。很多个性后缀有很大的前景。比如cc这个域名以后会推广起来的,毕竟是...

如何做好运营?

我运营了多个阿里平台。可以分享给你。1.阿里有哪些平台阿里的平台分国内和国外。国内:淘宝,天猫,1688,聚划算国外:速卖通,国际站。商务的模式无非是...所...

“淘宝网”用日文怎么说？

就是网店:ネットショップ(netshop),タオバオネットショップ/淘宝网店最有名的是“乐天”网站,里面的店铺没有卖假货的,不像中国的购物网站タオパオ

kof2012 乐药师

上一集下一集 

利用淘宝客数据开发一个导购的H5的webapp网站