Rainbond怎么調用Vue?React項目的后端接口

這篇“Rainbond怎么調用Vue React項目的后端接口”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Rainbond怎么調用Vue React項目的后端接口”文章吧。

前言

以往我們在部署前端項目后，調用后端接口有以下幾種場景：

后端接口沒有統一，比較分散，例如：/system/user,/tool/gen 。

通常我們會在項目的全局配置文件.env.production中直接寫入后端ip，例如：

ENV = 'production'
VUE_APP_BASE_API = '192.168.6.66:8080'

這樣寫雖可以正常訪問，但會導致產生跨域問題。

后端接口統一，例如：/api/system/user, /api/tool/gen。

大部分小伙伴也還是同樣會直接把IP + 后綴寫入到項目全局配置文件，例如：

ENV = 'production'
VUE_APP_BASE_API = '192.168.6.66:8080/api'

這樣寫當然了也會有跨域的問題。

那我們該怎么解決接口不統一或接口統一的跨域問題呢。

答：使用Nginx 反向代理。

大部分小伙伴用nginx都是項目打包完的dist包丟進nginx，配置個 location proxy_pass 反向代理后端，然后在項目全局配置里填寫Nginx地址。醬紫還是會跨越哦。那究竟該怎么處理呢，請往下看

解決跨域對于不同的場景有以下幾種方法：

接口沒有統一

接口數量較少的話，比如只有幾個接口system tool moitor login getmenu等。

首先需要修改全局配置文件.env.production 的請求api 為**/**，醬紫寫前端發起請求的時候會直接轉發到nginx。

ENV = 'production'
VUE_APP_BASE_API = '/'

其次修改Nginx配置文件，添加多個location，在瀏覽器請求的時候就會匹配到nginx的location規則，例如：

瀏覽器請求菜單：http://192.168.6.66/getmenu，會匹配 location /getmenu規則反向代理到后端。

server {
      listen       5000;
  		#靜態頁面
      location / {
          root   /app/www;
          try_files $uri $uri/ /index.html;
          index  index.html index.htm;
      }
      location /getmenu{
          proxy_pass http://127.0.0.1:8080/;
      }
  }

這種方式固然可以，但對于接口幾十個上百個 一一配置很麻煩。

接口數量很多。

同樣首先也需要修改全局配置文件.env.production，修改請求接口為 api，這個接口自定義的。有的小伙伴就疑問了，我沒有這個接口呀，請接著往下看。

ENV = 'production'
VUE_APP_BASE_API = '/api'

緊接著修改Nginx配置文件，在nginx配置文件中添加了location /api，并且添加了 rewrite、proxy_pass，這個 rewrite是URL重寫。

例如：請求 http://192.168.6.66/api/system/menu，醬紫請求正常情況發送到后端，后端會報錯是沒有這個接口的。

我們通過rewrite 重寫URL，此時URL就會變成http://192.168.6.66/system/menu并且通過proxy_pass反向代理到后端，此時發送接口請求/system/menu，后端正常返回。

server {
    listen       5000;

    location / {
        root   /app/www;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }
    location  /api {
        rewrite ^/api/(.*)$ /$1 break;
        proxy_pass http://192.168.2.182:8080;
    }
}

rewrite ^/api/(.*)$ /$1 break具體可參考Nginx官方文檔rewrite_module模塊，在這里簡單介紹下：

rewrite ^/api/(.*)$ /$1 break

關鍵字 正則 替代內容 flag標記

接口統一

對于這種就比較好處理了。

同樣首先也是修改項目的全局配置文件.env.production，修改請求接口為 /prod-api。這個統一接口是后端提供的哈。

ENV = 'production'
VUE_APP_BASE_API = '/prod-api'

修改Nginx配置文件，增加一條location，反向代理到后端地址。

此時在瀏覽器請求的URL則為：http://192.168.6.66/prod-api/system/menu。

server {
    listen       5000;

    location / {
        root   /app/www;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }
    location  /prod-api {
        proxy_pass http://192.168.2.182:8080;
    }
}

跨域問題解決了，那我們開始實踐一次。

本次前端的配置就是上面說的接口統一的方式

接下來部署一個SpringBoot后端項目來配合前端一起使用。

源碼部署后端

本項目源碼地址 Fork開源項目 若依

后端是SpringBoot + Mysql + Redis 架構。

Dockerfile源碼構建部署Mysql

參考官方文檔Rainbond 中用 Dockerfile 便捷構建運行應用

通過Dockerfile源碼構建部署Mysql。

Dockerfile源碼構建需要在項目所需Sql目錄放置Dockerfile文件自動初始化數據庫。

填寫源碼倉庫地址，填寫Mysql子目錄 sql，構建Mysql。

確認創建組件，平臺會自動識別語言為 dockerfile。

創建，等待構建組件完成即可。

構建完成后，在組件 > 端口中打開對內服務并且修改 別名，點擊即可修改，改為MYSQL_HOST,以供后端連接時使用。

Docker鏡像部署Redis

通過 docker鏡像部署redis，具體參考官方文檔docker鏡像構建

使用 redis 官方鏡像，redis:latest

確認創建，平臺會檢測出來一些鏡像信息，直接創建即可。

構建完成后，在組件 > 端口中打開對內服務。以供后端連接使用

Java源碼構建部署 SpringBoot

這里提前修改了后端項目里的配置文件 ruoyi-admin/src/main/resources/application-druid.yml連接數據庫的配置，改為了環境變量連接，這里就用到了上面修改的端口別名。

以及修改了ruoyi-admin/src/main/resources/application.yml文件中的連接Redis配置

# 主庫數據源
  master:
      url: jdbc:mysql://${MYSQL_HOST}:${MYSQL_PORT}/ry-vue?
  redis:
      # 地址
      host: 127.0.0.1
      # 端口，默認為6379
      port: 6379

通過Java源碼構建項目，具體參考官方文檔JAVA源碼構建

填寫源碼倉庫地址，構建SpringBoot項目。

平臺會根據項目根目錄的 pom.xml 文件檢測是什么項目，這里檢測的是多模塊項目。

進入多模塊構建，勾選ruoyi-admin模塊，此模塊是可運行的，其他模塊都是依賴。具體模塊功能參考若依官方文檔

可修改Maven構建參數，無特殊要求無需修改。

確認創建，等待構建完成。

這里需要注意，平臺默認使用openjdk ，此項目需要使用oraclejdk來生成前端驗證碼。

需要在組件 > 構建源中修改 JDK類型為自定義JDK，填寫自定義JDK下載路徑。

需要打開 禁用緩存按鈕，防止包不一樣出現奇奇怪怪的問題。構建成功后再把禁用緩存關閉，下次構建就緩存正確的包了。

修改后 保存修改。構建組件，等待構建完成，修改端口為 8080 。

進入拓撲圖界面，切換為編輯模式，建立組件依賴關系。

**ruoyi-ui **連接 ruoyi-admin。**ruoyi-admin **連接 Mysql、Redis。

更新組件ruoyi-ui ruoyi-admin，至此完成。

最終效果，拓撲圖：

頁面效果：

Rainbond 云原生應用管理平臺，實現微服務架構不用改代碼，管理 Kubernetes 不用學容器，幫企業實現應用上云，一站式將任何企業應用持續交付到 Kubernetes 集群、混合云、多云等基礎設施。是 Rainstore 云原生應用商店的支撐平臺。

以上就是關于“Rainbond怎么調用Vue React項目的后端接口”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。