iT邦幫忙

0

web) 前後端分離,前端如何拿到第三方api跳轉傳資料到後端的資料

  • 分享至 

  • xImage

我是個小前端+後端新手

最近要搞ezship的api
以下為ezship的api串接網站
https://www.ezship.com.tw/service_doc/service_home_w18v1.jsp?vDocNo=1702&vDefPage=07
裡面有個參數是rtURL,也就是ezship會直接跳轉到此參數頁面並傳遞資料
流程是呼叫ezship的api,會叫我們選擇便利商店,選好之後ezship會直接跳轉傳資料到
填入參數的網址或檔案
問題來了,我要如何讓ezship跳轉傳資料到我的後端,並且後端丟資料到前端呢

有不明白的地方,我會急速補充
前端是vue,後端是php(php沒用框架
非常感謝

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
7
Vision
iT邦新手 5 級 ‧ 2021-12-26 03:43:38
最佳解答

給予以下思路:

  1. rtURL填後端網址(POST API),後端伺服器直接渲染出前端網頁畫面
  2. rtURL填後端網址(POST API),後端伺服器保存資料後,再轉跳前端實作的專屬頁面 (後端HTTP Header 需要帶上 session cookie / token),前端專屬頁面執行 AJAX 打後端 GET API (前端 HTTP Header 需要帶上 cookie / token 讓後端驗證) 取得資料渲染網頁畫面。

對! 前後端分離就是非常麻煩,多了以下步驟:

  • 後端需要保存資料,看你要變成 json file 還是 database
  • 後端還要實作一隻 GET API 讓前端取資料
  • 前端需要實作串接 API
  • 前端和後端還需要做 API 驗證溝通
  • 直覺上會多轉跳一次網址

但好處就會變好管理和好維護,以上給你參考。

Vision iT邦新手 5 級 ‧ 2021-12-26 11:59:26 檢舉

對了,還是不懂的話,更快的方式:
建議客服 ezship 的工程部門問個詳細,至少遇到的問題對方都應該有經驗才對! (他們願意的話)

2
黃彥儒
iT邦高手 1 級 ‧ 2021-12-25 14:02:33

直接跳到後端,資料包回前端(看用餅乾還是帶參數或錨點

ji3g48xj6 iT邦新手 5 級 ‧ 2021-12-25 17:32:24 檢舉

所以這樣的話前端是不是一定要重整頁面,不能像ajax那樣直接獲取從後端傳來的資料

1

稍微看了一下 ezship 的說明
他建議做法是在當前前端頁面跳轉完
你收到參數後在自己傳給後端

ji3g48xj6 iT邦新手 5 級 ‧ 2021-12-25 17:24:45 檢舉

我也有看他的示範程式碼,但他的rtURL還是寫給後端,然後後端直接渲染出網頁,但我想知道前後端分離的話要怎麼去寫

你要不要試試 rtURL 填前端窗口URL然後傳給後端?
目前看說明只想到這種方案
第二方案:AJAX每隔幾秒去取資料

2

自已寫個後端,然後用前端AJAX請求自已寫的就行了。

4
fillano
iT邦超人 1 級 ‧ 2021-12-26 09:54:40

processID就是你的key,你要先設計好訂單流程跟各種狀態來管理流程。

你可以用各種方法打後端,取得processID指定的訂單狀態,當狀態是已經從ezship接回資料後,前端再改變狀態。(假設事情都透過api就可以完成,不需要進入ezship畫面。即使需要進入ezship畫面,也是可以另開視窗來做,回到rtURL就關掉視窗之類,原本視窗只要持續監看訂單狀態就好)

1
猴子
iT邦新手 4 級 ‧ 2021-12-26 09:58:23

用 JS 發送請求( 在 VUE 我習慣用 axios
後端收到請求後回傳數據
前端收到數據進行下一步 ( vue 可以用 v-text ref 等等
然後 token 等資料可以放在 cookic 或 session 上,也可以放在變數里雖然不能保持資料

ex:

<template>
  <div v-text="data" />
</template>

<script>
import axios from "axios";
...略
data() {
    return {
        data: void 0,
    };
},
methods: {
    async postData() {
        this.data = (await axios({
            url: "",
            method: "POST",
            data: {
                // 你要放的資料
            }
        })).data;
    },
}
</script>

若要開一個子視窗進行回掉,可以看看該連結點我

3
海綿寶寶
iT邦大神 1 級 ‧ 2021-12-26 11:35:28

在想要怎麼做(how)之前
請先想清楚要做什麼(what)

就「點按鈕->選資料->更新至原頁面」的目的
以下是三種可能的做法
看你喜歡那一種
https://ithelp.ithome.com.tw/upload/images/20211226/20001787gkXVGTbs7N.png

三種做法說明如下:
1.ezShip 建議第一種搭配使用 POST form 的做法,我個人也偏好這種,相較下較單純
2.ezShip 非常不建議(已經用到紅字標示)第二種做法,暗示有任何問題都要你自己搞定,文責自負
3.我只找得到純 vue的範例,若子視窗是一個 URL 的話我不會,看看別的高手解答

0
greenriver
iT邦研究生 5 級 ‧ 2021-12-27 08:33:15

我的理解是
Vue->rtURL->自動幫轉頁到 a.php,並傳資料給a.php?
如果是這樣,
(不負責任亂說XD,還沒試過兩個axios可不可行,直覺是可以XD)
那a.php設計成將資料存入你的數據庫
再設計一個b.php,將剛剛存入的數據從數據庫抓取出來
前端就改成
//rtURL的轉跳頁設定是a.php
axios.post(rtURL,yourformdata)
.then(()=>{
axios.get('http://xxx.xxx.xxx.xxx/b.php')
.then((res)=>{
前端要選染的資料 = res.data
})
}).catch((error)=>{})

我要發表回答

立即登入回答