前端: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.mzph.cn/news/875299.shtml

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

相关文章

增材制造与智能制造关系

在撰写的增材制造技术与装备书籍中有着明确的描述&#xff0c;增材制造是智能制造的典型范例&#xff0c;是智能制造“类”的实例化过程。这种借助于计算机编程面向对象思想的解释可以更全面的理解增材制造和智能制造的关系。增材制造实例具备了智能制造类的属性&#xff0c;智…

钉钉 ai卡片 stream模式联调

sdk连接 新建卡片模板下载node.js sdkconfig.json 配置应用信息 启动项目npm i npm run build npm run start连接成功 获取卡片回调 注册卡片回调事件调用https://api.dingtalk.com/v1.0/card/instances 创建卡片实例&#xff0c;返回实例Id //参数结构 {"cardTempla…

Redis 7.x 系列【30】集群管理命令

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Redis 版本 7.2.5 源码地址&#xff1a;https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 概述2. 集群信息2.1 CLUSTER INFO 3. 节点管理3.1 CLUSTER MYID3.2 CLUSTER NODES3…

LC617-合并二叉树

文章目录 1 题目描述2 思路优化代码完整输入输出 参考 1 题目描述 https://leetcode.cn/problems/merge-two-binary-trees/description/ 给你两棵二叉树&#xff1a; root1 和 root2 。 将其中一棵覆盖到另一棵之上时&#xff0c;两棵树上的一些节点将会重叠&#xff08;而另…

数据结构排序合集(笔记)

目录 一.插入排序与希尔排序 二.选择排序与堆排序 三.冒泡排序和快速排序 四.归并排序 五.计数排序 一.插入排序与希尔排序 时间复杂度空间复杂度稳定性插入排序O&#xff08;N^2&#xff09;O(1)稳定希尔排序O(N^1.3)O(1)不稳定 插入排序&#xff1a; 希尔排序&#xff…

报红:找不到名称ref ts(2304)、‘ref‘ is not defined. eslint(no-undef)

接上篇 在上篇介绍了使用 unplugin-auto-import 和 unplugin-vue-components 配置完成后&#xff0c;项目可以正常运行&#xff0c;并且页面也正常显示&#xff0c;但vscode里就是报红 这个报红可能是由于 ts 发出的&#xff0c;也可能是由于 eslint 发出的 具体可以用鼠标…

打卡第22天------回溯算法

开始学习了,希望我可以尽快成功上岸! 一、回溯理论基础 什么是回溯法?回溯法也可以叫做回溯搜索法,它是一种搜索的方式。 回溯是递归的副产品,只要有递归就会有回溯。 回溯法的效率回溯法的本质是穷举,穷举所有可能,然后找出我们想要的答案。如果想让回溯法高效一些,可…

Docker-Compose实现MySQL之主从复制

1. 主服务器(IP:192.168.186.77) 1.1 docker-compose.yml services:mysql-master:image: mysql:latest # 使用最新版本的 MySQL 镜像container_name: mysql-master # 容器的名称environment:MYSQL_ROOT_PASSWORD: 123456 # MySQL root 用户的密码MYSQL_DATABASE: masterd…

我用Tauri开发的待办效率工具开源了!

开源仓库地址 gitee Git仓库地址:https://gitee.com/zhanhongzhu/zhanhongzhu.git 应用地址 windows应用地址下载 https://kestrel-task.cn 具体内容 也可以看&#x1f389;使用Taurivitekoa2mysql开发了一款待办效率应用 这篇文章。 &#x1f4bb;技术栈 Tauri: Tauri…

传统自然语言处理(NLP)与大规模语言模型(LLM)详解

自然语言处理&#xff08;NLP&#xff09;和大规模语言模型&#xff08;LLM&#xff09;是理解和生成人类语言的两种主要方法。本文将介绍传统NLP和LLM的介绍、运行步骤以及它们之间的比较&#xff0c;帮助新手了解这两个领域的基础知识。 传统自然语言处理&#xff08;NLP&…

