spring ajax 表格查询,layui的数据表格+springmvc,mysql数据库连接,实现搜索功能的例子
时间: 2024-05-14 22:17:35 浏览: 118
由Spring-SpringMVC-MyBatis-MySQL数据库开发的一个博客系统源码.zip
这里提供一个简单的示例,实现基于 Spring MVC 和 Ajax 的表格查询功能,使用的前端框架是 layui 数据表格,数据库使用的是 MySQL。
1. 在 pom.xml 文件中添加以下依赖:
```xml
<!-- Spring MVC -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<!-- Jackson JSON -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>${jackson.version}</version>
</dependency>
<!-- MySQL JDBC -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>${mysql.version}</version>
</dependency>
```
2. 在 Spring 配置文件中添加以下配置:
```xml
<!-- 数据源配置 -->
<bean id="dataSource" class="org.apache.commons.dbcp2.BasicDataSource" destroy-method="close">
<property name="driverClassName" value="com.mysql.jdbc.Driver" />
<property name="url" value="jdbc:mysql://localhost:3306/test" />
<property name="username" value="root" />
<property name="password" value="password" />
</bean>
<!-- MyBatis 配置 -->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource" />
<property name="typeAliasesPackage" value="com.example.model" />
<property name="mapperLocations" value="classpath*:com/example/mapper/*.xml" />
<property name="configLocation" value="classpath:mybatis-config.xml" />
</bean>
<!-- MyBatis Mapper 扫描 -->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="basePackage" value="com.example.mapper" />
</bean>
<!-- 开启 Spring MVC 注解支持 -->
<annotation-driven/>
<!-- 静态资源处理 -->
<mvc:resources mapping="/static/**" location="/static/" />
<!-- 视图解析器 -->
<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/views/" />
<property name="suffix" value=".jsp" />
</bean>
```
3. 在 Spring MVC 配置文件中添加以下配置:
```xml
<!-- 开启注解驱动 -->
<mvc:annotation-driven />
<!-- 配置处理器映射器 -->
<bean class="org.springframework.web.servlet.handler.BeanNameUrlHandlerMapping" />
<!-- 配置控制器 -->
<bean name="/ajaxTable" class="com.example.controller.AjaxTableController" />
<!-- 配置 AJAX 返回值处理器 -->
<bean class="org.springframework.web.servlet.view.json.MappingJackson2JsonView" />
```
4. 创建一个实体类 User,对应 MySQL 数据库中的 user 表:
```java
public class User {
private Long id;
private String username;
private String email;
private String phone;
// getter 和 setter 方法省略
}
```
5. 创建一个 DAO 接口 UserMapper,使用 MyBatis 进行数据库操作:
```java
public interface UserMapper {
List<User> selectByCondition(Map<String, Object> condition);
}
```
6. 创建一个控制器 AjaxTableController,实现搜索功能:
```java
@Controller
public class AjaxTableController {
@Autowired
private UserMapper userMapper;
@RequestMapping("/ajaxTable")
public ModelAndView ajaxTable() {
return new ModelAndView("ajaxTable");
}
@RequestMapping("/ajaxTable/search")
@ResponseBody
public Map<String, Object> search(HttpServletRequest request) {
Map<String, Object> result = new HashMap<>();
String username = request.getParameter("username");
String email = request.getParameter("email");
String phone = request.getParameter("phone");
Map<String, Object> condition = new HashMap<>();
condition.put("username", username);
condition.put("email", email);
condition.put("phone", phone);
List<User> userList = userMapper.selectByCondition(condition);
result.put("code", 0);
result.put("msg", "");
result.put("count", userList.size());
result.put("data", userList);
return result;
}
}
```
7. 创建一个 JSP 页面 ajaxTable.jsp,使用 layui 数据表格展示数据:
```html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax Table</title>
<link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<div class="layui-container">
<div class="layui-row layui-col-space15">
<div class="layui-card">
<div class="layui-card-body">
<form class="layui-form layui-form-pane" lay-filter="table-search">
<div class="layui-form-item layui-inline">
<label class="layui-form-label">Username</label>
<div class="layui-input-inline">
<input type="text" name="username" class="layui-input" autocomplete="off">
</div>
</div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">Email</label>
<div class="layui-input-inline">
<input type="text" name="email" class="layui-input" autocomplete="off">
</div>
</div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">Phone</label>
<div class="layui-input-inline">
<input type="text" name="phone" class="layui-input" autocomplete="off">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-inline">
<button class="layui-btn" type="button" lay-submit lay-filter="table-search-btn">Search</button>
<button class="layui-btn layui-btn-primary" type="reset">Reset</button>
</div>
</div>
</form>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<table id="userTable" lay-filter="userTable"></table>
</div>
</div>
</div>
</div>
<script src="/static/layui/layui.js"></script>
<script>
layui.use(['table', 'form'], function () {
var table = layui.table;
var form = layui.form;
table.render({
elem: '#userTable',
url: '/ajaxTable/search',
method: 'post',
page: true,
cols: [[
{field: 'id', title: 'ID', width: 80},
{field: 'username', title: 'Username', width: 120},
{field: 'email', title: 'Email', width: 200},
{field: 'phone', title: 'Phone', width: 120}
]]
});
form.on('submit(table-search-btn)', function (data) {
table.reload('userTable', {
where: data.field
});
return false;
});
});
</script>
</body>
</html>
```
通过访问 `/ajaxTable` 页面即可看到一个带搜索功能的数据表格。用户输入搜索条件后,点击搜索按钮即可实现异步请求,后台根据条件查询数据库,将查询结果返回给前端,前端使用 layui 数据表格展示数据。
阅读全文