Maison > Article > Java > Comment intégrer un framework front-end à l'aide du framework Java ?

Comment intégrer un framework front-end à l'aide du framework Java ?

WBOYoriginal: 2024-06-03 12:05:57219parcourir

Étapes pour intégrer les frameworks front-end traditionnels avec le back-end Java : Intégration angulaire : utilisez Spring Boot pour créer un back-end, importer des scripts angulaires, créer des pages HTML et définir des contrôleurs. Intégration React : identique à ci-dessus, mais en utilisant des scripts et des composants React. Intégration Vue.js : identique à ci-dessus, mais en utilisant des scripts et des composants Vue.js.

Comment intégrer un framework front-end à laide du framework Java ?

Comment intégrer des frameworks front-end avec des frameworks Java

Dans le développement Web moderne, l'intégration de frameworks front-end avec des frameworks back-end Java est devenue de plus en plus courante. Cet article explique comment utiliser Spring Boot pour s'intégrer aux frameworks frontaux populaires tels que Angular, React et Vue.js.

Intégration angulaire

@SpringBootApplication
public class SpringBootAngularDemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringBootAngularDemoApplication.class, args);
    }
}

<!-- angular.html -->
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
</head>
<body ng-app="myApp">
  <div>
    <input ng-model="name">
    <button ng-click="greet()">Greet</button>
  </div>
  <h3 ng-bind="greeting"></h3>
</body>
</html>

// main.js
angular.module('myApp', [])
  .controller('myCtrl', function($scope) {
    $scope.greeting = "";
    $scope.greet = function() {
      $scope.greeting = "Hello, " + $scope.name + "!";
    };
  });

Intégration React

@SpringBootApplication
public class SpringBootReactDemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringBootReactDemoApplication.class, args);
    }
}

<!-- index.html -->
<html>
<head>
  <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
  <script src="main.js"></script>
</head>
<body>
  <div id="root"></div>
</body>
</html>

// main.js
const Greeting = () => <h1>Hello, World!</h1>;
ReactDOM.render(<Greeting />, document.getElementById("root"));

Intégration Vue.js

@SpringBootApplication
public class SpringBootVueDemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringBootVueDemoApplication.class, args);
    }
}

<!-- index.html -->
<html>
<head>
  <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
  <script src="main.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

// main.js
new Vue({
  el: "#app",
  data: {
    message: "Hello, Vue!"
  },
  template: "<div>{{ message }}</div>"
});

Cas pratique

Supposons que vous créez une application Web simple qui permet aux utilisateurs de créer un nom et un profil d'âge. Voici comment intégrer le front-end à l'aide de Spring Boot et Angular :

Java Backend

@Entity
public class Profile {

    private Long id;
    private String name;
    private Integer age;

    // getters and setters
}

@SpringBootApplication
public class SpringBootAngularDemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringBootAngularDemoApplication.class, args);
    }
}

Angular Frontend

<!-- profile.html -->
<div>
  <form>
    <label>Name:</label>
    <input type="text" [(ngModel)]="profile.name">
    <br>
    <label>Age:</label>
    <input type="number" [(ngModel)]="profile.age">
    <br>
    <button type="submit">Save</button>
  </form>
</div>

// profiles.controller.js
angular.module('myApp')
  .controller('ProfilesCtrl', function($scope, $http) {

    $scope.save = function() {
      $http.post('/profiles', $scope.profile)
        // handle server response
    };
  });

En suivant ce guide, vous pouvez facilement intégrer un framework front-end avec le backend Java et créer une application Web puissante. .

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!

Java spring spring boot html angular 前端框架 JS

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Développement collaboratif du framework Java et de l'Internet des objetsArticle suivant：Développement collaboratif du framework Java et de l'Internet des objets

Articles Liés

Voir plus