前端Vue学习之购物车项目实战记录
作者：坚持不懈的大白
购物车是电商必备的功能,可以让用户一次性购买多个商品,下面这篇文章主要给大家介绍了关于前端Vue学习之购物车项目的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
1. json-server，生成后端接口
全局安装json-server，json-server官网为：json-server
npm install json-server -g // 全局安装
安装之后启动可能存在json-server与node版本不兼容导致的问题，为此，建议指定一个json-sever版本。
需要准备一个json文件，然后在json文件中写入json数据，利用json-server，就可以实现增删改查功能。
{
"books":[
{"id":1,"bookName":"三国演义","price":23},
{"id":2,"bookName":"西游记","price":43},
{"id":3,"bookName":"水浒传","price":33}
]
}
在这个json文件的目录下执行下述命令，
2. 购物车项目 - 实现效果
就是更改对应书本的购买数量，下面显示共计多少本书，以及需要多少钱实时更新。界面上构建了两个组件，分别为单个书本组件和下面总计组件。状态控制使用vuex.store来进行管理。
3. 参考代码 - Vuex
使用模块化对这个界面需要用到store进行封装，命名为books.js，代码如下：
import axios from 'axios'
const state = {
books2:[]
};
const mutations = {
updateBooks(state,newBooks){
state.books2 = newBooks;
},
updateCount(state,obj){
const book = state.books2.find(item => item.id == obj.id);
book.count = obj.newCount;
}
};
const actions = {
async getBooks(context){
const res = await axios.get('http://localhost:3000/books');
context.commit('updateBooks',res.data);
},
async updateBooks(context,obj){
await axios.patch(`http://localhost:3000/books/${obj.id}`,{
count:obj.newCount
})
// 后台修改数据
context.commit('updateCount',{
id:obj.id,
newCount:obj.newCount
});
// 前端页面显示
}
};
const getters = {
totalCount(state) {
return state.books2.reduce((sum, item) => sum + item.count,0);
},
totalPrice(state) {
return state.books2.reduce((sum, item) => sum + item.count * item.price,0);
}
};
export default {
namespaced:true,
state,
mutations,
actions,
getters
}在store目录下index.js文件引入这个模块即可。
import books from './modules/books'
export default new Vuex.Store({
...,
modules:{
books
}
})
App.vue代码如下：
<template>
<div id="app">
<ul>
<li v-for="item in books2" :key="item.id" class="sp">
<Cart :item="item"></Cart>
</li>
</ul>
<TotalPrice class="total-price-position"></TotalPrice>
</div>
</template>
<script>
import {mapState} from 'vuex'
import Cart from './components/Cart.vue';
import TotalPrice from './components/TotalPrice.vue';
export default {
name: 'App',
components: {
Cart,TotalPrice
},
async created(){
this.$store.dispatch('books/getBooks');
},
computed:{
...mapState('books',['books2'])
}
}
</script>
<style lang="less" scoped>
#app{
position: relative;
width: 100%;
height: 700px;
.total-price-position{
position: absolute;
bottom: 0;
left: 0;
}
}
.sp{
height: 100px;
margin-top: 5px;
border-bottom: 1px solid yellow;
}
</style>
当个书本组件代码如下：Cart.vue
<template>
<div class="sp-item">
<!-- <img :src="require('@/static/'+item.bookName+'.png')" alt=""> -->
<img src="@/static/水浒传.png" alt="">
<p class="sp-name">{{item.bookName}}</p>
<p class="sp-price">￥{{item.price}}</p>
<div class="sp-btn">
<button class="sp-l-btn" @click="btnClick(-1)">-</button>
<p class="sp-count">{{item.count}}</p>
<button class="sp-r-btn" @click="btnClick(1)">+</button>
</div>
</div>
</template>
<script>
export default {
name:'Cart',
props:{
item:Object
},
methods:{
btnClick(step){
const newCount = this.item.count + step;
const id = this.item.id;
if(newCount < 1)
return
this.$store.dispatch('books/updateBooks',{
id,
newCount
})
}
}
}
</script>
<style lang="less" scoped>
.sp-item{
width: 100%;
height: 100%;
position: relative;
>*{
position: absolute;
}
img{
width: 100px;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.sp-name{
top: 6px;
left: 104px;
font-size: 18px;
}
.sp-price{
bottom: 4px;
left: 104px;
color: red;
font-weight: 600;
}
.sp-btn{
bottom: 4px;
right: 2px;
>*{
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
}
}
}
</style>
总计组件代码如下：TotalPrice.vue
<template>
<div class="total-price-div">
<span class="z-span"></span>
共<span>{{totalCount}}</span>本，总共<span class="total-price">{{totalPrice}}</span>元
<button>结算</button>
</div>
</template>
<script>
import {mapGetters} from 'vuex';
export default {
name:"TotalPrice",
computed:{
...mapGetters('books',['totalCount','totalPrice'])
}
}
</script>
<style scoped lang="less">
.total-price-div{
height: 60px;
width: 100%;
line-height: 60px;
padding: 2px;
background-color: #e1dcdc;
}
.total-price{
color: red;
}
.z-span{
width: 146px;
display: inline-block;
}
button{
color: white;
background-color: green;
border-radius: 6px;
width: 60px;
height: 40px;
line-height: 40px;
}
</style>
项目中需要用到axios、less、vuex。
总结
到此这篇关于前端Vue学习之购物车项目的文章就介绍到这了,更多相关前端Vue购物车项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！