Vue重構項目之實戰技巧篇

實戰技巧（後續持續補充）

項目中的遇到的問題

問題

1. 兩個數組A=[],B=[]每一個數組長度不肯定A內的每一個元素須要向B內的每一個元素髮送一次請求每一個請求必須等待上個請求執行完畢後再執行
2. 最後執行完畢提示操做成功
3. 第一個請求使用輸入的評論以後的使用隨機生成的評論

思考

處理同步/異步問題async/await確定是首選沒毛病

雙重for循環應該可行？promise.all/promise.race應該可行？仍是async/await

想起來可能簡單，你能夠動手試試可否給出你想象中的答案！！！

實踐

"紙上得來終覺淺，絕知此事要躬行。"

若是是使用jq的$.ajax那麼就很容易了 $.ajax有個配置項叫作async能夠理解爲請求鎖

• async 默認是 true，即爲異步方式， $.ajax執行後，會繼續執行ajax後面的腳本，直到服務器端返回數據後，觸發$.ajax裏的success方法，這時候執行的是兩個線程。

• async 設置爲 false，則全部的請求均爲同步請求，在沒有返回值以前，同步請求將鎖住瀏覽器，用戶其它操做必須等待請求完成才能夠執行。

var temp;
$.ajax({
  async: false,
  type : "post",
  url : defaultpostdata.url,
  datatype : 'json'，
  success : function(data) {
     temp=data;
  }
});
alert(temp);
複製代碼

這個ajax請求爲同步請求，在沒有返回值以前，alert(temp)是不會執行的。

若是async設置爲：true，則不會等待ajax請求返回的結果，會直接執行ajax後面的語句

然而此次重構我拋棄了jq,必須另尋出路。

// 比方說A=[{userId:a1},{userId:a2},{userId:a3}] B=[{id:b1},{id:b2},{id:b3}]
// A裏面的每一個元素須要逐個像B裏面的元素髮送請求
// this.dialogOtherData.data至關於A this.choseList至關於B
var comment = [
  '拍的真好看', '666', '哪裏人', '呵呵', '私聊我', '有人啊', '有的', '找我的一塊兒啊', '來了老弟!'...
]
async handelLoop() {
  var total = this.dialogOtherData.data.length * this.choseList.length
  for (let i = 0; i < this.dialogOtherData.data.length; i++) {
    var commentData = {}
    commentData.userId = this.dialogOtherData.data[i].userId
    await this.getData(commentData, i, total)
  }
}
async getData(commentData, i, total) {
  var random = Math.random()
  for (let j = 0; j < this.choseList.length; j++) {
    if (this.dialogOtherData.title === '評論') {
      commentData.dynamicId = this.choseList[j].id
      commentData.type = 1
      if (i === 0) {
        commentData.content = this.inputVal
      } else {
        var two = j * Math.random().toString().substr(3, 1)
        commentData.content = comment[+random.toString().substr(2, 2) + (+two)]
      }
      await dynamicOperation(commentData).then(res => {
        if (res.succeed) {
          if ((i + 1) * (j + 1) === total) {
            this.close()
            this.$message.success('操做成功')
          }
        }
      })
    }
  }
}
複製代碼

Vue裏爲何axios沒法請求三方API

request.js裏不要這麼寫axios.defaults.withCredentials = true // 讓ajax攜帶cookie 其餘接口須要就配置在service裏,不要全局默認就Ok了 不須要配置代理什麼的就能搞定

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API2, // url = base url + request url
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})
複製代碼

判斷兩數組是否相同

// 判斷數組是否相同
scalarArrayEquals(array1, array2) {
  return array1.length === array2.length && array1.every(function(v, i) { return v === array2[i] })
}
複製代碼

element表格提示顯示過長問題

在公共樣式裏面設置index.css一下

// 表格過長顯示問題
.el-tooltip__popper {
  max-width: 400px;
  line-height: 180%;
}
複製代碼

element單選沒法選中問題

// 改變fromData裏面的kind是沒法改變選擇的
data() {
    return {
       fromData:{
           kind:1
       }
    }
  }
//不能是對象裏的屬性必須是單一屬性
  data() {
    return {
       kind:1
    }
  }
複製代碼

省心小插件

1.element-china-area-data

簡介

element-china-area-data地址 幾行代碼實現省市區三級聯動

安裝

npm install element-china-area-data -S

使用

import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
複製代碼

