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;

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，仿写示例

(3)看API Document，实现项目案例

var c = new FusionCharts({

type: 'column2d',

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

'90%',

height: '500',

dataSource: {

data: list

}

});

c.render();