HTMX学习2-CSDN博客

本文链接：https://blog.csdn.net/2301_79701576/article/details/137515480

本文介绍了如何在SpringBoot项目中使用HTMX进行前后端分离开发，展示了如何创建RESTfulAPI控制器和模型，以及如何在前端利用HTMX进行数据绑定，减少前端JS工作量，提高开发效率。

摘要由CSDN通过智能技术生成

HTMX学习

后端java部分：

package com.akck.testdemo.controller;


import com.akck.testdemo.model.Impl.TodoRepositoryImpl;
import com.akck.testdemo.model.TodoItem;
import com.akck.testdemo.model.TodoRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/api/todos")
public class TodoController {

    private final TodoRepository todoRepository = new TodoRepositoryImpl();

    @GetMapping
    public List<TodoItem> getAllTodos() {
        todoRepository.save(new TodoItem(1l, "测试1", true));
        todoRepository.save(new TodoItem(2l, "测试2", true));
        todoRepository.save(new TodoItem(3l, "测试3", false));
        todoRepository.save(new TodoItem(4l, "测试4", true));
        return todoRepository.findAll();
    }

    @PostMapping
    public TodoItem addTodo(TodoItem todoItem) {
        return todoRepository.save(todoItem);
    }

    @DeleteMapping
    @ResponseStatus(HttpStatus.NO_CONTENT)
    public void delete(@PathVariable Long id) {
        todoRepository.deleteBuId(id);
    }


}

/**
 * 一个关于办事项的类
 */
@Data
@NoArgsConstructor
@AllArgsConstructor
public class TodoItem {
    private Long id;// 表示代办事项的唯一标识
    private String title;// 标题
    private boolean completed;// 是否完成


}

package com.akck.testdemo.model.Impl;

import com.akck.testdemo.model.TodoItem;
import com.akck.testdemo.model.TodoRepository;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.concurrent.atomic.AtomicLong;

/**
 * 创建代办事项的仓库
 */
public class TodoRepositoryImpl implements TodoRepository {

    // 储存代办事项内容的数据结构
    private Map<Long, TodoItem> storage = new HashMap<>();

    // 用于生成唯一id
    private AtomicLong currentID = new AtomicLong(0);

    @Override
    public List<TodoItem> findAll() {
        return new ArrayList<>(storage.values());
    }

    @Override
    public TodoItem save(TodoItem todoItem) {
        if(todoItem.getId()==null){
            todoItem.setId(currentID.incrementAndGet());
        }
        storage.put(todoItem.getId(),todoItem);
        return todoItem;
    }

    @Override
    public void deleteBuId(Long id) {
        storage.remove(id);
    }
}

package com.akck.testdemo.model;

import org.springframework.stereotype.Service;

import java.util.List;

@Service
public interface TodoRepository {

    /**
     * 查找所有代办事项
     *
     * @return
     */
    List<TodoItem> findAll();

    /**
     * 保存一个新的或者跟新一个已经存在的代办事项
     *
     * @param todoItem
     * @return
     */
    TodoItem save(TodoItem todoItem);

    /**
     * 通过id删除一个代办事项
     *
     * @param id
     */
    void deleteBuId(Long id);
}

前端部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>htmx模块学习案例</title>
    <script src="https://unpkg.com/htmx.org"></script>
</head>
<body>
<h1>Tode List</h1>
<ul id="todo-list">
<!--     这里将展示列表-->
</ul>
<form hx-post="/api/todos" hx-target="#todo-list" hx-swap="outerHTML" hx-trigger="submit">
<!--    使用htmx发送表单信息到服务器-->
    <input type="text" name="title" placeholder="添加一个新的item">
    <button type="submit">添加</button>
</form>

</body>
</html>