Vue实例结合Bootstrap-商城购物车效果
2018-09-07 20:22
701 查看
目前在学习Vue2.x 跟教程一起写的购物车实例，课程只讲获取数据和功能的实现，所以自己搭了一个简单界面，中间也遇到过问题，获取数据显示XML解析失败，后来发现我应该把项目放到服务器上运行，报错消失了。
下面是代码，供大家参考
[code]<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue界面使用本地数据</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="Vue.js"></script>
<script type="text/javascript" src="vue-resource.js"></script>
<style>
body{
background: #e8e8e8;
}
@font-face{
font-family: cart;
src: url('fonts/icomoon.eot') format('embedded-opentype'),
url('fonts/icomoon.svg') format('svg'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.woff') format('woff');
}
#app{
margin-top: 100px;
}
#app .container{
background: #fff;
padding: 20px 15px;
}
.cart{
padding-left: 100px;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
position: relative;
}
.cart .check{
width: 14px;
height: 14px;
position: absolute;
top: 50%;
margin-top: -7px;
left: 0;
}
.cart .media-body{
padding: 10px 200px 0 20px;
}
.cart .media-heading{
color: #000;
font-size: 20px;
}
.cart .media-body select{
border: 1px solid #eee;
background: #eee;
/*隐藏select的下拉图标*/
-moz-appearance: none;
padding-right: 20px;
line-height: 20px;
font-size: 12px;
}
.cart .media-body .cart_select{
position: relative;
display: inline-block;
}
.cart .media-body .cart_select::after{
content: "";
position: absolute;
top: 50%;
margin-top: -3px;
right: 3px;
border-left: 6px solid transparent;
border-top: 6px solid #666;
border-right: 6px solid transparent;
}
.cart .media-body .data{
margin-top: 20px;
overflow: hidden;
height: 24px;
line-height: 20px;
}
.cart .totalPrice{
float: right;
width: 80px;
}
.cart .media-body .price,.cart .media-body .count{
display: inline-block;
}
.cart .media-body .count{
float: right;
margin-right: 60px;
border: 1px solid #ccc;
padding: 0 2px;
font-size: 12px;
position: relative;
font-weight: 500;
height: 22px;
}
[class^="icon-"]{
font-family: cart;
font-style: normal;
}
.count input{
display: inline-block;
width: 20px;
border: none;
text-align: center;
height: 20px;
background: none;
}
.count i::before{
position: absolute;
padding: 0 3px;
top: -1px;
font-style: normal;
cursor: pointer;
border: 1px solid #ccc;
background: #eee;
}
.count i.icon-minus::before{
content: "\ea0b";
left: -20px;
}
.count i.icon-plus::before{
content: "\ea0a";
right: -20px;
}
.userCart{
margin-top: 20px;
}
.userCart-right{
float: right;
margin-right: 120px;
}
.userCart-right a{
display: block;
padding: 0 20px;
line-height: 24px;
}
.userCart-left{
display: inline-block;
}
.icon-bin{
position: absolute;
bottom: 24px;
right: 122px;
}
.icon-bin i{
font-style: normal;
position: relative;
}
.icon-bin i::before{
content: "\e9ac";
position: absolute;
top: 0;
left: -10px;
font-family: cart;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href="javascript:;">购物车</a></li>
<li role="presentation"><a href="javascript:;">个人中心</a></li>
</ul>
</div>
<div class="col-md-10">
<div class="media cart" v-for="(shop, index) in shopListArr">
<div class="media-left">
<input class="check" type="checkbox" :checked="shop.checked" @click="singerShopSelected(shop)">
<a href="#">
<img class="media-object" width="140" :src="shop.shopImage" :alt="shop.shopName">
</a>
</div>
<div class="media-body">
<a class="media-heading" href="javascript:;" v-text="shop.shopName"></a>
<p v-text="shop.shopDetail"></p>
<div class="cart_select">
<select>
<option value="绿木兰花">{{shop.shopStyle[0]}}</option>
<option value="黄色绽放">{{shop.shopStyle[1]}}</option>
<option value="水墨荷花">{{shop.shopStyle[2]}}</option>
</select>
</div>
<div class="data">
<span class="price">{{shop.shopPrice | moneyFormat(shop.shopPrice)}}</span>
<div class="totalPrice">{{shop.shopNumber*shop.shopPrice | moneyFormat(shop.shopNumber*shop.shopPrice)}}</div>
<div class="count">
<i class="icon-minus" @click="singleShopPrice(shop, false)"></i>
<!-- false是减 true是加 -->
<input type="tel" value="" v-model="shop.shopNumber">
<i class="icon-plus" @click="singleShopPrice(shop, true)"></i>
</div>
</div>
<div class="icon-bin" data-toggle="modal" data-target="#myModal" @click="clickTrash(shop)">
<i></i>
</div>
</div>
</div>
<div class="userCart">
<input type="checkbox" :checked="isSelectedAll" @click="selectedAll(isSelectedAll)">全选
<div class="userCart-left">
合计：<span class="allShopPrice">{{totalPrice | moneyFormat(totalPrice)}}</span>
</div>
<div class="userCart-right">
<a class="btn btn-primary" href="javascript:;">去结算</a>
</div>
</div>
</div>
</div>
</div>
<!-- 弹出面板 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">删除商品</h4>
</div>
<div class="modal-body">
您确定要删除商品？
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" @click="delShop()">确定</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
// 购物车中的数据
shopListArr: [],
// 是否全选
isSelectedAll: false,
// 所有商品的总价格
totalPrice: 0,
// 要删除的商品
currentDelShop: {}
},
// 钩子函数 组件已经加载完毕 请求网络数据 业务处理
mounted(){
// 请求本地的数据
this.getLocalData();
},
// 钩子选项 过滤
filters: {
// 格式化金钱
moneyFormat(money){
return "￥" + money.toFixed(2); // 保留两位小数
}
},
methods: {
// 1. 请求本地的数据
getLocalData(){
this.$http.get('data/cart.json').then(response => {
const res = response.body;
if( res ){
this.shopListArr = res.allShops.shopList;
}
}, response => {
// 容错处理
alert('请求数据失败！');
});
},
// 2. 单个商品数量
singleShopPrice(shop, flag){
if(flag){ //加
shop.shopNumber += 1;
}else{ //减
if(shop.shopNumber <= 1){
shop.shopNumber = 1;
return;
}
shop.shopNumber -= 1;
}
// 计算总价
this.getAllShopPrice();
},
// 3.选中所有的商品
selectedAll(flag){
// 3.1总控制
this.isSelectedAll = !flag;
// 3.2遍历所有的商品数据
this.shopListArr.forEach((value, index)=>{ //箭头函数
if(typeof value.checked === 'undefined'){
this.$set(value, 'checked', !flag); //为商品实例设置checked属性
}else{
value.checked = !flag;
}
});
//3.3计算总价格
this.getAllShopPrice();
},
// 4.计算商品的总价格
getAllShopPrice(){
let totalPrice = 0;
// 4.1遍历所有的商品
this.shopListArr.forEach((value,index)=>{
// 判断商品是否被选中
if(value.checked){
totalPrice += value.shopPrice * value.shopNumber;
}
});
this.totalPrice = totalPrice;
},
// 5.单个商品的选中和取消
singerShopSelected(shop){
// 5.1判断有没有这个属性
if(typeof shop.checked === 'undefined'){
this.$set(shop, 'checked', true);
}else{
shop.checked = !shop.checked;
}
// 5.2计算总价
this.getAllShopPrice();
// 5.3判断是否全选
this.hasSelectedAll();
},
// 6.判断是否全选
hasSelectedAll(){
let flag = true;
this.shopListArr.forEach((value, index)=>{
if(!value.checked){ //只要有一个没被选中，就是false
flag = false;
}
});
this.isSelectedAll = flag;
},
// 7.点击垃圾筐
clickTrash(shop){
this.currentDelShop = shop;
},
// 8.删除商品
delShop(){
let index = this.shopListArr.indexOf(this.currentDelShop);
this.shopListArr.splice(index,1);
this.getAllShopPrice();
}
}
});
</script>
</body>
</html>
上面是.jsp文件，直接复制可以用，但是得有Bootstrap、Vue.js、vue-resource.js、jQuery.js，注意引入顺序~~~
[code]{
"allShops": {
"totalMoney": 0,
"shopList": [
{
"shopId": "1001",
"shopName": "女孩旗袍夏款",
"shopPrice": 58,
"shopNumber": 1,
"shopImage": "img/03.jpg",
"shopDetail": "中国风盘口短袖女宝1-8岁复古民族风儿童汉服连衣裙",
"shopStyle": ["绿木兰花","黄色绽放","水墨荷花"]
},
{
"shopId": "1002",
"shopName": "斯拉夫酸奶威化",
"shopPrice": 39.8,
"shopNumber": 2,
"shopImage": "img/01.jpg",
"shopDetail": "斯拉夫酸奶威化1000g俄罗斯进口巧克力夹心饼干进口零食",
"shopStyle": ["绿木兰花","黄色绽放","水墨荷花"]
},
{
"shopId": "1003",
"shopName": "美式实木台灯北欧",
"shopPrice": 185.0,
"shopNumber": 1,
"shopImage": "img/02.jpg",
"shopDetail": "美式实木台灯北欧卧室床头灯温馨客厅装饰浪漫结婚灯现代简约创意",
"shopStyle": ["A款 送5瓦led","B款 送5瓦led","C款 送5瓦led"]
}
]
}
}
上面是JSON数据，我用的本地数据
还有图片自己准备一下哈，哦对了，我用了字体图标
https://icomoon.io/app/#/select/font
这是图标下载地址
右下角点击下载哈~
欢迎大家评论，一起交流学习，一起进步
阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Vue-router结合transition实现app前进后退动画切换效果的实例
- vue2.0 与 bootstrap datetimepicker的结合使用实例
- Vue.js 结合bootstrap 前端实现分页效果
- 微信小程序中商城购物车实例,追加删除购物车中个别商品实例
- 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
- vue结合Echarts实现点击高亮效果
- Vue Cli与BootStrap结合实现表格分页功能
- vue生成文件本地打开查看效果的实例
- Vue-router结合transition实现app前进后退动画切换效果
- Vue实现侧边菜单栏手风琴效果实例代码
- Bootstrap进度条与AJAX后端数据传递结合使用实例详解
- Vue+vuex+vue-router+sass+webpack+mint-ui 全家桶 开发商城（购物车）
- Bootstrap下拉菜单效果实例代码分享
- vue 1.0 结合animate.css定义动画效果
- PHP结合Vue实现滚动底部加载效果
- vue结合bootstrap表单验证 FormValidation 图片验证
- angularjs实现的购物车效果代码实例
- Vue指令实战：结合bootstrap做一个用户信息输入表格
- fly.js 和 poshytip 插件的结合， 形成加入购物车的动画效果
- vue+ElementUI实现订单页动态添加产品数据效果实例代码