首页 > 代码库 > HTML5 8
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，仿写示例
- Installing FusionCharts Suite XT for your application
- Converting your data to a JSON or XML format
- Including the FusionCharts Suite XT JavaScript library in your HTML page
- Creating a container <div> for the chart
- 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();
HTML5 8