# ePet

**Repository Path**: zyy1314521/ePet

## Basic Information

- **Project Name**: ePet
- **Description**: js项目周-E宠商城
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: http://zyy1314521.gitee.io/epet
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2019-05-07
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ePet

#### 项目指南
1. 选择遮罩框中狗狗或者猫猫进入首页
2. 点击首页header部分登录或者注册按钮弹出登录框或者注册框（附上我的登录账号：手机号：15823109694 密码：040521yuan!）
3. 点击首页"搜索"按钮进入列表渲染页面，进入列表页面后点击任一商品可进入对应详情页并可以加入购物车
4. 点击首页头部"购物车"按钮可进入购物车列表页面
5. 鼠标指着右侧固定栏的"购物车"可查看购物车商品列表
6. 点击banner图进入活动页
7. 点击"E宠"logo可回到首页

#### 项目介绍
**js项目周-E宠商城**
> 本网站主要是卖宠物狗和狗粮的，您可以在本网站放心的挑选任意您喜欢的狗狗或者狗粮进行购买，我们将竭诚为您提供最优质的服务。

* 首页：首页显示轮播图、二级菜单、商品秒杀、狗狗相关的一些内容，并使用了懒加载功能，使用抓取到的json数据。
* 登录：点击登录按钮显示登录弹出框，可以用手机号或者账号进行登录。
* 注册：点击注册按钮显示注册弹出框，输入用户名密码和邮箱进行注册。
* 列表页：点击搜索按钮进入列表页，列表页主要展示各种各样的商品，并使用了懒加载和瀑布流多次加载以及分页功能，使用自己写的json数据。
* 详情页：点击列表页任一商品进入对应详情页，可以增减商品数量并加入购物车，需验证是否已登录，没有登录则提醒登录并不能加入购物车。
* 购物车列表页：点击头部"购物车"按钮进入购物车列表页，展示所有加入购物车的商品，并可以进行商品数量增减以及删除操作。
* 右侧固定栏购物车：鼠标指着右侧固定栏购物车，可显示购物车商品列表，并能进行删除和跳转到购物车列表页操作。
* 活动页：点击首页banner图进入活动页，有楼梯效果。

#### 项目结构
 ```
--|conf
    --|index.js                     文件路径配置文件
--|dev                              打包
--|dist                             压缩
--|node_modules                     所有的依赖文件
--|src  
    --|images                       静态图片资源  
    --|json  
        --|dogDailyUse.json         首页狗狗日用模块json数据  
        --|dogHealthMedical.json    首页保健和医疗模块json数据  
        --|dogSnacks.json           首页狗狗零食模块json数据  
        --|dogStapleFood.json       首页狗狗主粮模块json数据
        --|dogTractionClothingToys  首页狗狗牵引和服饰和玩具模块json数据  
        --|listsPage.json           列表渲染页面json数据  
        --|spikeGoods.json          秒杀选项卡json数据  
    --|scripts
        --|activePage
            --|activePage.js        活动页主js文件
            --|activeStairs.js      活动页楼梯js文件
        --|common
            --|finalCommon.js       xhr请求和cookie公共方法的js文件  
            --|header.js            页面头部公共js文件
            --|lazyload.js          懒加载js文件
            --|login.js             登录js文件
            --|register.js          注册js文件
            --|rightBar.js          右侧固定栏js文件
        --|index                    
            --|banner.js            轮播图js文件
            --|homeModules.js       首页五个狗狗模块的js文件
            --|index.js             首页主js文件
            --|mask.js              遮罩层js文件
            --|spikeLeft.js         秒杀左边js文件
            --|spikeRight.js        秒杀右边选项卡js文件
        --|libs
            --|jquery
                --|pagination
                    --|jquery.pagination.js     jquery分页插件
        --|listPage
            --|listPage.js          列表渲染主js文件
            --|pagination.js        分页js文件
            --|renderLists.js       列表渲染js文件
        --|shopCarts
            --|shopCartLists.js     购物车列表渲染页面js文件
            --|shopCarts.js         购物车列表主js文件
        --|shopCartsDetail
            --|addCart.js           添加购物车js文件
            --|magnifier.js         放大镜js文件
            --|renderCartDetail.js  渲染购物车详情页面js文件
            --|shopCartsDetail.js   购物车详情主js文件
    --|scss  
        --|_commont  
            --|reset.scss           重置样式
        --|_mixin
            --|mixin.scss           sass混合样式
        --|activePage
            --|activePage.scss      活动页样式
        --|index
            --|banner.scss          轮播图样式
            --|footer.scss          页面底部样式
            --|homeModules.scss     首页狗狗五个模块样式
            --|index.scss           首页主样式
            --|login_register.scss  登录注册样式
            --|mask.scss            遮罩层样式
            --|rightBar.scss        右边固定栏样式
            --|spike.scss           秒杀模块样式
        --|listsPage
            --|listsPage.scss       列表渲染样式
            --|pagination.scss      分页样式
        --|shopCarts
            --|shopCarts.scss       购物车列表渲染样式
        --|shopCartsDetail
            --|magnifier.scss       放大镜样式
            --|shopCartsDetail.scss 购物车详情样式
    --|activePage.html              活动页面html文件
    --|footer.html                  页面底部html文件
    --|header.html                  页面头部html文件
    --|index.html                   首页html文件
    --|listsPage.html               列表渲染页面html文件
    --|rightBar.html                右侧固定栏html文件
    --|shopCarts.html               购物车列表渲染页面html文件
    --|shopCartsDetail.html         购物车详情页面html文件
--|util
    --|index.js                     工具配置文件
--|.gitignore                       忽略文件上传至git仓库
--|build.js                         压缩环境搭建
--|gulpfile.js                      gulp前端工程化搭建文件
--|package-lock.json                依赖锁定版本文件
--|package.json                     依赖文件
--| README.md 
```
#### 项目地址
http://zyy1314521.gitee.io/epet