目前已写代码：html div class=box-container div class=box theach=good$GoodsList div class=image img thsrc=downloadfilepath=+$goodpic alt=加载失败请重新尝试

首先，您需要在JavaScript代码中调用LikesController中的insertLike和deleteLike方法来实现插入和删除数据的操作。可以使用fetch函数来发送POST请求。修改您的JavaScript代码如下：

function goods_like(button) {
  var likeIconElement = button.querySelector('i');
  var goodsId = button.getAttribute('data-goods-id');
  var memberId = button.getAttribute('data-member-id');

  if (likeIconElement.classList.contains('far')) {
    likeIconElement.classList.remove('far');
    likeIconElement.classList.add('fas');
    insertLike(goodsId, memberId);
  } else {
    likeIconElement.classList.remove('fas');
    likeIconElement.classList.add('far');
    deleteLike(goodsId, memberId);
  }
}

function insertLike(goodsId, memberId) {
  fetch('/likes/insert', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: 'goodsId=' + goodsId + '&memberId=' + memberId
  })
  .then(function(response) {
    if (response.ok) {
      console.log('Like inserted successfully');
    } else {
      console.error('Failed to insert like');
    }
  })
  .catch(function(error) {
    console.error('Error:', error);
  });
}

function deleteLike(goodsId, memberId) {
  fetch('/likes/delete', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: 'goodsId=' + goodsId + '&memberId=' + memberId
  })
  .then(function(response) {
    if (response.ok) {
      console.log('Like deleted successfully');
    } else {
      console.error('Failed to delete like');
    }
  })
  .catch(function(error) {
    console.error('Error:', error);
  });
}

然后，在您的HTML代码中，将data-goods-id和data-member-id属性添加到按钮上，以便在JavaScript代码中获取goodsId和memberId。修改您的HTML代码如下：

<button type="submit" onclick="goods_like(this)" data-goods-id="${good.goods_id}" data-member-id="${memberId}">
  <i class="far fa-heart"></i>
</button>

接下来，您需要创建一个新的HTML页面my_love.html来显示likes表格。在该页面中，您可以使用Thymeleaf来遍历并显示likes列表。修改您的my_love.html代码如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>My Love</title>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Goods ID</th>
        <th>Member ID</th>
      </tr>
    </thead>
    <tbody>
      <tr th:each="like : ${likesList}">
        <td th:text="${like.goodsId}"></td>
        <td th:text="${like.memberId}"></td>
      </tr>
    </tbody>
  </table>
</body>
</html>

最后，您需要创建一个LikesController的新方法来获取likes列表并将其传递给my_love.html页面。修改您的LikesController类如下：

@GetMapping("/my_love")
public ModelAndView myLove() {
  ModelAndView modelAndView = new ModelAndView("my_love");
  List<Likes> likesList = likesService.getAllLikes();
  modelAndView.addObject("likesList", likesList);
  return modelAndView;
}

另外，您还需要在LikesService和LikesServiceImpl中添加一个新的方法来获取likes列表。修改您的LikesService和LikesServiceImpl类如下：

LikesService.java:

public interface LikesService {
  void insertLike(int goodsId, int memberId);
  void deleteLike(int goodsId, int memberId);
  List<Likes> getAllLikes();
}

LikesServiceImpl.java:

@Service
public class LikesServiceImpl implements LikesService {
  @Autowired
  private LikesMapper likesMapper;

  @Override
  public void insertLike(int goodsId, int memberId) {
    likesMapper.insertLike(goodsId, memberId);
  }

  @Override
  public void deleteLike(int goodsId, int memberId) {
    likesMapper.deleteLike(goodsId, memberId);
  }

  @Override
  public List<Likes> getAllLikes() {
    return likesMapper.getAllLikes();
  }
}

LikesMapper.xml:

<select id="getAllLikes" resultType="com.example.Likes">
  SELECT * FROM likes
</select>

这样，当您点击按钮时，会将likes数据插入likes表中，并且如果您再次点击按钮，会从likes表中删除相应的数据。您可以通过访问/my_love页面来查看likes列表

目前已写代码：html div class=box-container div class=box theach=good$GoodsList div class=image img thsrc=downloadfilepath=+$goodpic alt=加载失败请重新尝试