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

目录
  • 前言
  • 解决跨域对于不同的场景有以下几种方法:
    • 接口没有统一
    • 接口统一
  • 源码部署后端
    • Dockerfile源码构建部署Mysql
    • Docker镜像部署Redis
    • Java源码构建部署 SpringBoot

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文件自动初始化数据库。

​ Dockerfile文件可参考https://gitee.com/zhangbigqi/RuoYi-Vue.git 此项目下的 sql 目录

填写源码仓库地址,填写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下载路径。

自定义JDK下载地址:https://www.jb51.net/softs/596666.html

需要打开 禁用缓存按钮,防止包不一样出现奇奇怪怪的问题。构建成功后再把禁用缓存关闭,下次构建就缓存正确的包了。

修改后 保存修改。构建组件,等待构建完成,修改端口为 8080 。

进入拓扑图界面,切换为编辑模式,建立组件依赖关系。

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

更新组件ruoyi-ui ruoyi-admin,至此完成。

最终效果,拓扑图:

页面效果:

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

1. Rainbond 官网

2. Rainbond 安装使用

3. Rainbond 参考手册全集

以上就是Rainbond调用Vue React项目的后端接口的详细内容,更多关于Rainbond调用Vue React后端接口的资料请关注我们其它相关文章!

(0)

