文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Rainbond怎么调用Vue React项目的后端接口

2023-06-30 07:23

关注

这篇“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怎么调用Vue React项目的后端接口

页面效果:

Rainbond怎么调用Vue React项目的后端接口

Rainbond 云原生应用管理平台,实现微服务架构不用改代码,管理 Kubernetes 不用学容器,帮企业实现应用上云,一站式将任何企业应用持续交付到 Kubernetes 集群、混合云、多云等基础设施。是 Rainstore 云原生应用商店的支撑平台。

以上就是关于“Rainbond怎么调用Vue React项目的后端接口”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