一、java安装:
安装 Java1.8+环境
maven3.6.1+环境
Gradle-6.9.1+环境
IntelliJ IDEA 2022.1.3 下载旗舰版(因为包含springboot)
二、项目构建-数据库是sqlserver:
1、打开idea,点击File->New->Project,选中Spring Initializr
![](https://i-blog.csdnimg.cn/blog_migrate/185d0531f27fcadd8a5ba3dc7784e94f.png)
2、创建相关Package
在com.example.demo 下新建controller、entity、mapper、server;
在resources下新建 mapper
![](https://i-blog.csdnimg.cn/blog_migrate/2e8bbd537f043082a8370f38b7d9d7ba.png)
3、新建一个UserInfoModel和PageModel
![](https://i-blog.csdnimg.cn/blog_migrate/74cac98f81bf5008713483f2d4cd74f1.png)
![](https://i-blog.csdnimg.cn/blog_migrate/24544346c2ea097e3af6d62ccaccddae.png)
4、新建一个UserInfoMapper类
![](https://i-blog.csdnimg.cn/blog_migrate/9581a47babd613b9079e8f94321ed701.png)
5、新建一个UserInfoServerImpl和实现的接口UserInfoServer,自动注入UserInfoMapper
![](https://i-blog.csdnimg.cn/blog_migrate/2a8b3e172e1b4197c82a31a71fefbdf5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0564e0aa0af197bf49fc0565d644ab46.png)
6、新建一个分页的类
![](https://i-blog.csdnimg.cn/blog_migrate/aa70dde426cb2db43b4dd16cbf5a5b17.png)
7、新建一个controller
![](https://i-blog.csdnimg.cn/blog_migrate/9c8d46380456aee127e4dfdf40103f41.png)
8、新建一个mapper.xml
![](https://i-blog.csdnimg.cn/blog_migrate/8e41e8d7538c5c0f559a8a8bff8d7c02.png)
9、启动程序里面增加如下:
![](https://i-blog.csdnimg.cn/blog_migrate/db0e0914b696ad2853ffe5888034ee0a.png)
10、pom.xml相关依赖如下:
![](https://i-blog.csdnimg.cn/blog_migrate/37438a2d5b94fc0b0ac4c00c58bb92de.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4c757f6286520361aeabe678e29acf96.png)
11、application.properties 配置文件配置:
![](https://i-blog.csdnimg.cn/blog_migrate/3b2f1e4c8df3f6c95dc8be5609444123.png)
12、新建一个index.html 和 index.js
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<script th:src="@{/webjars/jquery/3.4.1/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/static/index.js}"></script>
<body>
<div align="center">
<form action="#" th:action="@{/api/UserInfoList}" method="post">
<label for="name">订单号:</label>
<!--/*@thymesVar id="name" type=""*/-->
<input id="name" name="name" th:value="${name}">
<button id="search-btn" name="search-btn">搜索</button>
</form>
<!-- <a th:href="@{/add}">添加联系人</a>-->
<a th:href="@{/api/UserInfoList}">刷新全部数据</a>
<table width="100%" border="1">
<tr align="center">
<td width="10%">ID</td>
<td width="10%">用户名称</td>
<td width="10%">年龄</td>
<td width="10%">住址</td>
<td width="10%">性别</td>
<td width="10%">创建时间</td>
</tr>
<!--/*@thymesVar id="pages" type="com.github.pagehelper.PageInfo"*/-->
<!--/*@thymesVar id="list" type="com.example.demo.entity.UserInfoModel"*/-->
<tr align="center" th:each="list: ${pages.list}">
<td th:text="${list.id}"></td>
<td th:text="${list.userName}"></td>
<td th:text="${list.age}"></td>
<td th:text="${list.address}"></td>
<td th:text="${list.sex}"></td>
<td th:text="${list.createDate}"></td>
</tr>
</table>
</div>
<div align="right" style="margin-top: 30px;font-size: 16px;">
<if th:unless="${pages.getTotal()}<=0">
<a th:text="共+${pages.getTotal()}+条"></a>
<a th:text="每页+${pages.getSize()}+'/'+${pages.getPages()}+条"></a>
<a th:unless="${pages.isFirstPage}" th:href="@{/api/UserInfoList(name=${name})}">首 页</a>
<a th:unless="${!pages.isFirstPage}">首 页</a>
<a th:unless="${pages.isFirstPage}" th:href="@{/api/UserInfoList(start=${pages.hasPreviousPage}?${pages.prePage}:1, name=${name})}">上一页</a>
<a th:text="${pages.getPageNum()}"></a>
<a th:unless="${pages.isLastPage}" th:href="@{/api/UserInfoList(start=${pages.hasNextPage}?${pages.nextPage}:${pages.pages}, name=${name})}">下一页</a>
<a th:unless="${pages.isLastPage}" th:href="@{/api/UserInfoList(start=${pages.pages}, name=${name})}">尾 页</a>
<a th:unless="${!pages.isLastPage}">尾 页</a>
</if>
<!--/*@thymesVar id="pages" type="com.github.pagehelper.PageInfo"*/-->
<!--/*@thymesVar id="name" type=""*/-->
<!--th:unless="${pages.isFirstPage}" 判断如果是第一页,则显示-->
<!--th:unless="${pages.isLastPage}" 判断如果是最后一页,则显示-->
</div>
<script type="text/javascript">
</script>
</body>
</html>
$(function () {
var search = $("#search-btn");
search.click(function () {
var name = $("#name");
if (name.val() === null || name.val() === '') {
alert("请输入~");
return;
}
search.submit();
})
});
12、最后一步,如果pom.xml中添加了依赖,则需要用maven去加载依赖,点击刷新按钮,如下图:
![](https://i-blog.csdnimg.cn/blog_migrate/9922f046cfacfe748a7ce9f6b2c6f5ff.png)
12、启动成功
![](https://i-blog.csdnimg.cn/blog_migrate/0309fbb7cb658e44fda1d767aaa28d87.png)
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/ddfcbd710767f3f286d9adb76ca51c9d.png)