我尝试使用Springboot + React（Typescript）+ PostgreSQL创建应用程序【REST API开发】

2 年 ago
雅, 悟
3 minutes

1. 创建一个项目 yī gè

公式：Spring初始装置器

1. 打开浏览器，输入并打开网址(https://start.spring.io/)。
2. 输入以下内容，从依赖项中选择以下选项，点击『生成』按钮。

项目：Maven

语言：Java

SpringBoot: 版本号3.1.1

组：com.postgresql

物品：菜单

名称：菜单

Alternatively: 名字：菜单

描述：数字菜单

包名: com.postgresql.cardapio

依赖

Spring Boot DevTools – Spring Boot开发工具
Spring Web – Spring Web框架
Lombok – Lombok工具
Spring Data JPA – Spring Data JPA框架
PostgreSQL Driver – PostgreSQL数据库驱动

点击Vscode左下角的『Maven』→『cardapio』→『Lifecycle』→『packeage』。

2. 进行后端开发

在src/main/java/com/postgresql/cardapio目录下创建一个名为FoodController.java的controller文件。

请修改application.properties文件。

spring.datasource.url=jdbc:postgresql://localhost:5432/food
spring.datasource.username=fernandkipper
spring.datasource.password=password

在src/main/java/com/postgresql/cardapio路径下，创建名为Food.java的food文件。

package com.postgresql.cardapio.food;

import jakarta.persistence.*;

@Table(name="foods")
@Entity(name="foods")
public class Food {
    @Id @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private Long title;

    private Long image;

    private Long price;
}

在src/main/java/com/postgresql/cardapio/food中创建FoodRepository.java。

package com.postgresql.cardapio.food;

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

public interface FoodRepository extends JpaRepository<Food, Long>{
    
}

创建一个名为FoodController.java的文件，路径为src/main/java/com/postgresql/cardapio/controller/。

package com.postgresql.cardapio.controller;

import com.postgresql.cardapio.food.Food;
import com.postgresql.cardapio.food.FoodRepository;
import com.postgresql.cardapio.food.FoodResponseDTO;
import com.postgresql.cardapio.food.FoodRequestDTO;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;

@RestController
@RequestMapping("food")
public class FoodController {

    @Autowired
    private FoodRepository repository;

    @CrossOrigin(origins = "*", allowedHeaders = "*")
    @GetMapping
    public void saveFood(@RequestBody FoodRequestDTO data) {
        Food foodData = new Food(data);
        repository.save(foodData);
        return;
    }

    @CrossOrigin(origins = "*", allowedHeaders = "*")
    @GetMapping
    public List<FoodResponseDTO> getAll() {

        List<FoodResponseDTO> foodList = repository.findAll().stream().map(FoodResponseDTO::new);
        return foodList;
    }
}

按下「运行Java」按钮

在src/main/java/com/postgresql/cardapio/food中创建FoodResponseDTO.java。

package com.postgresql.cardapio.food;

public record FoodResponseDTO(Long id, String title, String image, Integer price) {

    public FoodResponseDTO(Food food) {
        this(food.getId(), food.getTitle(), food.getImage(), food.getPrice());
    }
}

直接编辑位于“src/main/java/com/postgresql/cardapio/food”的Food.java文件。

package com.postgresql.cardapio.food;

import jakarta.persistence.*;
import lombok.AllArgsConstructor;
import lombok.EqualsAndHashCode;
import lombok.Getter;
import lombok.NoArgsConstructor;

@Table(name = "foods")
@Entity(name = "foods")
@Getter
@NoArgsConstructor
@AllArgsConstructor
@EqualsAndHashCode(of = "id")

public class Food {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String title;

    private String image;

    private Integer price;

    public Food(FoodRequestDTO data) {
        this.image = data.image();
        this.price = data.price();
        this.title = data.title();
    }
}

我需要修改位于src/main/java/com/postgresql/cardapio/food的FoodResponseDTO.java文件。

package com.postgresql.cardapio.food;

public record FoodResponseDTO(Long id, String title, String image, Integer price) {

    public FoodResponseDTO(Food food) {
        this(food.getId(), food.getTitle(), food.getImage(), food.getPrice());
    }
}

开发前端

参考网站

从零开始使用Java Spring和React创建全栈应用程序-第一部分：后端开发
从零开始创建全栈应用程序-第二部分：使用React和Typescript开发前端

bannerAds