当前位置：移动技术网 > IT编程>开发语言>JavaScript > map字典，储存cookie，切换账户，展示购物车不同商品

map字典，储存cookie，切换账户，展示购物车不同商品

2019年06月28日 | 移动技术网IT编程 | 我要评论

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打开登录界面

 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();
            })

        }
    });

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

Mysql trace命令介绍

trace作用：对SQL的跟踪，可以知道SQL是如何执行的，比EXPLAIN还要强大。注意点：开启trace工具... [阅读全文]
详解JavaScript作用域闭包

javascript闭包，是js开发工程师必须深入了解的知识。3月份自己曾撰写博客《javascript闭包》，博客中只是简单阐述了闭包的工作过程和列举了几个示... [阅读全文]
深入了解JavaScript词法作用域

javascript并不是传统的块级作用域，而是函数作用域！一、作用域 javascript引擎在代码执行前会对其进行编译，在这个过程中，像var a = 2... [阅读全文]
详解JavaScript自定义函数

一、定义方法：在javascript中必须用function关键字function funcname(arg1,arg2...){statements;retu... [阅读全文]
fiddler修改host，协议，请求转发

fiddler根据请求路径，修改host，协议，和请求转发if (oSession.host=="517repa... [阅读全文]
如何自定义修改微信链接、QQ链接的标题描述图片

前端时间很多人私信我，问我怎么修改。这里就直接把方法给出来，有什么不懂的可以来问一下我V：jh831x 。或者直... [阅读全文]
ID：32----做一套QQ空间自动加好友的功能

2019年1月7日09:16:03 想法添加背景： 1.QQ空间中添加好友的接口是不会封号的，只会提示你操作过于... [阅读全文]
Redis的数据类型

Redis的五种数据类型：string、hash、list、set、zset。Stringstring类型是二进... [阅读全文]
2016年信息安全工程师综合知识第11-15题解析【建群网培信息安全工程师】

【2016年信息安全工程师综合知识第11题】11.以下关于认证技术的叙述中，错误的是（）。A．指纹识别技术的... [阅读全文]
安全整改思考之道

最近项目组安全整改，然后需要把所有的安全隐患问题一扫而空，其中也踩了不少的坑，记录下来，以便后续遇到类似问题能立... [阅读全文]

网友评论


验证码：

map字典，储存cookie，切换账户，展示购物车不同商品

2019年06月28日 | 移动技术网IT编程 | 我要评论

1:首页

2:跳转详情 `ajax异步请求`

3:详情页遍历

4:登录注册页面 `模块化`

注册:

登录:

5:添加购物车思路

`购物车进阶版本`

您可能感兴趣的文章:

相关文章:

网友评论

map字典，储存cookie，切换账户，展示购物车不同商品

2019年06月28日 | 移动技术网IT编程 | 我要评论

1:首页

2:跳转详情 ajax异步请求

3:详情页遍历

4:登录 注册 页面 模块化

注册:

登录:

5:添加购物车思路

购物车进阶版本

您可能感兴趣的文章:

相关文章:

网友评论

2:跳转详情 `ajax异步请求`

4:登录注册页面 `模块化`

`购物车进阶版本`