图书购买系统，本地添加购物车(不需要登录一样可以添加购物车，结算时需要登录)

最新推荐文章于 2022-11-07 09:24:49 发布
最新推荐文章于 2022-11-07 09:24:49 发布
阅读量6.8k 收藏 18
点赞数 3
分类专栏： Web前端学习 文章标签： 图书 购物车 动态添加
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Java_jfei/article/details/58228725
版权

1.category.html页面：显示书籍信息页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="../../js/bootstrap/js/jquery-3.1.1.js"></script>
        <script src="../../js/bootstrap/js/bootstrap.js"></script>
        <link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.css" />
        <!--导入category.js文件-->
        <script src="category.js"></script>
        <title></title>
    </head>
    <body>
        <div class="container">
            <ol class="breadcrumb">
              <li><a href="home.html">首页</a></li>
              <li><a  id="navpath" href="#">全部商品</a></li>
            </ol>
        </div>

        <div class="container">
            <div style="margin-left: 100px;margin-right: 100px;background: red;">
                <img src="../../img/otherimages/productlist.gif" style="width: 100%;height: 40px;" />
                <div class="thumbnail text-center pull-left" style="margin: 15px;">
                    <img src="../../img/bookimage/20285763-1_b.jpg" />
                    <p>书名:JAVA模式</p>
                    <p>售价:21.5</p>
                    <input type="image" onclick="addCart('10000','Java模式','21.5','100')" src="../../img/otherimages/buybutton.gif"/>
                </div>
                <div class="thumbnail text-center pull-left" style="margin: 15px;">
                    <img src="../../img/bookimage/20412979-1_b.jpg" />
                    <p>书名:javascript</p>
                    <p>售价:18.5</p>
                    <input type="image" onclick="addCart('10001','javascript','18.5','100')" src="../../img/otherimages/buybutton.gif"/>
                </div>
            </div>
        </div>

        <div class="container">
            <nav class="text-center">
              <ul class="pagination text-center" >
                <li><a href="#"><span>&laquo;首页</span> </a></li>
                <li><a href="#">上一页</a></li>
                <li><a href="#">下一页</a></li>
                <li><a href="#"> <span>末页&raquo;</span></a></li>
                <span  style="line-height: 30px;margin-left: 10px;">3/15</span>
              </ul>
            </nav>
        </div>

    </body>
</html>

2.category.js文件，实现添加购物车功能

//截取url
//动态改变路径导航的信息
$(function(){
    var url = window.location.search;
    url = decodeURI(url);
    var subs = url.substr(url.indexOf("category=")+9);
    $("#navpath").html(subs);
})
//购物车思路：
//1、本地购物车    京东   不要登录一样可以加购物车，结算的时候才需要登录
//2、服务器购物车   淘宝   一定要登录才能添加购物车

//本地购物车:把添加到购物车的数据保存到浏览器中(localStorage)
//方法传参：书的id，书名，书售价，书的库存

//在保存到localStorage的时候，需要先把js对象转换为字符串再保存(localStorage只能够保存字符串)

function addCart(id,name,price,num){
    //1.创建一个js对象
    var book = {
        "product_id":id,   //书的id
        "name":name,       //书名
        "price":price,     //售价
        "num":num,         //库存
        "buynum":1         //购买数量
    }
    //2.获取已经保存的 数据
    var storebooks = localStorage.getItem("carts");
    //将已经获取到的字符串数据转换成数组
    var bookArr = JSON.parse(storebooks);

    //2-1 如果购物车里面数据为空，说明从来没有保存过数据
    if(bookArr==null){
        //创建一个数组
        var books = new Array();
        //把要保存的数据存到数组中
        books.push(book);
        //将数组转换成字符串
        var bookstr = JSON.stringify(books);
        alert(bookstr);
        //将字符串保存到localStorge中
        localStorage.setItem("carts",bookstr);
    }
    //2-2 说明已经保存过数据了
    else{
        //1.判断我们将要保存的书籍是否已经存在购物车了，如果存在，则让购买数量+1
        var isfind = false;
        for(var i=0;i<bookArr.length;i++){
            var b = bookArr[i];
            if(b.product_id==book.product_id){
                b.buynum++;
                isfind = true;
                break;
            }
        }

        //2.如果不存在，则将该书添加到购物车列表中
        if(isfind == false){
            bookArr.push(book);
        }

        //3.把bookArr重新转换成字符串保存
        var s = JSON.stringify(bookArr);
        localStorage.setItem("carts",s);
    }
    alert("添加成功");
}

