Vue练手项目之购物车案例（一）

最新推荐文章于 2024-08-12 16:27:11 发布

奇奇前端学习打卡

最新推荐文章于 2024-08-12 16:27:11 发布

阅读量1k

点赞数 1

分类专栏：学习文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_48846123/article/details/131871708

版权

本文介绍了一个使用Vue.js构建的购物车案例，涵盖了从接口准备到数据同步的全过程。首先，通过fastmock创建接口并导入数据。接着，实现头部框架，导入Header.vue组件，并删除默认的根组件内容。然后，搭建内容框架，引入Goods.vue组件，通过props进行数据传递。在组件间使用axios进行异步请求，并解决复选框点击和数据不同步问题。最后，提供源代码下载链接供读者参考学习。

摘要由CSDN通过智能技术生成

注：初始源代码我放置最后啦！！！

一、准备工作

开始之前我们需要存储一些数据，后面异步接口需要用到，我用的是fastmock网站

1、我们打开fastmock

fastmock 在线接口 Mock 平台如果是第一次打开可能需要注册登录

2、新建接口

项目名称：购物车案例

接口基础路径：/shop

项目描述:购物车案例

3、设置接口

我们点新增接口 -->接口名：数据存储

类型：get

url：/cart

4、导入数据

我们在右侧添上以下代码（图片地址和名字都是我自己搜的大家有喜欢的可以替换）：

{
  "status": 200,
  "message": "获取购物车列表成功",
  "list": [{
      "id": 1,
      "goods_count": 1,
      "goods_img": "http://t14.baidu.com/it/u=43462758,1432062369&fm=224&app=112&f=JPEG?w=500&h=500",
      "goods_name": "辰米范 法式收腰连衣裙女显瘦新款设计感露背黑色v领泡泡袖长裙子",
      "goods_price": 188.00,
      "goods_state": false
      
    },
    {
      "id": 2,
      "goods_count": 1,
      "goods_img": "https://img14.360buyimg.com/imgzone/jfs/t1/195902/5/25856/287194/62b36d0bEbd86d5b8/df3db4bd5bc056a9.jpg",
      "goods_name": "质感至上 精致贵女风 金属丝星云升级版日本三醋酸连衣裙",
      "goods_price":998.00,
      "goods_state": true
    },
    {
      "id": 3,
      "goods_count": 2,
      "goods_img": "https://inews.gtimg.com/newsapp_bt/0/8111639339/1000",
      "goods_name": "高知疏离 高氧分小洋裙 空气感高包容重磅珍珠缎双层真丝",
      "goods_price": 288.00,
      "goods_state": true
    },
    {
      "id": 4,
      "goods_count": 1,
      "goods_img": "http://t13.baidu.com/it/u=2480967665,3117449742&fm=224&app=112&f=JPEG?w=500&h=500",
      "goods_name": "好养眼 金高银式素美人气质 优雅生姿 竹节轻麻感空气裙",
      "goods_price": 198.00,
      "goods_state": true
    },
    {
      "id": 5,
      "goods_count": 1,
      "goods_img": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F0c873895-112e-4286-b797-9f0fdae3dff2%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692368179&t=7d482246a02b7bafa81aff12d8e36afe",
      "goods_name": "女童连衣裙2023新款夏季儿童泡泡袖裙子女孩蓬蓬公主裙礼服童装夏",
      "goods_price": 79.00,
      "goods_state": true
    },
    {
      "id": 6,
      "goods_count": 1,
      "goods_img": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fd69b3192-ab01-4975-be0d-a