La combinaison du langage Vue.js et Java permet un développement séparé du front-end et du back-end

Combinaison de Vue.js et du langage Java : pour réaliser un développement séparé du front-end et du back-end

Le framework front-end Vue.js et le langage back-end Java sont tous deux des technologies très populaires et largement utilisées à l'heure actuelle. Ils ont chacun de grandes réalisations en matière de développement front-end et back-end. La combinaison de Vue.js avec le langage Java peut permettre un développement séparé du front-end et du back-end, rendant le développement de projet plus efficace et plus facile à maintenir. Cet article expliquera comment utiliser le langage Vue.js et Java pour le développement de séparation front-end et back-end, et donnera des exemples de code correspondants.

1. Créer un projet Vue.js

Tout d'abord, nous devons créer un projet Vue.js. Vous pouvez utiliser Vue CLI pour créer rapidement un projet Vue. Ouvrez le terminal et exécutez la commande suivante :

$ npm install -g @vue/cli                   // 安装Vue CLI工具
$ vue create vue-project                    // 创建Vue项目
$ cd vue-project                            // 进入项目目录
$ npm run serve                             // 启动开发服务器

2. Build API interface

En Java, nous pouvons utiliser Spring Boot pour créer l'interface backend. Créez un projet Spring Boot et créez une classe Controller pour gérer les requêtes frontales. L'exemple de code est le suivant :

@RestController
@RequestMapping("/api")
public class ApiController {

    @GetMapping("/users")
    public List<User> getUsers() {
        // 从数据库中获取用户数据
        List<User> users = userRepository.findAll();
        return users;
    }

    @PostMapping("/users")
    public User createUser(@RequestBody User user) {
        // 将前端传递过来的用户数据保存到数据库中
        User savedUser = userRepository.save(user);
        return savedUser;
    }
}

3. Interaction des données avec Vue.js

Dans Vue.js, nous pouvons utiliser Axios pour interagir avec le backend. Dans le projet Vue, ouvrez le fichier main.js dans le répertoire src et ajoutez le code suivant :

import axios from 'axios';

// 设置API的基本URL
axios.defaults.baseURL = 'http://localhost:8080';
Vue.prototype.$http = axios;

Maintenant, nous pouvons utiliser this.$http dans le composant Vue pour envoyer une requête pour obtenir les données de l'API back-end. L'exemple de code est le suivant : this.$http来发送请求获取后端API的数据。示例代码如下：

export default {
  data() {
    return {
      users: [],
      newUser: {
        name: '',
        age: 0
      }
    }
  },
  methods: {
    getUsers() {
      this.$http.get('/api/users')
        .then(response => {
          this.users = response.data;
        });
    },
   createUser() {
      this.$http.post('/api/users', this.newUser)
        .then(response => {
          this.users.push(response.data);
          this.newUser.name = '';
          this.newUser.age = 0;
        });
    }
  },
  mounted() {
    this.getUsers();
  }
}

4. 在前端页面展示数据

我们可以在Vue组件的模板中，使用v-for指令来循环渲染从后端API获取到的数据。示例代码如下：

<template>
  <div>
    <div v-for="user in users" :key="user.id">
      Name: {{ user.name }}, Age: {{ user.age }}
    </div>
    
    <input v-model="newUser.name" placeholder="Name" />
    <input v-model.number="newUser.age" placeholder="Age" />
    <button @click="createUser">Create User</button>
  </div>
</template>

5. 运行项目

现在，我们可以通过执行以下命令来运行Vue项目：

$ npm run serve

在浏览器中访问http://localhost:8080rrreee

Affichage des données sur la page front-end

Nous pouvons utiliser la directive v-for dans le modèle du composant Vue pour restituer en boucle les données obtenues à partir de l'API back-end. L'exemple de code est le suivant :

rrreee
🎜Exécutez le projet🎜🎜🎜Maintenant, nous pouvons exécuter le projet Vue en exécutant la commande suivante : 🎜rrreee🎜Visitez http://localhost dans le navigateur : 8080, vous pouvez voir les données utilisateur obtenues à partir de l'API back-end et soumettre de nouvelles données utilisateur via le formulaire. 🎜🎜Résumé : 🎜🎜En combinant Vue.js avec le langage Java, nous pouvons réaliser un développement front-end et back-end séparé, garantissant l'indépendance et l'efficacité du développement front-end et back-end. Vue.js fournit de puissants outils de développement front-end, permettant aux développeurs front-end de se concentrer sur la conception d'interface et l'interaction utilisateur, tandis que le langage Java offre des capacités de développement back-end stables et fiables pour le traitement des données et la logique métier. Cette méthode de développement front-end et back-end séparé peut améliorer l'efficacité du développement des équipes, réduire le couplage de code et rendre le développement de projet plus flexible et durable. 🎜

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!