java 结合 vue 根据邮编记录地址

Amelie-大脸法语

于 2024-08-26 02:17:46 发布

阅读量28

点赞数

文章标签： java vue.js 开发语言前端 javascript

要结合 Java (Spring Boot) 和 Vue.js 来实现一个根据邮编记录地址的功能，可以分成以下几个步骤：

创建 Spring Boot 后端
创建 Vue.js 前端
实现前后端通信

下面是一个简单的示例来演示如何实现这个功能。

1. 创建 Spring Boot 后端

1.1. 创建 Spring Boot 项目

可以使用 Spring Initializr ( https://start.spring.io) 创建一个新的 Spring Boot 项目，选择以下依赖：

Spring Web
Spring Data JPA (如果需要持久化存储)
H2 Database (用于测试，如果使用其他数据库可以选择相应的依赖)

1.2. 创建 Address 实体类

package com.example.address;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class Address {
    
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    private String postalCode;
    private String address;
    
    // Getters and setters
    public Long getId() { return id; }
    public void setId(Long id) { this.id = id; }
    public String getPostalCode() { return postalCode; }
    public void setPostalCode(String postalCode) { this.postalCode = postalCode; }
    public String getAddress() { return address; }
    public void setAddress(String address) { this.address = address; }
}

1.3. 创建接口

package com.example.address;

import org.springframework.data.jpa.repository.JpaRepository;

public interface Address extends JpaRepository<Address, Long> {
    Address findByPostalCode(String postalCode);
}

1.4. 创建 AddressController 类

package com.example.address;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/api/addresses")
public class AddressController {
    
    @Autowired
    private Address address;

    @PostMapping
    public Address createAddress(@RequestBody Address address) {
        return address.save(address);
    }

    @GetMapping("/{postalCode}")
    public Address getAddressByPostalCode(@PathVariable String postalCode) {
        return addres.findByPostalCode(postalCode);
    }
}

1.5. 配置 CORS (跨域资源共享)

如果前端和后端在不同的端口运行，可能需要配置 CORS 以允许跨域请求：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8080")  // 前端运行的地址
                .allowedMethods("GET", "POST", "PUT", "DELETE");
    }
}

2. 创建 Vue.js 前端

2.1. 创建 Vue.js 项目

可以使用 Vue CLI 创建一个新的 Vue 项目：

2.2. 安装 Axios

Axios 是一个用于处理 HTTP 请求的库：

2.3. 创建 AddressService

在 src/services 目录下创建 AddressService.js：

import axios from 'axios';

const API_URL = 'http://localhost:8080/api/addresses';

export const AddressService = {
    getAddress(postalCode) {
        return axios.get(`${API_URL}/${postalCode}`);
    },
    createAddress(address) {
        return axios.post(API_URL, address);
    }
};

2.4. 创建 Vue 组件

在 src/components 目录下创建 AddressComponent.vue：

<template>
  <div>
    <h1>Address Lookup</h1>
    <input v-model="postalCode" placeholder="Enter postal code" />
    <button @click="fetchAddress">Get Address</button>
    
    <div v-if="address">
      <p><strong>Address:</strong> {{ address.address }}</p>
    </div>

    <h2>Add Address</h2>
    <input v-model="newPostalCode" placeholder="Postal code" />
    <input v-model="newAddress" placeholder="Address" />
    <button @click="addAddress">Add Address</button>
  </div>
</template>

<script>
import { AddressService } from '../services/AddressService';

export default {
  data() {
    return {
      postalCode: '',
      newPostalCode: '',
      newAddress: '',
      address: null
    };
  },
  methods: {
    fetchAddress() {
      AddressService.getAddress(this.postalCode)
        .then(response => {
          this.address = response.data;
        })
        .catch(error => {
          console.error("There was an error fetching the address:", error);
        });
    },
    addAddress() {
      const address = {
        postalCode: this.newPostalCode,
        address: this.newAddress
      };
      AddressService.createAddress(address)
        .then(() => {
          alert('Address added successfully');
        })
        .catch(error => {
          console.error("There was an error adding the address:", error);
        });
    }
  }
};
</script>