图书销售系统项目知识点总结

最新推荐文章于 2024-01-12 14:43:06 发布

flying_huixia

最新推荐文章于 2024-01-12 14:43:06 发布

阅读量900

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/runner_123/article/details/105028661

版权

javascript 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

1、实现购物车

问题1：点击物品的加减，需要给当前物品的数目变化；因为物品列表是动态增加的，每次点击增加，数目会增加，但是点击下一物品，还是这个物品的数目增加，最后用了一个本办法

给当前元素span一个唯一的ID，通过i来获取

 div1.innerHTML = '<input  type="button" value="-" onClick="less('+i+')"><span id="count'+i+'">1</span><input type="button" value="+" onClick="add('+i+')">';

以增加函数为例：

function add(i) {
    var count = document.getElementById('count'+i);
    var num = parseInt(count.innerHTML);
    if (num >= 100) return;
    num++;
    count.innerHTML = num;
}

问题2：首先购物车上面的小徽标不显示，当点击加入购物车时，小徽标显示；

li.pos{
    position: relative;
}
#dot{
    display: none;
    position: absolute;
    top:2;
    left:2;
}

这是实现小徽标相对于购物车定位。

当点击加入购物车时，js操作让小徽标显示

 $("#dot")[0].style.display="block";

但是这个使小徽标显示在购物车下面，position：aboslute的top和left属性都不生效；最后发现block会另起一行，所以而且span本来就是行内元素，最后修改为inline-block

 $("#dot")[0].style.display="inline-block";

则布局正常：

问题3：实现每次点击加入购物车，都会把所有点击加入购物车的数目都计算进去，所以要保存前一次的，设置一个变量total

但是会出现新的问题，比如物品A：数目为2，加入购物车，下次数目为3，继续加入购物车，这时总数目为5，需要修改；

function shop(i, id) {
    var total = 0;
    //加入购物车的时候 需要当前bookId,数目
    var count = parseInt(document.getElementById('count' + i).innerHTML);
    var product = {
        "bookId": id,
        "count": count
    };
    var isExsit = products.some((item) => {
        return item.bookId == product.bookId
    })
    if (products.length < 1 || !isExsit) {
        products.push(product);
    } else {
        products.forEach((item) => {
            if (item.bookId == product.bookId) {
                item.count = product.count;
                return;
            }
        })
    }
    if (count !== 0) {
        $.ajax({
            url: "http://test/mock.com/bookStore/shop",
            type: 'post',
            dataType: 'json',
            data: products,
            success: function (data) {
                if (data.code == "1") {
                    products.forEach((item) => {
                        total += parseInt(item.count);
                    })
                    $("#dot")[0].style.display = "inline-block";
                    $("#dot")[0].innerHTML = total;
                }
            }
        })
    }
}

2、动态生成的元素添加事件带参数时,直接执行了咋办

wraps.setAttribute("id",list[i].id);
wraps.addEventListener("click",showDetail);

showDetail函数不加括号，就不会自动执行；但是要带参数的时候也不能直接带了，这里先给id属性，之后通过this.id来取到属性值；

3、本次项目实行前后端分离，数据接口是用mock来生成的

（1）如何mock一个前端get请求，？后面带参数的请求---》需要用到正则

Mock.mock(RegExp('http://test/mock.com/bookStore/bookDetail'+ ".*"), 'get', (options) => {
    // 这里的options.body类型为字符串，传入的时候要转化一下，将其转成json格式
    var data = Mock.mock({
        'code': "1"
    })
    return data
});

（2）mock数据产生随机的两位数

var data = Mock.mock({
        // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
        'list|1-10': [{
            // 属性 id 是一个自增数，起始值为 1，每次增 1
            'id|+1': 1,
            'bookName': "@name",
            'AuthorName': "AAA",
            'ISBN': 1234,
            'genre': "story",
            'price|10-100':5
        }]
    })

4、点击加入购物车函数会冒泡到最外层，点击zhen整个item，然后跳转页面，做一个阻止事件冒泡

 this.event.stopPropagation();

适用于当前函数带参数；不是自带e，否则就直接e.stopPropagation

5、实现添加进购物车的数据保存在浏览器缓存里面，最后展示购物车信息

添加购物车操作的代码如下：

function shop(i, id) {
   // id是当前加入购物车产品的id，i是用来计数，看加入购物车的产品总数
    this.event.stopPropagation();
    var total = 0;
    //加入购物车的时候 需要当前bookId,数目
    var count = parseInt(document.getElementById('count' + i).innerHTML);
    var product = {
        "bookId": id,
        "count": count
    };
    var isExsit = products.some((item) => {
        return item.bookId == product.bookId
    })
    if (products.length < 1 || !isExsit) {
        products.push(product);
    } else {
        products.forEach((item) => {
            if (item.bookId == product.bookId) {
                item.count = product.count;
                return;
            }
        })
    }
    saveData(JSON.stringify(products));
    products.forEach((item) => {
        total += parseInt(item.count);
    })
    if (total !== 0) {
        $("#dot")[0].style.display = "inline-block";
        $("#dot")[0].innerHTML = total;
    } else {
        $("#dot")[0].style.display = "none";
    }
}

上述saveData(),就是用来给浏览器缓存里面存数据的。localStorage不能直接存入对象或者数组，所以先转换为i字符串

function saveData(data) {
    var listData = localStorage.getItem("shopProducts");
    if (listData) {
        localStorage.setItem("shopProducts", data);
    }
}

6、需要mock一个日期，语法如下：

  'date': '@DATETIME("yyyy-MM-dd HH:mm:ss")'

7、书的库存必须是每次添加10本以上，设计一个input框

oninput事件是在输入框中输入时就会触发

onchange事件是在输入框输入完内容后，输入框失焦后触发

onchange事件兼容性好，主流浏览器都支持

oninput事件IE9以下不支持，其余主流浏览器都支持，针对IE9以下的可以使用onpropertychange事件来替代

问题是input框添加了min属性为10，但是还可以在框内手动输入，并且输入的值可以是字母也可以是小于10的，因此需要额外添加事件来监控。

本次选用onchange事件来实现

preDeal()函数代码如下：

function preDeal(){
    var e =e || window.event;
    var reg=/[^\d]/g;
    if(reg.test(e.target.value)  || e.target.value < 10){
        e.target.value = e.target.value.replace(e.target.value,'');
    }
}

首先用e.target.event来取到用户填的值，如果值小于10或者为非数组，则替换当前值为空字符串。

在尝试问题中间，发现只有e.target.value<10也可以过滤字母输入，浏览器控制台“e”<10是true