H5

时间 2019-11-30

标签 h5 繁體版

原文原文链接

第三阶段：php

AJAX - 8 —— 综合且容易出错html

HTML5新特性 - 7 —— 零散神不聚前端

Bootstrap - 5 —— 玩命儿被单词node

今日目标：mysql

(1)WebStorm的使用 —— 掌握git

(2)H5新特性之一——表单2.0 —— 掌握web

1.经常使用的前端开发软件面试

(1)小型软件：小巧启动快，功能简单sql

Editplus、Notepad++、VIM、Emacs数据库

(2)中型软件：

SublimeText

(3)中型软件：体积大启动慢，功能强大

Eclipse-Aptana、IntejIEDA-WebStorm、Dreamweaver

经常使用的Eclipse快捷键：

(1)Ctrl+Alt+↓ 复制当前行

(2)Alt+↑/↓ 向上/下移动当前行

(3)Ctrl+D 删除当前行

(4)Ctrl+/ 注释/取消注释当前行

(5)Ctrl+Alt+L 格式化当前文件

(6)Alt+鼠标左键进入多行编辑模式，ESC或左键退出

2.HTML5新特性 —— 十大新特性

(1)新的语义标签和属性

(2)表单新特性

(3)视频和音频

(4)Canvas绘图

(5)SVG绘图

(6)地理定位

(7)拖放API

(8)WebWorker

(9)WebStorage

(10)WebSocket

面试题：

HTML5新增了哪些标签？废弃了哪些标签？

HTML5新增了哪些标签属性？废弃了哪些标签属性？

3.HTML5表单新特性

(1)新的input type

(2)新的表单标签

(3)表单标签的新属性

4. HTML5表单新特性之——新的input type

HTML5以前已有的input type：

text、password、radio、checkbox、file、submit、reset、button、image、hidden

HTML5新增长的input type：

(1)email：邮件输入域，在表单提交时提供简单的邮箱格式验证，并弹出一个提示窗口(可定制内容不能定制样式)

(2)url：URL地址输入域，在表单提交时提供简单的URL地址格式验证，并弹出一个提示窗口(可定制内容不能定制样式)

(3)number：数字输入域，在表单提交时提供简单的数字格式验证，并弹出一个提示窗口(可定制内容不能定制样式)

(4)tel：电话号码输入域，在手机浏览器中弹出数字输入键盘

(5)search：搜索输入域，在手机浏览器中右下角呈现搜索按键

(6)range：范围选择控件，帮助用户在必定范围内选择一个数字

练习：实现一个调色板——11:40

(7)color：颜色选择控件，浏览器并未本身实现颜色选择框，而是使用操做系统自带的颜色选择控件

(8)date：日期选择控件，FF没有实现，推荐使用第三方插件代替，如jQueryUI-datepicker、laydate等

(9)month：月份选择控件，FF没有实现

(10)week：星期选择控件，FF没有实现

复习：

HTML5新特性：

(1)新的语义标签和属性

(2)表单新特性

1)新的input type——10个

email、url、number、tel、search、range、color、date、month、week

2)新的表单元素——4个

datalist、progress、meter、output

3)表单元素的新属性——12个

autocomplete、autofocus、placeholder、multiple、form

required、maxlength、minlength、max、min、step、pattern

(3)视频和音频

(4)Canvas绘图

(5)SVG绘图

(6)地理定位

(7)拖放API

(8)WebWorker

(9)WebStorage

(10)WebSocket

今日目标：

(1)视频和音频 —— 简单必须掌握

(2)Canvas绘图 —— 重点&难点

1.面试题：Flash被HTML5取代在哪些方面？

音频和视频 —— <video>和<audio>

绘图 —— <canvas>

动画/游戏 —— <canvas>+定时器

统计图表 —— <canvas>、<svg>

客户端数据存储 —— WebStorage

2.HTML5新特性——视频播放

HTML5提供了一个新的标签<video>标签，用于播放视频。该标签默认是一个300*150的inline-block。使用方法：

<video>

</video>

VIDEO元素/对象的属性：

(1)src：指定要播放的视频的资源路径

(2)autoplay：false，是否自动播放

(3)controls：false，是否显示播放控件，提示：不一样浏览器的播放控件外观不一样

(4)currentTime：0，当前播放的时间点（s）

(5)duration：60，影片总时长（s）

(6)ended：false，是否播放到结尾

(7)loop：false，是否循环播放

(8)muted：false，是否静音

(9)volume：1，音量设置（0~1），对象属性，不用于标签

