前端：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 ={asyncgetBooks(context){const res =await axios.get('http://localhost:3000/books');
        context.commit('updateBooks',res.data);},asyncupdateBooks(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);}};exportdefault{namespaced:true,
    state,
    mutations,
    actions,
    getters
}

在store目录下index.js文件引入这个模块即可。

import books from'./modules/books'exportdefaultnewVuex.Store({...,modules:{
        books
    }})

App.vue代码如下：

<template><divid="app"><ul><liv-for="item in books2":key="item.id"class="sp"><Cart:item="item"></Cart></li></ul><TotalPriceclass="total-price-position"></TotalPrice></div></template><script>import{mapState}from'vuex'import Cart from'./components/Cart.vue';import TotalPrice from'./components/TotalPrice.vue';exportdefault{name:'App',components:{
    Cart,TotalPrice
  },asynccreated(){this.$store.dispatch('books/getBooks');},computed:{...mapState('books',['books2'])}}</script><stylelang="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><divclass="sp-item"><!-- <img :src="require('@/static/'+item.bookName+'.png')" alt=""> --><imgsrc="@/static/水浒传.png"alt=""><pclass="sp-name">{{item.bookName}}</p><pclass="sp-price">￥{{item.price}}</p><divclass="sp-btn"><buttonclass="sp-l-btn"@click="btnClick(-1)">-</button><pclass="sp-count">{{item.count}}</p><buttonclass="sp-r-btn"@click="btnClick(1)">+</button></div></div></template><script>exportdefault{name:'Cart',props:{item:Object
    },methods:{btnClick(step){const newCount =this.item.count + step;const id =this.item.id;if(newCount <1)returnthis.$store.dispatch('books/updateBooks',{
                id,
                newCount
            })}}}</script><stylelang="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><divclass="total-price-div"><spanclass="z-span"></span>
        共<span>{{totalCount}}</span>本，总共<spanclass="total-price">{{totalPrice}}</span>元
        <button>结算</button></div></template><script>import{mapGetters}from'vuex';exportdefault{name:"TotalPrice",computed:{...mapGetters('books',['totalCount','totalPrice'])}}</script><stylescopedlang="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。