3.cart.html页面，购物车页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"><br />
        <script src="../../js/bootstrap/js/jquery-3.1.1.js"></script>
        <script src="../../js/bootstrap/js/bootstrap.js"></script>
        <link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.css" />
        <link rel="stylesheet" href="../common/head.css"/>
        <script src="../common/head.js"></script>
        <script src="cart.js"></script>
        <title></title>
    </head>
    <body>
        <div class="container">
            <!--正文内容-->
            <div style="margin-left: 100px;margin-right: 100px;">
                <img src="../../img/otherimages/buy1.gif" />

                <div class="panel panel-info table-responsive" style="margin-top: 30px;">
                  <div class="panel-heading text-center"><h4><strong>购物车列表</strong></h4></div>

                  <div id="carttable"><!--这里动态添加购物车数据--></div>
                  <div class="panel-footer" style="padding-left: 90%;">总计：40</div>
                </div>
                <form class="form-horizontal">
                  <div class="form-group">
                    <label for="receiverAddress" class="col-md-1 control-label">地址</label>
                    <div class="col-md-4">
                      <input type="email" class="form-control" name="receiverAddress" id="receiverAddress" placeholder="请输入收货地址">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="receiverName" class="col-md-1 control-label">收货人</label>
                    <div class="col-md-4">
                      <input type="text" class="form-control" id="receiverName" name="receiverName" placeholder="请输入收货人姓名">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="receiverPhone" class="col-md-1 control-label">电话</label>
                    <div class="col-md-4">
                      <input type="text" class="form-control" id="receiverPhone" name="receiverPhone" placeholder="请输入收货人电话">
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="col-md-12 text-right">
                      <a href="../book/home.html"><img src="../../img/otherimages/gwc_jx.gif"/></a>
                      <a href="#"><img src="../../img/otherimages/gwc_buy.gif"/></a>
                    </div>
                  </div>
                 </form>
            </div>
        </div>
    </body>
</html>

4.cart.js页面 实现购物车动态添加数据功能

//购物车表格动态加载本地购物车的信息
$(function(){
    //1.从localstorge获取所存的购物车的信息
    var books = localStorage.getItem("carts");
    var bookArr = JSON.parse(books);

    //2.声明一个html用来拼接页面
    var html = "";
    html += "<table class='table table-hover text-center'>";
    html += "                <tr class='danger'>";
    html += "                   <th class='text-center'>序号</th>";
    html += "                   <th class='text-center'>商品名称</th>";
    html += "                   <th class='text-center'>价格</th>";
    html += "                   <th class='text-center'>购买数量</th>";
    html += "                   <th class='text-center'>库存</th>";
    html += "                   <th class='text-center'>小计</th>";
    html += "                </tr>";
    //3.遍历数组
    for(var i=0;i<bookArr.length;i++){
        //获取到一本书
        var abook = bookArr[i];

        html += "<tr>";
        html += "<td>"+i+"</td>";
        html += "<td>"+abook.name+"</td>";
        html += "<td>"+abook.price+"</td>";
        html += "<td>"+abook.buynum+"</td>";
        html += "<td>"+abook.num+"</td>";
        html += "<td>"+abook.price*abook.buynum +"</td>";
        html += "</tr>";
    }

    html += "                </table>";

    $("#carttable").html(html);
})

5.效果显示
效果显示

