无法将百里角html网页连接到我的春季靴子API/DB

发布于 2025-01-27 10:22:47 字数 3722 浏览 2 评论 0原文

我为学校记录管理系统提供了春季启动应用程序。使用失眠时，我的API正常工作，但是我无法获得HTML网页与API进行交互。这是我的员工实体/控制器/存储库/服务的相关位。任何帮助！

实体类：

@Entity
@Data
@Embeddable
@NoArgsConstructor
@AllArgsConstructor
@Builder
@ToString
public class Staff {

    @Id
    @SequenceGenerator(
            name = "STAFF_SEQ",
            sequenceName = "STAFF_SEQ",
           allocationSize = 1
     )
    @GeneratedValue(
       strategy = GenerationType.SEQUENCE,
      generator = "STAFF_SEQ"
    )
    private Long staffId;
    private String firstName;
    private String lastName;
    private String staffEmail;
    @ManyToOne(targetEntity = Department.class)
    private Long departmentId;
    private String address;
        private String contactNumber;
        private char gender;
    
    }
    
    ...
}

控制器类

    @RestController
    public class StaffController {
    
        @Autowired
        private StaffService staffService;
    
        @RequestMapping(value = "/saveStaff")
        public Staff saveStaff(Staff staff) {
            return staffService.saveStaff(staff);
        }
   ...
}

存储库类

@Repository
public interface StaffRepository extends JpaRepository<Staff, Long> {
    Staff findByFirstNameAndLastName(String firstName, String lastName);
}

服务接口服务

public interface StaffService {

    public Staff saveStaff(Staff staff);
  ...
}

IMPL

@Service
public class StaffServiceImpl implements StaffService{

    @Autowired
    StaffRepository staffRepository;

    @Override
    public Staff saveStaff(Staff staff) {
       return staffRepository.save(staff);
    }
...
}

HTML文件

<!DOCTYPE html>

<html xmlns:th="https://www.thymeleaf.org">

<h2>Add Staff</h2>

<form action = "#" method="post" th:action ="@{/saveStaff}" th:object = "${staff}">
    <fieldset>
        <legend>Staff</legend>
    <label for="firstName">First name:</label><br>
    <input type="text" th:field ="*{firstName}" class="form-control" id="firstName" name="firstName"><br><br>
    <label for="lastName">Last name:</label><br>
    <input type="text" th:field ="*{lastName}" class="form-control" id="lastName" name="lastname"><br><br>
    <label for="staffEmail">Staff email:</label><br>
    <input type="staffEmail" th:field ="*{staffEmail}" class="form-control" id="staffEmail" name="staffEmail"> <br><br>
    <label for="address">Address</label><br>
    <input type="text" th:field ="*{address}" class="form-control" id="address" name="address"><br><br>
    <label for="contactNumber"> Contact number</label><br>
    <input type="text" th:field ="*{contactNumber}" class="form-control" id="contactNumber" name="contactNumber"><br><br>
    <label for="gender">Gender:</label>
    <select th:field ="*{gender}" class="form-control" id="gender" name="gender">
        <option value="f">F</option>
        <option value="m">M</option>
    </select><br><br>
    <label for="departmentId"> Department Id</label><br>
    <input type="number" th:field ="*{departmentId}" class="form-control" id="departmentId" name="departmentId"><br><br>

    <input type="submit" value="Submit">
        <input type="reset">
    </fieldset>
</form>
</body>
</html>

原文

I have a Spring Boot application for a school records management system. My API is working perfectly when using Insomnia but I cannot get my hTML webpage to interact with the API. Here are the relevant bits of my Staff entity/controller/repository/service. Any help appreciated!

Entity class:

@Entity
@Data
@Embeddable
@NoArgsConstructor
@AllArgsConstructor
@Builder
@ToString
public class Staff {