相关推荐

  • Rainbond网络治理插件ServiceMesh官方文档说明

    目录 ServiceMesh网络治理插件 插件实践​ 综合网络治理插件​ 入站方向​ 出站方向​ 出站网络治理插件​ ServiceMesh网络治理插件 5.1.5版本后,Rainbond默认提供了综合网络治理插件(同时处理入站和出站网络)和出站网络治理插件两个插件可用. 网络治理插件工作在与业务容器同一个网络空间之中,可以监听一个分配端口,拦截入站的业务流量进行限流.断路等处理再将流量负载到业务服务的实际监听端口之上. 同时也可以工作在出站方向,业务服务需要访问上游服务时,通过访问本地出站治理

  • Rainbond对微服务进行请求速率限制详解

    目录 前置条件 操作流程 常见问题 Rainbond 默认支持基于 envoy 的全局速率限制.在 Rainbond 默认提供的综合网络治理插件中呈现.本文我们将一个用例呈现 Rainbond 中全局速率限制的使用方式. 前置条件 Rainbond平台已部署完成. 在Rainbond中部署可访问的 Demo 业务. 为此组件开通综合网络治理插件. 参考视频 https://player.bilibili.com/player.html?aid=540728010 Rainbond 速率限制设置参

  • Rainbond的ServiceMesh架构组件端口冲突处理解决

    目录 组件间的通讯问题 方式一:通过HTTP 7层网络治理进行端口复用 方式二:动态变更组件的监听端口 方式三:使用 Kubernetes 原生 Service 治理模式 方式四:使用 Istio 网络治理模式 组件间的通讯问题 在我们部署具有多个服务的分布式业务时,必须要考虑的一点就是如何处理服务之间的通信问题,那么当我们将业务部署到Rainbond 上时,又是如何去处理的呢? Rainbond 开箱即用的ServiceMesh架构默认通过 Sidecar 代理的方式,为我们透明的解决了分布式

  • Rainbond配置组件自动构建部署官方文档讲解

    目录 前言 前提条件 基于源代码操作流程 1.开启组件 Git-Webhook 2.配置代码仓库 基于镜像仓库操作流程 1.开启镜像仓库 Webhook 自动构建 2.Tag 触发自动修改策略 3.配置镜像仓库 API 触发自动构建 前言 通过自动构建的功能,可以实现代码或镜像提交后组件自动触发构建和部署,Rainbond 提供了基于代码仓库 Webhooks.镜像仓库 Webhooks 和自定义 API 三种方式触发组件自动部署.自动构建的功能可以辅助开发者便捷的实现敏捷开发. 前提条件 组件

  • Rainbond使用Dockerfile构建便捷应用运行流程

    目录 Dockerfile构建运行镜像 Dockerfile构建运行镜像 Rainbond平台支持直接通过Dockerfile**构建并运行镜像,操作流程简单,方便进行持续迭代. 操作流程分为以下几步: 在Github上创建Dockerfile项目,Demo项目 Dockerfile内容 ARG VERSION=1.15.0 FROM nginx:${VERSION}-alpine COPY index.html /usr/share/nginx/html/ VOLUME /data EXPOS

  • Rainbond对前端项目Vue及React的持续部署

    目录 前言: 部署前检查 1.1 添加 nodestatic.json 文件 1.2 添加 web.conf 文件 1.3 源码部署Vue项目 常见问题 前言: 以往我们在部署 Vue.React 前端项目有几种方法: 项目打包好之后生成dist目录,将其放入nginx中,并进行相应的访问配置. 将项目打包好放入tomcat中. 将项目打包好的dist目录中的static和index.html文件放入springboot项目的resources目录下 直接运行一个前端server,类似本地开发那

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

    目录 前言 解决跨域对于不同的场景有以下几种方法: 接口没有统一 接口统一 源码部署后端 Dockerfile源码构建部署Mysql Docker镜像部署Redis Java源码构建部署 SpringBoot Rainbond中怎么部署 Vue .React 项目请参考 Rainbond部署Vue.React项目 前言 以往我们在部署前端项目后,调用后端接口有以下几种场景: 后端接口没有统一,比较分散,例如:/system/user,/tool/gen . 通常我们会在项目的全局配置文件.env

  • 聊聊jenkins部署vue/react项目的问题

    目录 准备工作 1.安装参数化部署插件 2.安装好插件后,配置Nodejs环境 创建项目 构建 centOS安装jenkins 1.安装JDK 2.安装jenkins 3.配置jenkis的端口 4.启动jenkins jenkins安装请参考文末centOS安装jenkins. 准备工作 1.安装参数化部署插件 Git Parameter Plug-In git参数化构建,可选择分支.标签构建Extended Choice Parameter Plug-In 自定义参数化构建,可根据需要任意添

  • jenkins分环境部署vue/react项目的方法步骤

    vue/react部署请参考上一篇文章:https://www.jb51.net/article/238583.htm 项目开发正常都需要开发环境.测试环境.生产环境,每个环境部署都比较麻烦,可以使用jenkins自动化部署 1.安装自定义参数化插件 Extended Choice Parameter Plug-In 2.配置自定义参数 3.配置shell脚本 shell脚本内容 #!/bin/bash // 判断环境 if [ $env == "dev" ]; then url=&q

  • 详解基于Vue/React项目的移动端适配方案

    前言 本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-react-app搭建的react(create-react-app)项目和使用vue-cli 2.x 搭建的vue项目中的 亲测可用 配置方案. px2rem或postcss-px2rem 在移动端中,为了设配不同的设备,通常使用rem来做适配. rem是通过根元素进行适配的,网页中的根元素指的

  • vue前端优雅展示后端十万条数据面试点剖析

    目录 前置工作 后端搭建 前端页面 直接渲染 setTimeout分页渲染 requestAnimationFrame 文档碎片 + requestAnimationFrame 懒加载 虚拟列表 前置工作 如果后端真的返回给前端10万条数据,咱们前端要怎么优雅地展示出来呢?(哈哈假设后端真的能传10万条数据到前端) 先把前置工作给做好,后面才能进行测试 后端搭建 新建一个server.js文件,简单起个服务,并返回给前端10w条数据,并通过nodemon server.js开启服务 没有安装no

  • Vue中使用axios调用后端接口的坑及解决

    目录 axios调用后端接口的坑 问题场景 总结了如下场景 调用后端接口 使用axios跨域问题 首先找到项目中vue.config.js axios调用后端接口的坑 问题场景 Vue.js工程中使用axios调用后端接口(SpringBoot构建)出现后端接口无法获得数据的情况 总结了如下场景 @RequestParam用来处理application/x-www-form-urlencoded编码(HTTP协议请求头中不指定Content-Type默认就是application/x-www-f

  • vue项目中如何调用多个不同的ip接口

    目录 如何调用多个不同的ip接口 第一个文件 第二个文件 第三个文件 设置自动配置不同环境接口 1.再根目录新建一个文件夹configenv 2.在main.js 入口文件中 3.在实际Vue页面中,接口实际调用 如何调用多个不同的ip接口 灵感来源: 项目的登录登出权限是调A的ip下面的接口,其他的功能调的接口是B的ip下面的接口 思路: 其实就是多写几个request.js文件罢了,或者在一个文件里面多写几个响应拦截和请求拦截. 上代码: 第一个文件 request.js import ax

  • vue或react项目生产环境去掉console.log的操作

    在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console. 如果手动删除未免也太累了,再说以后想再开发还得重新写console. 事实上webpack提供了删除console的插件,在vue-cli3里面是这样用的: 首先安装terser-webpack-plugin npm install terser-webpack-plugin -D 然后在vue.config.js文件里写插件的配置: module.exports = { configureW

  • Springboot项目中运用vue+ElementUI+echarts前后端交互实现动态圆环图(推荐)

    目录 如何运用vue+echarts前后端交互实现动态饼图 前言 一.环境配置 1.1 安装acharts 1.2 全局引用 二.圆环图前端实现 2.1 先在vue页面添加渲染盒子 2.2 前端逻辑实现部分 2.3 展示(可按自己需求更改前端样式) 三.前后端数据交互实现 3.1 创建数据库 3.2 后台代码的编写 如何运用vue+echarts前后端交互实现动态饼图 前言 我们做项目的时候,常常需要一些统计图来展示我们的数据,作为web开发人员,会实现统计图是我们必会的技能.我将带大家来实现动

  • Vue请求后端接口导出excel表格方式

    目录 vue请求后端接口导出excel 调用后端接口导出excel无效果,直接访问后端url可以 controller层代码 serviceImpl代码 导出模板路径 工具箱代码 vue前端写法 vue请求后端接口导出excel 项目中遇到一个需求,用户下载文件,会从后端那里请求接口获得数据并下载导出excel表格 后端小哥给我返回的是二进制数据流,需要前端自己去处理这些数据 如下图,请求接口返回的数据都是乱码 这里我们可以在axios的请求里添加,这样返回的二进制数据就会被读取为Blob的数据

随机推荐