《elementui shop》

一、解决方案简述

在构建ElementUI Shop时，旨在创建一个基于Element UI框架的简洁、高效且具有良好用户体验的购物类前端页面。通过合理利用Element UI提供的丰富组件，如导航菜单、商品卡片、表格等，快速搭建起包含商品展示、分类浏览、购物车管理等功能的电商页面结构。

二、构建页面布局

1. 导航栏与侧边栏

为了实现页面的导航功能，使用el - menu组件来构建导航栏。对于侧边栏，同样采用el - menu，并且设置其为垂直模式。
```html

首页
商品分类
联系我们

数码产品

手机
电脑

家居用品

家具
厨具

export default {
data() {
return {
activeIndex: '1'
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
},
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}

</p>

<h3>2. 商品展示区域</h3>

<p>利用<code>el - card组件创建商品卡片，以展示商品的基本信息，如图片、名称、价格等。
```html

    
        
            
                
                
                    {{item.name}}
                    
                        {{ item.price }}
                        加入购物车
                    
                
            
        
    



export default {
    data() {
        return {
            goodsList:[
                {name:'商品1',price:'100元',imgUrl:'商品1图片路径'},
                {name:'商品2',price:'200元',imgUrl:'商品2图片路径'}
            ]
        }
    }
}



.time {
    font-size: 13px;
    color: #999;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.image {
    width: 100%;
    display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

三、数据获取与处理思路

1. 静态数据模拟

上面示例中的商品数据是静态定义在组件内的，这种方式适合于测试或者小型项目初期开发。可以方便地直接查看效果，并且不需要复杂的后端接口配合。

2. 后端接口请求

当项目规模增大，需要动态获取数据时，可以通过axios等库发起HTTP请求从后端获取商品数据。例如：
javascript methods:{ getGoodsData(){ axios.get('/api/goods') .then(response=>{ this.goodsList = response.data; }) .catch(error=>{ console.error('获取商品数据失败:',error); }); } } // 在mounted生命周期中调用 mounted(){ this.getGoodsData(); }
在实际项目中，可能还需要对返回的数据进行格式化处理，以满足页面显示的需求。

四、购物车管理思路

1. 简单本地存储

对于简单的购物车功能，可以将用户添加到购物车的商品信息（如商品id、数量等）存储在浏览器的本地存储（localStorage或sessionStorage）中。每次添加商品时，读取已有的购物车数据，更新后再存回。
javascript methods:{ addToCart(goodId){ let cart = JSON.parse(localStorage.getItem('cart')) || []; let isExist = false; for(let i = 0;i < cart.length;i++){ if(cart[i].id === goodId){ cart[i].quantity++; isExist = true; break; } } if(!isExist){ cart.push({id:goodId,quantity:1}); } localStorage.setItem('cart',JSON.stringify(cart)); } }

2. 基于Vuex状态管理

如果项目较为复杂，涉及到多个页面之间的购物车数据共享，那么可以使用Vuex来进行全局的状态管理。定义好购物车相关的state、mutation和action，各个组件通过mapMutations、mapActions等方式来操作购物车数据。
```javascript
// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
state: {
cart:[]
},
mutations: {
addCart(state,payload){
let isExist = false;
for(let i = 0;i < state.cart.length;i++){
if(state.cart[i].id === payload.id){
state.cart[i].quantity++;
isExist = true;
break;
}
}
if(!isExist){
state.cart.push({...payload,quantity:1});
}
}
},
actions: {
addToCart(context,payload){
context.commit('addCart',payload);
}
}
})
// 组件中使用
methods:{
...mapActions(['addToCart']),
addGoodToCart(good){
this.addToCart({id:good.id,name:good.name,price:good.price});
}
}
```