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，一个前端，热爱技术也热爱生活。

与你相逢，我很开心。

若是你想了解更多，请点这里，期待你的小⭐⭐

• 文中若有错误，欢迎在评论区指正，若是这篇文章帮到了你，欢迎点赞和关注😊

• 本文首发于掘金，未经许可禁止转载💌