服務器 9

1.AJAX階段項目——京東購物車

功能點描述

  (1)異步的用戶登陸

  (2)異步的顯示商品列表，實現分頁顯示

  (3)異步的添加到「個人購物車」

  (4)查看「個人購物車」

  (5)異步的修改「個人購物車」

 

所用技術：

  MySQL、PHP、HTTP、AJAX、jQuery、Cookie

 

實現步驟：   SQL => PHP => HTML/JS                   

  (1)編寫SQL：jd.sql，數據庫名jd，

       建立表：jd_user(uid, uname, upwd)

       建立表：jd_product(pid, pname, price, pic) 

       建立表：jd_cart( cid,  userId )

       建立表：jd_cart_detail(did, cartId, productId, count)

  (2)編寫PHP：data/header.php，包含頁頭必需的HTML片斷

  (3)編寫PHP：data/footer.php，包含頁尾必需的HTML片斷

  (4)編寫HTML：productlist.html,待頁面加載完成，異步加載頁頭和頁尾。

  (5)編寫PHP：user_login.php，接收客戶端提交的uname和upwd，執行數據庫驗證，返回 {"code":1, "uname":"qiangdong", "uid":10} 或 {"code":2, "msg":"用戶名或密碼錯誤" }

  (6)修改HTML：productlist.html，默認顯示出登陸對話框，異步登陸驗證，失敗則提示錯誤消息，成功則清除掉對話框，顯示「歡迎回來：xxxx」

  (7)編寫PHP：product_select.php，向客戶端輸出全部的產品信息，以JSON格式：[{},{},{},....]

  (8)修改HTML: productlist.html，頁面加載完後，異步請求產品；分頁顯示

  (9)編寫PHP：cart_product_add.php，接收客戶端提交uid、pid，添加入購物車詳情表，若已有該商品，則購買數量+1  —— 須要執行多條SQL語句

       SQL1：根據用戶編號查詢出購物車編號

       SQL2：若沒有購物車編號則建立一個購物車，獲得購物車編號

       SQL3：根據購物車編號和產品編號查詢是否已買過該商品

       SQL4：已購買過則購買數量+1

       SQL5：未購買過則添加購買記錄，數量爲1

  (10)修改HTML：productlist.html，點擊每一個商品下「添加到購物車」，異步把uid和pid提交給服務器，實現購物車添加，彈出成功提示消息，提示用戶該商品已購物的數量。

  (11)用戶點擊「查看個人購物車」，把loginUid和loginUname保存到Cookie中，跳轉到shoppingcart.html

  (12)修改shoppingcart.html，頁面加載完成，從Cookie中讀取loginUid和loginUname

  (13)修改shoppingcart.html，頁面加載完成，異步請求頁頭和頁尾頁面

  (14)編寫PHP，cart_detail_select.php，接收客戶端提交的uid，查詢出該用戶購物車中全部的商品，返回：[{},{},...{}]

  (15)修改HTML，shoppingcart.html，待頁面加載完後，異步請求當前用戶的購物車商品列表，顯示在TABLE中

-------------------文華的進度線--------------------

  (16)編寫PHP：cart_detail_update.php，接收客戶端提交的did和count，執行UPDATE，修改詳情條目的購買數量，返回{"code":1,"count": 3}

  (17)修改HTML，shoppingcart.html，爲+和-按鈕綁定事件監聽，修改同級的input的value，異步提交給服務器

  (18)編寫PHP：cart_detail_delete.php，接收客戶端提交的did，執行DELETE，刪除該詳情條目返回{"code":1 }

  (19)修改HTML，shoppingcart.html，爲「刪除」按鈕綁定事件監聽，異步提交給服務器

 

 

 

2.表單序列化

  $('#formId').serialize( );

  jQuery中提供的表單序列化函數，能夠把選定的表單中全部帶name屬性的輸入域連同值轉換爲k=v形式，所有使用&符號拼接在一塊兒，組成一個大的字符串，用於異步請求數據提交。

 

3.Web項目中的分頁查詢 —— 難點 & 重點

  當一個頁面須要呈現的數據不少時，不可能一次性所有顯示，必須使用分頁顯示：

 

初始時顯示第1頁，用戶點擊某個頁號，異步請求對應頁中的內容。

分頁查詢客戶端提交的請求消息形如：

  GET /select.php?pageNum=3 HTTP/1.1

分頁查詢服務器返回的響應消息形如：

  {

       recordCount: 36,    //知足條件的記錄的總數

       pageSize: 8,    //頁面大小，每頁最多顯示的記錄數

       pageCount: 5, //總的頁數

       pageNum: 3,  //當前顯示的頁號

       data: [ {},{}...{} ]              //當前頁中的數據

  }

(1)MySQL如何查詢出符合條件的總的記錄數量

  SELECT  COUNT(*)  FROM jd_product  WHERE...;

  查詢結果集中有一行一列的數據

(2)PHP如何計算頁面的總數量：

   ceil( recordCount / pageSize )   //上取整函數

(3)MySQL如何實現查詢指定頁面中的記錄

  提示：不一樣的數據庫實現分頁查詢的SQL各不相同！

  SELECT * FROM jd_product WHERE ... LIMIT start, count;

  LIMIT: 限制，結果集中從哪一行開始獲取數據(從0開始)，最多要多少行。

  第1頁： LIMIT 0, 8      01234567

  第2頁： LIMIT 8, 8      89101112131415

  第3頁： LIMIT 16, 8

  第4頁： LIMIT 24, 8

  第5頁： LIMIT 32, 8

  第pageNum頁：

              LIMIT (pageNum-1)*pageSize, pageSize

 

       1  2  3

  1  2  3  4

1 2  3  4  5  

2 3  4  5

3 4  5

 

4.關係型數據庫中兩個表間的關係——數據設計理論

  (1)一對一關係

     能夠在任一表中添加引用對方表的外鍵列

      

  (2)一對多關係

       部門vs員工、板塊vs帖子、商品vs留言、分類vs商品

       只能在多方表中添加外鍵列，引用一方的主鍵

      

  (3)多對多關係

       商品vs購物車、學生vs課程、工人vs車間、員工vs項目

     只能再建立一箇中間表，有兩個外鍵列，分別指向每一個表的主鍵

      

 

 

5.如何訪問異步加載的頁頭和頁尾中的元素：

  事件綁定：  能夠委託給DOM樹上已有的父元素

  HTML內容操做：

       $(...).load('x.php', function(){

              //異步請求完成後，再處理後加載的DOM元素

       })

 

6.SQL中的多表查詢

  CREATE TABLE dept( did INT, dname VARCHAR(32) );

  INSERT INTO dept VALUES

       (10, '研發部'),

       (20,'市場部');

 

  CREATE TABLE emp( eid INT, ename VARCHAR(32), deptId INT );

  INSERT INTO emp VALUES

       (1, 'Tom', 10),

       (2,'Mary', 10),

       (3,'John', 20);

  請查詢出每一個員工姓名及其所在部門名稱：

       SELECT ename, dname FROM emp, dept;  //該語句會獲得一個笛卡爾積：從每一個表中任取一行記錄，與另外一表中的每一行記錄匹配，配對總可能數：m * n

       SELECT ename, dname FROM emp, dept

       WHERE deptId = did;

  跨表查詢：查詢獲得的結果集來自於多個表！爲了不產生笛卡爾積，必須有兩個表的相等條件！