Einführung in die Funktion, die Objekte in js in URL-Parameter konvertieren kann (Codebeispiel)

Der Inhalt dieses Artikels befasst sich mit der Einführung von Funktionen, die Objekte in js in URL-Parameter konvertieren können. Ich hoffe, dass er für Freunde in Not nützlich ist Dir. Hilft.

Diese Funktion wird verwendet, wenn ich einen Verwaltungshintergrund basierend auf Vue+ElementUI schreibe. Es gibt zwei Möglichkeiten, sie zu verwenden:

Die häufigste ist die Kapselung einer jsFunktion

 /**
   * 对象转url参数
   * @param {*} data
   * @param {*} isPrefix
   */
 urlencode (data, isPrefix) {
    isPrefix = isPrefix ? isPrefix : false
    let prefix = isPrefix ? '?' : ''
    let _result = []
    for (let key in data) {
      let value = data[key]
      // 去掉为空的参数
      if (['', undefined, null].includes(value)) {
        continue
      }
      if (value.constructor === Array) {
        value.forEach(_value => {
          _result.push(encodeURIComponent(key) + '[]=' + encodeURIComponent(_value))
        })
      } else {
        _result.push(encodeURIComponent(key) + '=' + encodeURIComponent(value))
      }
    }

    return _result.length ? prefix + _result.join('&') : ''
  }

Während der Entwicklung der Vue-Komponente habe ich so geschrieben

Eine Tooldatei utils.js geschrieben, sie als Toolpaket in Vues main.js eingeführt und an den Vue-Prototyp angehängt. Auf diese Weise Sie kann this.$utils in jeder Komponente verwenden, um einige der Toolfunktionen in

utils.jsFile

const utils = {
  /**
   * 对象转url参数
   * @param {*} data
   * @param {*} isPrefix
   */
  urlencode (data, isPrefix = false) {
    let prefix = isPrefix ? '?' : ''
    let _result = []
    for (let key in data) {
      let value = data[key]
      // 去掉为空的参数
      if (['', undefined, null].includes(value)) {
        continue
      }
      if (value.constructor === Array) {
        value.forEach(_value => {
          _result.push(encodeURIComponent(key) + '[]=' + encodeURIComponent(_value))
        })
      } else {
        _result.push(encodeURIComponent(key) + '=' + encodeURIComponent(value))
      }
    }

    return _result.length ? prefix + _result.join('&') : ''
  },

  // ....其他函数....

}

export default utils

main.jsFile

import Vue from 'vue'
import App from './App.vue'
import utils from '@/utils/utils'

// ...其他代码...

Vue.prototype.$utils = utils

// ...其他代码...

zu verwenden, wenn Sie es verwenden. Sie können so schreiben

// ....其他代码

this.$utils.urlencode(this.params)

// ...其他代码...

Das obige ist der detaillierte Inhalt vonEinführung in die Funktion, die Objekte in js in URL-Parameter konvertieren kann (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!