整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
案例和由此案例重点讲解的知识点介绍
案例代码实现
并集选择器知识点详解
此案例是页面，效果如下：
此页面的技术实现解析：
此页面中li标签内需要由div包裹，同时div主要的显示部分又是img，故两者大部分样式具有通用性，可以使用并集选择器，将通用样式提出，以免重复书写
此案例中主要用到了，基于此，我们会系统的将如下知识点全部讲解：
并集选择器
第一步：书写商标列表的html
第二步：定义通用样式，主体样式，同时将通用样式使用并集选择器提取，并针对个性化样式进行单独定义
并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
融商城刚建立的时候，业务相对单一，主要负责公司点券和体验金的兑换。在最初的搭建商城构架的时候，我们使用了当下流行的前端框架 React 作为地基，但在上层分支上处理相对混乱。
主要表现在HTML 的 DOM 元素被 React 的 Virtual Dom 和 jQuery 同时操作，导致维护一个 state 的状态变得不是那么的顺利。
为了使前端构架能够更灵活适用于商城的业务扩展，我们就对前端架构进行重构：
地基 View层：React
js 语法：ES6
语法编译：Babel
数据流操作：Reflux
样式使用：Stylus
页面跳转：React-router
打包上线：Gulp+Webpack
为了保持 state 状态的统一管理，既有 React 何须 jQuery。
项目框架结构如下：
1）运行机制：
npm 通过加载 package.json 必要的 modules，解决项目的依赖关系。通过 npm start 运行本地服务器，通过 webpack 加载 app 目录下main.js，通过 react-router 路由配置解析，进入到商城首页。
2）编译机制：
babel 使用 babylon 解析器对源代码进行解析并生成 AST(Abstract Syntax Tree 抽象语法树)，接着通过 babel-traverse 对解析出来的 AST 进行遍历，解析出来整个树的 path，读取对应的元素，并应用到 transformers 插件上，生成变换后的 AST，最后使用 babel-generator 将 AST 树转码成最终编译后的代码串。
3）数据流向：
当用户进来网站的时候，React action 匹配用户当前的操作，通过 API 获取后端提供的信息。Dispatcher 作为事件调度中心，Reflux 模型的中心枢纽，管理着Reflux 应用中的所有数据流，它本质上是 Store 的回调注册，每个 Store 注册它自己并提供一个回调函数。
当 Dispatcher 响应 Action 时，通过已注册的回调函数，将 Action 提供的数据信息发送给应用中所有的 Store，React views 把后台的数据渲染后呈现给用户，完成整个闭环的数据流。
MVC 模型进化过程：
1）单页面
2）业务线
3）点融商城 MVC模型
商城主业务的转型：原来单一业务的券功能转变为通过投资免费获取商品的模式，将券功能移动到二级分类里。
这一模式的改版，是业务模式的探索与尝试。MVP 商城之所以能快速革故鼎新，得益于重构的能适应复杂业务线的前端架构，以及团队间的精诚协作与共同努力。
商城的首页也是经过不断更迭的页面 UI 优化调整，形成了用户舒适的视觉体验，并且在功能上给到用户更多的选择，如：提供商品搜索、心愿单、爱大牌、每日上新、商品多属性选择等等。
商城作为一个通过“商品”来连接用户生活场景的模块，通过利息前置的方式，来帮助用户梳理理财与消费之间的关系。既解决了用户强烈的投资需求，同时也满足了实际的消费需求。
商城前端之路漫漫其修远兮，我们都在上下而求索的道路上。未来，我们会不断革新，打造贴近用户体验的全新商城模式。
本文作者：乔乐（点融黑帮），Social Team 前端攻城狮一枚，负责点融商城和社区前端开发，喜欢游泳，骑行，旅游，以及更多大千世界未知的美好事物。
本文由@点融黑帮（ID：DianrongMafia）原创发布于，未经许可，禁止转载。
前张工就跟大家探讨过商城网站的积分和支付等等，近日又有朋友在问我那么到底怎样才能开发好一个整体的商城网站呢?是的，这个问题问得比较好。我们都知道了商城的细节了，也知道做商城网站的好处，那么到底怎样才能把一个商城网站给做好呢？
先给大家普及下商城网站的基本知识。商城网站跟普通企业纯展示官网的区别在于除了前端的页面设计和展示，它还有功能。像会员、购物车、支付、订单、评论等等。所以现在你知道了，要把商城网站做好，不光是前端的展示页面要设计好，后端的功能开发也要做好才行。
那么现在我们就详细讲讲做商城网站的细节吧！
首先是商城网站的页面设计。像我们助标网络做的都是定制商城，所以商城每个页面都会出效果图个性化设计的。先是设计商城的首页，一般的纯商城网站网站头部有：Logo、导航栏目和搜索框。Banner大图（轮番切换的横幅），一般是上浮产品分类，一般是展开到细分产品栏目名称。主体区域有：热销产品（左侧广告板块 右侧产品推荐区域）；系列产品推荐板块（每个系列产品板块，左侧广告区域，右侧相应系列产品推荐区域）。网站底部，版权号、备案号和联系信息等。
内页主打是产品的介绍，这里也主要介绍产品栏目。一般的点击产品栏目，首先是筛选，下测是商品的列表页按序排列。这里要注意的是，筛选的品类要确定好。品类的意思就是你有多少属性支持用户筛选，一般的像商品的价格、品牌、地点、新旧和重量等属性筛选。然后是根据销量和价格等默认排序。下侧了就是产品列表图文样式，缩略图列表，上侧标题，下侧描述字段。最后点击进入产品详情页。商品详情页有：左侧多图相册，放大镜功能；右侧产品标题、价格、配置、日期和数量等字段，在开发商城网站的时候这些字段也都是先要确定好的。然后是下单和购物车功能 ；下侧商品详情、商品参数和咨询评论功能（会员针对单个商品评论）。
好了，页面的设计差不多就是这些，下面再讲讲商城的功能开发。
首先是会员功能。一般的是可以支持手机和邮箱注册的，当然手机注册的更简单，做得比较多。就是在做商城网站的时候需要客户买短信，提供接口给我们就行了。这里还要注意的一点是找回密码也很重要，一般这个功能做好后可以支持手机号找回密码。
注册好会员登录后就可以去购买商品了，这里一般会用到购物车。购物车的好处是针对多个产品可以加入购物车，统一支付。当用户选择多种商品一起去购物车准备结算后，增、删或者减少商品，价格都可以实时变化。选好商品后，点击确认，填好收货地址，提交订单，去支付。
支付了，一般是可以支持微信、支付宝以及带银联标识的银行卡等，一般客户提供接口给我们即可。
支付好之后，就进入订单页面了。用户支付好之后订单的状态就是已付款订单（未发货订单），商家发货后手动更新状态为已发货订单，用户确认收货后就是已完成订单。
用户在完成购买过程后，还可以去评论，这个评论支持管理员回复。一般的评论是针对单一用户购买商品后的，不支持游客评论，当然管理员可回复，也不支持其他用户去回复。
常规的商城就是这样。当然还有复杂一点的，功能会比较多点，因为本来做的就是定制商城网站嘛，所以功能也是可以定制开发的。比如说在线充值、退换货、积分和优惠券等。
在线充值就是用户可以直接将支付宝、微信或者银行卡里面的钱充值到他的会员帐号里面去，这样下次购买商品的时候就可以直接用会员里面的钱去支付了。当然这个充值功能一般大的平台才有可能会用得到！
而退换货功能一般是这么做的。用户要退换货，输入电话、订单号、退换货原因等字段，提交表单，消息推送至管理员邮箱，管理员后台操作退换货状态，安排线下退款；用户可以查看申请记录与进度。
积分和优惠券就是当用户在商城网站购买商品后一般都会产生积分，这个积分可以用于购买新商品时候抵扣一部分钱也可以用在积分商城的积分支付和兑换其他商品。优惠券了，主要是管理员发放到会员账号里面去的，可以用于购买新商品时候抵扣一部分钱，抵扣的规则也是和积分抵扣的规则类似。
要开发好商城网站，要注意的细节还是挺多的，从页面设计到功能开发算下来工时也不少，所以价格也不会太便宜。这里希望大家在做商城网站的时候一定要注意下。
*请认真填写需求信息，我们会在24小时内与您取得联系。
