sn_shopping: suning-shopping是一个企业级别的开发项目，我们遵循这前后端分离的开发模式，完成了suning-shopping的前端技术开发和实现，后台调用的是知名前端开发大师lautin做的API获取到的数据，可以实现购物的功能，作为移动端的商城能够更好的服务于人们。

# suning-shopping

## 介绍

suning-shopping是一个企业级别的开发项目，我们遵循这前后端分离的开发模式，完成了suning-shopping的前端技术开发和实现，后台调用的是知名前端开发大师lautin做的API获取到的数据，可以实现购物的功能，作为移动端的商城能够更好的服务于人们。

项目中采用技术点有h5+c3+原生js+jquery，以及swiper插件实现轮播图的效果，和art-template模板，达到开发过程快速迭代开发的整个流程的效果，预期项目时间分别为5天时间，实现完整的首页热门展示，商品分类，商品搜索，购物车，详情浏览，以及简单的登录等功能。

## 项目架构

suning-shopping，以下简称SS  ，整站分为以下几个页面

- 首页：热点商品展示
- 分类：商品分类筛选
- 排行榜：最火商品
- 购物车
- 个人信息
- 搜索：根据关键词搜索，点击热点词搜索等等
- 登录
- 商品列表
- 商品详情
- 支付

## 规范说明

## 命名规则

- html和css样式的属性名、类名等不得大写，可以是小驼峰，建议使用-来连接多个逻辑断点，例如：login-form、login-button
- 变量名应当使用小写， 当存在多个逻辑断点时，可以用_来连接，例如：no_login_tips 、start_trade_now
- 命名要见名知意，采用习惯用语，例如： login、sign-in、而非landing等。

## 代码规范

- html模板内容采用H5布局标签，尽量做到语义化。例如：使用header footer main section等替代div.header、div.footer等，h1~h6替代div.title，使用figure关联图片和文字，多使用em和strong替代span
- css全部使用类名/id名定义，优先使用sass，不要直接使用标签名
- 处理页面自适应时  优先使用弹性盒子，弹性盒子应该有类似这样的封装，历史原因 只有混入类样式 而无样式函数
- js逻辑代码优先使用es6语法，方法则推荐jquery，不足部分自己封装，

## 业务规范

- 后端商品信息接口返回值会结构为：{data，pager}；请求参数：  pageid和length；返回值：所有商品信息，json对象集合；例：

```js
   [{ "gid": "1",
    "gname": "飞利浦（PHILIPS）55PUF6092/T3 55英寸 二级能效 智慧省电 科技感机身 4K超高清WIFI智能液晶电视（银灰色)",
    "catid": "97",
    "price": "2899.00",
    "stock": "89",
    "salecnt": "11",
    "gpic": "20180823\\201711210901444464.jpg",
    "gdesc": "优化画质 身临其境  飞利浦4大画质处理技术 带来高水准的色彩、对比度和清晰度 呈现非凡画质和性能\r\n让每一个画面，",
    "status": "3",
    "create_at": "1511251304"
   ```
   ```js
   },
     {
         "gid": "2",
         "gname": "TCL D55A930C 55英寸 HDR超薄4K曲面 64位30核智能液晶电视机（黑色）",
         "catid": "97",
         "price": "3799.00",
         "stock": "100",
         "salecnt": "0",
         "gpic": "20180823\201711210908004417.jpg",
         "gdesc": "整合多个大型视频平台.专为互联网电视打造.",
         "status": "1",
         "create_at": "1511251680"
     }]
   ```

- 分页原则：对于列表数据，后端接口普遍支持分页获取，但从体验角度说 推荐前端进行分页。

## 目录文件

- css：各个页面依赖的样式表
- js：js代码
- img：初始环境中使用的图片 以及 需要缓存的图片，
- node_modules:项目所依赖模块，具体有：swiper，jquery，art-template等

## 技术实现

- 跳转商品详情页时传参用？加上商品gid
- 分类页面传入商品分类cid

## 关键方法

