Rainbond調(diào)用Vue?React項(xiàng)目的后端接口

更新時(shí)間：2022年04月20日 16:25:55 作者：張齊

這篇文章主要為大家介紹了Rainbond調(diào)用Vue?React項(xiàng)目的后端接口問(wèn)題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

以往我們?cè)诓渴鹎岸隧?xiàng)目后，調(diào)用后端接口有以下幾種場(chǎng)景：

后端接口沒(méi)有統(tǒng)一，比較分散，例如：/system/user,/tool/gen 。

通常我們會(huì)在項(xiàng)目的全局配置文件.env.production中直接寫(xiě)入后端ip，例如：

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

這樣寫(xiě)雖可以正常訪問(wèn)，但會(huì)導(dǎo)致產(chǎn)生跨域問(wèn)題。

后端接口統(tǒng)一，例如：/api/system/user, /api/tool/gen。

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

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

這樣寫(xiě)當(dāng)然了也會(huì)有跨域的問(wèn)題。

那我們?cè)撛趺唇鉀Q接口不統(tǒng)一或接口統(tǒng)一的跨域問(wèn)題呢。

? 答：使用Nginx 反向代理。

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

解決跨域?qū)τ诓煌膱?chǎng)景有以下幾種方法：

接口沒(méi)有統(tǒng)一

接口數(shù)量較少的話，比如只有幾個(gè)接口system tool moitor login getmenu等。

