Bina aplikasi tindanan penuh menggunakan rangka kerja Java dan rangka kerja bahagian hadapan

Membina aplikasi tindanan penuh melibatkan pembangunan bahagian belakang dan bahagian hadapan, yang boleh dicapai menggunakan rangka kerja Java (Spring Boot) dan rangka kerja bahagian hadapan (Angular). Backend (Java): Buat projek Spring Boot dan tambahkan pergantungan Web Spring Boot Starter. Buat kelas pengawal untuk mengendalikan permintaan (seperti HomeController). Front-end (Angular): Buat projek Angular. Buat kelas komponen untuk memaparkan data (seperti HomeComponent). Sambungkan bahagian belakang dan bahagian hadapan: Konfigurasikan laluan API dalam fail konfigurasi Spring Boot. Kemas kini laluan permintaan dalam perkhidmatan Angular. Kes praktikal: penciptaan bahagian belakang aplikasi TODO TodoController dan pengurusan perkhidmatan TODO. . Dalam artikel ini, kami akan menunjukkan cara membina aplikasi tindanan penuh menggunakan rangka kerja Java (Spring Boot) dan rangka kerja hadapan (Angular). . java, contohnya HomeController.java:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

Front-end (Angular)

Buat projek Angular

Buat yang baharu projek menggunakan Angular CLI:

@RestController
public class HomeController {

    @GetMapping("/")
    public String home() {
        return "Hello, World!";
    }

}

Buat komponen

Buat komponen dalam direktori src/app, contohnya home.component.ts:

ng new my-app --routing

Sambungkan bahagian belakang dan bahagian hadapan

Konfigurasikan API bahagian belakang

Konfigurasikan laluan API dalam fail konfigurasi Spring Boot (application.properties):

import { Component } from '@angular/core';

@Component({
  selector: 'home',
  templateUrl: './home.component.html'
})
export class HomeComponent {
  message = "Hello, World!";
}

Kemas kini perkhidmatan Angular src/main/java目录中创建一个控制器类，例如HomeController.java：

server.port=8080
spring.mvc.pathmatch.matching-strategy=ANT

前端（Angular）

创建 Angular 项目

使用Angular CLI创建新项目：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule
  ],
  ...
})
export class AppModule { }

创建组件

在src/app目录中创建组件，例如home.component.ts：

rrreee

将后端和前端连接起来

配置后端API

在Spring Boot配置文件（application.properties）中配置API路径：

rrreee

更新Angular服务

在src/app目录中的app.module.ts中更新服务：

rrreee

实战案例：创建简单的TODO应用程序

后端

• 创建TodoController.java来处理TODO操作。
• 定义Todo实体和TodoService来管理TODO。

前端

• 创建todo.component.ts来显示TODO列表。
• 使用httpClientdalam src/app Perkhidmatan kemas kini dalam app.module.ts dalam kod> direktori:
rrreee

Kes praktikal: Buat aplikasi TODO yang mudah

Backend

🎜

• BuatTodoController.java untuk mengendalikan operasi TODO. 🎜
• Tentukan entiti Todo dan TodoService untuk mengurus TODO. 🎜🎜🎜🎜Front-end🎜🎜
  • Buat todo.component.ts untuk memaparkan senarai TODO. 🎜
  • Gunakan httpClient untuk menghantar permintaan kepada API. 🎜🎜🎜🎜Kesimpulan🎜🎜🎜Dengan menggunakan rangka kerja Java dan rangka kerja bahagian hadapan, kami boleh membina aplikasi tindanan penuh, memisahkan pembangunan bahagian belakang dan bahagian hadapan. Ini meningkatkan kebolehselenggaraan dan kebolehgunaan semula kod. 🎜

Atas ialah kandungan terperinci Bina aplikasi tindanan penuh menggunakan rangka kerja Java dan rangka kerja bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!