(10)paused：当前是否处于暂停状态

(11)poster：''，指定视频第一帧播放前的电影海报

(12)preload：指定视频预加载方案，可取值：

auto：默认值，自动预加载视频的宽高、时长、第一帧内容、并缓冲了必定的时长

metadata：元数据，只预加载视频的宽高、时长、第一帧内容

none：不预加载任何内容

VIDEO对象的方法：

play()：开始播放

pause()：暂停播放

VIDEO对象的事件：

onplay：视频开始播放（可能多种缘由引发）

onpause：视频开始暂停（可能多种缘由引发）

onplaying:

练习：

(1)不使用video默认的播放控件，使用自定义的按钮，控制视频的播放和暂停

(2)不论何种缘由，影片一暂停即显示出广告图片；一播放广告图片就隐藏；提示：不能使用poster属性（影片海报只能在第一次播放以前显示一次）

午间思考：如何将video做为DIV的背景并自动播放？

复习：

HTML5新特性：

(1)新的语义标签和属性

(2)表单2.0

(3)视频和音频

(4)Canvas绘图 —— 重点

(5)SVG绘图

(6)地理定位

(7)拖放API

(8)WebWorker

(9)WebStorage

(10)WebSocket

JS绘图技术：

var ctx = c.getContext('2d');

//经常使用属性

ctx.fillStyle = 颜色/渐变对象

ctx.strokeStyle =颜色/渐变对象

ctx.lineWidth = 1

ctx.font = '10px sans-serif'

ctx.textBaseline = 'alphabetic'

ctx.shadowColor = 'rgba(0,0,0,0)'

ctx.shadowOffsetX = 0

ctx.shadowOffsetY = 0

ctx.shadowBlur = 0

//经常使用方法

(1)绘制矩形

ctx.fillRect(x, y, w, h)

ctx.strokeRect(x, y, w, h)

ctx.clearRect(x, y, w, h)

(2)绘制文本

ctx.fillText(txt, x, y)

ctx.strokeText(txt, x, y)

ctx.measureText(txt).width

(3)绘制路径

(4)绘制图像

今日目标：

(1)使用Canvas绘制路径和图像 —— 重点&难点

(2)使用第三方绘图工具 —— Chart.js，掌握

1.使用Canvas绘制路径(Path)

提示：Canvas中的路径概念与Photoshop中钢笔工具相似的。路径自己是不可见的，有三个用途：描边、填充(闭合)、裁剪(闭合)

Canavs中与路径绘制相关方法：

ctx.beginPath() //开始一条新路径

ctx.closePath() //闭合路径，让最后一个锚点自动链接到第一个锚点

ctx.moveTo(x, y) //移动到指定点

ctx.lineTo(x,y) //从当前点到指定点绘制直线路径

ctx.arc() //绘制拱形路径

ctx.ellipse() //绘制椭圆路径

ctx.bezierCurveTo() //绘制贝塞尔曲线路径

----------------------------------------------

ctx.stroke()

ctx.fill()

ctx.clip()

练习：

(1)使用直线路径绘制坐标轴

(2)使用圆拱+定时器绘制能够前进的进度条

(3)建立一个函数：openMouth()，在画布上绘制以下的图形：

(4)建立一个函数：closeMouth()，在画布上绘制以下的图形：

(5)使用定时器，不停的调用openMouth()和closeMouth()

复习：

HTML5新特性：

1.新的语义标签和属性

2.表单2.0

3.视频和音频

4.Canvas绘图

5.SVG绘图

6.地理定位

7.拖放API

8.WebWorker

9.WebStorage

10.WebSocket

Canvas绘图使用方法：

var ctx = c.getContext('2d');

//绘制矩形

ctx.fillRect() ctx.strokeRect() ctx.clearRect()

//绘制文本

ctx.fillText() ctx.strokeText() ctx.measureText()

//绘制路径

ctx.beginPath() ctx.closePath()

ctx.moveTo() ctx.lineTo() ctx.arc()

ctx.stroke() ctx.fill() ctx.clip()

//绘制图像

ctx.drawImage()

//图形图像变形

ctx.translate() ctx.rotate() ctx.scale()

ctx.save() ctx.restore()

今日目标：

(1)补充：Canvas小知识点

(2)SVG绘图技术 —— 重点

(3)第三方2D绘图工具 —— Two.js —— 了解

1.如何等待全部图片加载完成后，才开始绘图？

