购物车不仅仅可以存在服务端的rredis中和MySQL中

也可以存在前端的cookie中

//购物车

var Cart = function () {

this.Count = 0;

this.Total = 0;

this.Items = new Array();

};

//购物车集合对象

var CartItem = function () {

this.Id = 0;

this.Name = "";

this.Count = 0;

this.Price = 0;

};

//购物车操作

var CartHelper = function () {

this.cookieName = "{$member_id}_repast_cart";

this.Clear = function () {

var cart = new Cart();

this.Save(cart);

return cart;

};

//向购物车添加

this.Add = function (id, name, count, price) {

var cart = this.Read();

var index = this.Find(id);

if(count==0){

this.Del(id);

}else{

//如果ID已存在,覆盖数量

if (index > -1) {

cart.Total -= (((cart.Items[index].Count * 100) * (cart.Items[index].Price * 100)) / 10000);

cart.Items[index].Count = count;

cart.Total += (((cart.Items[index].Count * 100) * (cart.Items[index].Price * 100)) / 10000);

} else {

var item = new CartItem();

item.Id = id;

item.Name = name;

item.Count = count;

item.Price = price;

cart.Items.push(item);

cart.Count++;

cart.Total += (((item.Count * 100) * (item.Price * 100)) / 10000);

// console.log(cart);

// cart.Total += (((cart.Items[index].Count * 100) * (cart.Items[index].Price * 100)) / 10000);

}

cart.Total=Math.round(cart.Total * 100) / 100;

this.Save(cart);

}

return cart;

};

//改变数量

this.Change = function (id, count) {

var cart = this.Read();

var index = this.Find(id);

cart.Items[index].Count = count;

this.Save(cart);

return cart;

};

//移出购物车

this.Del = function (id) {

var cart = this.Read();

var index = this.Find(id);

if (index > -1) {

var item = cart.Items[index];

cart.Count--;

cart.Total = cart.Total - (((item.Count * 100) * (item.Price * 100)) / 10000);

cart.Items.splice(index, 1);

this.Save(cart);

}

return cart;

};

//根据ID查找

this.Find = function (id) {

var cart = this.Read();

var index = -1;

for (var i = 0; i < cart.Items.length; i++) {

if (cart.Items[i].Id == id) {

index = i;

}

}

return index;

};

//COOKIE操作

this.Save = function (cart) {

var source = "";

for (var i = 0; i < cart.Items.length; i++) {

if (source != "") { source += "|$|"; }

source += this.ItemToString(cart.Items[i]);

}

$.cookie(this.cookieName, source);

};

this.Read = function () {

//读取COOKIE中的集合

var source = $.cookie(this.cookieName);

var cart = new Cart();

if (source == null || source == "") {

return cart;

}

var arr = source.split("|$|");

cart.Count = arr.length;

for (var i = 0; i < arr.length; i++) {

var item = this.ItemToObject(arr[i]);

cart.Items.push(item);

cart.Total += (((item.Count * 100) * (item.Price * 100)) / 10000);

}

return cart;

};

this.ItemToString = function (item) {

return item.Id + "||" + escape(item.Name) + "||" + item.Count + "||" + item.Price;

};

this.ItemToObject = function (str) {

var arr = str.split('||');

var item = new CartItem();

item.Id = arr[0];

item.Name = unescape(arr[1]);

item.Count = arr[2];

item.Price = arr[3];

return item;

};

};

//调用

var xc=new CartHelper();

//id,名称,数量,价格    数量为0的话直接删除

xc.Add(id,c_name,num,price);

这个方法会用的话非常简单~·

转载于:https://www.cnblogs.com/weifeng-888/p/10686433.html

