Iamback-電商網站開發&jQuery

2019-11-14 13:17:31

字體：大中小

來源：轉載

供稿：網友

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

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

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

一、首頁制作

1.1 概況&準備

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

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

其中準備中有一部是實現reset.css，也就是清零/清除css效果。css我基本算是個白癡，找個/* 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;
}
}
})
});