Heim  >  Artikel  >  Java  >  Wie integriere ich ein Front-End-Framework mithilfe des Java-Frameworks?

Wie integriere ich ein Front-End-Framework mithilfe des Java-Frameworks?

WBOY
WBOYOriginal
2024-06-03 12:05:57383Durchsuche

Schritte zur Integration gängiger Front-End-Frameworks mit Java-Back-End: Angular-Integration: Verwenden Sie Spring Boot, um ein Back-End zu erstellen, Angular-Skripte zu importieren, HTML-Seiten zu erstellen und Controller zu definieren. React-Integration: Wie oben, jedoch unter Verwendung von React-Skripten und -Komponenten. Vue.js-Integration: Wie oben, jedoch unter Verwendung von Vue.js-Skripten und -Komponenten.

Wie integriere ich ein Front-End-Framework mithilfe des Java-Frameworks?

So integrieren Sie Front-End-Frameworks mit Java-Frameworks

In der modernen Webentwicklung wird die Integration von Front-End-Frameworks mit Java-Back-End-Frameworks immer häufiger. In diesem Artikel wird erläutert, wie Sie Spring Boot für die Integration in gängige Front-End-Frameworks wie Angular, React und Vue.js verwenden.

Winkelintegration

@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 + "!";
    };
  });

React-Integration

@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"));

Vue.js-Integration

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

Praktischer Fall

Angenommen, Sie erstellen eine einfache Webanwendung, mit der Benutzer ein Namens- und Altersprofil erstellen können. So integrieren Sie das Frontend mit Spring Boot und 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
    };
  });

Durch Befolgen dieser Anleitung können Sie das Frontend-Framework ganz einfach in das Java-Backend integrieren und leistungsstarke Webanwendungen erstellen .

Das obige ist der detaillierte Inhalt vonWie integriere ich ein Front-End-Framework mithilfe des Java-Frameworks?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn