购物车（项目）总结

Vue.js 曹卷英 •
文章标签: vue.js 项目总结
190

（一）：经过这几天的学习，与实践，我们对vue.js也有一定的了解和理念。

1.然而老师为了让我们更加的熟练vue.js与是让我们做了一个购物车管理。

2.购物车管理的效果图如下：

756fca79-977a-41e9-9c62-2692a208e8ac.PNG

3.对购物车进行了一下总节：其中包含了以下几种方法

（1），created 使用ajax进行解析

（2），init   对数据进行初始化

（4），initCar  对购物车进行初始化

（5），inputNumber  只能输入数字和删除键

（6），removeProcut  删除购物车信息

（7），addProduct  购买商品

（9），saveMoney  计算属性

4.用json 储存数据，然后用ajax进行数据解析

示列代码如下：

html    代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>购物车管理</title>
		<!--引入js文件-->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<!--引入css文件-->
		<link rel="stylesheet" type="text/css" href="css/baskes.css"/>
	</head>
	<body>
		<div id="app">
			<header id="app_head">
				<div>
					<div class="head_top">
						<div><img src="img/1.png"></div>
						<div>
							<h2>我 的 购 物 车</h2></div>
						<div>
							<p>　全场免运费活动中</p>
						</div>
					</div>
					<div class="head_main">
						<div class="hd_mn_title">
							<div>
								<p>根据您挑选的商品，当当为您推荐</p>
							</div>
							<div class="title_pic"><img src="img/2.png"></div>
						</div>
						<div class="hd_mn_info">

							<ul v-for="(item,index) in hotproducts" v-if="index<8">
								<li class="fristli">{{item.productName}}</li>
								<li>￥{{item.originalCost | twoDigit}}</li>
								<li>￥{{item.discountPrice | twoDigit}}</li>
								<li>
									<a href="javascript:void(0)" @click="addProduct(item)">购买</a>
								</li>
							</ul>

							<div class="division"></div>
						</div>
					</div>
				</div>
			</header>
			<section id="app_section">
				<div class="main_title">
					<h5>您以选购一下商品</h5>
				</div>
				<div class="main_center">
					<div>
						<table id="tabMain" border="0" cellpadding="0" cellspacing="0">
							<thead>
								<tr class="tab_title">
									<th>商品名</th>
									<th>商品积分</th>
									<th>市场价</th>
									<th>当当价</th>
									<th>数量</th>
									<th>删除</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="(item,index) in carproducts">
									<td class="uname">{{item.product.productName}}<span> </span></td>
									<td>{{item.score}}</td>
									<td>￥{{item.product.originalCost | twoDigit}}</td>
									<td>￥{{item.product.discountPrice | twoDigit}} ({{item.discount}}折)</td>
									<td><input type="text" name="txtCount" v-model="item.count"></td>
									<td>
										<a href="javascript:void(0);" @click="removeProcut(index)">删除</a>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="total">
						<div class="total_box">
							<div class="total_op">
								<div>
									<p><label>您共节省金额 : </label>￥<span>{{saveMoney | twoDigit}}</span></p>
									<p><label>可获商品积分 : </label><span>{{totalScore}}</span></p>
								</div>
							</div>
							<div class="partition"></div>
							<div class="total_tp"><b>商品金额总计:</b><strong>￥{{totalMoney | twoDigit}}</strong><img src="img/3.png"></div>
						</div>
					</div>
				</div>
			</section>
		</div>
		<script src="js/baskes.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

js  代码如下：

