Créez des applications full-stack à l'aide de frameworks Java et de frameworks front-end

La création d'applications full-stack implique un développement back-end et front-end, qui peut être réalisé à l'aide de frameworks Java (Spring Boot) et de frameworks front-end (Angular). Backend (Java) : créez un projet Spring Boot et ajoutez la dépendance Web Spring Boot Starter. Créez une classe de contrôleur pour gérer la requête (telle que HomeController). Front-end (Angular) : créez un projet angulaire. Créez une classe de composants pour afficher les données (telles que HomeComponent). Connectez le backend et le frontend : configurez le chemin de l'API dans le fichier de configuration Spring Boot. Mettre à jour le chemin de la requête dans le service Angular. Cas pratique : création backend d'application TODO TodoController et gestion de service TODO.

Créez des applications full-stack à l'aide de frameworks Java et de frameworks front-end

Introduction

Le développement full-stack implique tous les aspects du développement d'applications, du back-end au front-end. Dans cet article, nous allons montrer comment créer une application full-stack à l'aide d'un framework Java (Spring Boot) et d'un framework front-end (Angular).

Backend (Java)

Créer un projet Spring Boot

Créez un nouveau projet à l'aide de SpringBoot Initializr, spécifiez les dépendances suivantes :

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

Créez le contrôleur

dans src/main/ java, par exemple <code>HomeController.java : src/main/java目录中创建一个控制器类，例如HomeController.java：

@RestController
public class HomeController {

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

}

前端（Angular）

创建 Angular 项目

使用Angular CLI创建新项目：

ng new my-app --routing

创建组件

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

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

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

将后端和前端连接起来

配置后端API

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

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

更新Angular服务

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

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

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

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

后端

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

前端

• 创建todo.component.ts来显示TODO列表。
• 使用httpClientrrreee

Front-end (Angular)

Créez un projet Angular

🎜Créez un nouveau projet utilisant Angular CLI : 🎜rrreee 🎜🎜Créez un composant🎜🎜🎜Créez un composant dans le répertoire src/app, par exemple home.component.ts : 🎜rrreee🎜 🎜Connectez le backend et le frontend🎜🎜 🎜🎜Configurez l'API backend🎜🎜🎜Configurez le chemin de l'API dans le fichier de configuration Spring Boot (application.properties) : 🎜rrreee🎜🎜Mettez à jour le service Angular 🎜🎜 🎜dans src/app Service de mise à jour dans app.module.ts dans le répertoire code> : 🎜rrreee🎜🎜Cas pratique : Créer une application TODO simple🎜🎜🎜🎜Backend 🎜🎜

• CréezTodoController.java pour gérer les opérations TODO. 🎜
• Définissez l'entité Todo et TodoService pour gérer TODO. 🎜🎜🎜🎜Front-end🎜🎜
  • Créez todo.component.ts pour afficher la liste TODO. 🎜
  • Utilisez httpClient pour envoyer des requêtes à l'API. 🎜🎜🎜🎜Conclusion🎜🎜🎜En utilisant des frameworks Java et des frameworks front-end, nous pouvons créer des applications full-stack, séparant le développement du back-end et du front-end. Cela améliore la maintenabilité et la réutilisabilité du code. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!