vue全家桶仿某魚部分布局以及功能實(shí)現(xiàn)

dreamGong 發(fā)布于2019-08-23 11:01 / 1336人閱讀

摘要：在這里簡單敘述一下我仿某魚部分布局以及功能實(shí)現(xiàn)的過程，僅做學(xué)習(xí)用途。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)，也完全能夠?yàn)閺?fù)雜的單頁面應(yīng)用提供驅(qū)動(dòng)。可以進(jìn)行確認(rèn)收貨后刪除訂單。

前言

每次寫文章時(shí)，總會覺得比寫代碼難多了，可能這就是我表述方面的不足吧，然而寫文章也是可以復(fù)盤一下自己的開發(fā)過程，對自己還是受益良多的。在這里簡單敘述一下我仿某魚部分布局以及功能實(shí)現(xiàn)的過程，僅做學(xué)習(xí)用途。

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的SPA單頁面應(yīng)用提供驅(qū)動(dòng)。

技術(shù)棧以及組件庫

vuex: 解決組件數(shù)據(jù)共享問題，加強(qiáng)組件數(shù)據(jù)持久化。

vue-router: 主要實(shí)現(xiàn)spa單頁面開發(fā)。

axios: 異步請求數(shù)據(jù)。

easymock: 假數(shù)據(jù)模擬接口。

mint-ui: 一款移動(dòng)端開發(fā)的框架。Mint UI

stylus: css預(yù)處理器

better-scroll: 一個(gè)移動(dòng)端滾動(dòng)的解決方案

swiper: 一個(gè)強(qiáng)大的滑動(dòng)特效插件

lrz: 圖片壓縮插件

實(shí)現(xiàn)效果

搜索

分類

登錄

購買

發(fā)布

代碼目錄結(jié)構(gòu)

●
┣━ src # 開發(fā)目錄
 ┣━ api                  //axios獲取假數(shù)據(jù)的統(tǒng)一js
  ┣━ data.js
 ┣━ assets                  //靜態(tài)文件資源
  ┣━ images                 //圖片
  ┣━ utils                  //通用js方法函數(shù)
 ┣━ common                 //通用的文件資源
  ┣━ stylus                 //stylus文件夾
 ┣━ component              //可復(fù)用的組件
  ┣━...
  ┣━...
  ┣━...
  ┣━...
  ┣━...
  ┣━...
 ┣━ pages                 //頁面（頁面組件）
  ┣━...
  ┣━...
  ┣━...
  ┣━...
  ┣━...
  ┣━...
 ┣━ router                 //路由
  ┣━ index.js
 ┣━ store                  //vuex數(shù)據(jù)狀態(tài)管理
  ┣━ index.js
  ┣━ state.js
  ┣━ mutations.js
  ┣━ actions.js
  ┣━ getters.js
 ┣━ App.vue                //根組件
 ┗━ main.js

實(shí)現(xiàn)主要的幾個(gè)功能

登錄退出

用戶在已登錄狀態(tài)和未登錄狀態(tài)的界面是不同的，有些功能指定要在登錄狀態(tài)下才會有，因此會產(chǎn)生狀態(tài)的切換，我們可以通過瀏覽器自帶的window.localStorage來存儲數(shù)據(jù)，也可以用vuex，如果狀態(tài)多的情況下建議采用vuex

搜索功能

這個(gè)沒什么好說的，利用indexOf這個(gè)方法來驗(yàn)證假數(shù)據(jù)中是否有這個(gè)key，相應(yīng)輸出它的value，沒有那就切換另一個(gè)找不到的UI界面

分類功能

這個(gè)也沒有什么難度，取到假數(shù)據(jù)中的數(shù)據(jù)來for in循環(huán)輸出，然后用better-scroll插件來實(shí)現(xiàn)滾動(dòng)對應(yīng)的高度效果

購買

