前端:Vue学习 - 购物车项目

前端:Vue学习 - 购物车项目

    • 1. json-server,生成后端接口
    • 2. 购物车项目 - 实现效果
    • 3. 参考代码 - Vuex

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)returnthis.$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。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1487931.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

vue3前端开发-小兔鲜项目-登录和非登录状态下的模板适配

vue3前端开发-小兔鲜项目-登录和非登录状态下的模板适配&#xff01;有了上次的内容铺垫&#xff0c;我们可以根据用户的token来判定&#xff0c;到底是显示什么内容了。 1&#xff1a;我们在对应的导航组件内修改完善一下内容即可。 <script setup> import { useUserSt…

深入理解TensorFlow底层架构

目录 深入理解TensorFlow底层架构 一、概述 二、TensorFlow核心概念 计算图 张量 三、TensorFlow架构组件 前端 后端 四、分布式计算 集群管理 并行计算 五、性能优化 内存管理 XLA编译 六、总结与展望 深入理解TensorFlow底层架构 一、概述 TensorFlow是一个开…

嵌入式C++、InfluxDB、Spark、MQTT协议、和Dash:树莓派集群物联网数据中心设计与实现(代码示例)

1. 项目概述 随着物联网技术的快速发展,如何高效地收集、存储和分析海量IoT设备数据成为一个重要课题。本文介绍了一个基于树莓派集群搭建的小型物联网数据中心,实现了从数据采集到分析可视化的完整流程。 该系统采用轻量级组件,适合资源受限的边缘计算环境。主要功能包括: …

分类常用的评价指标-二分类/多分类

二分类常用的性能度量指标 精确率、召回率、F1、TPR、FPR、AUC、PR曲线、ROC曲线、混淆矩阵 「精确率」查准率 PrecisionTP/(TPFP) 「召回率」查全率RecallTP/(TPFN) 「真正例率」即为正例被判断为正例的概率TPRTP/(TPFN) 「假正例率」即为反例被判断为正例的概率FPRFP/(TNFP)…

Java代码基础算法练习-数值求和-2024.07.25

任务描述&#xff1a; 现有一串字符(长度不超过255个字符)&#xff0c;需对其中的数值字符求和&#xff08;需转换成整型进行计算&#xff09;。 解决思路&#xff1a; 输入字符串&#xff0c;循环对每个字符否为数字&#xff0c;转换整型并求和 转换整型有以下的方式 1. su…

当 Nginx 出现请求的重复提交,如何处理?

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01; 文章目录 当 Nginx 出现请求的重复提交&#xff0c;如何处理&#xff1f;一、理解请求重复提交的来龙去脉二、请求重复提交可能带来的麻烦三、解决方案之“一夫当关”——…

文件包涵条件竞争(ctfshow82)

Web82 利用 session.upload_progress 包含文件漏洞 <!DOCTYPE html> <html> <body> <form action"https://09558c1b-9569-4abd-bf78-86c4a6cb6608.challenge.ctf.show//" method"POST" enctype"multipart/form-data"> …

【YashanDB知识库】yasdb jdbc驱动集成BeetISQL中间件,业务(java)报autoAssignKey failure异常

问题现象 BeetISQL中间件版本&#xff1a;2.13.8.RELEASE 客户在调用BeetISQL提供的api向yashandb的表中执行batch insert并将返回sequence设置到传入的java bean时&#xff0c;报如下异常&#xff1a; 问题的风险及影响 影响业务流程正常执行&#xff0c;无法获得batch ins…

【BUG】已解决:IndexError: positional indexers are out-of-bounds

IndexError: positional indexers are out-of-bounds 目录 IndexError: positional indexers are out-of-bounds 【常见模块错误】 【解决方案】 原因分析 解决方法 示例代码 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是博…

HarmonyOS入门-状态管理

View(UI)&#xff1a;UI渲染&#xff0c;指将build方法内的UI描述和Builder装饰的方法内的UI描述映射到界面。 State&#xff1a;状态&#xff0c;指驱动UI更新的数据。用户通过触发组件的事件方法&#xff0c;改变状态数据。状态数据的改变&#xff0c;引起UI的重新渲染。 装…

