springboot实现html+layui页面交互
时间: 2023-05-29 14:04:11 浏览: 287
Spring Boot 是一种基于 Spring 框架的快速开发脚手架,它可以帮助我们快速搭建 Web 应用程序。Layui 是一个非常流行的前端 UI 框架,它提供了丰富的组件和样式,可以帮助我们快速构建美观的网页界面。
下面介绍如何使用 Spring Boot 和 Layui 框架实现页面交互。
1. 创建 Spring Boot 项目
首先,我们需要创建一个 Spring Boot 项目。可以使用 Spring Initializr 创建一个空的 Spring Boot 项目。在选择依赖项时,选择 Web 和 Thymeleaf。
2. 添加 Layui 依赖
在 pom.xml 文件中添加 Layui 的依赖:
```xml
<dependency>
<groupId>com.github.lauwerys</groupId>
<artifactId>layui-spring-boot-starter</artifactId>
<version>1.4.1</version>
</dependency>
```
3. 创建 HTML 页面
在 src/main/resources/templates 目录下创建 index.html 文件:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Layui Demo</title>
<link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">用户信息</div>
<div class="layui-card-body">
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="/layui/layui.js"></script>
<script>
layui.use('form', function(){
var form = layui.form;
//监听提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>
</body>
</html>
```
这是一个简单的表单页面,使用了 Layui 的组件和样式。表单提交后会弹出一个提示框,显示提交的数据。
4. 运行项目
完成以上步骤后,启动 Spring Boot 项目,访问 http://localhost:8080/index.html 即可看到页面效果。
5. 实现后台逻辑
在后台代码中,可以使用 Spring MVC 的注解来处理表单提交:
```java
@Controller
public class UserController {
@RequestMapping(value = "/submit", method = RequestMethod.POST)
@ResponseBody
public String submit(@RequestParam String username, @RequestParam String password) {
return "用户名:" + username + ",密码:" + password;
}
}
```
这个方法会接收表单提交的数据,并返回一个字符串。可以将返回的字符串在前端页面中显示出来。
修改 HTML 页面的 form 表单:
```html
<form class="layui-form" action="/submit" method="post">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
```
修改 JavaScript 代码:
```javascript
layui.use('form', function(){
var form = layui.form;
//监听提交
form.on('submit(formDemo)', function(data){
$.post(data.form.action, data.field, function(result){
layer.msg(result);
});
return false;
});
});
```
这个 JavaScript 代码会在表单提交时,使用 jQuery 的 post 方法将数据提交到后台,然后将后台返回的字符串显示在提示框中。
至此,我们就使用 Spring Boot 和 Layui 框架实现了一个简单的页面交互功能。
阅读全文