服务器 9

Posted 2020-09-28 Hale.Proh

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;

  跨表查询：查询得到的结果集来自于多个表！为了避免产生笛卡尔积，必须有两个表的相等条件！