- showgoods（）方法实现万能搜索模板，在其它页面需要跳到商品检索列表页面时，可利用该方法渲染页面
      //showgoods方法利用jquery发送ajax请求，利用art-template动态渲染页面
      //传入keywords关键词，position渲染位置，callback回调函数接收searcharr来操作检索到的数据
      function showgoods(keywords, position, callback) {
      searcharr = [];
      
            pager = 1;
      
            lth = 30;
      
            let htmlStr,
      
              n,
      
              iptwd;
      
            lock = true;
      
            pagermax = Math.ceil(90 / pager / lth);
      
            // console.log(keywords);
      
            //判断关键词
      
            if (keywords) {
      
              iptwd = keywords;
      
            } else {
      
              console.log('请传入关键词');
      
            }
      
            // console.log(iptwd);
      
            //更改显示关键词
      
            $('.inputlive').text(iptwd);
      
            // console.log(pager, lth, pagermax);
      
            qingqiu(pager, lth, pagermax, iptwd);
      
            function qingqiu(pageid, length, pageidmax, iptwd) {
      
              // console.log(pageid, length, pageidmax, iptwd);
      
              //判断接口是否读完
              $.ajax({
                type: 'get',
                async: true,
                url: 'http://120.48.14.126/api/goods.php',
                data: {
                  pageid,
                  length,
                },
                dataType: 'json',
                success(result) {
                  const { data, pager } = result;
                  const datatt = Array.from(data);
                  //处理数据
                  datatt.forEach(function (item, index) {
      
                    if ((item.gname).includes(iptwd) || (item.gdesc).includes(iptwd)) {
      
                      item.keywordlth = iptwd.length;
      
                      item.keyword = iptwd;
      
                      searcharr.push(item);
      
                    }
                  })
                  //倒序
                  // searcharr.reverse();
                  //渲染页面
                  htmlStr = template(position, {
                    searcharr
                  });
                  $('.' + position).html(htmlStr);
                  //回调函数 ，操作searcharr,避免浪费请求
                  if (callback) { callback(searcharr); }
                }
              })
              if (pageid > pageidmax) {
                return false;
              } else {
                pageid = pageid + 1;
                qingqiu(pageid, length, pageidmax, iptwd);
              }
            }
  - clickchange方法实现点击筛选排序商品，依赖于以上的showgoods方法
         //点击筛选
                function clickchange(s,arr) {
                    $('.sort').click(function (event) {
                        //阻止默认事件
                        event.stopPropagation();
                        //根据点击的按钮实现不同排序
                        switch ($(event.target).text().trim()) {
                            case '综合':
                                tochange();
                                console.log(searcharr);
                                console.log(arr);
                                rander(arr, 'goods-item');
                                break;
                            case '销量':
                                tochange();
                                // searcharr.sort(function(){
                                //     return ;
                                // })
                                if (s) {
                                    searcharr.sort(function (a, b) {
                                        return (b).salecnt - a.salecnt;
                                    })
                                    s = false;
                                } else {
                                    searcharr.sort(function (a, b) {
                                        return a.salecnt - (b).salecnt;
                                    })
                                    s = true;
                                }
                                rander(searcharr, 'goods-item');
                                break;
                            case '价格':
                                tochange();
                                // $('.sort li:nth-of-type(1) span').addClass('change')
                                if (s) {
                                    searcharr.sort(function (a, b) {
                                        return a.price - (b).price;
                                    })
                                    s = false;
                                } else {
                                    searcharr.sort(function (a, b) {
                                        return (b).price - a.price;
                                    })
                                    s = true;
                                }
                                rander(searcharr, 'goods-item');
                                break;
                            case '筛选':
                                tochange();
                                break;
                            default: break;
                        }
                        function tochange() {
                            $('.sort li').removeClass('change');
                            $(event.target).addClass('change');
                        }
     
                    })
                }

## 项目分析

- 项目开发主要采用前后端协同开发的模式，小组开发的规范性，不同场景上的小组决断性能够很多的处理项目从项目初期进展到如火如荼，到最后的暂定版本的开发结束，为期5天时间，很大部分完成了SS功能的实现。
  各个小组成员协同合作下，不同技术的在同一个开发环境中能够及时的进展，这脱离不了小组长的前沿性和决断性，并且搭建了基础的配置环境，以及前期小组会议是密不可分的过程，SS尽管在功能上和页面的布局上还存在大量有待解决的bug，这样让小组磨合，能够更好的适应下一个项目的开发。
- 项目功能上：有存在功能上的不足，购物车编辑功能在点击后有一些事件紊乱。
- 项目代码冗余：初期项目的开展过程中，存在事件的重复绑定，这样很大程度上让性能上的损耗，对于项目的性能来说是至关重要的事情，于是项目组长及时的利用事件委托解决了这一过程，当前由于不同页面的开发，存在着相同的分页功能，还有待进行封装使用。

## 特技

1. 使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md
2. Gitee 官方博客 blog.gitee.com
3. 你可以 https://gitee.com/explore 这个地址来了解 Gitee 上的优秀开源项目
4. GVP 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5. Gitee 官方提供的使用手册 https://gitee.com/help
6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 https://gitee.com/gitee-stars/

Youcha/sn_shopping

简介

发行版

贡献者

近期动态