Introduction à la fonction qui permet de convertir des objets en js en paramètres d'url (exemple de code)

Le contenu de cet article concerne l'introduction de fonctions qui peuvent convertir des objets en js en paramètres d'URL (exemples de code)). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. vous aide.

Cette fonction est utilisée lorsque j'écris un arrière-plan de gestion basé sur Vue+ElementUI. Il existe deux façons de l'utiliser :

La plus courante est d'encapsuler une jsfonction

 /**
   * 对象转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('&') : ''
  }

Pendant le développement du composant Vue, j'ai écrit comme ceci

J'ai écrit un fichier d'outil utils.js, je l'ai introduit dans le main.js de Vue en tant que package d'outils et je l'ai joint à Vue Prototype, afin que vous puissiez utilisez this.$utils dans chaque composant pour utiliser certaines fonctions de l'outil à l'intérieur de

Fichierutils.js

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

Fichiermain.js

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

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

Vue.prototype.$utils = utils

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

Lors de son utilisation, vous pouvez écrire c'est comme ça

// ....其他代码

this.$utils.urlencode(this.params)

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!