I am back-電商網站開發&jQuery_ZenDei技術網路在線

hi之前有將近兩周的時間沒有更新，除了懶就是其他的事情耽誤了。現在好了，回家了，雖然家裡停水，外面又有積雪，天寒地凍的，但諸多不便，都比不過有點閑的好。開搞每個學PHP的必經之路——電商網站的開發。1、電商網站開發——前端一、首頁製作1.1 概況&準備整個電商網站包括什麼呢，就是首頁信息，後面的.....

之前有將近兩周的時間沒有更新，除了懶就是其他的事情耽誤了。現在好了，回家了，雖然家裡停水，外面又有積雪，天寒地凍的，但諸多不便，都比不過有點閑的好。

開搞每個學PHP的必經之路——電商網站的開發。

1、電商網站開發——前端

一、首頁製作

1.1 概況&準備

整個電商網站包括什麼呢，就是首頁信息，後面的分類信息頁，商品詳情頁，購物頁面，售後頁面等等，所以就一步步做。自己做的時候可以簡單的畫個概況圖來指導開發，免得邏輯搞混。

準備：項目文件夾，其中要有images（圖片素材），js（javascript），style（css）三個子文件夾中。工具的話，看個人愛好，不過涉及的是前端，一般上習慣用DS的多，我比較懶，直接用zend+瀏覽器算求。

其中準備中有一部是實現reset.css，也就是清零/清除css效果。css我基本算是個白痴，找個源碼貼出來，侵刪：

@charset "utf-8";
/* CSS Document */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}
body{font-size:12px;}
img{border:none;}
li{list-style:none;}
input,select,textarea{outline:none;border:none; background:none;}
textarea{resize:none;}
a{text-decoration:none; color:#656565;}

/*清浮動*/
.clearfix:after{content:"";display:block;clear:both;}
.clearfix{zoom:1;}
.fl{float:left;}
.fr{float:right;}

1.2 頂部結構

用fireworks做，我還不會，先去學習下。

--------真是蛋疼，做個開頭就發現自己naive，先完成web進階的jQuery吧----------

2、jQuery

十二、jQuery線上聊天室

12.1 基本功能介紹

登陸後才能進入（用於基本信息的線上顯示）；

動態顯示交流後的內容；

文字和表情的溝通實現（表情也是字元代號編碼）

技術重點：ajax的無刷新技術展示數據

12.2 實現效果

利用jq中的ajax函數（比如$.ajax等）實現登陸，登陸時，顯示登陸中，正確或失敗，有相應的動作；

聊天室就是聊天內容區域，輸入區域，人員顯示區域。

12.3 流程

登錄頁面——》向伺服器請求登錄信息（用戶名和密碼信息）——》成功：跳轉到聊天主頁；否則，跳回登錄頁面。

聊天頁面——》請求聊天數據——》獲取聊天數據；

線上人員信息——》請求——》獲取；

所以，可以簡單作圖，這裡我掠過了，然後清楚的看到需要做的頁面數量，請求和響應的邏輯和對應關係。

12.4 登錄頁面開發login

--功能

驗證登錄信息；

進入聊天室；

--代碼

以前在PDO中講過的一種，直接用POST方法傳遞表格參數的方法：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;chraset=UTF-8">
<title>登錄</title>
</head>
<body>
<form action='login.php' method='post'>
用戶名：<input type='text' name='username'/><br/>
密碼：<input type='password' name='password'/><br/>
<input type='submit' value='登錄'/>
</form>
</body>
</html>

然後後續工作在login.php中實現就好了；

<?php
header('content-type:text/html;charset=utf-8');
$username=$_POST['username'];
$password=$_POST['password'];
try {
$pdo=new PDO('mysql:host=localhost;dbname=imooc','root','');
$pdo->exec('use imooc_pdo');
$sql="select * from user where username=? and password=?";
$stmt=$pdo->prepare($sql);
$stmt->execute(array($username,$password));
//$stmt=$pdo->query($sql);

$shit=$stmt->rowCount();//顯示結果集statement對象中的行數
echo $shit;
if($shit == 1){
//$url="ChatMain.html";
echo "<script language=\"javascript\">";
echo "alert(\"登錄成功\")";
echo "</script>";
echo "<script language=\"javascript\">";
echo "document.location=\"ChatMain.html\"";
echo "</script>";
}else{
echo "<script language=\"javascript\">";
echo "alert(\"用戶名或密碼錯誤\")";
echo "</script>";
echo "<script language=\"javascript\">";
echo "document.location=\"login2.html\"";
echo "</script>";
}

} catch (PDOException $e) {
echo $e->getMessage();
}

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

我們在這裡想要的是jQuery實現方法：換一種實現，同時把登錄做的稍微好看一點點哈（我覺得好看，一個在於對應的css文件的編寫，另一個在html中實現，DS工具實現要方便一點，有時間也得整著學一下）；

<!DOCTYPE html>
<HTML>
<head>
<TITLE>登錄</TITLE>
<SCRIPT type="text/javascript" src="jq/jquery-1.8.2.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/jsLogin.js"></SCRIPT>
<link rel="stylesheet" type="text/css" href="style/cssLogin.css" />
</head>
<body>
<div id="divLogin">
<h3>用戶登錄</h3>
<div class="content">
<div>用戶：<input id="txtName" type="text" class="txt" /></div>
<div>密碼：<input id="txtPass" type="text" class="txt" /></div>
<div class="btnCenter">
<input id="Button1" type="button" value="登錄" class="btn" />
  
<input id="Button2" type="button" value="取消" class="btn" />
</div>
<span id="divMsg" class="clsTip"></span>
</div>
</div>
</body>
</HTML>

其中，js是javascript邏輯控制文件；jq是jquery實現文件；css是css文件；後面的span標簽，是為了實現某些功能暫時留下的。

$(function(){
//元素綁定全局ajaxStart事件
//這裡就是用到span的標簽，給出過程
$("#divMsg").ajaxStart(function(){
$(this).show().html("正在發送登錄請求...");
})
$("#divMsg").ajaxStop(function(){
$(this).html("請求處理已完成！").hide();
})
$("#Button1").click(function(){
var $name=$("#txtName");
var $pass=$("#txtPass");
if($name.val() !== "" && $pass.val()!==""){
UserLogin($name.val(),$pass.val());
}else{
if($name.val()==""){
alert("用戶名不能為空！");
$name.focus();
return false; // 阻止進一步的動作，很重要的一步
}else{
alert("密碼不能為空！");
$pass.focus();
return false;
}
}
})
});

其實這裡面還是有錯誤的，實現起來感覺沒有第一種實現方法簡單明瞭，希望瞭解的兄弟們指點下，兩種方法的優缺點。

我還是稍微完善了下第一種PDO方法，直接在html中post表格數據，與資料庫進行比對，然後返回信息。

當然呢，第二種，也就是本來應該採用的這種方式，很明顯的優點在於其模塊化實現，對於開發人員來說也是清晰明瞭。但，私以為，小型任務中，如果沒有統一規劃好的名稱啊，什麼的，這樣子模塊化是不是顯得冗餘，畢竟還需要看模塊是否匹配啊什麼的，不知道理解的對不對。

12.5 聊天室頁面ChatMain

從頁面本身來說，就是head包含jq文件，js文件，css文件；body實現當前頁面的效果，也有介面功能的實現；

從佈局來說，就是聊天視窗的樣子，三個框框搞定（可是尼瑪老子不會用css啊！！！！）；

-----晚上不一定還會寫，先發了吧-----