Home > Java > javaTutorial > How to use Java framework to integrate front-end framework?

How to use Java framework to integrate front-end framework?

WBOY
Release: 2024-06-03 12:05:57
Original
405 people have browsed it

Steps to integrate mainstream front-end frameworks with Java back-end: Angular integration: Use Spring Boot to create a back-end, import Angular scripts, create HTML pages, and define controllers. React integration: Same as above, but using React scripts and components. Vue.js integration: Same as above, but using Vue.js scripts and components.

How to use Java framework to integrate front-end framework?

How to use the Java framework to integrate the front-end framework

In modern Web development, integrating the front-end framework with the Java back-end framework has been becoming more and more common. This article explains how to use Spring Boot to integrate with popular front-end frameworks such as Angular, React, and Vue.js.

Angular integration

@SpringBootApplication
public class SpringBootAngularDemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringBootAngularDemoApplication.class, args);
    }
}
Copy after login
<!-- 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>
Copy after login
// main.js
angular.module('myApp', [])
  .controller('myCtrl', function($scope) {
    $scope.greeting = "";
    $scope.greet = function() {
      $scope.greeting = "Hello, " + $scope.name + "!";
    };
  });
Copy after login

React integration

@SpringBootApplication
public class SpringBootReactDemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringBootReactDemoApplication.class, args);
    }
}
Copy after login
<!-- 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>
Copy after login
// main.js
const Greeting = () => <h1>Hello, World!</h1>;
ReactDOM.render(<Greeting />, document.getElementById("root"));
Copy after login

Vue.js integration

@SpringBootApplication
public class SpringBootVueDemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringBootVueDemoApplication.class, args);
    }
}
Copy after login
<!-- 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>
Copy after login
// main.js
new Vue({
  el: "#app",
  data: {
    message: "Hello, Vue!"
  },
  template: "<div>{{ message }}</div>"
});
Copy after login

Practical Case

Suppose you are building a simple web application that allows users to create a profile that includes name and age. Here's how to integrate the frontend using Spring Boot and 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);
    }
}
Copy after login

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>
Copy after login
// profiles.controller.js
angular.module('myApp')
  .controller('ProfilesCtrl', function($scope, $http) {

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

By following With this guide, you can easily integrate front-end frameworks with Java backends and create powerful web applications.

The above is the detailed content of How to use Java framework to integrate front-end framework?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template