Vue.js와 Java 언어의 결합으로 프론트엔드와 백엔드의 별도 개발이 가능합니다.-View.js-php.cn

Vue.js와 Java 언어의 결합으로 프론트엔드와 백엔드의 별도 개발이 가능합니다.

WBOY

풀어 주다： 2023-07-29 15:25:32

원래의

1480명이 탐색했습니다.

Vue.js와 Java 언어의 결합: 프런트엔드와 백엔드의 별도 개발을 달성하기 위해

프런트엔드 프레임워크 Vue.js와 백엔드 언어인 Java는 현재 매우 인기 있고 널리 사용되는 기술입니다. 그들은 각각 프런트엔드 및 백엔드 개발에서 뛰어난 성과를 거두었습니다. Vue.js와 Java 언어를 결합하면 프런트엔드와 백엔드를 별도로 개발할 수 있어 프로젝트 개발을 더욱 효율적이고 유지 관리하기 쉽게 만들 수 있습니다. 이 기사에서는 프런트엔드 및 백엔드 분리 개발을 위해 Vue.js 및 Java 언어를 사용하는 방법을 소개하고 해당 코드 예제를 제공합니다.

Vue.js 프로젝트 만들기

먼저 Vue.js 프로젝트를 만들어야 합니다. Vue CLI를 사용하여 Vue 프로젝트를 빠르게 생성할 수 있습니다. 터미널을 열고 다음 명령을 실행합니다.

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

로그인 후 복사

Build API 인터페이스

Java에서는 Spring Boot를 사용하여 백엔드 인터페이스를 빌드할 수 있습니다. Spring Boot 프로젝트를 생성하고 프런트엔드 요청을 처리할 컨트롤러 클래스를 생성합니다. 샘플 코드는 다음과 같습니다.

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

로그인 후 복사

Vue.js와의 데이터 상호 작용

Vue.js에서는 Axios를 사용하여 백엔드와 상호 작용할 수 있습니다. Vue 프로젝트에서 src 디렉터리에 있는 main.js 파일을 열고 다음 코드를 추가하세요.

import axios from 'axios';

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

로그인 후 복사

이제 Vue 구성 요소에서 this.$http를 사용하여 가져오기 요청을 보낼 수 있습니다. 백엔드 API 데이터. 샘플 코드는 다음과 같습니다: 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();
  }
}

로그인 후 복사

在前端页面展示数据

我们可以在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>

로그인 후 복사