The combination of Vue.js and Java language enables separate development of front-end and back-end

The combination of Vue.js and Java language: achieving separate development of front-end and back-end

The front-end framework Vue.js and the back-end language Java are currently very popular and widely used technologies. They are respectively used in the front-end and back-end. They have strong capabilities in end-end development. Combining Vue.js with the Java language can achieve separate development of front-end and back-end, making project development more efficient and maintainable. This article will introduce how to use Vue.js and Java language for front-end and back-end separation development, and give corresponding code examples.

1. Create Vue.js project

First, we need to create a Vue.js project. You can use the Vue CLI to quickly create a Vue project. Open the terminal and execute the following command:

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

2. Build API interface

In Java, we can use Spring Boot to build the back-end interface. Create a Spring Boot project and create a Controller class to handle front-end requests. The sample code is as follows:

@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. Data interaction with Vue.js

In Vue.js, we can use Axios to interact with the back-end data. In the Vue project, open the main.js file in the src directory and add the following code:

import axios from 'axios';

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

Now, we can use this.$http in the Vue component to send the request after getting it end API data. The sample code is as follows:

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. Display data on the front-end page

We can use the v-for directive in the template of the Vue component to loop rendering and obtain from the back-end API to the data. The sample code is as follows:

<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. Run the project

Now, we can run the Vue project by executing the following command:

$ npm run serve

Access in the browser http://localhost:8080, you can see the user data obtained from the back-end API, and submit new user data through the form.

Summary:

By combining Vue.js with the Java language, we can achieve separate front-end and back-end development, ensuring the independence and efficiency of front-end and back-end development. Vue.js provides powerful front-end development tools, allowing front-end developers to focus on interface design and user interaction, while the Java language provides stable and reliable back-end development capabilities for processing data and business logic. This method of separate front-end and back-end development can improve team development efficiency, reduce code coupling, and make project development more flexible and sustainable.

The above is the detailed content of The combination of Vue.js and Java language enables separate development of front-end and back-end. For more information, please follow other related articles on the PHP Chinese website!