首先需要修改全局配置文件.env.production 的請(qǐng)求api 為**/**，醬紫寫(xiě)前端發(fā)起請(qǐng)求的時(shí)候會(huì)直接轉(zhuǎn)發(fā)到nginx。

ENV = 'production'
VUE_APP_BASE_API = '/'

其次修改Nginx配置文件，添加多個(gè)location，在瀏覽器請(qǐng)求的時(shí)候就會(huì)匹配到nginx的location規(guī)則，例如：

? 瀏覽器請(qǐng)求菜單：http://192.168.6.66/getmenu，會(huì)匹配 location /getmenu規(guī)則反向代理到后端。

server {
      listen       5000;
  		#靜態(tài)頁(yè)面
      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/;
      }
  }

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

接口數(shù)量很多。

同樣首先也需要修改全局配置文件.env.production，修改請(qǐng)求接口為 api，這個(gè)接口自定義的。有的小伙伴就疑問(wèn)了，我沒(méi)有這個(gè)接口呀，請(qǐng)接著往下看。

ENV = 'production'
VUE_APP_BASE_API = '/api'

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

例如：請(qǐng)求 http://192.168.6.66/api/system/menu，醬紫請(qǐng)求正常情況發(fā)送到后端，后端會(huì)報(bào)錯(cuò)是沒(méi)有這個(gè)接口的。

我們通過(guò)rewrite 重寫(xiě)URL，此時(shí)URL就會(huì)變成http://192.168.6.66/system/menu并且通過(guò)proxy_pass反向代理到后端，此時(shí)發(fā)送接口請(qǐng)求/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模塊，在這里簡(jiǎn)單介紹下：

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

? 關(guān)鍵字正則替代內(nèi)容 flag標(biāo)記

接口統(tǒng)一

對(duì)于這種就比較好處理了。

同樣首先也是修改項(xiàng)目的全局配置文件.env.production，修改請(qǐng)求接口為 /prod-api。這個(gè)統(tǒng)一接口是后端提供的哈。

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

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

此時(shí)在瀏覽器請(qǐng)求的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;
    }
}

跨域問(wèn)題解決了，那我們開(kāi)始實(shí)踐一次。

本次前端的配置就是上面說(shuō)的接口統(tǒng)一的方式

接下來(lái)部署一個(gè)SpringBoot后端項(xiàng)目來(lái)配合前端一起使用。

源碼部署后端

本項(xiàng)目源碼地址 Fork開(kāi)源項(xiàng)目若依

后端是SpringBoot + Mysql + Redis 架構(gòu)。

Dockerfile源碼構(gòu)建部署Mysql

參考官方文檔Rainbond 中用 Dockerfile 便捷構(gòu)建運(yùn)行應(yīng)用

通過(guò)Dockerfile源碼構(gòu)建部署Mysql。

? Dockerfile源碼構(gòu)建需要在項(xiàng)目所需Sql目錄放置Dockerfile文件自動(dòng)初始化數(shù)據(jù)庫(kù)。

? Dockerfile文件可參考https://gitee.com/zhangbigqi/RuoYi-Vue.git 此項(xiàng)目下的 sql 目錄

填寫(xiě)源碼倉(cāng)庫(kù)地址，填寫(xiě)Mysql子目錄 sql，構(gòu)建Mysql。

確認(rèn)創(chuàng)建組件，平臺(tái)會(huì)自動(dòng)識(shí)別語(yǔ)言為 dockerfile。

創(chuàng)建，等待構(gòu)建組件完成即可。

構(gòu)建完成后，在組件 > 端口中打開(kāi)對(duì)內(nèi)服務(wù)并且修改別名，點(diǎn)擊即可修改，改為MYSQL_HOST,以供后端連接時(shí)使用。

Docker鏡像部署Redis

通過(guò) docker鏡像部署redis，具體參考官方文檔docker鏡像構(gòu)建

使用 redis 官方鏡像，redis:latest

確認(rèn)創(chuàng)建，平臺(tái)會(huì)檢測(cè)出來(lái)一些鏡像信息，直接創(chuàng)建即可。

構(gòu)建完成后，在組件 > 端口中打開(kāi)對(duì)內(nèi)服務(wù)。以供后端連接使用

Java源碼構(gòu)建部署 SpringBoot

這里提前修改了后端項(xiàng)目里的配置文件 ruoyi-admin/src/main/resources/application-druid.yml連接數(shù)據(jù)庫(kù)的配置，改為了環(huán)境變量連接，這里就用到了上面修改的端口別名。

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

# 主庫(kù)數(shù)據(jù)源
  master:
      url: jdbc:mysql://${MYSQL_HOST}:${MYSQL_PORT}/ry-vue?
  redis:
      # 地址
      host: 127.0.0.1
      # 端口，默認(rèn)為6379
      port: 6379

通過(guò)Java源碼構(gòu)建項(xiàng)目，具體參考官方文檔JAVA源碼構(gòu)建

填寫(xiě)源碼倉(cāng)庫(kù)地址，構(gòu)建SpringBoot項(xiàng)目。

平臺(tái)會(huì)根據(jù)項(xiàng)目根目錄的 pom.xml 文件檢測(cè)是什么項(xiàng)目，這里檢測(cè)的是多模塊項(xiàng)目。

進(jìn)入多模塊構(gòu)建，勾選ruoyi-admin模塊，此模塊是可運(yùn)行的，其他模塊都是依賴。具體模塊功能參考若依官方文檔

可修改Maven構(gòu)建參數(shù)，無(wú)特殊要求無(wú)需修改。

確認(rèn)創(chuàng)建，等待構(gòu)建完成。

? 這里需要注意，平臺(tái)默認(rèn)使用openjdk ，此項(xiàng)目需要使用oraclejdk來(lái)生成前端驗(yàn)證碼。

? 需要在組件 > 構(gòu)建源中修改 JDK類(lèi)型為自定義JDK，填寫(xiě)自定義JDK下載路徑。

自定義JDK下載地址：http://www.dhdzp.com/softs/596666.html

需要打開(kāi) 禁用緩存按鈕，防止包不一樣出現(xiàn)奇奇怪怪的問(wèn)題。構(gòu)建成功后再把禁用緩存關(guān)閉，下次構(gòu)建就緩存正確的包了。

修改后保存修改。構(gòu)建組件，等待構(gòu)建完成，修改端口為 8080 。

進(jìn)入拓?fù)鋱D界面，切換為編輯模式，建立組件依賴關(guān)系。

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

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

最終效果，拓?fù)鋱D：

頁(yè)面效果：

Rainbond 云原生應(yīng)用管理平臺(tái)，實(shí)現(xiàn)微服務(wù)架構(gòu)不用改代碼，管理 Kubernetes 不用學(xué)容器，幫企業(yè)實(shí)現(xiàn)應(yīng)用上云，一站式將任何企業(yè)應(yīng)用持續(xù)交付到 Kubernetes 集群、混合云、多云等基礎(chǔ)設(shè)施。是 Rainstore 云原生應(yīng)用商店的支撐平臺(tái)。

1. Rainbond 官網(wǎng)

2. Rainbond 安裝使用

3. Rainbond 參考手冊(cè)全集

以上就是Rainbond調(diào)用Vue React項(xiàng)目的后端接口的詳細(xì)內(nèi)容，更多關(guān)于Rainbond調(diào)用Vue React后端接口的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: