先在数据库中创建一个MySQL表
CREATE TABLE fruit (
id INT AUTO_INCREMENT PRIMARY KEY,
NAME VARCHAR(50),
price DECIMAL(8,2)
);
INSERT INTO fruit (NAME, price) VALUES ('苹果', 15.00), ('香蕉', 10.00), ('橘子', 12.00);
用Springboot查询这个数据表并返回数据
@RestController
public class fruitController {
@Autowired
private FruitRepository fruitRepository;
@GetMapping("/fruit")
public List<Fruit> findAll() {
return fruitRepository.findAll();
}
}
App.vue根组件
<template>
<div class="zhuye">
<div class="left">
<ShopList></ShopList>
</div>
<div class="right">
<ShopCar></ShopCar>
</div>
</div>
</template>
<script>
import ShopList from './components/ShopList.vue'
import ShopCar from './components/ShopCar.vue'
export default {
name: 'App',
components: {
ShopList,
ShopCar
},
mounted() {
}
}
</script>
<style type="text/css" scoped="scoped">
.zhuye{
display: flex;
}
.left{
flex: 1;
}
.right{
flex: 1;
}
</style>
商品列表 ShopList.vue
<template>
<div class="ShopList">
<h4>商品列表</h4>
<div v-for="(item,index) in dataList">
<Shop :key="index" :name="item.name" :price="item.price" :id="item.id" :isLoading="item.isLoading"></Shop>
</div>
</div>
</template>
<script>
import axios from 'axios'
import Shop from './Shop.vue'
import store from '../store.js'
export default {
name: 'ShopList',
components:{
Shop
},
data() {
return{
dataList:[]
}
},
mounted() {
var vm = this;
axios.get("http://localhost:8080/fruit")
.then(response => {
// console.log(response.data)
var a = [];
a = response.data;
for(var i=0;i<a.length;i++){
a[i].isLoading=false
a[i].num = 1
}
vm.$store.commit('setDataList', a);
vm.$store.commit('setShopList', a);
vm.dataList = a;
})
.catch(error => {
console.log('请求失败')
});
}
}
</script>
<style type="text/css">
.ShopList{
margin:0;
padding: 0;
width: 300px;
height: 400px;
border: 1px solid red;
text-align: center;
}
</style>
商品shop.vue
<template>
<div class="shop">
<div class="name">{{name}}</div>
<div class="price">¥:{{price}}</div>
<div class="add">
<button type="button" @click="add(id)" :disabled="isLoading">添加到购物车</button>
</div>
</div>
</template>
<script>
export default{
props:['name','price','id','isLoading'],
data() {
return{
}
},
methods:{
add(id){
console.log(id)
this.$store.commit("addShopCart",id);
this.$store.commit("setIsLoadingTrue",id);
console.log(this.$store.state.shopList)
}
},
}
</script>
<style scoped="scoped">
.shop{
width: 100%;
align-items: center;
justify-content: center;
display: flex;
}
.name{
flex: 1;
}
.price{
flex: 1;
}
.add{
flex: 2;
}
</style>
购物车:ShopCar
<template>
<div class="shopcar">
<h4>购物车列表</h4>
<div v-for="(item,index) in shopcarlist" :key="item.id">
<ShopCarList :name="item.name" :price="item.price" :id="item.id" :num="item.num"></ShopCarList>
</div>
<div class="pirce">总价:{{ total_price }}</div>
</div>
</template>
<script>
import ShopCarList from './ShopCarList.vue'
export default{
name:'ShopCar',
components:{
ShopCarList
},
computed: {
shopcarlist() {
return this.$store.state.shopCart;
},
total_price() {
return this.$store.state.total_price
}
}
}
</script>
<style type="text/css" scoped="scoped">
.shopcar{
margin:0;
padding: 0;
width: 300px;
height: 400px;
border: 1px solid red;
text-align: center;
position: relative;
}
.pirce{
position: absolute;
bottom: 20px;
left: 20px;
}
</style>
购物车列表:ShopCarList
<template>
<div class="shop">
<div class="name">
{{ name }} 数量:{{num}}
</div>
<div class="btn">
<div @click="addone(id)" style="cursor: pointer;">
+
</div>
<div @click="delone(id)" style="cursor: pointer;">
-
</div>
</div>
<div class="price">¥:{{ price }}</div>
<div class="del">
<button type="button" @click="del(id)">删除</button>
</div>
</div>
</template>
<script>
export default {
props: ['name','price', 'id'],
data() {
return{
num:1
}
},
methods: {
del(id) {
console.log(id);
this.$store.commit('delShopCart', id);
this.$store.commit('setIsLoadingFalse', id);
},
addone(id){
console.log(id);
this.num++;
this.$store.commit('addone', id);
},
delone(id){
if(this.num<2){
return
}
this.num--;
this.$store.commit('delone', id);
}
}
};
</script>
<style scoped="scoped">
.shop{
width: 100%;
align-items: center;
justify-content: center;
display: flex;
}
.name{
flex: 2;
}
.price{
flex: 1;
}
.btn{
flex: 1;
}
.del{
flex: 1;
}
</style>
vuex store.js
import { createStore } from 'vuex'
const store = createStore({
state () {
return {
//数据列表
dataList:[],
//过滤后的数据列表
shopList:[],
//购物车列表
shopCart:[],
total_price:0
}
},
mutations: {
setDataList(state, data) {
state.dataList = data;
},
setShopList(state, data) {
state.shopList = data;
},
addShopCart(state, id){
state.shopCart.push(state.dataList[id-1])
},
delShopCart(state, id){
state.shopCart = state.shopCart.filter(obj => obj.id !== id);
},
setIsLoadingTrue(state, id) { // 定义一个名为 setIsLoading 的 mutation
const index = state.shopList.findIndex(item => item.id === id); // 查找商品在 shopList 数组中的索引
state.shopList[index].isLoading=true; // 修改商品的 isLoading 属性
state.total_price += state.shopList[index].price
},
setIsLoadingFalse(state, id) { // 定义一个名为 setIsLoading 的 mutation
const index = state.shopList.findIndex(item => item.id === id); // 查找商品在 shopList 数组中的索引
state.shopList[index].isLoading=false;
state.total_price -= state.shopList[index].price
},
addone(state, id){
const index = state.shopList.findIndex(item => item.id === id); // 查找商品在 shopList 数组中的索引
state.shopList[index].price += state.shopList[index].price/state.shopList[index].num
state.shopList[index].num++;
state.total_price += state.shopList[index].price/state.shopList[index].num
},
delone(state, id){
const index = state.shopList.findIndex(item => item.id === id); // 查找商品在 shopList 数组中的索引
state.shopList[index].price -= state.shopList[index].price/state.shopList[index].num
state.shopList[index].num--;
state.total_price -= state.shopList[index].price/state.shopList[index].num
}
},
actions: {
},
getters: {
}
})
export default store