Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "Rainbond how to call the back-end interface of the Vue React project", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how Rainbond calls the back-end interface of the Vue React project" article.

Preface

In the past, after deploying the front-end project, we used to call the back-end API in the following scenarios:

The backend interface is not unified and is scattered, for example: / system/user,/tool/gen.

Usually we write the back-end ip directly in the project's global configuration file .env.production, for example:

ENV = 'production'VUE_APP_BASE_API =' 192.168.6.66 purl 8080'

Although this can be accessed normally, it can lead to cross-domain problems.

The backend interface is unified, for example: / api/system/user, / api/tool/gen.

Most partners will also write the IP + suffix directly to the project global configuration file, for example:

ENV = 'production'VUE_APP_BASE_API =' 192.168.6.66 purl 8080 api.'

Writing in this way, of course, there will be cross-domain problems.

Then how can we solve the cross-domain problem that the interface is not unified or the interface is unified?

Answer: use Nginx reverse proxy.

Most partners throw the dist package packaged with nginx into nginx, configure a location proxy_pass reverse proxy backend, and then fill in the Nginx address in the global configuration of the project. The purple will still cross over. What on earth should we do with it? please read on.

There are several ways to solve cross-domain for different scenarios: the interface is not unified.

If the number of interfaces is small, for example, there are only a few interfaces system tool moitor login getmenu and so on.

First of all, you need to modify the global configuration file. The request api of env.production is * * / * *. When the frontend initiates the request, it will be forwarded directly to nginx.

ENV = 'production'VUE_APP_BASE_API =' /'

Secondly, modify the Nginx configuration file to add multiple location, which will match the location rules of nginx when requested by the browser, for example:

Browser request menu: http://192.168.6.66/getmenu, which matches location / getmenu rules to reverse proxy to the backend.

Server {listen 5000; # static page 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/;}}

This approach is fine, but it is troublesome to configure dozens of interfaces one by one.

There are a large number of interfaces.

First of all, you also need to modify the global configuration file .env.production, and change the request interface to api, which is customized. Some of my friends have doubts. I don't have this interface. Please read on.

ENV = 'production'VUE_APP_BASE_API =' / api'

Then modify the Nginx configuration file, add location / api to the nginx configuration file, and add rewrite, proxy_pass, this rewrite is URL rewrite.

For example, if you request http://192.168.6.66/api/system/menu, the request will normally be sent to the backend, and the backend will report an error. There is no such API.

If we rewrite the URL through rewrite, the URL will become http://192.168.6.66/system/menu and reverse proxy to the backend through proxy_pass. The API request / system/menu is sent at this time, and the backend returns normally.

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 can be found in the Nginx official document rewrite_module module, which is briefly introduced here:

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

Keyword regular replacement content flag tag

Unified interface

It's easier to handle this kind of thing.

The first step is to modify the project's global configuration file, .env.production, and modify the request interface to / prod-api. This unified interface is provided by the back end.

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

Modify the Nginx configuration file, add a location, and reverse proxy to the backend address.

In this case, the URL requested in the browser is: 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;}}

Now that the cross-domain problem is solved, let's start to practice it.

The configuration of the front end is the unified way of the interface mentioned above.

Next, deploy a SpringBoot back-end project to work with the front end.

Source code deployment backend

This project source code address Fork open source project if according to

The back end is the SpringBoot + Mysql + Redis architecture.

Dockerfile source code build and deploy Mysql

Refer to the official document Rainbond to easily build and run applications with Dockerfile

Build and deploy Mysql through Dockerfile source code.

The Dockerfile source build needs to automatically initialize the database by placing Dockerfile files in the Sql directory required by the project.

Fill in the address of the source code warehouse and the MySQL subdirectory sql to build Mysql.

Confirm that the component is created, and the platform will automatically recognize the language as dockerfile.

Create and wait for the build component to complete.

After the construction is completed, open the internal service in the component > port and modify the alias. Click to modify it and change it to MYSQL_HOST for use when connecting to the backend.

Docker image deployment Redis

Deploy redis through docker image. For more information, please refer to the official document docker image construction.

Use the official redis image, redis:latest

Confirm the creation, and the platform will detect some image information and create it directly.

After the build is complete, open the internal service in the component > port. For back-end connections

Java source code build and deploy SpringBoot

Here, the configuration of the configuration file ruoyi-admin/src/main/resources/application-druid.yml connection database in the back-end project is modified in advance, and the environment variable connection is changed. Here, the modified port alias is used.

And modified the connection Redis configuration in the ruoyi-admin/src/main/resources/application.yml file

# main library data source master: url: jdbc:mysql://$ {MYSQL_HOST}: ${MYSQL_PORT} / ry-vue? Redis: # address host: 127.0.0.1 # port, default is 6379 port: 6379

Build the project through Java source code. Refer to the official document JAVA source code construction.

Fill in the address of the source code warehouse and build the SpringBoot project.

The platform detects what the project is based on the pom.xml file in the root directory of the project, which is a multi-module project.

Enter the multi-module build, check the ruoyi-admin module, this module is runnable, other modules are dependent. The function of the specific module can be referenced according to the official document

Maven build parameters can be modified without special requirements.

Confirm the creation and wait for the build to complete.

It should be noted here that the platform uses openjdk by default, and this project needs to use oraclejdk to generate front-end CAPTCHA.

You need to change the JDK type to custom JDK in component > build source, and fill in the custom JDK download path.

You need to turn on the disable caching button to prevent strange problems with different packages. Turn off the disabled cache after the build is successful, and the correct package will be cached next time.

Save the changes after the changes. Build the component, wait for the build to complete, and modify the port to 8080.

Enter the topology interface, switch to editing mode, and establish component dependencies.

* * ruoyi-ui * * connect to ruoyi-admin. * * ruoyi-admin * * connect Mysql and Redis.

Update the component ruoyi-ui ruoyi-admin, and this is complete.

Final effect, topology diagram:

Page effect:

Rainbond cloud native application management platform to achieve micro-service architecture without changing the code, managing Kubernetes without learning containers, helping enterprises to implement applications on the cloud, and continuously delivering any enterprise applications to Kubernetes clusters, hybrid clouds, multi-clouds and other infrastructure. It is the supporting platform of Rainstore cloud native application store.

The above is the content of this article on "how Rainbond invokes the back-end interface of the Vue React project". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.