map字典,储存cookie,切换账户,展示购物车不同商品
程序员文章站
2022-05-15 13:32:50
1:首页 1,静态html5+css做好基本样式 html5,css,jQery, sass 2,jsonp的方式src引入模拟的json数据//这里用的jsonp方式拿数据,详情有使用ajax 遍历json数据: 2:跳转详情 关键:indexOf,continue ajax js //首页给a标 ......
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、把需要添加到购物车的商品赋值给shopcar -- shopcar.add(data);["1","2","3","4"] // 5、把dic转换成json -- string json = jsonobject.tojsonstring(dic); {admin:["1","2","3"],admin1:[shopcar],admin2:[]}" // 6、保存json到本地 -- local.saveitem("one",dic);
var locaname = localstorage.getitem('username'); var li = []; //购物车 var dictionary = {}; //创建一个空对象 if (!getcookie(0)) { // li = dictionary[locaname]; if (dictionary[locaname] === undefined) { dictionary[locaname] = li; } else { var dic = json.parse(getcookie(0));cookie 并解析 // li = dic[locaname]; //将对应字典里key的v值给自己的购物车 if (dic[locaname] !== undefined) { li = dic[locaname]; } } if (!getcookie(0)) { li.push(data.msg[i]['itemid']); dictionary[locaname] = li; var dobj = json.stringify(dictio } else { li.push(data.msg[i]['itemid']); dic[locaname] = li; var dobj = json.stringify(dic); } // li.push(data.msg[i]['itemid']); // setcookie(i, data.msg[i]['itemid' setcookie(0, dobj, 7);
注意点
:函数执行开始时,判断cookie是否有上一次存储的值,如果有,就赋值给dic,如果没有就得声明一个空对象,然后将list赋值给它!触发事件时也需要判断。存储json,读取时相同名。
$.ajax({ //请求方式为get type: "get", //json文件位置 url: "../../data/xqq.json", //返回数据格式为json datatype: "json", //请求成功完成后要执行的方法 success: function (data) { // console.log(dictionary[locaname]); // 1、获取本地数据dictionary {name1:[shopcar],name2:[]} // 2、获取自己的购物车数据 dictionary[locaname] // 3、赋值给一个list var li=dictionary[locaname] // 4、list插入需要加入到购物车的数据 li。add(data) // 5、把list赋值给自己的购物车数据 dictionary[locaname]=li // 6、保存dictionary local。save // 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、把需要添加到购物车的商品赋值给shopcar -- shopcar.add(data); ["1","2","3","4"] // 5、把dic转换成json -- string json = jsonobject.tojsonstring(dic); "{admin:["1","2","3"],admin1:[shopcar],admin2:[]}" // 6、保存json到本地 -- local.saveitem("one",dic); var locaname = localstorage.getitem('username'); var li = []; //购物车 var dictionary = {}; //创建一个空对象 存数据 if (!getcookie(0)) { // li = dictionary[locaname]; if (dictionary[locaname] === undefined) { dictionary[locaname] = li; } } else { var dic = json.parse(getcookie(0)); //获取cookie 并解析 // li = dic[locaname]; //将对应字典里key的value赋值给自己的购物车 if (dic[locaname] !== undefined) { li = dic[locaname]; } } for (let i = 0; i < data.msg.length; i++) { // let data = xq['msg'][i]['itemid']; if (data.msg[i]['itemid'].indexof(id) === -1) { //data不包含id continue; //跳出 //多个 //如果不包含就跳出,不打印。*注意要添加循环列表的索引值i } // 遍历详情页 // console.log(data.msg[i]['goods_gallery_urls'][2]); for (let a = 0; a < 5; a++) { let img1 = document.createelement('img'); img1.classname = 'img11'; img1.src = data.msg[i]['goods_gallery_urls'][a] imgbox[a].appendchild(img1) } // 标题 let productmainname = document.getelementbyid('productmainname'); productmainname.innerhtml = data.msg[i]['goods_name']; // 提示 let buy21 = document.getelementbyid('buy21'); buy21.innerhtml = data.msg[i]['goods_desc']; let goods_eval_score = document.getelementbyid('goods_eval_score'); goods_eval_score.innerhtml = data.msg[i]['paypoint']; let category_id = document.getelementbyid('category_id'); category_id.innerhtml = data.msg[i]['srcpoint'] // 店名 $('.store_name').text(data.msg[i]['mall_name']); // 点击触发事件存储本地 $('.store_car').click(() => { if (!getcookie(0)) { li.push(data.msg[i]['itemid']); dictionary[locaname] = li; var dobj = json.stringify(dictionary); } else { li.push(data.msg[i]['itemid']); dic[locaname] = li; var dobj = json.stringify(dic); } // li.push(data.msg[i]['itemid']); // setcookie(i, data.msg[i]['itemid'], 7); setcookie(0, dobj, 7); alert('加入购物车成功,付款请进入购物车') }) } // dictionary[locaname] = [dakhadsdhksa, adajksjlkads, 3] // var a = ['sas', 'sa'] // a.push('assa') // dictionary[locaname] = a; // var keys = []; // dictionary.locaname = [12, 32, 54] // for (var key in dictionary) { // keys.push(key); // } // dictionary["locaname"].push(77); // console.log(dictionary); // 详情主图 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小盒子里的第一个展示在大盒子上 for (let i = 0; i < imgbtn.length; i++) { imgbtn[i].onmouseover = function () { obig.children[0].src = imgbtn[i].children[0].src; osmall.children[0].src = imgbtn[i].children[0].src; } } } }); });
//购物车js $.ajax({ type: "get", // url: "../../data/like_like.json", url: "../../data/like_like.json", data: "data", datatype: "json", success: function(response) { let username = localstorage.getitem('username'); //本地名 let dic = json.parse(getcookie(0)); //json对象 console.log(dic); var keys = []; //遍历dic长度 for (var key in dic) { keys.push(key); } if (keys.indexof(username) == -1) { $('.rember').show(); $('.pay').hide(); } else { $('.pay').show(); let lkel = response.msg.length; // strc.length // dic[username].length //当前用户名里面的value值 for (let a = 0; a < dic[username].length; a++) { //循环遍历value值 // var arr = strc[a].split('=')[1] //arr=cookie的 var arr = dic[username][a]; for (let i = 0; i < lkel; i++) { //循环遍历json文件 if (response.msg[i]['itemid'].indexof(arr) === -1) { //json文件里是否包含dic[username]里面的value continue; } // console.log(response.msg[i]['nick']); // console.log(response.msg[i]['icon']); let li1 = document.createelement('li'); li1.classname = 'carlis'; $('.shop_lis').append(li1); let img1 = document.createelement('img'); img1.src = response.msg[i]['icon']; img1.classname = 'goods_img'; li1.append(img1); let p1 = document.createelement('p'); p1.innerhtml = response.msg[i]['title']; li1.append(p1); // var p1 = $("<p></p>").text(response.msg[i]['title']); let div1 = document.createelement('div'); div1.classname = 'goods_bottom'; div1.innerhtml = '¥'; li1.append(div1); let span1 = document.createelement('span'); span1.classname = 'goods_price'; span1.innerhtml = response.msg[i]['srcpoint']; div1.append(span1) let div_num = document.createelement('div'); div_num.classname = 'num'; div1.append(div_num); let div_minus = document.createelement('div'); let div_plus = document.createelement('div'); let span2 = document.createelement('span'); div_minus.innerhtml = '-'; div_plus.innerhtml = '+'; span2.innerhtml = '0'; div_minus.classname = 'minus'; div_plus.classname = 'plus'; div_num.append(div_minus); div_num.append(span2); div_num.append(div_plus); } } } $(".plus").click(function() { var num = $(this).parent().children("span"); //单品数量增加 num.text(parseint(num.text()) + 1); //商品总数增加 var totalnum = parseint($(".totalnum").text()); totalnum++ $(".totalnum").text(totalnum); //计算总价 var goods_price = parsefloat($(this).parent().parent().children(".goods_price").text()); $(".totalprice").text(parsefloat($(".totalprice").text()) + goods_price); }); //点击减少按钮触发事件 $(".minus").click(function() { var num = $(this).parent().children("span"); if (parseint(num.text())) { num.text(parseint(num.text()) - 1); var totalnum = parseint($(".totalnum").text()); totalnum-- $(".totalnum").text(totalnum); var goods_price = parsefloat($(this).parent().parent().children(".goods_price").text()); $(".totalprice").text(parsefloat($(".totalprice").text()) - goods_price); } else { num.text("0"); } // console.log(parseint(num.text())); }); //点击付款 $('#pay_money').click(() => { console.log($('.totalprice').text()); if ($('.totalprice').text() === '00') { alert('请输入商品数量'); } else { $('.pay_photo').show(1000); } }) $('#pay_close').click(() => { $('.pay_photo').hide(); }) } });
上一篇: Javascript内存管理
下一篇: Kubernetes