Redis分布式系统中的主从复制

本篇文章主要对Redis的主从复制进行讲解。主要分析复制的原理&#xff0c;包括:建立复制、全量复制、部分复制、全量复制、心跳检测等。希望本篇文章会对你有所帮助。 文章目录 一、主从复制简介 二、配置主从复制模式 断开主从复制 安全性 只读 传输延迟 三、拓扑结构 四、主…

如何利用VPN和NAT技术实现高效安全的网络连接

文章目录 **什么是VPN&#xff1f;****专用地址的使用****VPN的工作原理****远程接入VPN****VPN的应用实例****什么是NAT&#xff1f;****NAT的工作原理****NAPT&#xff08;网络地址与端口号转换&#xff09;****NAT的优势和局限****NAT的应用实例****VPN和NAT的结合****常见问…

C++ | Leetcode C++题解之第279题完全平方数

题目&#xff1a; 题解&#xff1a; class Solution { public:// 判断是否为完全平方数bool isPerfectSquare(int x) {int y sqrt(x);return y * y x;}// 判断是否能表示为 4^k*(8m7)bool checkAnswer4(int x) {while (x % 4 0) {x / 4;}return x % 8 7;}int numSquares(i…

详细带你彻底搞懂 Spring Security 6.0 的实现原理

​ 博客主页: 南来_北往 系列专栏&#xff1a;Spring Boot实战 前言 Spring Security 6.0是一个功能强大且可扩展的身份验证和访问控制框架&#xff0c;它用于保护基于Java的应用程序。其主要目标是提供一个全面的安全解决方案&#xff0c;包括身份验证、授权、防止跨站请…

IPv6过渡技术之网络工程师软考中级

IPv6过渡技术 IPv4/IPv6双栈 1.设备支持IPV4/IPv6&#xff0c;IPv4及IPv6在网络中独立部署&#xff0c;在一段时间内并存。对现有IPv4业务影响较小。 2.演进方案相对简单、易理解。网络规划设计工作量相对更少 3.现有软硬件(网络设备、终端、操作系统等)已经有很大一部分支持…

IDEA-安装插件 驼峰下划线转换

第一步&#xff1a;安装 file-settings-plugins-在marketplace搜索“CamelCase”-点击安装 第二步&#xff1a;设置 file-settings-editor-camel_case 第三步&#xff1a;使用 选中想转换的遍历 使用快捷键 Alt Shift U

用excel能做出这些报表吗?

用excel能做出这些报表吗&#xff1f; 有什么办法不安装OFFICE也能显示出来&#xff1f;

ARM体系结构和接口技术(十)按键中断实验

文章目录 一、按键中断实验&#xff08;一&#xff09;分析按键电路图&#xff08;二&#xff09;芯片手册 二、按键中断实验分析&#xff08;一&#xff09;查看所有外设的总线以及寄存器基地址&#xff08;二&#xff09;RCC章节&#xff08;三&#xff09;GPIO章节&#xff…

2024最新Uniapp的H5网页版添加谷歌授权验证

现在教程不少&#xff0c;但是自从谷歌升级验证之后&#xff0c;以前的老教程就失效了&#xff0c;现在写一个新教程以备不时之需。 由于众所周知的特殊原因&#xff0c;开发的时候一定注意网络环境&#xff0c;如果没有梯子是无法进行开发的哦~ clientID的申请方式我就不再进…

HTML开发笔记:3.图形化开发软件与模版网站

一、Google Web Designer 下载网址&#xff1a;webdesigner.withgoogle.com&#xff08;得挂梯子&#xff09; 可以编辑文字 可以插入图片&#xff0c;快捷键是ctrlshiftI 右侧“大纲”属性中可以调节大小 可以点击右上角在浏览器中预览效果&#xff1a; 二、模版网站 https://…