    @Id
    @SequenceGenerator(
            name = "STAFF_SEQ",
            sequenceName = "STAFF_SEQ",
           allocationSize = 1
     )
    @GeneratedValue(
       strategy = GenerationType.SEQUENCE,
      generator = "STAFF_SEQ"
    )
    private Long staffId;
    private String firstName;
    private String lastName;
    private String staffEmail;
    @ManyToOne(targetEntity = Department.class)
    private Long departmentId;
    private String address;
        private String contactNumber;
        private char gender;
    
    }
    
    ...
}

Controller Class

    @RestController
    public class StaffController {
    
        @Autowired
        private StaffService staffService;
    
        @RequestMapping(value = "/saveStaff")
        public Staff saveStaff(Staff staff) {
            return staffService.saveStaff(staff);
        }
   ...
}

Repository Class

@Repository
public interface StaffRepository extends JpaRepository<Staff, Long> {
    Staff findByFirstNameAndLastName(String firstName, String lastName);
}

Service Interface

public interface StaffService {

    public Staff saveStaff(Staff staff);
  ...
}

ServiceImpl

@Service
public class StaffServiceImpl implements StaffService{

    @Autowired
    StaffRepository staffRepository;

    @Override
    public Staff saveStaff(Staff staff) {
       return staffRepository.save(staff);
    }
...
}

HTML file

<!DOCTYPE html>

<html xmlns:th="https://www.thymeleaf.org">

<h2>Add Staff</h2>

<form action = "#" method="post" th:action ="@{/saveStaff}" th:object = "${staff}">
    <fieldset>
        <legend>Staff</legend>
    <label for="firstName">First name:</label><br>
    <input type="text" th:field ="*{firstName}" class="form-control" id="firstName" name="firstName"><br><br>
    <label for="lastName">Last name:</label><br>
    <input type="text" th:field ="*{lastName}" class="form-control" id="lastName" name="lastname"><br><br>
    <label for="staffEmail">Staff email:</label><br>
    <input type="staffEmail" th:field ="*{staffEmail}" class="form-control" id="staffEmail" name="staffEmail"> <br><br>
    <label for="address">Address</label><br>
    <input type="text" th:field ="*{address}" class="form-control" id="address" name="address"><br><br>
    <label for="contactNumber"> Contact number</label><br>
    <input type="text" th:field ="*{contactNumber}" class="form-control" id="contactNumber" name="contactNumber"><br><br>
    <label for="gender">Gender:</label>
    <select th:field ="*{gender}" class="form-control" id="gender" name="gender">
        <option value="f">F</option>
        <option value="m">M</option>
    </select><br><br>
    <label for="departmentId"> Department Id</label><br>
    <input type="number" th:field ="*{departmentId}" class="form-control" id="departmentId" name="departmentId"><br><br>

    <input type="submit" value="Submit">
        <input type="reset">
    </fieldset>
</form>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

网白 2025-02-03 10:22:47

您的控制器类是@RestController。在查看页面上，您需要使用xmlhttprequest来调用REST控制器，否则我们可以说Ajax请求或提取API。为了轻松，您可以尝试使用jQuery。如果您真的想提交表格Thymeleaf方式，则控制器需要是MVC控制器。长话短说，您应该用@controller替换注释@RestController。还要删除操作属性，仅保留th：action。

您的控制器类

@Controller
@RequestMapping("/course")
public class CourseController {

    @Autowired
    CourseService courseService;

    @GetMapping("/add")
    public String get_saveCourseForm(Model model) {
        Course course = new Course();
        model.addAttribute("course", course);
        return "saveCourse";
    }

    @PostMapping("/save")
    public String post_saveCourseForm(@ModelAttribute("course") Course course, Model model) {
        courseService.saveCourse(course);
        var courses = courseService.fetchCourseList();
        model.addAttribute("courses", courses);
        return "displayCourses";
    }
}

@RestController用@controller注释

此处方法。还要注意请求映射。我们将通过调用/Course/Add来查看表单，该表单将提交到/Course/Save/Save。

您的表单页面


<!DOCTYPE html>

<html xmlns:th="https://www.thymeleaf.org">

