1:首页
- 1,静态html5+css做好基本样式
html5,css,jQery, sass
- 2,jsonp的方式src引入模拟的json数据//这里用的jsonp方式拿数据,详情有使用ajax
遍历json数据:
let data = like['msg']; //获取json数据列表
let like_lists = document.querySelector('.like_lists'); //获取ul便签
//通过循环遍历出后台收据,每循环一次就通过js的dom生成节点,依次插入标签中。并附上类名与id。
2:跳转详情 ajax异步请求
- 关键:indexOf,continue ajax
//首页给a标签绑定一个宝贝的唯一id,点击跳转详情页,通过herf发送这条数据
a1.href = `./front/pages/detail_page.html?id=${itemId}`;
//详情接受地址数据
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]);
return null; //返回参数值
}
//ajax请求json数据,indexOf判断列表是否包含次数据。
for (let i = 0; i < data.msg.length; i++) {
// let data = xq['msg'][i]['itemId'];
if (data.msg[i]['itemId'].indexOf(id) === -1) { /不包含id
continue; //跳出 //多个
//如果不包含就跳出,不打印。*注意要添加循环列表的索引值i
}
}
3:详情页遍历
-
使用到 jQuery sass gulp
主图部分,小盒子里的图片,通过循环给每个img的src更换图片。当鼠标移入小盒子里时,大盒子和放大镜里img的src更换成小盒子里的src。
for (let i = 0; i < imgBtn.length; i++) {
imgBtn[i].onmouseover = function() {
oBig.children[0].src = imgBtn[i].childr.src;
oSmall.children[0].src = imgBtn[i].chi[0].src;
}
}
let imgBtn = document.querySelectorAll('.samll_box'); //5个小盒子
let oSmall = document.getElementById('oSmall'); //盒子 里面有img
let oBig = document.getElementById('oBig');
oSmall.children[0].src = imgBtn[0].children[0].src;//默认5小盒子里的第一个展示在大盒子上
4:登录 注册 页面 模块化
-
使用到 PHP mysql jQuery sass gulp ajax localStorage
注册:
- 使用到jQuery插件,方便获取标签,而且它的选择器很方便。
- 当鼠标获取input焦点时触发focus事件,提示按正则要求输入
- 鼠标离开时触发blur事件,判断inpu的val()是否为空,是否满足正则条件,如果条件符合正则要求切不为空则提示,该用户名可注册
- 点击注册时,ajax提交后台,如果该用户名已别注册则返回一个提示"该用户名已被注册"
- 注册完成后,使用setTimeout()延迟3s打开登录界面
登录:
- 使用到jQuery插件,方便获取标签,而且它的选择器很方便。
- 构造函数,通过prototype继承方法 ,触发登录事件时,执行函数。判断用户名与密码是否正确
- 登录成功,将用户名保存本地,并跳转首页
localStorage.setItem("username", $('#username').val());
- 首页跳转加载时
onload
触发下面的函数获取登录成功时保存本地的用户名,并展示
load_data() {
var theme = localStorage.getItem("username");
if (theme == null || theme == "") {
$('.login_show').hide();
$('.unlogin').show();
} else {
$('.login_show').show().children('.login_name').text(theme).css('color', 'red')
$('.unlogin').hide();
}
}
- 点击退出时,触发函数,清除本地用户名和
load_data()
函数,刷新局部
exitu() {
localStorage.removeItem("username");
//刷新部分
this.load_data();
}
5:添加购物车思路
-
使用到 jQuery sass gulp ajax cookie
-
点击详情页
购物车
触发事件。执行函数,将次宝贝id存入cookie保存,并提示添加购物车完成 -
当用户点击
进入购物车
按钮。触发事件,执行函数,将cookie的value值遍历出来,同ajax异步请求json文件,indexOf判断筛选。将包含的商品价格 图片 展示与页面。 -
编写计算器。进行数量 ,价格计算.
注意点:
最后会与结算的计算器调用的函数必须要在ajax里面写或者调用,不然获取不了那些生成的元素,从而得不到里面的数据!
购物车进阶版本
-
上面思路,触发加入购物车事件后,商品直接存入cookie,没有与用户名绑定,用户体验度极差。以下是用户与商品id绑定思路!
字典对象方法
var dic={
admin:[1,2,3],
nihaoya:[4,5,6]
}
// 1、获取本地json串 -- String str = Local.getItem("one");"{admin:["1","2","3"], admin1:[shopcar],admin2:[]}"
// 2、把json串转换成字典 -- Map dic = JSONObject.parse(str); {admin:["1","2","3"],admin1:[shopcar],admin2:[]}
// 3、获取自己的购物车数据 -- List shopCar = dic[admin]; ["1","2","3"]
// 4、把需要添加到购物车的