# cake-item

**Repository Path**: sweet6/cake-item

## Basic Information

- **Project Name**: cake-item
- **Description**: 21cake,只做新鲜的方形蛋糕。
- **Primary Language**: NodeJS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: http://sweet6.gitee.io/cake-item
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2019-05-14
- **Last Updated**: 2024-11-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# cake-item

#### 介绍
21cake,只做新鲜的方形蛋糕。
网址：http://sweet6.gitee.io/cake-item

#### 软件架构

基于nodejs,gulp 的一套PC端工程化开发环境。

```javascripts
      {
            "name": "project",
            "version": "1.0.0",
            "description": "",
            "main": "index.js",
            "scripts": {
                  "start": "./node_modules/.bin/gulp gulp-dev",
                  "build": "./node_modules/.bin/gulp build"
            },
            "keywords": [],
            "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-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-uglify": "^3.0.2",
                  "http-proxy-middleware": "^0.19.1",
                  "node-sass": "^4.12.0"
            }
      }

```


#### 安装教程

1.npm install

#### 使用说明

1. 建立目录结构，在conf文件夹下的json之中配置自己的开发路径

项目路径配置示例

```javascript

     scripts : {
            "index" : {
                  src : "./src/scripts/index/"
            },
            "login" : {
                  src : "./src/scripts/login/"
            },
            "register" : {
                  src : "./src/scripts/register/"
            },
            "goodsList_pagination" : {
                  src : "./src/scripts/goodsList_pagination/"
            },
            "goods_detail" : {
                  src : "./src/scripts/goods_detail/"
            },
            "libs" : {
                  src : "./src/scripts/libs/"
            },
            "carts" : {
                  src : "./src/scripts/carts/"
            }
      },
      scss : {
            "index" :{
                  src : "./src/scss/index/"
            },
            "login" :{
                  src : "./src/scss/login/"
            },
            "register" :{
                  src : "./src/scss/register/"
            },
            "goodsList_pagination" :{
                  src : "./src/scss/goodsList_pagination/"
            },
            "goods_detail" :{
                  src : "./src/scss/goods_detail/"
            },
            "active_page" :{
                  src : "./src/scss/active_page/"
            },
            "carts" :{
                  src : "./src/scss/carts/"
            },
            "scss" : {
                  src : "./src/scss/scss/"
            }
      },
```


2. 每一个开发模块都是一个独立的文件夹文件夹结构如下 
--| cake-item 
  --| src
    --|scripts
        --| index 
          --|index.xxx.js
          --|index.xxx.js
        --| login 
          --|login.xxx.js
          --|login.xxx.js
...

3. npm run bulid 打包,打包之后所有的文件都是独立的例如 index.xxx.js ,index.xxx.js 等n个js会合并为一个index.js ， 这个命名是根据config里面的json的key值命名的


4. 服务器代理配置 

配置时 proxyList 为核心配置对象 ,对象之中的key 为代理名称, 我们输入  localhost:8080**key**即可发送代理请求,代理请求不能用浏览器直接访问，需要用内置方法去进行请求及测试。

```javascript
      proxyList : {
            "/pxx" : {
                  url : "https://apiv2.pinduoduo.com/api/fiora/subject/goods/",
                  // 默认重写路径
                  // rewrite : true
            },
            "/dt" :{
                  url : "https://www.duitang.com/napi/blog/list/by_filter_id/"
            }
      }
```

####   产品介绍
21cake,一家专做方形蛋糕的店。本网站设计简洁，清新美观。页面主要由首页，列表分页，商品详情页，购物车页，活动页以及注册登录页组成。首页包括头部导航，导航含有二级菜单；轮播图的播放方式包括三种：自动轮播、左右按钮控制和底部按钮控制；中部是蛋糕分类展示部分，可通过点击不同种类，选择展示不同类型的蛋糕；底部是一个网站说明、联系方式等。列表分页中由json渲染得到数据，显示在页面上，由按钮控制分页。商品详情页，详细展示所选择商品的外观、用料介绍等。点击购物车图标，进入购物车页面，用户可以选择商品加入购物车。活动页，从轮播图中图片进入，主要向用户介绍最新活动。注册页包括用户名、密码，用户首次登陆，需要先注册，输入用户名和密码即可成功注册。注册成功便可转到登录页，点击登录，用户成功登录网站。

####   使用说明
使用本网站网址，进入该网站。点击头部导航栏中的登录注册，若是新用户，需先注册，再登录。注册时，需要用户输入用户名和密码，成功注册后，即可转入到登录页，点击登录，用户成功登录到网站首页。顶部导航中，点击商品分类，即可进入商品列表分页，可通过点击按钮，查看全部商品。点击顶部导航中购物车图标，进入购物车界面，可选择加购商品。点击轮播图中的图片，用户进入活动页，活动页里显示最新版蛋糕信息。页面中，点击任意一张图片，用户即可进入商品详情页。


#### 参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request