利用淘宝客数据开发一个导购的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>

<meta charset="utf-8">

<title>导购</title>

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="stylesheet" href="css/mui.min.css">

<link rel="stylesheet" href="css/app.css" />

<style type="text/css">#list {

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

margin-top: -1px;

}</style>

<script>$(window).ready(function() {

(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>

<ul class="mip65fd35ffc2df5b77 mui-table-view index">

<?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='mip7e8edd55d3046aa3 mui-table-view-cell mui-media'>";

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

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

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

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

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

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

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

echo "<span class='mip5b773ea7d0f53822 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>

<script src="js/mui.min.js"></script>

</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

2021年淘宝客网站还能做吗?

这是一个很有意思的话题,要知道56年前淘宝客是非常火的,那时候经常有朋友炫耀自己一天的淘宝客收入,不过近几年他们已经很少有人提及了,因为他们已经不做了。

不做的原因无非是做不下去了,赚不了钱。

导致赚不了钱的几个原因如下:

1.微商崛起

与淘宝客网站直接靠搜索引擎引流相比,微商靠微信引流转化率更高,可操作性更大,所以很多站长都转行做微商了。

2.网站逐渐没落

跟以前PC互联网时间不一样,现在移动互联网时代都是APP的天下,网站已经不吃香了,特别是淘宝客,已经很难从百度上引来流量,在百度上排名好的基本都是行业的佼佼者。

3.淘宝客分成越来越低

如果你现在做淘宝客你就会发现,一个一单几百块的订单,你能拿到的分成往往只有几块钱,这点分成连1%都不到,谈什么赚钱,所以很多站长都不干了,这也是淘宝客现在做得少主要原因。

综合上述问题,小云客认为现在淘宝客已经没什么前途了,当然如果你有非常好的执行力的话,做什么样的网站都会成功的。

相关问答

做一个淘宝客网站需要多少钱,应该怎样做?-ZOL问答

首先要注册一个适合淘宝客网站的域名,直接找一个IDC商注册即可。现在域名都不贵,.com的域名几十元一个,cn的域名更便宜,每个IDC的商价格有所区别,大家可以多看...

怎样把淘宝客推广产品(包括图和链接)上传到自己的网站上?

登陆卖家淘宝进入“卖家中心”选择左边的“推广”选择右上边的“淘宝客推广”图标选择“通用计划”后面的查看点击左下角的“新增主推产品”...登陆卖家...

淘宝客程序怎么开发?

现在很多朋友在问淘宝客小程序怎么开发,其实要开发淘宝客小程序还是比较简单的。淘宝客在早登上舞台的时候还是在很早之前,当时还没有出现小程序,但是通过社会...

做淘宝客网站,需不需cms啊?

淘客系统现在能尽量用到独立app就用独立app,推广,不是说cms不好,而是现在大多数cms推广的载体,qq群,微信群都被封杀得很厉害。独立APP推广则避免了这样的行...

怎样加入淘宝联盟,淘宝客怎样分享链接赚取佣金?

淘宝联盟是阿里巴巴集团旗下的,一个国内很大的电子商务营销联盟,成立于2010年4月8日,淘宝客是近年很火的一个网络赚钱方式。那我们怎样加入淘宝联盟做淘宝客呢...

淘宝客APP怎么制作?

[回答]做淘宝不一定要网站,只要你有足够的资源,可以选好单个宝贝推广,获取淘宝客链接引导客户购买就行了。不过每次只能推广一个链接,要客户点开后才能看...

什么是淘客,怎么做?

大家有没有使用过一些淘宝的优惠劵,只要我们复制链接,再打开淘宝,就会发现同一件商品,价格上优惠了。这些给我们提供优惠劵的人,他们其实也会从中获得一些利...

淘宝客怎么联系?

查找阿里妈妈网站,然后登陆上去,如果有淘宝帐号的就用淘宝帐号登陆,没有帐号注册一个就是。进去首页后,如果是自己要做淘宝客,按提示选择淘宝客进去;如果...

各位大神怎么在qq装机联盟qq浏览器推广淘宝客?

请问你是要推广是吗?如果是在qq浏览器的话,我可以告诉你。你可以打开qq浏览器,然后进入一些社交网站,比如微博、贴吧、论坛,在这些地方发帖推广。有时候你也...

出现在市面上的类似于淘宝客的网站,是正规的吗?运营模式是什么?

最开始也是半信半疑的用了一下这个软件,为什么用呢,因为当时家里正在装修,我的一个妹妹就强烈推荐我用这个软件,就是花生日记这个软件。装修在淘宝网上买了...