多张图片绘制须要按照特定的顺序，而加载完成顺序是彻底没法预测，只能等待全部图片加载完成，才能开始绘制。

/***************************

//典型的错误代码

var img1 = new Image();

img1.src = "";

img1.onload = function(){

ctx.drawImage(img1, x, y);

}

var img2 = new Image();

img2.src = "";

img2.onload = function(){

ctx.drawImage(img2, x, y);

}

******************************/

var progress = 0; //加载进度 0~100

var img1 = new Image();

img1.src = "";

img1.onload = function(){

progress += 80;

if(progress===100){

startDraw();

}

var img2 = new Image();

img2.src = "";

img2.onload = function(){

progress += 20;

if(progress===100){

startDraw();

}

2.如何为Canvas上的图形/图像绑定事件监听？——难点

网页只能为DOM元素绑定监听函数，Canvas绘图技术中只要一个Canvas元素，其它图形图像都不是元素——没法进行事件绑定！——

解决办法：为Canvas绑定监听函数，获取事件发生的坐标，是否处于目标图形/图像所在范围内——只能为规则的图形“绑定”监听

Adobe Photoshop：处理位图——每幅图像由点(rgb)组成，善于描述颜色的细节变化，可用于照片等领域——放大后会出现马赛克失真。

Adobe Illustrator：处理矢量图——每幅图像由线条(须要指定方向、值)，能够无限缩放而不失真——不善于描述颜色的细节变化。

3.HTML5新特性之五——SVG绘图

	Canvas绘图	SVG绘图
绘图类型	位图	矢量图
缩放	失真	不失真
颜色细节	丰富	不够丰富
应用领域	照片、游戏	统计图、图标、地图
内容	JS绘制	每一个图形都是标签
事件绑定	不方便	方便

Scalable Vector Graphiph，可缩放的矢量图，此技术在2000年就已经存在了，独立于网页的一门技术；HTML5以后，归入了HTML5标准标签库，并进行了必定的瘦身。

SVG技术的使用方法：

(1)HTML5以前的使用方法：

SVG标签不属于HTML4或XHTML标签，只能编写在独立的XML文件中，首先编写一个SVG文件（本质是一个XML文件），而后在HTML中使用IMG/IFRAME/OBJECT/EMBED等标签引入.svg文件

(2)HTML5以后的使用方法——H5已经把SVG标签采纳：

在HTML文件中直接使用SVG相关标签便可

练习：

(1)使用SVG矩形绘制一个国际象棋的棋盘——使用HTML中的rect标签

(2)使用SVG矩形绘制一个国际象棋的棋盘——使用JS动态建立rect标签

4.使用SVG绘制矩形

注意：

(1)SVG图形的样式能够用HTML属性赋值，也可使用CSS形式，但不接受普通的CSS属性！只能使用SVG元素的专有样式属性。

(2)SVG图形的属性不属于HTMLDOM标准，只能使用核心DOM方法操做其属性： rect.setAttribute('','')

(3)使用JS动态建立SVG元素，1)用svg.innerHTML ='' 2)用document.createElementNS('', '')，不能使用document.createElement()

(4)SVG元素的nodeName都是纯小写形式！与普通的HTML元素不一样！

练习：

(1)在SVG画布上绘制一个矩形，从左移动到右，同时填充颜色还在不停的随机改变

(2)根据以下的JSON数据，绘制柱状统计图——有坑！！

[

{"label": "1月", "value": 350},

{"label": "2月", "value": 300},

{"label": "3月", "value": 450},

{"label": "4月", "value": 380}

]

5.使用SVG绘制圆形

练习：

(1)建立30个大小随机、颜色随机、透明度随机的圆形

提示：使用createElementNS()建立元素,setAttribute()修改属性

(2)点击某个圆形，其慢慢变大、变淡...... 直至消失，从DOM树上删除该元素

(3)实现“走马观花”效果，点击svg画布的某处，即在此处生成一个圆形，当即变大、变淡...直至消失

6.使用SVG绘制椭圆

7.使用SVG绘制直线

注意：全部的SVG图形默认只有填充色，没有描边色。

练习：使用line建立以下的图标：

提示：能够把多个元素放在一个<g></g>小组中，能够自动继承小组的公共属性

8.使用SVG绘制折线

练习：使用折线绘制以下的图标

9.使用SVG绘制多边形 17:25

练习：使用多边形绘制以下的图标：

10.使用SVG绘制文本

提示：传统的标签不能置于SVG内部！同理，SVG的标签也不能放在其它元素内部！