Java_jfei
关注
专栏目录
图书购买系统之本地添加购物车(完善版)--实现生成订单和子订单
Java_jfei的博客
04-10 1万+
1.实现效果图 2.cart.jsp购物车页面 cart /bootstrap/css/bootstrap.css"/> /css/myscss.css" /> /bootstrapvalidate/css/bootstrapValidator.css" /> /bootstrap/js/jquery-3.1.1.js">
网上书店平台---设计活动
weixin_51063573的博客
12-23 1426
一、系统分析： 网上书店项目可以分为用户个人信息管理子系统、购物车管理子系统、图书管理子系统、订单管理子系统。如图1-1所示 （1）个人信息管理子系统：主要功能为对用户注册登录信息进行管理。用户可以作为普通用户实现在网上书城进行图书的搜索以及查看书籍信息。也可以注册个人信息登录进入书城，管理员管理网站用户。 （2）购物车管理子系统：主要功能面向于用户，普通用户需要先注册信息登录网站，才可以对自己想买的书籍先放进购物车，进而进行下单与不下单两项操作。除此以外，已注册登录用户也可以将已添加入购物车里面书籍删除。
千峰商城-springboot项目搭建-72-用户未登录时添加购物车
LYly_B的博客
07-23 273
1.增加状态码信息 ResStatus： public class ResStatus { public static final int OK=10000; public static final int NO=10001; public static final int LOGIN_SUCCESS=2000;//认证成功 public stat...
html 购物车实现原理,网站购物车界面(div+css实现)
weixin_39841572的博客
05-31 923
叮咚网购物车.main{width:100%;height:590px;border:1px solid #000;text-decoration: none;}.top{width:100%;height:52px;border:1px solid #000;}.downMenu{width:100%;height:30px;font:normal normal 20px "宋体";color:...
第14章传智书城前台程序设计
桃桃的桃子的博客
06-22 934
第14章传智书城前台程序设计 一、填空题 1.在传智书城注册页面中，可以采用【 单击图片 】方式切换验证码图片。 2.【 用户注册 】是用户参与网站活动最直接的桥梁。 3.图书根据其【 题材 】和【 内容 】的不同，可以分为不同的类型。 4.用户在浏览商品时，可以通过【 导航栏 】选择查看不同分类的图书。 5.本周热卖用于展示本周内【 销售数量最多 】的两本图书。 二、判断题 1.用户注册后，就可以使用网站中的所有功能。（ T ） 2.用户激活时，需要连接外网
网上购书（书店）管理系统设计与实现（PHP+Mysql）
最新发布
毕业作品网站
11-07 4749
对软件需求的深入理解是软件开发工作获得成功的前提条件，不论我们把设计和编码工作做得如何出色，不能满足用户需求的程序只会给客户带来失望，给开发带来麻烦。虽然在可行性研究阶段已经粗略了解用户的需求，甚至还提出了一些可行的方案，但是，可行性研究的基本目的使用较小的成本在较短时间内确定是否存在可行的解法，因此，在需求分析阶段要确定系统必须完成哪些工作，也就是对系统提出完整、准确、清晰、具体的要求。功能需求:这方面的需求指定系统必须提供的服务，通过需求分析应该划分出系统必须完成的所有功能。3.3实体-联系图 7。
BS.rar_BS_csharp bs_图书管理系统_购物车_购物车系统
09-14
购物车系统是电商或在线书店的核心功能之一，用户可以将想购买的图书添加到购物车，进行结算前的临时存储。系统需要处理添加、删除商品、修改数量、计算总价等操作，并保持购物车状态的同步。 **模糊检索与全词搜索...
java图书购物车系统
12-26
【Java图书购物车系统】是基于Java技术和JSP（JavaServer ...这些技术的结合，构建了一个完整的Java图书购物车系统，提供了用户友好的界面和可靠的后台支持，实现了图书的浏览、选择、添加购物车和结算等一系列功能。
JavaWEB 图书购物车管理系统源码
12-08
尚硅谷 JavaWEB 图书购物车管理系统源码尚硅谷 JavaWEB 图书购物车管理系统源码
购物车的实现（未登录时也可以使用）
qq_41579515的博客
08-15 1万+
最近在公司做的一个项目我负责的模块之一，做的时候可谓是踩了无数个坑，所以我决定重写捋一捋然后写出来，在为了下次再做类似业务的时候更加方便的同时，希望也能帮到大家。里面很多字段都是我举例随便编的，就像一个现编的小demo，不涉及公司任何事务。 一、未登录的购物车实现： 新建购物车目录对象： CartItem 属性 int productId； int count；date updateTime； ...
购物车流程（登录和未登录）
热门推荐
阿文大大
02-07 1万+
首先判断用户是否登录 一、没有登录的情况下     没有登录的情况下根据用户MAC地址设置session保存购物车信息 1.第一步判断购物车是否为空   1.1不为空的情况下     (1.把json格式转换回来为数组     (2.判断当前商品信息有没有存在数组中     (3.如果存在相同的商品只增加数量即可     (4.如果没有把商品信息和数量加入数组中     (
使用HTML简单实现购物车
weixin_45775120的博客
12-13 5186
<head> <meta charset="UTF-8"> <title>我的购物车</title> <style type="text/css"> tr { height: 50px; } </style> <!--第一步引入jq--> <script type="text/j...
微信小程序点击加入购物车小球跳入动画
CSDN for recording problems
02-23 7117
直接上js文件 /*加入购物车动效*/ _flyToCartEffect:function(events){ //获得当前点击的位置，距离可视区域左上角 var touches=events.touches[0]; var diff={ x:'25px', y:25-touch...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值