layui如何调用springboot接口、layui+springboot

在现代Web开发中，前端和后端分离的架构越来越流行。Layui 是一个经典的前端框架，而 Spring Boot 则是后端开发的热门选择。本文将详细介绍如何使用 Layui 调用 Spring Boot 接口，并提供多种实现思路。

解决方案概述

本文将通过以下步骤来实现 Layui 调用 Spring Boot 接口：

1. 搭建 Spring Boot 项目：创建一个简单的 Spring Boot 项目并定义 RESTful API。
2. 搭建 Layui 项目：创建一个简单的 HTML 页面并引入 Layui 库。
3. 调用 Spring Boot 接口：使用 Layui 的 $.ajax 方法调用 Spring Boot 提供的接口。

搭建 Spring Boot 项目

创建 Spring Boot 项目

首先，我们需要创建一个 Spring Boot 项目。可以使用 Spring Initializr 来快速生成项目结构。确保添加以下依赖：

• Spring Web
• Lombok（可选，用于简化代码）

定义 RESTful API

在 src/main/java/com/example/demo 目录下创建一个控制器类 HelloController.java：

java
package com.example.demo;</p>

<p>import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;</p>

<p>@RestController
@RequestMapping("/api")
public class HelloController {</p>

<pre><code>@GetMapping("/hello")
public String hello() {
    return "Hello, World!";
}

}

配置应用启动类

确保你的 DemoApplication.java 类如下所示：

java
package com.example.demo;</p>

<p>import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;</p>

<p>@SpringBootApplication
public class DemoApplication {</p>

<pre><code>public static void main(String[] args) {
    SpringApplication.run(DemoApplication.class, args);
}

}

搭建 Layui 项目

创建 HTML 页面

在 src/main/resources/static 目录下创建一个 index.html 文件：

html
</p>



    
    <title>Layui + Spring Boot</title>
    



<button id="callApi" class="layui-btn">调用接口</button>
<div id="result"></div>




    $(document).ready(function () {
        $('#callApi').click(function () {
            $.ajax({
                url: 'http://localhost:8080/api/hello',
                type: 'GET',
                success: function (response) {
                    $('#result').text(response);
                },
                error: function (error) {
                    $('#result').text('请求失败: ' + error.status);
                }
            });
        });
    });




<p>

运行项目

1. 启动 Spring Boot 项目：
   bash
mvn spring-boot:run


2. 打开浏览器，访问 http://localhost:8080/index.html，点击“调用接口”按钮，你应该会看到返回的 “Hello, World!” 消息。

多种实现思路

使用 Axios 替代 jQuery

如果你更喜欢使用 Axios 而不是 jQuery，可以按照以下步骤进行修改：

1. 引入 Axios 库：
   “`html

   </p></li>
   <li><p>修改 JavaScript 代码：
   ```html</p>
   
   
       document.getElementById('callApi').addEventListener('click', function () {
           axios.get('http://localhost:8080/api/hello')
               .then(function (response) {
                   document.getElementById('result').innerText = response.data;
               })
               .catch(function (error) {
                   document.getElementById('result').innerText = '请求失败: ' + error.response.status;
               });
       });
   
   
   <p>

使用 Fetch API

如果你希望使用原生的 Fetch API，可以按照以下步骤进行修改：

1. 修改 JavaScript 代码：
   html
<script>
document.getElementById('callApi').addEventListener('click', function () {
fetch('http://localhost:8080/api/hello')
.then(response => response.text())
.then(data => {
document.getElementById('result').innerText = data;
})
.catch(error => {
document.getElementById('result').innerText = '请求失败: ' + error.message;
});
});
</script>


通过以上步骤，你可以成功地使用 Layui 调用 Spring Boot 提供的接口，并且有多种实现方式可供选择。希望本文对你有所帮助！