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

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

WBOY

Libérer： 2024-06-03 12:05:57

original

382 Les gens l'ont consulté

É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);
    }
}

Copier après la connexion

<!-- 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>

Copier après la connexion

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

Copier après la connexion

Intégration React

@SpringBootApplication
public class SpringBootReactDemoApplication {

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

Copier après la connexion

<!-- 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>

Copier après la connexion

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

Copier après la connexion

Intégration Vue.js

@SpringBootApplication
public class SpringBootVueDemoApplication {

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

Copier après la connexion

<!-- 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>

Copier après la connexion

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

Copier après la connexion

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);
    }
}

Copier après la connexion

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>

Copier après la connexion

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

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

Copier après la connexion

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!