39、完成购物车页面

前言:很久没有更新这个项目了,加快进度,今天把购物车页面完成,然后下两章把前端方面的工作基本都做完,开始讲node后端数据库方面的知识点。
GitHub:https://github.com/Ewall1106/mall

1、商品列表

  • 顶部导航栏的收货地址这里的内容前面都已经说过了,下面的商品列表部分我们还是借助vant中的Card卡片组件来实现这方面的功能。
  • 首先当然是引入之类的功能罗,这里就不说了,前面已经讲得很透彻了,使用起来也很简单,我就简单贴个代码:


    39、完成购物车页面_第1张图片
    cart组件的运用

2、商品总额及支付按钮

  • 这里的商品总额就是一些简单的布局和样式了。
39、完成购物车页面_第2张图片
商品总额及支付按钮

小结

  • 首先我们来看一看购物车的一个简单效果:
39、完成购物车页面_第3张图片
购物车的简单效果
  • 效果就是上图中的这个样子了,先把页面做出来,后续功能在写前后端交互的时候一并处理。这章就先这样,下章把"个人中心"页面做完,我们就开始讲nodemongodb数据库。

你可能感兴趣的:(39、完成购物车页面)