本文介绍了如何使用Vue.js和Axios实现一个购物车应用，包括创建实体模型、添加控制器API、设置路由、添加NuGet引用、处理跨域请求、使用Swagger进行API测试。在前端，利用Vue.js的数据绑定和计算属性实现了购物车商品的增删改查，以及总价和选中商品数量的计算。此外，还展示了购物车页面的HTML结构和样式设计，以及最终实现的效果。
1.
2.
3.创建实体模型
4.添加控制器API
5.设置路由
6.添加NuGet引用
7.更改生成
8.添加跨域请求的NuGet包
9. 使用Swagger
10.使用API
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script type="text/javascript">
// 配置axios数据访问接口
var instance = axios.create({
baseURL: 'https://localhost:44350/api/',//访问地址前缀
timeout: 30000//访问超时的时间
})
var app = new Vue({
el: '#app',
data: {
//购物车中的商品
cartList: [],
//购物车中选中的商品
checkedList: []
},
created() {
//调用后台接口获取购物车中的商品
instance.get('Test/GetCartItemList')
.then((response) => {
this.cartList = response.data;
})
//调用后台接口获取购物车中已选中的商品
instance.get('Test/GetCheckedItem')
.then((response) => {
this.checkedList = response.data;
})
},
computed: {
//计算所有的商品数量
totalItemCount() {
return this.cartList.reduce((sum, item) => {
return sum + item.count
}, 0)
},
//计算已经选中的商品数量
totalCheckedItemCount() {
return this.checkedList.reduce((sum, checkedItem) => {
this.cartList.filter((item) => {
if (item.itemId === checkedItem) {
sum += item.count
}
})
return sum;
}, 0)
},
//计算已经选中的商品总价
totalCheckedItemAmount() {
return this.checkedList.reduce((sum, checkedItem) => {
this.cartList.filter((item) => {
if (item.itemId === checkedItem) {
sum += item.count * item.unitPrice
}
})
return sum;
}, 0)
}
},
methods: {
//选中所有商品
// 注意：需要拿到当前checkbox的选中状态
checkAll(event) {
var checked = event.target.checked;
this.checkedList = [];
//选中所有
if (checked) {
//清空现有的选中
for (let i = 0; i < this.cartList.length; i++) {
//可以选择不请空，在这里判断当前选中的值是否存在
this.checkedList.push(this.cartList[i].itemId)
}
}
},
//减少数量
subCount(itemId) {
this.cartList.filter((item) => {
if (item.count > 1 && item.itemId === itemId) {
item.count--;
}
})
},
//添加数量
addCount(itemId) {
this.cartList.filter((item) => {
if (item.itemId === itemId) {
item.count++;
}
})
},
//从购物车中移除
removeItem(itemId){
//从选选中的列表中移除
this.checkedList.filter((checkedItem,index)=>{
if (checkedItem === itemId) {
this.checkedList.slice(index,1)
}
})
//从商品列表中移除
this.cartList.filter((item,index)=>{
if (item.itemId===itemId){
this.cartList.splice(index,1)
}
})
},
//提交数据至后台
submitOrder(){
//获取所有选中的商品列表
var checkedItemList=[];
this.checkedList.forEach((itemId)=>{
var cartItem=this.cartList.filter((item)=>item.itemId==itemId)[0];
checkedItemList.push(cartItem)
})
//将数据提交至后台
instance.post('Test/SubmitOrder',checkedItemList)
.then((response)=>{
if (response.data === 14820) {
alert("订单提交成功")
}
})
}
}
})
</script>11.
前端设计
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的购物车</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/cart.css">
</head>
<body>
<div id="app">
<!--头部内容-->
<div class="site-header">
<div class="container">
<div class="header-logo">
<img src="img/logo.png" height="55" width="55"/>
</div>
<div class="header-title">
<h2>我的购物车</h2>
<p>温馨提示：产品是否购买成功，最终已下单为准，清尽快结算</p>
</div>
</div>
</div>
<div class="page-main">
<div class="container">
<!--空购物车提示-->
<!-- <template v-if="cartList.length===0">
<div class="cart-empty cart-empty-nologin">
<h2>您的购物车还是空的！</h2>
<p class="login-desc">登录后将显示您之前加入的商品</p>
<a href="javascript:void(0);" class="btn btn-primary btn-login">立即登录</a>
<a href="javascript:void(0);" class="btn btn-primary btn-shoping">马上去购物</a>
</div>
</template> -->
<template >
<!--购物车中的商品列表-->
<div class="cart-goods-list">
<!--列表的头部内容-->
<div class="list-head clearfix">
<!--全部选择多选框-->
<div class="col col-check">
<input type="checkbox"
id="checkAll"
@click="checkAll($event)"
:checked="checkedList.length!==0"
>
<label for="checkAll" class="iconfont icon-checkbox">
√
</label>
</div>
<!--商品图片-->
<div class="col col-img"> </div>
<div class="col col-name">商品名称</div>
<div class="col col-price">单价</div>
<div class="col col-num">数量</div>
<div class="col col-total">小计</div>
<div class="col col-action">操作</div>
</div>
<div class="list-body">
<!--商品列表-->
<div class="item-table">
<div class="item-box">
<div
class="item-row clearfix"
v-for="(item,index) in cartList"
:key="index"
>
<div class="col col-check">
<input type="checkbox"
:id="item.itemId"
:value="item.itemId"
v-model="checkedList">
<label :for="item.itemId" class="iconfont icon-checkbox">√</label>
</div>
<div class="col col-img">
<img :src="item.pictureUrl" alt="">
</div>
<div class="col col-name">
{{item.itemTitle}}
</div>
<div class="col col-price">
{{item.unitPrice}}元
</div>
<div class="col col-num">
<div class="change-goods-num clearfix">
<a href="javascript:;"
@click="subCount(item.itemId)"
:class="{'btn-disabled':item.count===1}">
<i class="iconfont"></i>
</a>
<!--v-model绑定为number-->
<input type="text" v-model.number="item.count" class="goods-num">
<a href="javascript:;" @click="addCount(item.itemId)">
<i class="iconfont"></i>
</a>
</div>
</div>
<div class="col col-total">
{{item.unitPrice*item.count}}元
</div>
<!--从购物车中移除-->
<div class="col col-action">
<a href="javascript:void(0)" class="del" @click="removeItem(item.itemId)">
<i class="iconfont"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--购物车结算-->
<div class="cart-bar clearfix" id="J_cartBar">
<div class="section-left">
<a href="#" class="back-shopping J_goShoping">继续购物</a>
<span class="cart-total">
共<i>{{totalItemCount}}</i>件商品，已选择 <i>{{totalCheckedItemCount}}</i>件
</span>
</div>
<span class="total-price">
合计：<em>{{totalCheckedItemAmount}}</em>元
</span>
<a href="javascript:void(0);" class="btn btn-a"
:class="[checkedList.length!==0?'btn-primary':'btn-disabled']"
@click="submitOrder"
>
去结算
</a>
<div class="no-select-tip" v-if="checkedList.length===0">
请勾选需要结算的商品
<i class="arrow arrow-a"></i>
<i class="arrow arrow-b"></i>
</div>
</div>
</template>
</div>
</div>
</div>12.实现效果
386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
