


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.
-
Open the command line tool and install JHipster:
npm install -g generator-jhipster
-
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
-
In the project root directory, create a folder named "frontend":
mkdir frontend
-
Go to the frontend folder and create a new Angular application using Angular CLI:
cd frontend ng new myapp
-
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
-
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";
-
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(); } }
-
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()); } }
-
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!

Start Spring using IntelliJIDEAUltimate version...

When using MyBatis-Plus or other ORM frameworks for database operations, it is often necessary to construct query conditions based on the attribute name of the entity class. If you manually every time...

Java...

How does the Redis caching solution realize the requirements of product ranking list? During the development process, we often need to deal with the requirements of rankings, such as displaying a...

Conversion of Java Objects and Arrays: In-depth discussion of the risks and correct methods of cast type conversion Many Java beginners will encounter the conversion of an object into an array...

Solutions to convert names to numbers to implement sorting In many application scenarios, users may need to sort in groups, especially in one...

Detailed explanation of the design of SKU and SPU tables on e-commerce platforms This article will discuss the database design issues of SKU and SPU in e-commerce platforms, especially how to deal with user-defined sales...

How to set the SpringBoot project default run configuration list in Idea using IntelliJ...


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

SublimeText3 English version
Recommended: Win version, supports code prompts!

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

SublimeText3 Mac version
God-level code editing software (SublimeText3)

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

Atom editor mac version download
The most popular open source editor