11 .使用SVG绘制图像

提示：在SVG中绘制图像使用image元素，引入位图后，此SVG图片放大后会失真。

12.如何使用渐变效果

<defs>

</linearGradient>

</defs>

</svg>

课后练习：

1) 假设前端页面获取到后台返回了以下的JSON数据：

'[{"label":"HTML",value:3}, {"label":"CSS",value:5},....]'

根据这段JSON字符串，绘制下图：

3)自学two.js工具的使用，理解其做用，仿写官方示例代码，学会使用方法，实现以下效果，月亮绕着地球转，地球绕着太阳转：

复习：

HTML5新特性

1.新的语义标签

2.表单2.0

3.视频和音频

4.Canvas绘图

5.SVG绘图

6.地理定位

7.拖放API

8.WebWorker

9.WebStorage

10.WebSocket

SVG的使用：

绘制矩形

绘制圆形

绘制椭圆

绘制直线

绘制折线

绘制多边形

绘制文本

绘制图像

贝塞尔路径

特效对象

<defs>

</linearGradient>

</defs>

</svg>

今日目标：

(1)补充：SVG相关小知识点

(2)地理定位——掌握

(3)拖放API——重点&小难点

1.SVG中定义特效对象——渐变特效

2.SVG中定义特效对象——滤镜(filter)——高斯模糊路径

<defs>

</filter>

</defs>

更多滤镜效果及使用方法：

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter

前端领域中可用的绘图技术：

(1)Canvas —— 2D位图

(2)SVG —— 2D矢量图

(3)WebGL —— 2D/3D图

绘制统计图，能够选用上述任意一种！但三种技术可供调用的代码不同！

3.第三方绘图工具库——Two.js —— 了解&重点在自学过程

(1)看官网，找介绍

Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl.

提供了一套统一的接口，可用于在svg、canvas、webgl中实现常见图形的绘制，如矩形、三角形、圆形.....

不足：为了兼容三种技术，必须舍弃某个技术所专有的效果；效率上有待提升。

(2)找示例，写Demo

(3)查API Document，在项目中加以应用

4.HTML5新特性之六——地理定位

地理定位：使用JS获取浏览器当前所在的地理坐标，实现LBS（Location Based Service，基于定位的服务），具体数据包括：

经度：longitude

纬度：latitude

海拔：altitude

速度：speed

技术上如何获取浏览器所在的定位信息：

(1)手机中的浏览器

靠手机内置的GPS芯片数据，精度在“米”级

靠手机与之通信基站数据，精度在“千米”级

(2)PC中的浏览器

靠IP地址反向解析，精度在“千米”级

HTML5新增了用于获取浏览器所在定位的对象：

window.navigator.geolocation {

getCurrentPosition: fn 用于获取当前定位信息

watchPosition: fn 不停的监视定位信息的改变

clearWatch: fn 清除监视

}

------------------------------------

navigator.geolocation.getCurrentPosition(

funcntion(pos){

console.log('定位成功');

}, function(err){

console.log('定位失败');

}

)

5.如何在页面中使用百度地图 —— 扩展小知识

从map.baidu.com下点击“地图开放平台”：

目前官网： http://lbsyun.baidu.com/

JS-API使用手册： http://lbsyun.baidu.com/index.php?title=jspopular

第三方工具的学习步骤：

(1)打开官网，找定义，功能说明

http://lbsyun.baidu.com/

能够基于百度地图进行Android、iOS、Web应用开发

http://lbsyun.baidu.com/index.php?title=jspopular

(2)找示例程序

(3)找API文档，编写本身的应用

使用百度地图API步骤：

(1)注册百度开发者帐号

(2)使用开发者帐号申请建立一个Web应用帐号，获取一个访问百度地图的密钥（AccessKey）

http://lbsyun.baidu.com/apiconsole/key

(3)编写HTML网页，出示当前网站的访问密钥，调用百度地图API

</script>

//建立地图实例

var map = new BMap.Map("container");

//建立一个指定的点 —— 文博大厦

var p = new BMap.Point(116.300982,39.915907);

//以指定点为中心显示地图

map.centerAndZoom(p, 17);

6.HTML5新特性之七 —— 拖放API —— 重点&小难点

Drag：拖动

Drop：释放

在HTML5以前只能使用鼠标事件模拟出“拖放”效果；HTML5专门为拖放提供了7个事件句柄。

(1)拖动的源对象(source)能够触发的事件：

dragstart：拖动开始

drag：拖动进行中

