zoukankan      html  css  js  c++  java
  • vue锤子商城

    1:项目源代码:https://github.com/Hightinstance/project/tree/master/vue/vue_smart_project/vue_smart_black //功能有详细的注释。

    1:锤子商城实战

    (1)       环境配置

    Vue脚手架,vuex,vue-router

     (2) 创建目录结构

     

     (2)组件拆分(页面分析)

    公共样式引入 <link rel="stylesheet" href="/src/assets/css/reset.css">

    拆分头部样式:公共组件<header>

    (3)shop组件

    购物车组件拆分Item组件:进行组件数据的传递来渲染界面;

    Item:需求

    (1)显示当前商品

    (2)点击的时候颜色切换,根据颜色你index给标签绑定事件,给标签添加选中的样式  (3)把静态图片用动态的来代替(图片的链接文字),价格,颜色,图片的切换。

    :class="{'active':index==itemIndex}" //表示当前被选中的样式

    (4)购物车组件(头部组件,全局都可以看到,需要拆分为组件)vuex来管理,全局的数据

    功能实现:

    (1)加入购物车功能 (点击的时候加入功能实现)

    (2)删除购物车功能 (在购车车组件,点击删除的时候删除里面的信息)

    (3)最大数值限制功能,弹出窗口 (当商品限购数量超过最大值的时候,弹出警告窗口)

    (4)弹出窗口的隐藏显示,加入购物车动态展示 (默认隐藏购物车)

    (5)小球飞入的功能实现 (在点击加入购物车的动画过程)

    (5)商品详情页展示

    (1)商品详情页组件静态编写

    (2)路由组件的配置路径和点击跳转,(商品详情数据的传递)

     <router-link :to="{ path: '/item', query: { ItemId: `${item.sku_info[itemIndex].sku_id}` }}"></router-link>

    (3)根据传输的ID显示动态的界面

    (4)颜色,图片循环显示,状态的选中

    (5)动态交互,点击颜色路由的切换,商品图片的切换

    (6)购物车详情页展示

     

    (1)       分析组件的位置,为路由组件(配置路由器),拆分为静态组件

    (2)       渲染为动态的界面(item数据循环,显示,路由的跳转),删除功能

    (3)       界面自己的交互行为

    (4)    选中和非选中状态的操作,首先获取按钮的状态,然后获取全选按钮的状态,进行操作
    (5)    删除所有选中商品,选中所有商品,计算选中的价格和数量
    (6)    路由连接跳转,在有商品选中的情况下
     

    (7)订单结算页展示

    1:购物清单信息:(1)商品信息套取 (2)运费的计算

    2:收货地址和发票信息:(简单一些功能)

    (1)       收货地址动态页面替换 (2)选中状态的切换 ,点切换选中状态(3)添加新地址的窗口,点击组件的关闭可以关闭显示(组件的通信)父类定义方法子类,进行调用。

    (2)将提交的数据放入数组中,(地址,发票信息,选择的数值,价格,运费,时间等等)

    (3)信息提交的保存之后,购物车的商品应该被去除。

    (4)跳转到支付页面

    (7)       adress-pop组件功能实现

    (1)       表单数据的自动搜集

    (2)       字段的检验功能

    (3)       选择市区三级联动

    (4)       点击默认地址的选中状态

    (5)       信息验证功能,开启保存按钮。(深度监视当表单每一项信息填写的时候都要进行验证)

    (6)       点击按钮的时候加入地址栏,更新默认值,关闭窗口,

    (8)       订单界面

    (1)       在路由里面ID数值,筛选出数值在进行动态编写。

    (2)       点击支付之后,状态的切换。

    (3)       个人中心界面,子路由的跳转。

  • 相关阅读:
    [转]网络负载均衡配置十步完成
    视图相关SQL
    视图的作用
    23种设计模式(2):工厂方法模式
    设计模式中类的关系
    23种设计模式(1):单例模式
    linux 下查看系统资源和负载,以及性能监控
    java文件读写操作大全
    JAVA基础知识(static,final,abstract)浅谈
    Hibernate--基于注解方式的各种映射全面总结
  • 原文地址:https://www.cnblogs.com/love-life-insist/p/10207399.html
Copyright © 2011-2022 走看看