基於vue2 0打造移動商城頁面實踐

2021-08-07 08:34:22 字數 1999 閱讀 1047

前言

從angular到react再到後來的vue~火熱的框架可謂乙個接乙個,著實讓小的有點力不從心,大神們為了更好的組織編寫**,費盡心機搗鼓了各種各樣的框架。由於小的沒有怎麼接觸react,暫且不做過多描述,且說說angular和vue吧。

接觸angular大約是在兩年前,那會還是angular1。這也是小的使用的第乙個框架,讓我印象最深刻的是它讓我完全改變了基於jquery開發時的編碼方式,從dom的操作,拼接轉變為資料驅動。從此不用再去糾結頁面的呈現應該如何切換,如何追加列表,資訊錄入的時候不用再遍歷選中輸入框再去獲取其中的輸入值,還有強大的自定義指令能夠方便的將需要復用的功能抽取。但也不得不說,這個版本的angular確實蠻重的,所幸那會編寫的都是pc端的頁面,還hold的住,現在再瞅瞅好像都出到4了,再次感嘆這迭代速度,不過好來小的因為工作的原因,很少再接觸這個框架了。

後來工作主要涉及移動端的開發,遇到個比較棘手的問題是專案都是基於前後端混合的方式開發的,在分工明確的情況下,往往乙份**就需要兩個小夥伴的配合,確實有點小揪心,於是一直謀劃著做個前後端分離的工作。

因為是前後端分離,頁面資料不再是通過後端語言的變數分配的方式來呈現,那麼資料的顯示就是乙個大問題,所以面臨兩個選擇,要不選乙個mvvm的框架做資料渲染,要不自己搗鼓乙個,後者一直是小的夢想(嗯~夢想還是要有的),在框架的選擇上,第乙個想到的還是angualr,但是覺得將angular用在移動端頁面上有點殺雞用牛刀,最後選中了輕量高效的vue(這裡再次點讚vue cli,對我的編碼工作帶來了很大的便利)。

專案位址

技術棧

vue2 + vue-rotuer2 + vuex + webpack + es6 + axios + flex

挖坑集錦

專案中幾乎所有的資料請求都是基於ajax,資料通過測試介面返回,而開發環境下是基於node伺服器開啟的網頁,於是就不可避免面臨跨域的問題,所幸強大的vue cli考慮到了這點,只需稍做配置,便可將請求**到指定的網域名稱下,操作如下:

基於vue cli構建的專案,都可在根目錄下找到config資料夾,我們修改其中的index.js檔案,在dev屬性中新增如下**:

其中 『/api』 為匹配項,target 為被請求的位址

此時只需將請求資料的baseurl設定為/api,便可正確請求到target選項中指明的請求位址下的資料,比如:

當然,這只是開發環境為了方便編碼,如果專案部署到測試環境或是正式上線,跨域還需另外處理,具體看專案對應的後端,主要就是新增幾個允許跨域的頭。

專案截圖

結尾

本專案主要基於vue2 構建前後端分離專案的實驗,因為是用業餘時間搗鼓的專案,週期有點長,目前也有段時間木有更新了,後續會找機會將首頁改版為自定義廣告布局頁面。

Vue2 0全家桶仿騰訊課堂(移動端)

傳統的頁面應用,是用一些超連結來實現頁面切換和跳轉的。vue router單頁面應用中,則是路徑之間的切換,也就是元件的切換。我們建立乙個 router,傳入的 routes 中的每一項即為一條路由 route 配置,表示在匹配給定的位址時,應該使用什麼元件渲染檢視。routes vuex 的狀態儲...

分享乙個基於vue2 0 的拖動排序元件

先來個效果圖 元件的實現是基於改變源資料的陣列位置,所以使用的話必須要對傳進去的源資料做一次深拷貝,操作完成後再傳排序後的陣列回去 事件是採用了drag系列事件,跟需求和使用者操作習慣比較吻合 圖示是element ui裡面的 過度效果是vue的transition group標籤實現的,這裡要注意...

手把手從零打造企業級電商平台 前端實戰

2 支付模組 支付寶支付的倆種方式 returl url方式和notify url方式 瀏覽器向後台發出乙個支付請求,後台伺服器再和支付寶做乙個通訊,來獲取認證資訊,獲取認證資訊後,後端會把這些認證資訊返回給前端,這時前端就可以帶著這些引數跳轉到支付寶提供的收銀台頁面了 這個收銀台已經跳出了我們的系...