前端: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.rhkb.cn/news/383427.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于STM32瑞士军刀--【FreeRTOS开发】学习笔记(一)|| RISC / 底层代码执行步骤 / 汇编指令

本篇文章基于韦东山老师讲课笔记和自己理解编写。 RISC ARM芯片属于精简指令集计算机(RISC&#xff1a;Reduced Instruction Set Computing)&#xff0c;它所用的指令比较简单&#xff0c;有如下特点&#xff1a; ① 对内存只有读、写指令 ② 对于数据的运算是在CPU内部实现 …

CasaOS设备使用Docker安装SyncThing文件同步神器并实现远程管理

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

加密软件有什么用?五款电脑文件加密软件推荐

加密软件对于个人和企业来说至关重要&#xff0c;尤其是在2024年这样一个高度数字化的时代&#xff0c;数据安全变得尤为重要。 数据保护&#xff1a;加密软件可以保护敏感信息不被未经授权的人访问。这包括个人数据、财务记录、健康信息、企业机密等。 防泄漏&#xff1a;防…

Python 全栈体系【三阶】(三)

第一章 Django 七、静态文件 1. 概述 静态文件是指在WEB应用中的图像文件、CSS文件、Javascript文件。 2. 静态文件的配置 settings.py中关于静态文件的配置如下&#xff1a; STATICFILES_DIRS [BASE_DIR , static, ]STATIC_URL /static/其中&#xff1a; STATICFILES…

java面试题,有synchronized锁,threadlocal、数据可以设置默认值、把redis中的json转为对象

有面试题&#xff0c;有synchronized锁&#xff0c;threadlocal 一、面试题小记二、加锁synchronized1. 先看代码2. synchronized 讲解2.1. 同步代码块2.2. 同步方法2.3. 锁的选择和影响2.4. 注意事项2.5 锁的操作&#xff0c;手动释放锁&#xff0c;显式地获取锁&#xff08;属…

【llama3.1】ollama的使用--本地部署使用llama3.1模型

快速入门 安装完成ollama后,在命令行窗口输入 ollama run llama3 上图表示 Ollama 正在下载 llama3 任务所需的资源文件,并显示了当前的下载进度、速度和预计剩余时间。这是 Ollama 在准备运行 llama3 任务之前所需的步骤。 上面的步骤完成后,就可以在本地进行聊天了,…

Golang | Leetcode Golang题解之第268题丢失的数字

题目&#xff1a; 题解&#xff1a; func missingNumber(nums []int) int {n : len(nums)total : n * (n 1) / 2arrSum : 0for _, num : range nums {arrSum num}return total - arrSum }

Xlua原理 二

一已经介绍了初步的lua与C#通信的原理&#xff0c;和xlua的LuaEnv的初始化内容。 这边介绍下Wrap文件。 一.Wrap介绍 导入xlua后可以看到会多出上图菜单。 点击后生成一堆wrap文件&#xff0c;这些文件是lua调用C#时进行映射查找用的中间代码。这样就不需要去反射调用节约性…

Vue中的diff算法

文章目录 diff算法是什么比较方式源码分析patchpatchVnodeupdateChildren小结Vue3中diff算法优化diff算法是什么 diff算法是一种通过同层的树节点进行比较的高效算法 其有两个特点: 比较只会在同层级进行,不会跨层级比较在dff比较的过程中,循环从两边向中间比较(首位交叉…

Linux系统下安装MySQL

前言&#xff1a; 本篇教程是使用Centos8来进行安装部署&#xff0c;如果使用的Linux系统发行版不同安装部署过程中可能会有差异&#xff0c;相同环境下可以跟着操作流程进行部署。本篇文章的主要目的是为了学习分享使用如有疑问欢迎提出并共同讨论。 1、安装前的准备工作 移除…

sql的执行流程

执行过程分成两层&#xff0c;一层是server层&#xff0c;主要进行连接服务&#xff0c;和分析语句&#xff0c;执行sql 具体流程是 首先与用户通过连接器建立连接&#xff0c;然后将sql查询语句在查询缓存中查找&#xff0c;如果查找处理过相同的语句将&#xff0c;直接返回数…

用uniapp 及socket.io做一个简单聊天app 2

在这里只有群聊&#xff0c;二个好友聊天&#xff0c;可以认为是建了一个二人的群聊。 const express require(express); const http require(http); const socketIo require(socket.io); const cors require(cors); // 引入 cors 中间件const app express(); const serv…

Nginx 如何处理请求的流量削峰?

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01; 文章目录 Nginx 如何处理请求的流量削峰&#xff1f;一、什么是流量削峰二、Nginx 实现流量削峰的基本原理&#xff08;一&#xff09;反向代理与负载均衡&#xff08;二&…

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

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

【python】OpenCV—Open URL Images

文章目录 1、需求描述2、方法一&#xff0c;numpyurlopen3、方法二&#xff0c;scikit-learn4、涉及到的库urllib.request.urlopenskimage.io.imread 5、参考文章 1、需求描述 给出一个 url 链接&#xff0c;显示该链接对应的图片 2、方法一&#xff0c;numpyurlopen # 导入…

Linux应用——socket函数及TCP通信

网络通信实质上也是实现进程间通信&#xff0c;只是与之前进程间通信不同的是&#xff0c;现在在不同的计算机上进行进程间通信。比如&#xff1a;利用QQ工具实现聊天&#xff0c;在两个电脑上有不同的QQ进程之间在通信。而网络通信是如何使用进程间通信呢&#xff1f;采用的是…

力扣高频SQL 50 题(基础版)第一题

文章目录 力扣高频SQL 50 题&#xff08;基础版&#xff09;第一题1757.可回收且低脂的产品题目说明思路分析实现过程准备数据&#xff1a;实现方式&#xff1a;结果截图&#xff1a; 力扣高频SQL 50 题&#xff08;基础版&#xff09;第一题 1757.可回收且低脂的产品 题目说…

pdf2docx - pdf 提取内容转 docx

文章目录 一、关于 pdf2docx主要功能限制 二、安装1、 PyPI2、从remote安装3、从源码安装4、卸载 三、转化 PDF例 1: convert all pages例 2: 转换指定页面例 3: multi-Processing例 4: 转换加密的pdf 四、提取表格五、命令行交互1、按页面范围2、按页码3、Multi-Processing 六…

Java之集合底层-数据结构

Java集合之数据结构 1 概述 数据结构是计算机科学中研究数据组织、存储和操作的一门学科。它涉及了如何组织和存储数据以及如何设计和实现不同的数据操作算法和技术。常见的据结构有线性数据结构&#xff08;含数组、链表、栈和队列等&#xff09;&#xff0c;非线性数据结构…

探索算法系列 - 双指针

目录 移动零&#xff08;原题链接&#xff09; 复写零&#xff08;原题链接&#xff09; 快乐数&#xff08;原题链接&#xff09; 盛最多水的容器&#xff08;原题链接&#xff09; 有效三角形的个数&#xff08;原题链接&#xff09; 查找总价格为目标值的两个商品&…