前言
從angular到react再到后來的vue~火熱的框架可謂一個接一個，著實讓小的有點力不從心，大神們?yōu)榱烁玫慕M織編寫代碼，費盡心機搗鼓了各種各樣的框架。由于小的沒有怎么接觸react，暫且不做過多描述，且說說angular和vue吧。
接觸angular大約是在兩年前，那會還是angular1。這也是小的使用的第一個框架，讓我印象最深刻的是它讓我完全改變了基于jquery開發(fā)時的編碼方式，從dom的操作，拼接轉(zhuǎn)變?yōu)閿?shù)據(jù)驅(qū)動。從此不用再去糾結(jié)頁面的呈現(xiàn)應(yīng)該如何切換，如何追加列表，信息錄入的時候不用再遍歷選中輸入框再去獲取其中的輸入值，還有強大的自定義指令能夠方便的將需要復(fù)用的功能抽取。但也不得不說，這個版本的angular確實蠻重的，所幸那會編寫的都是pc端的頁面，還hold的住，現(xiàn)在再瞅瞅好像都出到4了，再次感嘆這迭代速度，不過好來小的因為工作的原因，很少再接觸這個框架了。
后來工作主要涉及移動端的開發(fā)，遇到個比較棘手的問題是項目都是基于前后端混合的方式開發(fā)的，在分工明確的情況下，往往一份代碼就需要兩個小伙伴的配合，確實有點小揪心，于是一直謀劃著做個前后端分離的工作。
因為是前后端分離，頁面數(shù)據(jù)不再是通過后端語言的變量分配的方式來呈現(xiàn)，那么數(shù)據(jù)的顯示就是一個大問題，所以面臨兩個選擇，要不選一個mvvm的框架做數(shù)據(jù)渲染，要不自己搗鼓一個，后者一直是小的夢想（嗯~夢想還是要有的），在框架的選擇上，第一個想到的還是angualr，但是覺得將angular用在移動端頁面上有點殺雞用牛刀，最后選中了輕量高效的vue（這里再次點贊vue cli，對我的編碼工作帶來了很大的便利）。
注：此項目頁面基于sanse商城，只是筆者做前后端分離的實踐實驗，如需下單請到sanse app或是微信公眾號
項目地址
https://github.com/x-shadow-x/sanse_wap_v2
技術(shù)棧
vue2 + vue-rotuer2 + vuex + webpack + ES6 + axios + flex
挖坑集錦
- 跨域
項目中幾乎所有的數(shù)據(jù)請求都是基于ajax，數(shù)據(jù)通過測試接口返回，而開發(fā)環(huán)境下是基于node服務(wù)器打開的網(wǎng)頁，于是就不可避免面臨跨域的問題，所幸強大的vue cli考慮到了這點，只需稍做配置，便可將請求代理到指定的域名下，操作如下：
基于vue cli構(gòu)建的項目，都可在根目錄下找到config文件夾，我們修改其中的index.js文件，在dev屬性中添加如下代碼：
其中 '/api' 為匹配項，target 為被請求的地址
此時只需將請求數(shù)據(jù)的baseURL設(shè)置為/api，便可正確請求到target選項中指明的請求地址下的數(shù)據(jù)，比如：
當(dāng)然，這只是開發(fā)環(huán)境為了方便編碼，如果項目部署到測試環(huán)境或是正式上線，跨域還需另外處理，具體看項目對應(yīng)的后端，主要就是添加幾個允許跨域的頭。
- build出來的項目刷新報404錯誤
因為一開始做路由的時候使用的是history模式，開發(fā)環(huán)境的時候使用node做服務(wù)器，并未遇到這個問題，但是當(dāng)將項目build出來放置到測試服務(wù)器上運行的時候，因為服務(wù)器使用的是iis，并不支持history的模式，頁面在刷新的時候因為其url都是腳本模擬的，故找不到對應(yīng)的資源而報404，無奈之下只能講路由形式改回hash。
這里注意如果涉及到微信支付，在微信后臺配置域名的時候要注意配置到#之后
項目截圖
-
首頁
image.png -
品牌列表
image.png -
商品列表
-
商品詳情
image.png -
購物袋
image.png -
訂單頁
image.png -
個人中心
image.png
結(jié)尾
本項目主要基于vue2 構(gòu)建前后端分離項目的實驗，因為是用業(yè)余時間搗鼓的項目，周期有點長，目前也有段時間木有更新了，后續(xù)會找機會將首頁改版為自定義廣告布局頁面。
