Spring Boot 与 Layui 数据交互：从 WxService 到页面展示

要将 Spring Boot 中的 WxService.java 中查询到的数据和 Layui 进行链接，可以按照以下步骤进行代码实现：

在 WxService.java 中定义一个方法，用于查询数据并返回给前端页面。例如：

@Service
public class WxService {

    @Autowired
    private WxRepository wxRepository;
    
    public List<WxData> getAllWxData() {
        return wxRepository.findAll();
    }
    
    // 其他方法...
}

在 Controller 中注入 WxService，并定义一个请求路径，用于返回查询到的数据给前端页面。例如：

@Controller
public class WxController {

    @Autowired
    private WxService wxService;
    
    @RequestMapping("/wxData")
    public String wxData(Model model) {
        List<WxData> wxDataList = wxService.getAllWxData();
        model.addAttribute("wxDataList", wxDataList);
        return "wxData"; // 返回的是视图名，视图名对应 Layui 页面的路径
    }
    
    // 其他方法...
}

创建一个 Layui 页面，例如 wxData.html，使用 Thymeleaf 模板引擎将查询到的数据展示在页面上。例如：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Wx Data</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <!-- 其他字段... -->
            </tr>
        </thead>
        <tbody>
            <tr th:each="wxData : ${wxDataList}">
                <td th:text="${wxData.id}"></td>
                <td th:text="${wxData.name}"></td>
                <!-- 其他字段... -->
            </tr>
        </tbody>
    </table>
</body>
</html>

在 Layui 的页面中使用 ajax 请求后端接口，获取查询到的数据并展示在页面上。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Wx Data</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
</head>
<body>
    <table class="layui-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <!-- 其他字段... -->
            </tr>
        </thead>
        <tbody id="wxDataList">
        </tbody>
    </table>
    
    <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
    <script>
        $(function() {
            $.ajax({
                url: "/wxData",
                type: "GET",
                success: function(data) {
                    var wxDataList = data;
                    var html = "";
                    for (var i = 0; i < wxDataList.length; i++) {
                        html += "<tr>";
                        html += "<td>" + wxDataList[i].id + "</td>";
                        html += "<td>" + wxDataList[i].name + "</td>";
                        // 其他字段...
                        html += "</tr>";
                    }
                    $("#wxDataList").html(html);
                }
            });
        });
    </script>
</body>
</html>

以上是一个简单的示例，通过以上代码实现了将 Spring Boot 中的 WxService.java 查询到的数据和 Layui 进行链接，并在页面上展示查询到的数据。

Spring Boot 与 Layui 数据交互：从 WxService 到页面展示