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?

WBOYOriginal: 2024-06-03 12:05:57378Durchsuche

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.

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!

Java spring spring boot html angular 前端框架 JS

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

Vorheriger Artikel：Gemeinsame Entwicklung von Java-Framework und Internet der DingeNächster Artikel：Gemeinsame Entwicklung von Java-Framework und Internet der Dinge

In Verbindung stehende Artikel

Mehr sehen