var vm = new Vue({
	el: "#app",
	data: {
		hotproducts: [], //热门推荐商品
		carproducts: [], //购物商品
		totalScore: 0, //总积分
		totalMoney: 0, //总金额
	},
	created() { //使用ajax获取商品信息
		this.init();
	},
	methods: {
		//1.初始化数据
		init() {
			var _this = this;
			//使用ajax工具获取数据
			zxXhr.get("js/data.json", function(data) {
				_this.hotproducts = data;
				_this.initCar(); //初始化购物车信息
			})
		},
		//2.初始化购物车
		initCar() {
			var _this = this;
			var len = _this.hotproducts.length;
			for(var i = 7; i < len - 1; i++) {
				var tempPro = _this.hotproducts[i];
				_this.carproducts.push({
					product: tempPro, //购买的产品
					score: tempPro.discountPrice * 10, //积分
					discount: parseInt(100 * tempPro.discountPrice / tempPro.originalCost), //折扣
					count: 1 //购买数量
				});
			}
			this.$nextTick(function() {
				_this.inputNumber()
			})
		},
		//3.只能输入数字和删除键
		inputNumber() {
			var txtBoxs = document.getElementsByName("txtCount");
			var len = txtBoxs.length;
			console.log("keydown")
			for(var i = 0; i < len; i++) {
				var txtbox = txtBoxs[i];
				txtbox.onkeydown = function() {
					console.log(event);
					if((event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39) {
						return true;
					}
					return false;
				}
			}
		},
		//4.删除购物车记录
		removeProcut(index) {
			var _this = this;
			if(confirm("确定要删除吗？")) {
				_this.carproducts.splice(index, 1);
			}
		},
		//5.购买商品
		addProduct(product) { //product 选中的商品对象
			var _this = this;
			//时候已存在相同的商品 
			var pro = _this.carproducts.find(function(el) {
				return el.product.id == product.id;
			})
			if(pro) { //存在相同的商品
				pro.count++;
			} else { //不存在  
				_this.carproducts.push({
					product: product, //购买的产品
					score: product.discountPrice * 10, //积分
					discount: parseInt(100 * product.discountPrice / product.originalCost), //折扣
					count: 1 //购买数量
				});
				_this.$nextTick(() => {
					//需要重新添加keydown事件
					_this.inputNumber();
				})

			}
		}

	},
	filters: {
		twoDigit(value) {
			return value.toFixed(2);
		}
	},
	computed: { //计算属性
		saveMoney() {
			var _this = this;
			var mony = 0,
				totalScore = 0,
				totalMoney = 0;
			var len = _this.carproducts.length;
			for(var i = 0; i < len; i++) {
				var tempItem = _this.carproducts[i];
				mony += (tempItem.product.originalCost - tempItem.product.discountPrice) * tempItem.count;
				totalScore += tempItem.score * tempItem.count;
				totalMoney += tempItem.product.discountPrice * tempItem.count;
			}
			_this.totalScore = totalScore;
			_this.totalMoney = totalMoney;
			return mony;
		}
	},
	//进行dom操作的最佳时机(对于data初始化的数据有效，如果通过动态添加的数据通过nextTicket方法跟踪dom的更新。)
	mounted() {

	},
});

json  代码如下：

[
	{
		"id": 1,
		"productName": "JavaScript DOM编程艺术",
		"originalCost": 39,
		"discountPrice": 29.3
	}, {
		"id": 2,
		"productName": "解禁(当当网独家首发)",
		"originalCost": 28,
		"discountPrice": 19.4
	}, {
		"id": 3,
		"productName": "地王之王(金融危机下房地产行...)",
		"originalCost": 32.8,
		"discountPrice": 22.1
	}, {
		"id": 4,
		"productName": "逃庄",
		"originalCost": 36,
		"discountPrice": 27.7
	}, {
		"id": 5,
		"productName": "升入浅出MySQL数据库开发、优...",
		"originalCost": 59,
		"discountPrice": 47.2
	}, {
		"id": 6,
		"productName": "大玩家(马未都、王刚推荐!央...)",
		"originalCost": 34.8,
		"discountPrice": 20.3
	}, {
		"id": 7,
		"productName": "都市风水师--官场风水小说:一...",
		"originalCost": 39.8,
		"discountPrice": 30.5
	}, {
		"id": 8,
		"productName": "国戏(以麻将术语解读宦海沉浮)...",
		"originalCost": 25,
		"discountPrice": 17.3
	}, {
		"id": 9,
		"productName": "私募(首部披露资本博弈密码的金融...",
		"originalCost": 32,
		"discountPrice": 18.9
	}, {
		"id": 10,
		"productName": "小团圆(张爱玲最神秘小说遗稿)",
		"originalCost": 28,
		"discountPrice": 17.3
	}, {
		"id": 11,
		"productName": "不抱怨的世界(畅销全球80国的世界...",
		"originalCost": 24.8,
		"discountPrice": 15.4
	}, {
		"id": 12,
		"productName": "福玛特双桶洗衣机XPB20-07S",
		"originalCost": 458,
		"discountPrice": 358
	}, {
		"id": 13,
		"productName": "PHP和MySQL Web开发(原书第4版)",
		"originalCost": 95,
		"discountPrice": 71.2
	}, {
		"id": 14,
		"productName": "法布尔昆虫记",
		"extra": "(再买￥68.30即可参加\"满199元减10元现金\"活动)",
		"originalCost": 198,
		"discountPrice": 130.7
	}
] 

ajax  带码如下：

(function() {
	var xhr;
	if(XMLHttpRequest) {
		xhr = new XMLHttpRequest();
	} else {
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
	var ajax = {
		get: function(url, callBack) {
			xhr.onreadystatechange = function() {
				if(xhr.status == 200 && xhr.readyState == 4) {
					var str = xhr.responseText;
					var json = JSON.parse(str);
					if(callBack) {
						callBack(json);
					} 
				}
			}
			xhr.open("GET", url, true);
			xhr.send();
		}
	}
	window.zxXhr = ajax;
})();

以上是对购物车的一个小小的总结：

({{handupNumber}}) ({{favoriteNumber}})
还能输出{{restrictNumber}}个字符  

  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :