前后端分离 ---购物车
购物车不仅仅可以存在服务端的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
前后端分离 ---购物车相关推荐
- 购物车-前后端分离版
前言 看了很多网上关于购物车的内容,感觉没一个可以用的.现在用到购物车的场景太多了,各种APP,小程序,网站都有. 先说一下前后端分离问题. 在前后端不分离的应用模式中,前端页面看到的效果都是由后端控 ...
- Java项目:网上电商项目(前后端分离+java+vue+Springboot+ssm+mysql+maven+redis)
源码获取:博客首页 "资源" 里下载! 一.项目简述 本系统功能包括: 一款基于Springboot+Vue的电商项目,前后端分离项目,前台后台都有,前台商品展示购买,购物车分类, ...
- Python django-restframework 前后端分离实现在线教育课程平台
django-restframework 框架 Django REST framework 是一个强大而灵活的 Web API 工具.使用它可以更好的与前端交互,完成API接口的设计与数据返回.同时它 ...
- 前后端分离的思考与实践(二)
原文出处: 淘宝UED - Herman 基于前后端分离的模版探索 前言 在做前后端分离时,第一个关注到的问题就是 渲染,也就是 View 这个层面的工作. 在传统的开发模式中,浏览器端与服务器端是由 ...
- 【转载】前后端分离的思考与实践(二)
基于前后端分离的模版探索 前言 在做前后端分离时,第一个关注到的问题就是 渲染,也就是 View 这个层面的工作. 在传统的开发模式中,浏览器端与服务器端是由不同的前后端两个团队开发,但是模版却又在这 ...
- 推荐9个大气美观的前后端分离项目:前端react,vue,ts,ElementUI,Angular等,后端mysql,springBoot,myBatis,springSecurity,cloud等
文章目录 1. 引言 2. 微人事 2. 前后端分离博客项目 3. V部落博客管理平台 4. 基于SpringBoot的微信点餐系统 5. eladmin后台管理系统 6. NiceFish(美人鱼) ...
- vue+element模仿电商商城,前后端分离实现,下单微信扫码支付
1.前言 接上一篇<vue+element+SpringBoot+OAuth2+Spring Security+Redis+mybatis-plus+mysql+swagger模仿商城,前后端分 ...
- Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十六(商品排序,Thymeleaf快速入门,商品详情页的展示)
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十六(商品详情页的展示) 一.商品排序 1.完善页面信息 这是用来做排序的,默认按照综合排序 ...
- 网上书城 springboot vue前后端分离
网上书城 springboot vue前后端分离 文章目录 网上书城 springboot vue前后端分离 前言 一.运行截图 二.pom文件 1.引入库 总结 前言 基于springboot vu ...
最新文章
- 【GAN模型结构】从最简单的全卷积GAN一起开始玩转GAN
- Android设计模式MVVM之DataBinding简单使用
- CodeForces - 1220D Alex and Julian(思维+数论)
- android 瀑布流_软件工程过程模型之瀑布模型
- ios加密机制是什么?为什么无法破解?
- leetcode185 Department Top Three Salaries
- word修订模式怎么彻底关闭_标书制作靠它准没错!那些你不知道的Word技巧大全...
- mysql sum带条件_mysql – SUM()基于SELECT的不同条件
- RS485电路原理以及设计
- java speex回声消除_Speex回声消除原理深度解析
- 网络安全等级保护二级产品清单整理
- Racket 的诞生与发展
- Android Studio 设置背景色、修改前进后退快捷键
- 在工业生产安全管理中,人员定位系统能做什么?
- Go语言使用谷歌浏览器打开指定网址
- 怎么在b站引流?b站怎么吸粉?b站引流技巧和方法
- Matlab bsxfun函数
- 【调试】sysRq按键使用方法
- Android学习笔记之ViewFlipper
- 搜索市场变局:话说云云
热门文章
- 一个Python爬虫案例让你看清Python2和3之间的区别
- 干货|基于深度学习的目标检测算法面试必备(RCNN~YOLOv5)
- MIT的周博磊博士如何解释深度学习模型(附PPT)
- 神器:多卡同步的Batch Normalization
- ros::spin() 和 ros::spinOnce()
- rbf核函数_高斯过程回归础(使用GPy和模拟函数数据集)
- oracle 自身连接查询,Oracle 连接查询
- mysql 加随机数,如何插入随机数MySql
- c++求区间第k大数_翔哥炒股经验23 K线形态学50节 第10节:K线区间震荡
- android rtsp协议转http协议_Http协议和Https协议