How to use Java framework to integrate front-end framework?-javaTutorial-php.cn

Home

Java

javaTutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 03, 2024 pm 12:05 PM

javafront-end framework

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

<!-- 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 id="Hello-World">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>"
});

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

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

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!

Statement

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

Java compilation error: How do package declaration and access permissions change after moving the class file?Apr 19, 2025 pm 07:12 PM

Packages and Directories in Java: The logic behind compiler errors In Java development, you often encounter problems with packages and directories. This article will explore Java in depth...

LeetCode Question 3: What is the reason why the local and platform output results are different when inputting an empty string?Apr 19, 2025 pm 07:09 PM

Leetcode ...

Is JWT suitable for dynamic permission change scenarios?Apr 19, 2025 pm 07:06 PM

JWT and Session Choice: Tradeoffs under Dynamic Permission Changes Many Beginners on JWT and Session...

How to properly configure apple-app-site-association file in pagoda nginx to avoid 404 errors?Apr 19, 2025 pm 07:03 PM

How to correctly configure apple-app-site-association file in Baota nginx? Recently, the company's iOS department sent an apple-app-site-association file and...

What are the differences in the classification and implementation methods of the two consistency consensus algorithms?Apr 19, 2025 pm 07:00 PM

How to understand the classification and implementation methods of two consistency consensus algorithms? At the protocol level, there has been no new members in the selection of consistency algorithms for many years. ...