<h2>Add Course</h2>

<form method="post" th:action ="@{/course/save}" th:object = "${course}">
    <fieldset>
        <legend>Staff</legend>
        <label for="courseName">Course name:</label><br>
        <input type="text" th:field ="*{courseName}" class="form-control" id="courseName" name="courseName"><br><br>
        <label for="courseCode">Course code:</label><br>
        <input type="text" th:field ="*{courseCode}" class="form-control" id="courseCode" name="courseCode"><br><br>
        <label for="departmentId"> Department Id</label><br>
        <input type="number" th:field ="*{departmentId}" class="form-control" id="departmentId" name="departmentId"><br><br>
        <input type="submit" value="Submit">
        <input type="reset">
    </fieldset>
</form>
</body>
</html>

检查表单操作。

页面将如下所示。

当将表格提交时，它将返回结果页面。 HTML代码如下。

<!DOCTYPE html>

<html xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Display Courses</title>
</head>
<body>
<table>
    <tr>
        <th>Course ID</th>
        <th>Course Name</th>
        <th>Course Code</th>
    </tr>
    <tr th:each="course : ${courses}">
        <td><span th:text="${course.courseId}"></span></td>
        <td><span th:text="${course.courseName}"></span></td>
        <td><span th:text="${course.courseCode}"></span></td>
    </tr>
</table>
</body>
</html>

页面将如下。

Your controller class is a @RestController. From view page you need to call the rest controller by using XmlHttpRequest or we can say, Ajax request or fetch API. For your ease, you can try jQuery. If you really want to submit your form the Thymeleaf way, then your controller needs to be a MVC Controller. Long story short, you should replace the annotation @RestController with @Controller. Also remove the action attribute and keep only th:action.

Your Controller class

@Controller
@RequestMapping("/course")
public class CourseController {

    @Autowired
    CourseService courseService;

    @GetMapping("/add")
    public String get_saveCourseForm(Model model) {
        Course course = new Course();
        model.addAttribute("course", course);
        return "saveCourse";
    }

    @PostMapping("/save")
    public String post_saveCourseForm(@ModelAttribute("course") Course course, Model model) {
        courseService.saveCourse(course);
        var courses = courseService.fetchCourseList();
        model.addAttribute("courses", courses);
        return "displayCourses";
    }
}

Replaced @RestController with @Controller annotation

Add MVC methods and return view page names from the MVC methods. Also notice the request mappings. We will view the form by calling /course/add and the form will be submitted to /course/save.

Your Form Page


<!DOCTYPE html>

<html xmlns:th="https://www.thymeleaf.org">

<h2>Add Course</h2>

<form method="post" th:action ="@{/course/save}" th:object = "${course}">
    <fieldset>
        <legend>Staff</legend>
        <label for="courseName">Course name:</label><br>
        <input type="text" th:field ="*{courseName}" class="form-control" id="courseName" name="courseName"><br><br>
        <label for="courseCode">Course code:</label><br>
        <input type="text" th:field ="*{courseCode}" class="form-control" id="courseCode" name="courseCode"><br><br>
        <label for="departmentId"> Department Id</label><br>
        <input type="number" th:field ="*{departmentId}" class="form-control" id="departmentId" name="departmentId"><br><br>
        <input type="submit" value="Submit">
        <input type="reset">
    </fieldset>
</form>
</body>
</html>

Check the form action.

The page will look like below.

When the form will be submitted, it will return the result page. the HTML code is as follows.

<!DOCTYPE html>

<html xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Display Courses</title>
</head>
<body>
<table>
    <tr>
        <th>Course ID</th>
        <th>Course Name</th>
        <th>Course Code</th>
    </tr>
    <tr th:each="course : ${courses}">
        <td><span th:text="${course.courseId}"></span></td>
        <td><span th:text="${course.courseName}"></span></td>
        <td><span th:text="${course.courseCode}"></span></td>
    </tr>
</table>
</body>
</html>

The page will look as follows.