码迷,mamicode.com
首页 > Web开发 > 详细

HTML5 7

时间:2017-07-18 13:42:31      阅读:353      评论:0      收藏:0      [点我收藏+]

标签:去掉   登录   stat   独立   socket   func   lsp   用户名   客户端程序   

 

 

今日目标:

(1)补充小知识点:localStorage的事件

(2)HTML5新特性之十——WebSocket

(3)HTML5阶段项目 —— 目前所有知识的大综合演练

 

 

1.如何得知localStorage中数据的修改?

  localStorage中任何数据的修改,都会触发一个事件:

  window.onstorage = function(){  }

 

2. HTML5新特性之十——WebSocket

  提示:重在概念的理解

  HTTP协议:是基于“请求-响应”模型的协议,客户端发起一个请求,服务器就要返回一个响应,请求消息和响应消息是一一对应的!没有请求就没有响应!在一些特别的应用场景下(如实时走势图,在线聊天室),只能使用“定时器+AJAX”不停的向服务器发起请求以获得最新的数据——“心跳请求”,解决方案并不完美:心跳过快服务器压力过大,过慢导致数据实时性差。

 WebSocket协议:是基于“广播-收听”模型的协议,只要客户端连接到服务器上,就不再断开,一方可以发送多条消息,对方只接收而不发送,可以解决上述应用中的问题。这个协议本身的问题:客户端与服务器是“永久连接”,导致服务器可以同时连接的客户端数是有限的!

 

基于WebSocket协议的应用必需两套程序:

(1)服务器端程序:                

       可使用PHP、Java、Node.js等语言编写

       注意:PHP编写的WebSocket服务器独立运行的,无需依赖Apache! 

       c:/xampp/php/php.exe  e:/socket_server.php

       记得修改php.ini文件的907行!去掉开头的分号

       extension=php_sockets.dll

(2)客户端程序:

       可使用PHP、Java、HTML5/JavaScript等语言编写

    使用HTML5提供的WebSocket对象创建WS客户端:

       var wsClient = new WebSocket(‘ws://地址:端口‘);

       wsClient.onopen = function(){      //连接成功

              ws.send(‘msg‘);                    //发送消息

              ws.onmessage = function(e){  //接收消息

                     //e.data

              }

       }

WebSocket是一种新的通讯协议,与HTTP协议不同,是基于“广播-收听”模型的协议,适用于一些特殊的应用场合,如聊天室、实时走势获取

 

 

3.“京东商城项目”已经实现的功能点

  (1)首页

  (2)产品列表页

  (3)产品详情页

  (4)登录页

  (5)注册页

  (6)购物车页

  (7)订单生成页

  (8)用户中心页

 

4.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,提示下单成功

 

HTML5 7

标签:去掉   登录   stat   独立   socket   func   lsp   用户名   客户端程序   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!