服務端用法：

const { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } = require('element-china-area-data/dist/app.commonjs')
複製代碼

• provinceAndCityData是省市二級聯動數據（不帶「所有」選項）
• regionData是省市區三級聯動數據（不帶「所有」選項）
• provinceAndCityDataPlus是省市區三級聯動數據（帶「所有」選項）
• regionDataPlus是省市區三級聯動數據（帶「所有」選項）
• "所有"選項綁定的value是空字符串""
• CodeToText是個大對象，屬性是區域碼，屬性值是漢字 用法例如：CodeToText['110000']輸出北京市
• TextToCode是個大對象，屬性是漢字，屬性值是區域碼 用法例如：TextToCode['北京市'].code輸出110000,TextToCode['北京市']['市轄區'].code輸出110100,TextToCode['北京市']['市轄區']['朝陽區'].code輸出110105

<template>
  <div id="app">
    <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange">
    </el-cascader>
  </div>
</template>
 
<script> import { regionData } from 'element-china-area-data' export default { data () { return { options: regionData, selectedOptions: [] } }, methods: { handleChange (value) { console.log(value) } } } </script>
複製代碼

2.viewerjs

簡介

v-viewergit地址用於圖片瀏覽的Vue組件，支持旋轉、縮放、翻轉等操做，是基於viewer.jsgit地址

這一款功能強大配置簡單的圖片預覽插件，詳細配置見附錄

安裝

npm install v-viewer --save

使用

• main.js內引用並註冊調用

//main.js
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

Vue.use(Viewer);
//zIndex默認是2015
Viewer.setDefaults({
  Options: { 'zIndex': 2099,"inline": true, "button": true, "navbar": true, "title": true, "toolbar": true, "tooltip": true, "movable": true, "zoomable": true, "rotatable": true, "scalable": true, "transition": true, "fullscreen": true, "keyboard": true, "url": "data-source" }
});
複製代碼

• 代碼中使用xxx.vue

<template>
    <div class="content"> <h1>Viewer圖片預覽插件</h1> <viewer :images="imgs"> <img v-for="src in imgs" :src="src.url" :key="src.title"> </viewer> </div> </template>
<script> export default { data () { return { imgs: [ { url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg', title: '圖片1' }, { url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg', title: '圖片2' } ] } }, } </script>
複製代碼

附錄

v-viewer詳細配置說明

import Vue from ‘Vue’

import Viewer from ‘v-viewer’

import ‘viewerjs/dist/viewer.css’

Vue.use(Viewer)

Viewer.setDefaults({
Options: {
    'inline': true, // 是否啓用inline模式

    'button': true, // 是否顯示右上角關閉按鈕

    'navbar': true, // 是否顯示縮略圖底部導航欄

    'title': true, // 是否顯示當前圖片標題，默認顯示alt屬性內容和尺寸

    'toolbar': true, // 是否顯示工具欄

    'tooltip': true, // 放大或縮小圖片時，是否顯示縮放百分比，默認true

    'fullscreen': true, // 播放時是否全屏，默認true

    'loading': true, // 加載圖片時是否顯示loading圖標，默認true

    'loop': true, // 是否能夠循環查看圖片，默認true

    'movable': true, // 是否能夠拖得圖片，默認true

    'zoomable': true, // 是否能夠縮放圖片，默認true

    'rotatable': true, // 是否能夠旋轉圖片，默認true

    'scalable': true, // 是否能夠翻轉圖片，默認true

    'toggleOnDblclick': true, // 放大或縮小圖片時，是否能夠雙擊還原，默認true

    'transition': true, // 使用 CSS3 過分，默認true

    'keyboard': true, // 是否支持鍵盤，默認true

    'zoomRatio': 0.1, // 鼠標滾動時的縮放比例，默認0.1

    'minZoomRatio': 0.01, // 最小縮放比例，默認0.01

    'maxZoomRatio': 100, // 最大縮放比例，默認100

    'url': 'data-source' // 設置大圖片的 url
    }
})
複製代碼

寫在最後

我是涼城a，一個前端，熱愛技術也熱愛生活。

與你相逢，我很開心。

若是你想了解更多，請點這裏，期待你的小⭐⭐

• 文中若有錯誤，歡迎在評論區指正，若是這篇文章幫到了你，歡迎點贊和關注😊

• 本文首發於掘金，未經許可禁止轉載💌