1.AJAX阶段项目——京东购物车
功能点描述
(1)异步的用户登录
(2)异步的显示商品列表,实现分页显示
(3)异步的添加到“我的购物车”
(4)查看“我的购物车”
(5)异步的修改“我的购物车”
所用技术:
MySQL、PHP、HTTP、AJAX、jQuery、Cookie
实现步骤: SQL => PHP => HTML/JS
(1)编写SQL:jd.sql,数据库名jd,
创建表:jd_user(uid, uname, upwd)
创建表:jd_product(pid, pname, price, pic)
创建表:jd_cart( cid, userId )
创建表:jd_cart_detail(did, cartId, productId, count)
(2)编写PHP:data/header.php,包含页头必需的HTML片段
(3)编写PHP:data/footer.php,包含页尾必需的HTML片段
(4)编写HTML:productlist.html,待页面加载完成,异步加载页头和页尾。
(5)编写PHP:user_login.php,接收客户端提交的uname和upwd,执行数据库验证,返回 {"code":1, "uname":"qiangdong", "uid":10} 或 {"code":2, "msg":"用户名或密码错误" }
(6)修改HTML:productlist.html,默认显示出登录对话框,异步登录验证,失败则提示错误消息,成功则清除掉对话框,显示“欢迎回来:xxxx”
(7)编写PHP:product_select.php,向客户端输出所有的产品信息,以JSON格式:[{},{},{},....]
(8)修改HTML: productlist.html,页面加载完后,异步请求产品;分页显示
(9)编写PHP:cart_product_add.php,接收客户端提交uid、pid,添加入购物车详情表,若已有该商品,则购买数量+1 —— 需要执行多条SQL语句
SQL1:根据用户编号查询出购物车编号
SQL2:若没有购物车编号则创建一个购物车,得到购物车编号
SQL3:根据购物车编号和产品编号查询是否已买过该商品
SQL4:已购买过则购买数量+1
SQL5:未购买过则添加购买记录,数量为1
(10)修改HTML:productlist.html,点击每个商品下“添加到购物车”,异步把uid和pid提交给服务器,实现购物车添加,弹出成功提示消息,提示用户该商品已购物的数量。
(11)用户点击“查看我的购物车”,把loginUid和loginUname保存到Cookie中,跳转到shoppingcart.html
(12)修改shoppingcart.html,页面加载完成,从Cookie中读取loginUid和loginUname
(13)修改shoppingcart.html,页面加载完成,异步请求页头和页尾页面
(14)编写PHP,cart_detail_select.php,接收客户端提交的uid,查询出该用户购物车中所有的商品,返回:[{},{},...{}]
(15)修改HTML,shoppingcart.html,待页面加载完后,异步请求当前用户的购物车商品列表,显示在TABLE中
-------------------文华的进度线--------------------
(16)编写PHP:cart_detail_update.php,接收客户端提交的did和count,执行UPDATE,修改详情条目的购买数量,返回{"code":1,"count": 3}
(17)修改HTML,shoppingcart.html,为+和-按钮绑定事件监听,修改同级的input的value,异步提交给服务器
(18)编写PHP:cart_detail_delete.php,接收客户端提交的did,执行DELETE,删除该详情条目返回{"code":1 }
(19)修改HTML,shoppingcart.html,为“删除”按钮绑定事件监听,异步提交给服务器
2.表单序列化
$('#formId').serialize( );
jQuery中提供的表单序列化函数,可以把选定的表单中所有带name属性的输入域连同值转换为k=v形式,全部使用&符号拼接在一起,组成一个大的字符串,用于异步请求数据提交。
3.Web项目中的分页查询 —— 难点 & 重点
当一个页面需要呈现的数据很多时,不可能一次性全部显示,必须使用分页显示:
初始时显示第1页,用户点击某个页号,异步请求对应页中的内容。
分页查询客户端提交的请求消息形如:
GET /select.php?pageNum=3 HTTP/1.1
分页查询服务器返回的响应消息形如:
{
recordCount: 36, //满足条件的记录的总数
pageSize: 8, //页面大小,每页最多显示的记录数
pageCount: 5, //总的页数
pageNum: 3, //当前显示的页号
data: [ {},{}...{} ] //当前页中的数据
}
(1)MySQL如何查询出符合条件的总的记录数量
SELECT COUNT(*) FROM jd_product WHERE...;
查询结果集中有一行一列的数据
(2)PHP如何计算页面的总数量:
ceil( recordCount / pageSize ) //上取整函数
(3)MySQL如何实现查询指定页面中的记录
提示:不同的数据库实现分页查询的SQL各不相同!
SELECT * FROM jd_product WHERE ... LIMIT start, count;
LIMIT: 限制,结果集中从哪一行开始获取数据(从0开始),最多要多少行。
第1页: LIMIT 0, 8 01234567
第2页: LIMIT 8, 8 89101112131415
第3页: LIMIT 16, 8
第4页: LIMIT 24, 8
第5页: LIMIT 32, 8
第pageNum页:
LIMIT (pageNum-1)*pageSize, pageSize
1 2 3
1 2 3 4
1 2 3 4 5
2 3 4 5
3 4 5
4.关系型数据库中两个表间的关系——数据设计理论
(1)一对一关系
可以在任一表中添加引用对方表的外键列
(2)一对多关系
部门vs员工、板块vs帖子、商品vs留言、分类vs商品
只能在多方表中添加外键列,引用一方的主键
(3)多对多关系
商品vs购物车、学生vs课程、工人vs车间、员工vs项目
只能再创建一个中间表,有两个外键列,分别指向每个表的主键
5.如何访问异步加载的页头和页尾中的元素:
事件绑定: 可以委托给DOM树上已有的父元素
HTML内容操作:
$(...).load('x.php', function(){
//异步请求完成后,再处理后加载的DOM元素
})
6.SQL中的多表查询
CREATE TABLE dept( did INT, dname VARCHAR(32) );
INSERT INTO dept VALUES
(10, '研发部'),
(20,'市场部');
CREATE TABLE emp( eid INT, ename VARCHAR(32), deptId INT );
INSERT INTO emp VALUES
(1, 'Tom', 10),
(2,'Mary', 10),
(3,'John', 20);
请查询出每个员工姓名及其所在部门名称:
SELECT ename, dname FROM emp, dept; //该语句会得到一个笛卡尔积:从每个表中任取一行记录,与另一表中的每一行记录匹配,配对总可能数:m * n
SELECT ename, dname FROM emp, dept
WHERE deptId = did;
跨表查询:查询得到的结果集来自于多个表!为了避免产生笛卡尔积,必须有两个表的相等条件!