2024权益商城系统网站源码

2024权益商城系统源码&#xff0c;支持多种支付方式&#xff0c;后台商品管理&#xff0c;订单管理&#xff0c;串货管理&#xff0c;分站管理&#xff0c;会员列表&#xff0c;分销日志&#xff0c;应用配置。 上传到服务器&#xff0c;修改数据库信息&#xff0c;导入数据库…

四、GD32 MCU 常见外设介绍 (7) 7.I2C 模块介绍

7.1.I2C 基础知识 I2C(Inter-Integrated Circuit)总线是一种由Philips公司开发的两线式串行总线&#xff0c;用于内部IC控制的具有多端控制能力的双线双向串行数据总线系统&#xff0c;能够用于替代标准的并行总线&#xff0c;连接各种集成 电路和功能模块。I2C器件能够减少电…

deepin深度操作系统安装教程(完整安装步骤·详细图文教程)

官方下载教程 一、概述 如果您首次使用deepin ISO镜像文件来安装deepin系统&#xff0c;无论您之前是否有安装过Windows电脑系统或者Debian、Ubuntu等其他Linux发行版桌面操作系统&#xff0c;我们都建议您先阅读本文档再安装。安装时&#xff0c;您可以选择只安装deepin系统…

Angular由一个bug说起之八:实践中遇到的一个数据颗粒度的问题

互联网产品离不开数据处理&#xff0c;数据处理有一些基本的原则包括&#xff1a;准确性、‌完整性、‌一致性、‌保密性、‌及时性。‌ 准确性&#xff1a;是数据处理的首要目标&#xff0c;‌确保数据的真实性和可靠性。‌准确的数据是进行分析和决策的基础&#xff0c;‌因此…

思维(交互题),CF 1990E2 - Catch the Mole(Hard Version)

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 E2 - Catch the Mole(Hard Version) 二、解题报告 1、思路分析 考虑每次误判都会让鼹鼠上升一层&#xff0c;相应的&#xff0c;最外层的一层结点都没用了 由于数据范围为5000&#xff0c;我们随便找个叶子…

OSPF概述

OSPF OSPF属于内部网关路由协议【IGP】 用于单一自治系统【Autonomous System-AS】内决策路由 自治系统【AS】 执行统一路由策略的一组网络设备的组合 OSPF概述 为了适应大型的网络&#xff0c;OSPF在AS内划分多个区域 每个OSPF路由器只维护所在区域的完整的链路状态信息 …

微服务实战系列之玩转Docker(五)

前言 在我们日常的工作生活中&#xff0c;经常听到的一句话&#xff1a;“是骡子是马拉出来遛遛”。目的是看一个人/物是不是名副其实。我们在使用docker时&#xff0c;也要看看它究竟是如何RUN起来的。当面试官问你的时候&#xff0c;可以如是回答&#xff0c;保你“一文通关…

prometheus tsdb索引布局及查询流程

prometheus 磁盘布局 采集到的数据每两个小时形成一个block。每个block由一个目录组成&#xff0c;并存放在data路径下。该目录包含一个包含该时间窗口的所有时间序列样本的块子目录、一个元数据文件和一个索引文件&#xff08;将metric_name和label索引到目录下的时间序列&am…

导航不是GPS吗,有人用北斗吗?

在现代生活中&#xff0c;提到导航&#xff0c;人们脑海中最先浮现的往往是GPS。然而&#xff0c;近年来&#xff0c;中国自主研发的北斗导航系统&#xff08;BeiDou Navigation Satellite System, BDS&#xff09;正在迅速崛起&#xff0c;逐步占据全球导航市场的一席之地&…

SQL-REGEX-常见正则表达式的使用

SQL-REGEX-常见正则表达式的使用 在SQL中&#xff0c;正则表达式&#xff08;Regex&#xff09;的使用可以帮助进行更灵活和精确的模式匹配和数据筛选。不同的数据库管理系统对于正则表达式的支持略有差异&#xff0c;但大体都是相似的。 Tips&#xff1a; 模式描述匹配内容…