如果是在未登錄的狀態(tài)下，那么進(jìn)行一個(gè)router-link路由跳轉(zhuǎn)到登錄login頁面，如果是已登錄的狀態(tài)下，會進(jìn)入到一個(gè)商品詳情頁，點(diǎn)擊我想要會進(jìn)入到一個(gè)與賣家聊天交互的一個(gè)界面，這里面的賣家的數(shù)據(jù)都是模擬出來的假數(shù)據(jù)，因此它不能像真的賣家一樣。其中每一個(gè)表情emoji就是一個(gè)圖片，用code的方式把它編譯出來再進(jìn)行一個(gè)swiper輪播來包裹他們的遍歷循環(huán)。

接著點(diǎn)擊立即購買則會跳到付款頁面，如果填過地址等信息的，那么可以選擇，如果未填的，則會引導(dǎo)至輸入相關(guān)信息頁面，再點(diǎn)擊購買就成功了，這個(gè)時(shí)候數(shù)據(jù)就會利用vuex保存到我的個(gè)人頁面中的我買到的頁面中。可以進(jìn)行確認(rèn)收貨后刪除訂單。

發(fā)布

一樣，只有在已登錄的狀態(tài)下才可以進(jìn)入到發(fā)布的界面，發(fā)布就是充當(dāng)著一個(gè)賣家的身份，需要填寫商品詳情的相關(guān)信息包括圖片，價(jià)格等。通過驗(yàn)證才可發(fā)布成功，同樣利用了vuex來保存發(fā)布的商品信息，再跳至我的頁面中的我發(fā)布的頁面進(jìn)行數(shù)據(jù)輸出。

設(shè)備適配

我是用rem來實(shí)現(xiàn)的，也建議用rem來自適應(yīng)布局，先自己封裝一個(gè)自適應(yīng)html的 font-size的js，再將其導(dǎo)入到main.js中

  /**
    * Created by zhaolele on 2018/7/25.
    */
    (function(doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
        recalc = function() {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 32 * (clientWidth / 320) + "px";
        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener("DOMContentLoaded", recalc, false);
    })(document, window);
    
    //10rem

移動(dòng)端一像素

眾所周知，移動(dòng)端因不同的設(shè)備的分辨率導(dǎo)致一像素并不是真正的統(tǒng)一的一像素，因此我們需要封裝一個(gè)stylus的mixin來引入

border-1px($color)
  position: relative
  &:after
    display: block
    position: absolute
    left: 0
    bottom: 0
    width: 100%
    border-top: 1px solid $color
    content: " "
    
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.7)
      transform: scaleY(0.7)

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.5)
      transform: scaleY(0.5)

圖片上傳

可以使用input中type的file屬性，然后用html5的新屬性hidden來隱藏掉這個(gè)節(jié)點(diǎn)，通過點(diǎn)擊其他的節(jié)點(diǎn)來觸發(fā)這個(gè)input type=file的點(diǎn)擊事件，再利用lrz的圖片壓縮將圖片優(yōu)美的輸出到也頁面中。拿里面的上傳頭像的代碼貼一下。

html:

    
    上傳帥照
    


js 方法：

addPic() {
  this.$refs.file.click()
},              //點(diǎn)擊觸發(fā)fileInput事件

fileInput(e) {
  let files = e.target.files
  console.log(files)
  if(!files.length) return
  this.createImage(files, e)
},

createImage(files, e) {
  lrz(files[0], { width: 480 }).then(rst=> {
    this.url = rst.base64
  }).catch(err=> {
    console.log(err)
  }).always(()=> {
    e.tartget.value = null
  })
},

結(jié)語

**很多東西細(xì)節(jié)想聊出來，比如嵌套路由所踩的坑..等，但是最近忙于找工作，時(shí)間問題就寫到這里，有興趣或者正在學(xué)習(xí)vue的同學(xué)可以查看我的github源碼。fallow-fish

如果對你有幫助，可以star我的項(xiàng)目給我一點(diǎn)點(diǎn)的鼓勵(lì)，也希望有志同道和的可以加入一起討論，我也會第一時(shí)間幫你解答。**