dragend：拖动结束

源对象的拖动过程：dragstart x 1 + drag x n + dragend x 1

练习：实现一个能够随着鼠标拖动而移动的小飞机

(2)拖动的目标对象(target)能够触发的事件：

dragenter：拖动着进入

dragover：拖动着在目标对象上方

dragleave：拖动着离开

drop：松手/释放/松开

目标对象的进入/离开过程：

dragenter x 1 + dragover x n + dragleave x 1

目标对象的进入/释放过程：

dragenter x 1 + dragover x n + drop x 1

注意：必须阻止dragover的默认行为！不然drop事件没法触发！

练习：

(1)垃圾桶初始时半透明；拖动小飞机进入垃圾桶变为不透明，离开后从新半透明，在垃圾桶上方松手也变为半透明。

提示：须要用到目标对象的四个事件

(2)一个垃圾桶，下方有一个容器(div#container)，其中有三个小飞机，拖动某个小飞机到垃圾桶上方，则容器中删除此小飞机

提示：须要用到源对象和目标对象的多个事件

7.如何在拖动的源对象和目标对象间传递数据

如何在7个事件间传递数据？

源对象事件——3个：

目标对象事件——4个：

(1)方法一：使用全局变量 —— 全局对象污染

(2)方法二：使用拖放事件对象的dataTransfer属性

说明：dataTransfer，用做数据传递/转移，看做“拖拉机”

源对象触发事件时保存k-v数据：

src.onxxx = function(e){

e.dataTransfer.setData( 'key', 'value' );

}

目标对象触发事件时获取k-v数据：

target.onxxx = function(e){

var value = e.dataTransfer.getData( 'key' )

}

课后练习：英雄选择

要求：

拖动某架飞机到目标区域，则在上方显示出该飞机；下方该飞机图消失；替换选中区域已有的飞机。

拖动另外一架飞机到目标区域，则显示出该飞机，以前选中的飞机变为从新回到待选区域。

复习：

HTML5新特性重要程度(10)

1.新的语义标签 10

2.表单2.0 7

3.视频和音频 8

4.Canvas绘图 9

5.SVG绘图 9

6.地理定位 1

7.拖放API 4

8.WebWorker 4

9.WebStorage 9

10.WebSocket 2

拖放API——七个事件：

源对象能够触发的事件：

dragstart：

drag：

dragend：

目标对象能够触发的事件：

dragenter：

dragover： —— e.preventDefault()

dragleave：

drop：

今日目标：

(1)扩展：如何在网页中拖拽显示客户端的图片

(2)WebWorker

(3)WebStorage

1.面试题：如何在服务器端下载的网页中显示客户端图片？

通常状况下，网页只能显示服务器上的图片；

HTML5中，能够实现用户拖拽一张本地的图片显示在服务器端下载的网页中。

container.ondrop = function(e){

var f0 = e.dataTransfer.files[0];

var reader = new FileReader();

reader.readAsDataURL(f0);

reader.onload = function(){

///读取完成，数据在reader.result中

}

HTML5中提供的用于文件输入输出(I/O)的对象：

File：表明一个文件/目录对象

FileList：表明一个文件列表（类数组对象）

FileReader：用于从文件中读取内容

FileWriter：用于向向文件写出内容

2.面试题：Chrome浏览器的线程模型是怎样的？

程序：计算机能够执行的代码，存在于磁盘中——静止的

进程：把程序调入到内存中，等待被CPU执行——活动的

线程：是CPU执行进程代码的基本单位——生产任务

面试题：进程和线程间的关系？

进程是操做系统分配内存的基本单位。

线程处于进程内部，是CPU执行代码的基本单位。

一个进程中至少有一个线程，也能够有多个。

多个线程间并发执行——宏观上看是“同时”执行，微观上看是“轮流”执行。

Chrome中的线程模型：

(1)Chrome中发起HTTP请求最多可使用6个并发的线程；

(2)Chrome中负责向页面中执行绘制任务(执行HTML/CSS/JS代码)的只有1个线程——UI主线程。

复习：

见思惟导图

今日目标：

(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，根据登陆信息，异步请求当前登陆用户购物车中的内容，显示在“下单页面”中

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，usercenter.html，待页面加载完成，异步请求当前用户全部的订单，显示TABLE中

2.面试题：如何实现特定布局：父容器宽度不定，左侧定宽210px，右侧占剩余所有

.parent { }

.left {

float: left;

width: 210px;

}

.right {

margin-left: 210px;

}