vue - 使用筆記

1、防抖函式的使用
（1）–> 未配置腳手架的情況下

getTagUpdate(TagId,TrId) {
            var that = this
            that.followStageList = []
            **this.isScroll = 0
            this.page1 = 1**
            **if (window.lazy) {
                window.clearTimeout(window.lazy)
            }**
            **window.lazy = window.setTimeout(() => {** 
                $.ajax({
                    url: base_url + 'staff/park/getFollowRecordsByBaicId',
                    type: 'post',
                    data: JSON.stringify({
                        followTag: 1,//代表成交客戶
                        basicId:TrId,//客戶id
                        followRecordsStatu:0,//全部資料 0
                        followStageId: TagId, //狀態id
                        sort:'DESC'
                    }),
                    dataType: 'json',
                    contentType: 'application/json; charset=UTF8',
                    beforeSend: function(XMLHttpRequest) {
                        XMLHttpRequest.setRequestHeader("stafftoken", $.cookie("stafftoken"));
                    },
                    success: function(res){
                        //console.log(res)
                        if(res.code === 0){
                            if(res.data.followRecordsList.length !== 0 ) {
                                that.isShowBox = true
                                that.followStageList = res.data.followRecordsList[0]
                            }
                        }
                        else{
                            console.log(res.msg);
                        }
                    },
                    error: function(err){
                        console.log(err.msg);
                    }
                })
            **},1000)**
        },

（2）–> 腳手架環境中的使用

使用方法1：（全域性匯入整個ladash.js ）

一個事件在觸發後的 n秒後 再執行回撥 如果在此時間內又重新觸發 那麼將清空定時器重新計時
使用方法：（全域性匯入整個ladash.js）
下載包  yarn add lodash
引入包 以下兩種寫法結果一樣  但注意 不需要寫.js 否則按照預設的規則找不到檔案
 import _ from ‘../../../node_modules/lodash/lodash.js’
		 import _ from 'lodash'
使用防抖函式  在需要防抖的函式外包裹函式 使用_.debounce  並設定定時器時間
recommend: _.debounce(async function () {
	/ ** Code */
    }, 1000)
},

使用方法2：（自己封裝debounce.js檔案 ）

1.在 utils 資料夾中新建一個 tool.js 檔案
2.封裝一個debounce 函式並匯出
export function debounce(func, wait, immediate) {
  var timeout, result
  var debounced = function() {
    var context = this
    var args = arguments
    if (timeout) clearTimeout(timeout)
    if (immediate) {
      // 如果已經執行過，不再執行
      var callNow = !timeout
      timeout = setTimeout(function() {
        timeout = null
      }, wait)
      if (callNow) result = func.apply(context, args)
    } else {
      timeout = setTimeout(function() {
        func.apply(context, args)
      }, wait)
    }
    return result
  }
  debounced.cancel = function() {
    clearTimeout(timeout)
    timeout = null
  }
  return debounced
}
3.在需要使用防抖的元件中 匯入這個 tool.js 中的函式
	// 預設匯出的時候 不用寫花括號 不是預設匯出需要匯出的函式和變數 寫在花括號裡面
import { debounce } from '../../utils/tool.js'

2、反向代理的配置

反向代理： 伺服器和伺服器發請求不會跨域的
1）在vue.config.js中配置反向代理

	// 反向代理
proxy: {
  // 配置的代理規則，，，只要是以 /api開頭的url地址都會被代理
  // https://localhost:8081/api/login
  // https://localhost:3000/api/login
  '/abc': {
    target: 'http://localhost:3000',
      pathRewrite: { '^/abc': '' },
        // 代理到https協議下
        secure: true
  }
}

2）修改介面的基準地址

axios.defaults.baseURL = '/abc'