HTML5 8

1. HTML5階段項目——京東用戶中心

  須要實現的功能點：

  (1)用戶註冊

  (2)查看購物車後肯定下單，生成訂單

  (3)進入用戶中心查看本身的全部訂單

  (4)進入用戶中心查看本身的消費統計

  (5)進入用戶中心參與幸運抽獎

 

  須要使用到的技術：

  MySQL、PHP、AJAX、Video、表單2.0、WebStorage、Canvas繪圖、SVG繪圖

 

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

  (1)編寫PHP，user_add.php，接收客戶端提交的uname和upwd，添加到數據庫中，返回{"code":1,"userId": 3}

  (2)編寫HTML，register.html，實現異步的用戶註冊，成功後跳轉到產品列表頁

  (3)修改HTML，productlist.html，用戶登陸成功後把用戶名和編號保存到sessionStorage中

 (4)修改HTML，shoppingcart.html，從sessionStorage中讀取登陸用戶的信息，若沒有，則跳轉到productlist.html讓用戶登陸；如有則顯示出「歡迎回來：XXX」。點擊「去結算」按鈕後跳轉到addorder.html

  (5)建立HTML，addorder.html，異步請求頁頭和頁尾，若沒有用戶登陸信息，則跳轉到productlist.html讓用戶登陸

  (6)修改HTML，addorder.html，根據登陸信息，異步請求當前登陸用戶購物車中的內容，顯示在「下單頁面」中

 (7)編寫SQL，添加新的表                          

       建立訂單信息表：jd_order( oid, rcvName, addr, price, payment(付款方式1/2/3/4)，orderTime, status(訂單狀態1/2/3/4/5/6)，userId )

       建立訂單詳情表：jd_order_detail ( did, orderId, productId, count )

  (8)編寫PHP，order_add.php，接收客戶端的rcvName, addr, price, payment(付款方式1/2/3/4)，userId，執行以下的SQL:

    SQL1：向jd_order表中插入一行記錄，獲得oid

       SQL2：讀取當前用戶購物車中的條目，

       SQL3：（循環）針對每一個購物車項執行INSERT，插入到jd_order_detail

       SQL4：刪除當前用戶購物車中的條目

       返回：{"code":1, "orderId": 9234234134}

  (9)修改HTML，addorder.html，把全部的用戶輸入/選擇全放在<input type="hidden">，點擊「提交訂單」後，異步提交給服務器，獲取到訂單編號，跳轉到addorder_succ.html，提示下單成功

  (10)建立HTML，usercenter.html，異步請求頁頭和頁尾

  (11)修改HTML，usercenter.html，主體部分實現佈局：「父容器寬度不定，左側定寬210px，右側佔剩餘所有」—— 面試題

  (12)修改HTML，usercenter.html，點擊左側的附加導航(affix)，實現右側內容的切換

  (13)建立PHP，my_order.php，接收客戶端提交的用戶編號，獲取該用戶對應的全部訂單，以JSON格式返回：[{},{}...] —— 難點

      SQL1： SELECT * FROM jd_order WHERE userId=?

       foreach($list as $order){ 

              SQL2：SELECT * FROM jd_product WHERE pid IN (SELECT productId FROM jd_order_detail WHERE orderId=?)

              $order['productList']  = mysqli_fetch_all($result);

       }

  (14)修改HTML待頁面加載完成，異步請求當前用戶全部的訂單，顯示TABLE中

  (15)建立PHP，buy_stat.php，根據客戶端提交的用戶編號，統計出該用戶過去12個月裏每一個月的消費總金額，以JSON形式 —— 使用僞造數據

  (16)修改HTML，usercenter.html，異步請求消費統計數據，使用FusionCharts工具繪製消費統計圖表

 -------------------文華老師的進度線----------17：20------------

 (17)修改SQL，添加表jd_lottery( lid, userId, lotteryTime, grade )，插入以下三行數據：

       1     10    1401234567890   2

       2     10    1411234567890   4

       3     10    1421234567890   4

  (18)建立PHP，lottery_stat.php，接收客戶端提交用戶編號，返回該用戶的抽獎統計信息，形如：{"uid":10, "total":21, "used": 3}

       SQL1：計算指定用戶的訂單總額

              SELECT SUM(price) FROM jd_order WHERE userId=?

       SQL2：計算指定用戶已經抽獎的次數

              SELECT COUNT(*) FROM jd_lottery WHERE userId=?

  (19)修改HTML，usercenter.html，「幸運抽獎」界面中有個統計按鈕，待頁面加載完成，異步請求抽獎信息，若用戶還有剩餘抽獎次數，按鈕可用，使用Canvas繪製出抽獎的圓盤和指針

  (20)點擊「開始抽獎」，則圓盤開始旋轉，而指針保持正直不動

       提示：旋轉deg度，繪製圓盤，再逆向旋轉deg度，繪製指針

 

 

 

 

 

2.面試題：如何實現特定佈局：父容器寬度不定，左側定寬210px，右側佔剩餘所有

  .parent {   }

  .left {

      float: left;

       width: 210px;

  }

  .right {

       margin-left: 210px;

  }

 

 

3.經常使用的第三方圖表繪製工具

  (1)Chart.js，基於Canvas，開源，提供了8圖表

  (2)EChart.js，百度提供的，開源的，手冊簡單易懂

  (3)FusionChart.js，收費的，提供了90+種圖表還有幾千張地圖

 

 第三方圖表繪製工具FusionChart.js的使用：

  (1)找官網，看說明

       http://www.fusioncharts.com/

       收費的圖表繪製工具，根據底層瀏覽器的兼容性選擇不一樣的技術實現，如SVG、Flash等。提供了90+種圖表還有幾千張地圖，同時實現了響應式應用。

  (2)找Demo，仿寫示例

1. Installing FusionCharts Suite XT for your application
2. Converting your data to a JSON or XML format
3. Including the FusionCharts Suite XT JavaScript library in your HTML page
4. Creating a container <div> for the chart
5. Using the new FusionCharts() constructor to create the chart instance, and then calling the render()method

  (3)看API Document，實現項目案例

   var c = new FusionCharts({    

      type: 'column2d',

      renderAt: 'container-buy-stat-svg',

      width: '90%',

      height: '500',

      dataSource: {

        data: list

      }

    });

    c.render();