web前端课程设计——农产品购物车

目录

一.项目结构

二.业务说明

1.购物车管理功能

(1)商品加减

 (2)全选和反选

(3)删除单个商品和批量删除商品

2.商品展示功能

三.部分代码展示

1.商品渲染展示

2.单选多选

---

web前端课程设计-农产品购物车https://download.youkuaiyun.com/download/m0_74808313/89478898

该课程设计使用的环境为:HTML+css+JavaScript,vue3,creat-vue脚手架工具，vscode编辑器

其中实现的功能为:购物车管理，商品展示。

1.购物车管理中包含对商品数量进行加减，对商品进行全选或反选操作，删除单个商品或批量删除商品。

2.商品展示包含对购物车中的商品进行渲染展示，例如改变数量总金额进行改变等等

一.项目结构

使用creat-vue脚手架工具进行vue项目工程化

使用到的项目结构如下:

• index.html为程序入口Html文件
• main.js为应用程序入口文件
• App.vue为根组件
• assets为静态资源文件夹，存放图片，样式等
• views为页面视图文件夹，存放.vue文件

二.业务说明

页面展示图如下:

1.购物车管理功能

(1)商品加减

我们可以对购物车里的商品数量进行加减，点击“+”商品数量加1，点击“-”商品数量减1，同时该商品总价会发生改变

加前:

加后: