How to use Java to develop a front-end and back-end separation application based on JHipster

How to use Java to develop a front-end and back-end separation application based on JHipster

Foreword:
In today's software development, the architecture of front-end and back-end separation is becoming more and more popular. Popular with developers. JHipster is a powerful tool for building modern web applications using Java. It combines technologies such as Spring Boot and Angular to provide the ability to quickly develop applications. This article will introduce how to use Java to develop a front-end and back-end separation application based on JHipster, and provide code examples.

JHipster Introduction:
JHipster is a development platform for generating modern Web applications. It combines technologies such as Spring Boot, Spring Security, Angular, React, and Vue to simplify the application building process. JHipster provides many out-of-the-box functions, such as user management, authentication and authorization, database access, front-end pages, etc. By using JHipster, developers can quickly build a fully functional, efficient and reliable application.

Front-end and back-end separation architecture:
The front-end and back-end separation architecture develops, deploys and maintains the front-end and back-end codes independently. The front end communicates with the back end through the API, obtains data and renders the page. The advantage of this architecture is that the front-end and back-end can be developed in parallel, reducing coordination and dependency issues during the development process. It also supports multi-platform and multi-terminal application development.

Step 1: Install JHipster and create the project
Before starting, please make sure you have installed Java, Node.js and Yarn.

1. Open the command line tool and install JHipster:

   npm install -g generator-jhipster

2. Create a new JHipster project:

   jhipster

Follow the prompts and select the technology stack and components you want to use.

Step 2: Create a front-end application

1. In the project root directory, create a folder named "frontend":

   mkdir frontend

2. Go to the frontend folder and create a new Angular application using Angular CLI:

   cd frontend
   ng new myapp

3. Go to the myapp directory and start the development server:

   cd myapp
   ng serve

Now, you can visit http://localhost:4200 in the browser to view the Angular application.

Step 3: Communicate with the backend

1. Open the src/main/java/com/mycompany/myapp/config/Constants.java file and configure front-end and backend communication API path:

   public static final String API_URL = "/api";

2. Open the src/main/java/com/mycompany/myapp/config/SecurityConfiguration.java file and allow Cross Origin Resource Sharing (CORS):

   @Configuration
   @EnableWebSecurity
   @EnableGlobalMethodSecurity(prePostEnabled = true, securedEnabled = true)
   public class SecurityConfiguration extends WebSecurityConfigurerAdapter {
   
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        // ...
   
        http.cors()
            .and()
            .csrf()
            .disable()
            .headers()
            .frameOptions()
            .disable()
            .cacheControl()
            .disable();
    }
   }

3. Open the src/main/java/com/mycompany/myapp/web/rest/UserResource.java file and change the user-related API path to /api/users:

   @RestController
   @RequestMapping("/api")
   public class UserResource {
   
    // ...
   
    @GetMapping("/users")
    public ResponseEntity<List<UserDTO>> getAllUsers(Pageable pageable) {
        Page<UserDTO> page = userService.getAllManagedUsers(pageable);
        HttpHeaders headers = PaginationUtil.generatePaginationHttpHeaders(ServletUriComponentsBuilder.fromCurrentRequest(), page);
        return ResponseEntity.ok().headers(headers).body(page.getContent());
    }
   }

4. Open the frontend/src/app/app.component.ts file and use HttpClient to obtain the backend API data:

   import { Component } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   
   @Component({
     selector: 'app-root',
     template: `
    <h1 id="Users">Users</h1>
    <ul>
      <li *ngFor="let user of users">{{user.login}}</li>
    </ul>
     `,
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     users: any[];
     
     constructor(private http: HttpClient) {
    this.http.get('/api/users').subscribe((data: any[]) => {
      this.users = data;
    });
     }
   }

Through the above code example, the front-end application will The user list obtained from the backend will be displayed on the page.

Summary:
By using JHipster, you can easily develop a Java-based front-end and back-end separation application. The above steps provide a basic framework that you can extend and optimize as needed. I hope this article can help you quickly get started using JHipster to develop front-end and back-end separation applications. Happy coding!

The above is the detailed content of How to use Java to develop a front-end and back-end separation application based on JHipster. For more information, please follow other related articles on the PHP Chinese website!