前后端分离 ---购物车相关推荐

  1. 购物车-前后端分离版

    前言 看了很多网上关于购物车的内容,感觉没一个可以用的.现在用到购物车的场景太多了,各种APP,小程序,网站都有. 先说一下前后端分离问题. 在前后端不分离的应用模式中,前端页面看到的效果都是由后端控 ...

  2. Java项目:网上电商项目(前后端分离+java+vue+Springboot+ssm+mysql+maven+redis)

    源码获取:博客首页 "资源" 里下载! 一.项目简述 本系统功能包括: 一款基于Springboot+Vue的电商项目,前后端分离项目,前台后台都有,前台商品展示购买,购物车分类, ...

  3. Python django-restframework 前后端分离实现在线教育课程平台

    django-restframework 框架 Django REST framework 是一个强大而灵活的 Web API 工具.使用它可以更好的与前端交互,完成API接口的设计与数据返回.同时它 ...

  4. 前后端分离的思考与实践(二)

    原文出处: 淘宝UED - Herman 基于前后端分离的模版探索 前言 在做前后端分离时,第一个关注到的问题就是 渲染,也就是 View 这个层面的工作. 在传统的开发模式中,浏览器端与服务器端是由 ...

  5. 【转载】前后端分离的思考与实践(二)

    基于前后端分离的模版探索 前言 在做前后端分离时,第一个关注到的问题就是 渲染,也就是 View 这个层面的工作. 在传统的开发模式中,浏览器端与服务器端是由不同的前后端两个团队开发,但是模版却又在这 ...

  6. 推荐9个大气美观的前后端分离项目:前端react,vue,ts,ElementUI,Angular等,后端mysql,springBoot,myBatis,springSecurity,cloud等

    文章目录 1. 引言 2. 微人事 2. 前后端分离博客项目 3. V部落博客管理平台 4. 基于SpringBoot的微信点餐系统 5. eladmin后台管理系统 6. NiceFish(美人鱼) ...

  7. vue+element模仿电商商城,前后端分离实现,下单微信扫码支付

    1.前言 接上一篇<vue+element+SpringBoot+OAuth2+Spring Security+Redis+mybatis-plus+mysql+swagger模仿商城,前后端分 ...

  8. Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十六(商品排序,Thymeleaf快速入门,商品详情页的展示)

    Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十六(商品详情页的展示) 一.商品排序 1.完善页面信息 这是用来做排序的,默认按照综合排序 ...

  9. 网上书城 springboot vue前后端分离

    网上书城 springboot vue前后端分离 文章目录 网上书城 springboot vue前后端分离 前言 一.运行截图 二.pom文件 1.引入库 总结 前言 基于springboot vu ...

最新文章

  1. 【GAN模型结构】从最简单的全卷积GAN一起开始玩转GAN
  2. Android设计模式MVVM之DataBinding简单使用
  3. CodeForces - 1220D Alex and Julian(思维+数论)
  4. android 瀑布流_软件工程过程模型之瀑布模型
  5. ios加密机制是什么?为什么无法破解?
  6. leetcode185 Department Top Three Salaries
  7. word修订模式怎么彻底关闭_标书制作靠它准没错!那些你不知道的Word技巧大全...
  8. mysql sum带条件_mysql – SUM()基于SELECT的不同条件
  9. RS485电路原理以及设计
  10. java speex回声消除_Speex回声消除原理深度解析
  11. 网络安全等级保护二级产品清单整理
  12. Racket 的诞生与发展
  13. Android Studio 设置背景色、修改前进后退快捷键
  14. 在工业生产安全管理中,人员定位系统能做什么?
  15. Go语言使用谷歌浏览器打开指定网址
  16. 怎么在b站引流?b站怎么吸粉?b站引流技巧和方法
  17. Matlab bsxfun函数
  18. 【调试】sysRq按键使用方法
  19. Android学习笔记之ViewFlipper
  20. 搜索市场变局:话说云云

热门文章

  1. 一个Python爬虫案例让你看清Python2和3之间的区别
  2. 干货|基于深度学习的目标检测算法面试必备(RCNN~YOLOv5)
  3. MIT的周博磊博士如何解释深度学习模型(附PPT)
  4. 神器:多卡同步的Batch Normalization
  5. ros::spin() 和 ros::spinOnce()
  6. rbf核函数_高斯过程回归础(使用GPy和模拟函数数据集)
  7. oracle 自身连接查询,Oracle 连接查询
  8. mysql 加随机数,如何插入随机数MySql
  9. c++求区间第k大数_翔哥炒股经验23 K线形态学50节 第10节:K线区间震荡
  10. android rtsp协议转http协议_Http协议和Https协议