前端通过【bitly】Api，将长链接转换短连接

 需求描述：我们需要将用户输入的内容，拼接我们定义好的内容生成一个短连接，并可以登录。

因为之前也没有搞过哦，所以评审结束完之后我就把当前的需求描述给ChatGPT，不得不说，这玩意确实好用啊，让你的工作效率大大提升。

是说让你去bitly官方的Api，通过调取他们的接口，会把转换好短连接作为出参的方式返给你。

但是呢，有个前提呢，是需要去注册，然后bitly官方会给你生成一个token，把这个token作为请求头，发给官方，当得知这一点之后哈，我就马不停蹄的去跟产品说，让他立马去申请的哈。

具体链接：URL Shortener - Short URLs & Custom Free Link Shortener | Bitly

获取token之后，代码片段直接放在下面，里面也会有必要的解释，根据自己的业务需求去做相对应的代码调整就好。

//生成 按钮的方法
async generateUrl() {
      const { clientId, shopAddress } = this.step2Form
      if (!clientId || !shopAddress || this.generateLoading === true) return
      this.generateLoading = true
      let redirect_uri
      const obj = {
        'uat': _ => {
          this.step2Form.redirectionUrl = redirect_uri = 'https://demovip.jtexpress.sg?integration=shopify'
        },
        'development': _ => {
          this.step2Form.redirectionUrl = redirect_uri = 'https://demovip.jtexpress.sg?integration=shopify'
        },
        'production': _ => {
          this.step2Form.redirectionUrl = redirect_uri = 'https://vip.jtexpress.sg?integration=shopify'
        }
      }
      obj[process.env.VUE_APP_ENV_NAME]()
      const long_url = `https://${shopAddress}.myshopify.com/admin/oauth/authorize?client_id=${clientId}&scope=write_orders,write_shipping，write_merchant_managed_fulfillment_orders,write_third_party_fulfillment_orders,write_assigned_fulfillment_orders&redirect_uri=${redirect_uri}`
      // 调用第三方api 【bitly】
      const { data } = await axios({
        method: 'post',
        url: 'https://api-ssl.bitly.com/v4/shorten',
        timeout: 60 * 1000,
        data: JSON.stringify({
          long_url,
          domain: 'bit.ly'// 固定值
        }),
        headers: {
          'Content-Type': 'application/json',
          'Authorization': '08dbf5e438254ebaa1807a2741306dc97ecf7de1'// 此参数需要产品注册【bitly】账号，获取token
        }
      })
      console.log('🚀 ~ file: shopifyGuideDialog.vue:211 ~ generateUrl ~ data:', data)
      if (data) {
        this.step2Form.appUrl = data.link // link 短链接
        this.generateLoading = false
      } else {
        this.generateLoading = false
      }
    }

有一点需要说明的就是，data中的参数问题，有些需要根据自己的业务，调整，不要心急，刚开始也是调不通，后来调试好之后就可以了。

 好的，这时候我们看APP URL的输入框里已经生成短连接了。

（Tips：因为该内容是接口返回，会有一定的延迟，所以，该加Loading的加，该异步处理的处理。）

除此之外呢，我们还需要做一个复制的功能哈。

接下来我给大家介绍一个插件的库哈，clipboard.js 一个非常好用的复制粘贴的库。

第一步.  引入到index.html 中

<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>

 第二步，在项目的文件中使用

import Clipboard from 'clipboard' //引入当前的js

//点击时按钮的区分函数
  copyHandler(type) {
      // 初始化 clipboard.js 实例对象
      //text 为当前输入框的内容   element为点击触发的元素。
      let text, element
      const obj = {
        1: () => { text = this.step2Form.appUrl; element = '.copy-img1' },
        2: () => { text = this.step2Form.redirectionUrl; element = '.copy-img2' }
      }
      obj[type]()
      new Clipboard(element, {
        text: () => text
      }).on('success', () => {
        this.$message.success(this.$t('已复制到剪贴板'))
      }).on('error', () => {
        this.$message.error(this.$t('复制失败，请手动复制'))
      })
    },

好，基本的功能就算完成了。

策略模式的写法真的会比较的简洁，并且美观，很容易维护，所以还在用if else switch的同学，不防去了解一下哈，前端工程嘛，还需要我们砥砺前行。

在这里，祝大家五一快乐，升官发财。