Spring

pom.xml

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <scope>runtime</scope>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>com.h2database</groupId>
        <artifactId>h2</artifactId>
        <scope>runtime</scope>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter-test</artifactId>
        <version>3.0.3</version>
        <scope>test</scope>
    </dependency>
</dependencies>

application.yml

spring:
  application:
    name: todo
  datasource:
    driver-class-name: org.h2.Driver
    url: jdbc:h2:mem:db_todo
    username: sa
    password:
  jpa:
    hibernate:
      ddl-auto: update

Customer.java

package com.example.todo.entity;

import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import lombok.Data;

@Data
@Entity(name = "customer")
public class Customer {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;
    private String firstName;
    private String lastName;
}

CustomerRepository.java

package com.example.todo.repository;

import com.example.todo.entity.Customer;
import org.springframework.data.jpa.repository.JpaRepository;

public interface CustomerRepository extends JpaRepository<Customer, Long> {
}

CustomerService.java

package com.example.todo.service;

import com.example.todo.entity.Customer;

import java.util.List;

public interface CustomerService {
    List<Customer> list();

    Customer add(Customer customer);

    void delete(Long id);
}

CustomerServiceImpl.java

package com.example.todo.service.impl;

import com.example.todo.entity.Customer;
import com.example.todo.repository.CustomerRepository;
import com.example.todo.service.CustomerService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class CustomerServiceImpl implements CustomerService {

    @Autowired
    private CustomerRepository customerRepository;

    @Override
    public List<Customer> list() {
        return customerRepository.findAll();
    }

    @Override
    public Customer add(Customer customer) {
        return customerRepository.save(customer);
    }

    @Override
    public void delete(Long id) {
        customerRepository.deleteById(id);
    }
}

TodoController.java

package com.example.todo.controller;

import com.example.todo.entity.Customer;
import com.example.todo.service.CustomerService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@CrossOrigin(origins = "http://127.0.0.1:5173")
@RestController
@RequestMapping("/todo")
public class TodoController {

    @Autowired
    private CustomerService customerService;

    @GetMapping("/list")
    public ResponseEntity<List<Customer>> list() {
        return ResponseEntity.ok(customerService.list());
    }

    @PostMapping("/add")
    public ResponseEntity<Customer> add(@RequestBody Customer customer) {
        return ResponseEntity.ok(customerService.add(customer));
    }

    @DeleteMapping("/delete/{id}")
    public ResponseEntity<Long> delete(@PathVariable Long id) {
        customerService.delete(id);
        return ResponseEntity.ok(id);
    }

}

Vue

创建一个vue应用

npm create vue@latest

main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

App.vue

<template>
  <form @submit.prevent="async_add()">
    Firstname: <input type="text" autofocus required v-model="raw.firstName"><br>
    Lastname: <input type="text" required v-model="raw.lastName"><br>
    <input type="submit">
  </form>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>firstName</th>
          <th>lastName</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in todo_list">
          <td>{{ item.id }}</td>
          <td>{{ item.firstName }}</td>
          <td>{{ item.lastName }}</td>
          <td><button @click="async_delete(item.id)">删除</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import axios from 'axios';

onMounted(() => {
  async_list();
});

const todo_list = ref([]);

const async_list = async () => {
  try {
    const response = await axios({
      url: "http://localhost:8080/todo/list",
      method: "get"
    });
    todo_list.value = response.data;
  } catch (error) {
    console.error(error);
  }
}

const raw = reactive({
  firstName: ref(),
  lastName: ref()
});

const async_add = async () => {
  try {
    const response = await axios({
      url: "http://localhost:8080/todo/add",
      method: "post",
      data: raw
    });
    raw.firstName = '';
    raw.lastName = '';
    async_list();
  } catch (error) {
    console.error(error);
  }
}

const async_delete = async (id) => {
  try {
    const response = await axios({
      url: "http://localhost:8080/todo/delete/" + id,
      method: "delete"
    });
    async_list();
  } catch (error) {
    console.error(error);
  }
}

</script>