menu
more_vert
HTML5 8

作者:dayu

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 newFusionCharts()constructor to create the chart instance, and then calling therender()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

原文地址:http://www.cnblogs.com/Hale-Proh/p/7199845.html



Processed Time:0.35078001022339

_REQUEST:
Array
(
    [0] => read
    [1] => 95763
)
_SESSION:
Array
(
    [fid] => 4
)