一個前端對應了六個後端寫的公眾號代碼

語言: CN / TW / HK

theme: fancy

本文已參與「新人創作禮」活動,一起開啟掘金創作之路。

先説下原委:因為公司人員受限,一個前端對應了六個後端,迫不得已結合後端整理了一套配置多個公眾號的代碼。

image.png

需求:

1:從總賽區登錄的可以訪問每一個賽區(公眾號),其他賽區只能訪問本賽區
2:判斷用户所在的賽區,找到了某個賽區直接進入,並且標記 
3:分賽區的的選手如果在不同的賽區賬户有資金的都要在總賽區進行顯示 
4:登錄進去,默認進入一級頁面,在一級頁面跳入二級頁面時是進入對應賽區的頁面的公眾號。 
5:一套代碼配置不同的賽區。

如果是你接到這個需求你會怎麼處理呢?有一説一,開始拿到這個需求的時候我是很不樂意的,本來就忙的不可開交,還要額外加一些稀奇古怪耗時費力的需求,但是沒辦法,人在屋檐下不得不低頭,接了 !

解決方案 - 驗證碼登錄輪詢 >用户輸入手機號進行輪詢手機號是否存在,存在方可以下一步。

```ts

env

測試環境(# 開發環境同理)

VUE_APP_SERVERS=[ {"name":"總賽區-out","url":"https://out.All.cn","money":0}, {"name":"A賽區-out","url":"https:////out.A.cn","money":0}, {"name":"B賽區-out","url":"https:////out.B.cn","money":0}, {"name":"C賽區-out","url":"https:////out.C.cn","money":0}, {"name":"D賽區-out","url":"https:////out.D.cn","money":0} ] ```

js // 數據 data(){ servers: JSON.parse(process.env.VUE_APP_SERVERS), isExist:false, index:0 } js // 方法 onChange () { if (this.mobilePhone) { this.doPhone() } }, doPhone () { this.$nextTick(function () { this.index = 0 this.isExist = false let length = this.servers.length for (var i = 0; i < length; i++) { this.requestPhone(this.servers[i], this.doTimes) } }) }, doTimes () { this.index++ if (this.servers.length === this.index) { if (!this.isExist) { this.showTip('選手不存在!') this.isCodeSending = true } else { this.isCodeSending = false } } }, //判斷手機號是否註冊 requestPhone (server, callback) { const vm = this vm.$axios .get( server.url + `/mobileExists/${vm.mobilePhone}` ) .then(function (response) { if (response.data.code === '200') { if (response.data.obj) { vm.isExist = true setLocalStorageItem('server', JSON.stringify(server)) } } callback() }) }

  • 登錄跳一級頁面

js Login () { const vm = this const params = { mobilePhone: vm.mobilePhone, smsCode: vm.smsCode } vm.loading = true vm.$axios .post(vm.useUrl + '/login', params) .then(function (response) { const { obj: loginInfo, code, msg } = response.data const token = loginInfo.newToken localStorage.setItem('newToken', token) vm.$router.push('pageIndex1') vm.loading = false }) }

  • 刷新token跳二級頁面(即對應的公眾號) ```html
  • {{ server.name }}總獎金
    {{ server.money }}

```

js clickReceive (url) { const vm = this vm.$axios .get(url + '/getLoginToken', { headers: { newToken: localStorage.getItem('newToken') } }) .then(response => { const token = response.data.obj.token vm.login({ token }); localStorage.setItem('token',token) window.location.href = url + `/#/pageIndex2?serverUrl=${serverUrl}&token=${token}` }) } - 二級頁面退回一級頁面

js goBack () { const vm = this window.location.href = decodeURIComponent( getLocalStorageItem('serverUrl') ) }

TIP: 簡單實現,相信很多大佬還有很多的方式,僅供參考 !