map字典，儲存cookie，切換賬戶，展示購物車不同商品

来源:https://www.cnblogs.com/wangqingjiu/archive/2019/06/28/11104544.html
-Advertisement-
Play Games

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

        }
    });

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 沉浸式主題下軟鍵盤問題
    版權聲明：本文為xing_star原創文章，轉載請註明出處！ 本文同步自http://javaexception.com/archives/150 沉浸式主題下軟鍵盤問題 項目中，對沉浸式的處理用的是https://github.com/gyf-dev/ImmersionBar 這個開源項目，項目還 ...
  • Vue學習小結（三）
    一、品牌項目的添加功能的思路（雙向數據綁定）： 二、過濾器： 1、過濾器調用時候的格式： {{ name | 過濾器的名稱 }} 2、過濾器的定義語法： 3、定義私有過濾器有兩個條件：過濾器的名稱 和 處理函數 三、自定義指令： 樣式，只要通過指令綁定給了元素，不管這個元素有沒有被插入到頁面中去，這 ...
  • WebGL場景的兩種地面構造方法
    總述：大部分3D編程都涉及到地面元素，在場景中我們使用地面作為其他物體的承載基礎，同時也用地面限制場景使用者的移動範圍，還可以通過設置地塊的屬性為場景的不同位置設置對應的計算規則。本文在WebGL平臺上藉助Babylon.js庫探索並實現了兩種地面構造方法，除了兩種確定的構造方法外，本文還包含了對一 ...
  • Vue學習小結（二）
    品牌案例的增刪查和其他部分效果： ...
  • HTML連載17-id選擇器&類選擇器
    一、問題：我們前面講了標簽選擇器有一個缺陷就是它不加選擇的把所有相同的標簽全都變成統一樣式，這對於我們個性化定製產生了阻礙，因此我們便引出了id選擇器，來進行特別指定進行配置樣式 二、id選擇器 1.定義：根據指定的id名稱找到對應的標簽，然後設置屬性 2.格式： #id名稱｛ 屬性：值； ｝ 3. ...
  • Vue學習小結（一）
    一、理解MVC和MVVM的關係： MVC：Model View Controller (模型 視圖 控制器） 分別為：業務邏輯、界面、用來調度View和Model層 MVVM：Model View ViewModel M：每個頁面中單獨的數據； V:每個頁面中的HTML機構； VM：調度者，V從VM ...
  • javascript:void(0)的含義
    void關鍵字介紹 首先，void關鍵字是javascript當中非常重要的關鍵字，該操作符指定要計算或運行一個表達式，但是不返回值。 語法格式： 實例1 當點擊超級鏈接時，什麼都不發生 實例2 執行void操作符當中的代碼 實例3 計算void操作符當中的算術 html: js: 控制台輸出： 很 ...
  • node.js中的fs.rename()方法
    node.js 中的fs.rename()模塊 方法說明 : 修改文件名稱，可更改文件的存放路徑 基本語法 ` ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類