# LINING

**Repository Path**: project-zhangbowei/LINING

## Basic Information

- **Project Name**: LINING
- **Description**: 李宁
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: http://project-zhangbowei.gitee.io/lining
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-05-07
- **Last Updated**: 2024-12-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# LINING

李宁，一切皆有可能

#### 介绍

##### 描述

	本网站是李宁运动品牌购物商城，你可以在本网站尽情消费、尽情挥霍。
	任意挑选你喜欢的运动及休闲鞋类、服装、器材和配件。我们将竭诚为您提供最优质的服务。

##### 模块功能

* 首页：首页显示二级菜单、轮播图、爆款推荐、系列商品
* 注册：连接数据库，对注册信息进行存储
* 登录：对比数据库，完成登录
* 商品列表：展示各种商品，使用懒加载和分页功能
* 商品详情：点击列表页或首页系列商品进入对应详情页，可以添加购物车
* 购物车：右悬浮结算按钮进入购物车，增删改查
* 活动页：活动详情



#### 项目指南

1. 点击http://project-zhangbowei.gitee.io/lining 进入首页
2. 点击导航上的所有分类进入商品列表
3. 点击导航上的logo返回首页
4. 点击首页轮播图下方的图片进入活动页
5. 点击各个系列中商品的点击购买按钮加入购物车
6. 点击商品图片进入商品详情
7. 点击右侧悬浮购物车图标打开购物车
8. 点击右悬浮内的结算按钮进入购物车页
9. 点击商品列表页的商品进入商品详情页
10. 商品详情页添加购物车按钮添加购物车



#### 软件架构

基于nodejs，gulp的一套工程化开发环境。

```javascript
{
  "name": "project-ln",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "./node_modules/.bin/gulp gulp-dev",
    "build": "./node_modules/.bin/gulp build"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "gulp": "^3.9.1",
    "gulp-babel": "^8.0.0",
    "gulp-browserify": "^0.5.1",
    "gulp-clean-css": "^4.2.0",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.7.0",
    "gulp-imagemin": "^5.0.3",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-uglify": "^3.0.2",
    "http-proxy-middleware": "^0.19.1",
    "node-sass": "^4.12.0",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0"
  }
}
```


#### 安装教程

npm install

#### 使用说明

1. npm start //运行

2. npm run build //打包

3. 模块结构

   ```javascript
   --|src
   	--|images
   		--|index
   			--|xxx.png
   		--|xxx.png
   	--|json
   		--|xxx.json
   	--|scripts
   		--|active
   			--|active.js//活动页js
   		--|carts
   			--|carts.js//购物车js
   		--|details
   			--|details.js//商品详情页js
   		--|index
   			--|index.js//首页js
   		--|login
   			--|login.js//登录页js
   		--|modules
   			--|banner.js//轮播图功能
   			--|cars.js//购物车功能
   			--|lazyload.js//懒加载功能
   			--|nav.js//导航js
   			--|pagination.js//分页功能
   			--|randershoplist.js//渲染商品列表功能
   			--|reg.js//登录注册正则验证功能
   			--|shopcarts.js//购物车功能
   			--|tab.js//选项卡功能
   			--|youxuanfu.js//右侧悬浮框js
   		--|rejister
   			--|register.js//注册js
   		--|shoplist
   			--|shoplist.js//商品列表js
   	--|scss
   		--|_commont
   			--|iconfont.scss
   			--|reset.scss
   		--|active
   			--|active.scss
   		--|carts
   			--|carts.scss
   		--|details
   			--|details.scss
   		--|index
   			--|index.scss
   		--|login
   			--|login.scss
   		--|shoplist
   			--|shoplist.scss
   		--|modules
   			--|footer.scss
   			--nav.scss
   			--|youxuanfu.scss
   	--|active.html//活动页
   	--|carts.html//购物车页
   	--|details.html//详情页
   	--|index.html//首页
   	--|login.html//登录页
   	--|register.html//注册页
   	--|shoplist.html//商品列表页
   ```