整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
案例和由此案例重點講解的知識點介紹
案例代碼實現
并集選擇器知識點詳解
此案例是頁面，效果如下：
此頁面的技術實現解析：
此頁面中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小時內與您取得聯系。
