Gabungan bahasa Vue.js dan Java membolehkan pembangunan bahagian hadapan dan belakang yang berasingan

Gabungan Vue.js dan bahasa Java: Untuk mencapai pembangunan berasingan bahagian hadapan dan bahagian belakang

Rangka kerja bahagian hadapan Vue.js dan bahasa bahagian belakang Java adalah teknologi yang sangat popular dan digunakan secara meluas pada masa ini. Mereka masing-masing mempunyai pencapaian hebat dalam pembangunan bahagian hadapan dan belakang. Menggabungkan Vue.js dengan bahasa Java boleh mencapai pembangunan berasingan bahagian hadapan dan belakang, menjadikan pembangunan projek lebih cekap dan boleh diselenggara. Artikel ini akan memperkenalkan cara menggunakan Vue.js dan bahasa Java untuk pembangunan pemisahan bahagian hadapan dan belakang serta memberikan contoh kod yang sepadan.

1. Buat projek Vue.js

Pertama, kita perlu mencipta projek Vue.js. Anda boleh menggunakan Vue CLI untuk membuat projek Vue dengan cepat. Buka terminal dan laksanakan arahan berikut:

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

2. Bina antara muka API

Di Java, kita boleh menggunakan Spring Boot untuk membina antara muka bahagian belakang. Buat projek Spring Boot dan buat kelas Pengawal untuk mengendalikan permintaan bahagian hadapan. Kod sampel adalah seperti berikut:

@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. Interaksi data dengan Vue.js

Dalam Vue.js, kita boleh menggunakan Axios untuk berinteraksi dengan bahagian belakang. Dalam projek Vue, buka fail main.js dalam direktori src dan tambahkan kod berikut:

import axios from 'axios';

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

Kini, kita boleh menggunakan this.$http dalam komponen Vue untuk menghantar permintaan untuk mendapatkan data API bahagian belakang. Kod sampel adalah seperti berikut: 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

Memaparkan data pada halaman hujung hadapan

Kita boleh menggunakan arahan v-for dalam templat komponen Vue untuk membuat gelung data yang diperolehi daripada API bahagian belakang. Kod sampel adalah seperti berikut:

rrreee
🎜Jalankan projek🎜🎜🎜Sekarang, kita boleh menjalankan projek Vue dengan melaksanakan arahan berikut: 🎜rrreee🎜Lawati http://localhost dalam penyemak imbas: 8080, anda boleh melihat data pengguna yang diperoleh daripada API bahagian belakang dan menyerahkan data pengguna baharu melalui borang. 🎜🎜Ringkasan: 🎜🎜Dengan menggabungkan Vue.js dengan bahasa Java, kami boleh mencapai pembangunan bahagian hadapan dan belakang yang berasingan, memastikan kebebasan dan kecekapan pembangunan bahagian hadapan dan belakang. Vue.js menyediakan alatan pembangunan bahagian hadapan yang berkuasa, membolehkan pembangun bahagian hadapan menumpukan pada reka bentuk antara muka dan interaksi pengguna, manakala bahasa Java menyediakan keupayaan pembangunan bahagian belakang yang stabil dan boleh dipercayai untuk memproses data dan logik perniagaan. Kaedah pembangunan bahagian hadapan dan bahagian belakang yang berasingan ini boleh meningkatkan kecekapan pembangunan pasukan, mengurangkan gandingan kod dan menjadikan pembangunan projek lebih fleksibel dan mampan. 🎜

Atas ialah kandungan terperinci Gabungan bahasa Vue.js dan Java membolehkan pembangunan bahagian hadapan dan belakang yang berasingan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!