利用淘寶客數據開發一個導購的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='mui-table-view-cell mui-media'>";

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

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

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

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

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

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

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

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

Android掛號系統(H5前臺(MUI框架),SSM后臺,JSP,MYSQL)(畢業論文14280字以上,共56頁,程序代碼,MySQL數據庫)

【運行環境】

后臺: Eclipse + JDK1.8 + Tomcat8 + Mysql

前臺: HBuilder + 手機模擬器 + 生成安裝文件apk

【技術棧】

后臺: JAVA, JSP, SSM, MYSQL, HTML, CSS, JAVASCRIPT, JQUERY,Bootstrap

前臺: html5 + css + mui框架 + jquery + ajax

【項目包含內容】

【文檔包含內容】

【項目功能介紹】

醫院信息管理系統（HIS：Hospital Information System）是醫療信息化發展的必然結果，也是現在國內外醫院最常見、最普及的醫療系統[21]。本系統涉及

的業務工作主要有：預約掛號系統、門診收費系統、住院系統、藥房系統、醫生站、護士站系統以及醫院辦公OA等[22]

【文檔部分截圖】

【項目運行截圖】

東IT優就業

MUI框架，要實現手勢縮放圖片，可以使用imageviewer組件來實現。代碼很簡單：

1.引入css：

mui.imageviewer.css可以從MUI的SDK（或者實例程序）中找到

2.引入JS：

3.初始化imageViewer組件，類似于jQuery組件：

廣東優就業

更多IT精彩內容推薦：http://www.ujiuye.com/guangdong/?wt.mc_id=17009338

在線咨詢

上一篇：時隔兩年，黑洞又有了新照片，還是高清的
下一篇：pandasData爬蟲數據清洗方法

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

利用淘寶客數據開發一個導購的H5的webapp網站

您的項目需求