# varmilo

**Repository Path**: zhonghuran/varmilo

## Basic Information

- **Project Name**: varmilo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-11-03
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 首页

#### 1.header部分

1-1.点击主题键盘按钮跳转列表页
1-2.点击登录跳转到登录页面
1-3.点击注册跳转到注册页面
1-4.当用户登录后,分别可以查看登录的用户名以及去到购物车页面

---



#### 2.轮播图

2-1.main标签内的轮播图使用**swiper**实现轮播效果

#### 3.列表页

1-1.进入列表页面,先渲染默认数据———男装、美妆等4个分类title
1-2.在不同的分类title里面,可以拿到不同title的数据及渲染页面
1-3.点击商品进入对应商品的详情页面,并且这个交互要将商品的**id**传递下去

#### 4.详情页

1-1.根据id,拿到对应的商品数据,渲染页面
1-2.鼠标在商品图片上移动，实现局部放大的功能以及图片的tab切换和放大
1-3.点击加入购物车,实现加入成功的动画效果，点击加入按钮，右侧购物车数量根据点击次数进行变更

#### 购物车页面

1-1.跳转到购物车页面,根据localStorage里存的商品数据进行渲染页面，默认进入购物车页面所有数据的checked都为true，则全选框选中,否则全选框不选中
1-2.单个选择框 状态改变 改变localStorage里 其对应的数据 判断全选框状态是否需要改变
1-3.改变商品的数量 将改变后的商品的数据重新存入 localStorage里 根据local里的数据，改变商品的总金额和底部结算的金额 
1-4.删除单个商品 从localStorage的数据里 移除这个数据 重新渲染页面
1-5.如果没有商品 就清除localStorage里的shopCart 并且隐藏购物车列表

#### 注册和登录页

输入用户名以及密码还有密码的确认,并且把用户信息存到localStorage跳转到用户登录页面，取到注册的localStorage的用户进行登录，登录成功后登录显示用户名以及购物车页面icon，点击购物车icon可以直接去到登录页面

#### 项目开发流程

1.使用npm初始化项目,进行项目的包管理
2.**全局安装管理工具 gulp**
3.创建gulpfile.js文件,编译gulp任务
4.安装相关插件对src里的html、css、js等文件进行处理，并且将文件放到dist目录中
5.将任务导出并且执行
6.每一个js文件都实现定义和define require
7.每个模块都以class类存在，将定义的模块导出，在需要使用模块进行引用

    require([引用的插件],(参数)=>{ class A{
    
        }
        new A()
    })
    define([引用的插件],(参数)=>{
        class A{
    
        }
        return new A()
    })
8.在html页面,导入js只需要导入一个文件，

    <script src="/libs/require/require.min.js" data-main="/js/index"></script>

data-main 接收页面js文件的地址,require.js会将这个文件处理应用于对应页面